Skip to content

Commit 9c3075f

Browse files
carkomcarkom
authored
Custom Reports: TS strict changes #1 (actualbudget#2726)
* TS strict changes * notes * renderRowProps * RenderTableRow
1 parent 7e04226 commit 9c3075f

20 files changed

+253
-167
lines changed

‎packages/desktop-client/src/components/reports/ChooseGraph.tsx

+4-3
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
// @ts-strict-ignore
22
import React, { useRef } from 'react';
33

4-
import { type GroupedEntity } from 'loot-core/src/types/models/reports';
4+
import { type DataEntity } from 'loot-core/src/types/models/reports';
55
import { type RuleConditionEntity } from 'loot-core/types/models/rule';
66

77
import { type CSSProperties } from '../../style';
@@ -20,7 +20,7 @@ import { ReportTableTotals } from './graphs/tableGraph/ReportTableTotals';
2020
import { ReportOptions } from './ReportOptions';
2121

2222
type ChooseGraphProps = {
23-
data: GroupedEntity;
23+
data: DataEntity;
2424
filters?: RuleConditionEntity[];
2525
mode: string;
2626
graphType: string;
@@ -160,13 +160,14 @@ export function ChooseGraph({
160160
<ReportTableHeader
161161
headerScrollRef={headerScrollRef}
162162
handleScroll={handleScroll}
163-
data={mode === 'time' && data.intervalData}
163+
data={data.intervalData}
164164
groupBy={groupBy}
165165
interval={interval}
166166
balanceType={balanceType}
167167
compact={compact}
168168
style={rowStyle}
169169
compactStyle={compactStyle}
170+
mode={mode}
170171
/>
171172
<ReportTable
172173
saveScrollWidth={saveScrollWidth}

‎packages/desktop-client/src/components/reports/ReportSummary.tsx

+8-9
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
// @ts-strict-ignore
21
import React from 'react';
32

43
import * as monthUtils from 'loot-core/src/shared/months';
@@ -7,7 +6,7 @@ import {
76
integerToCurrency,
87
amountToInteger,
98
} from 'loot-core/src/shared/util';
10-
import { type GroupedEntity } from 'loot-core/src/types/models/reports';
9+
import { type DataEntity } from 'loot-core/src/types/models/reports';
1110

1211
import { theme, styles } from '../../style';
1312
import { Text } from '../common/Text';
@@ -19,8 +18,8 @@ import { ReportOptions } from './ReportOptions';
1918
type ReportSummaryProps = {
2019
startDate: string;
2120
endDate: string;
22-
data: GroupedEntity;
23-
balanceTypeOp: string;
21+
data: DataEntity;
22+
balanceTypeOp: 'totalDebts' | 'totalAssets' | 'totalTotals';
2423
interval: string;
2524
intervalsCount: number;
2625
};
@@ -63,20 +62,20 @@ export function ReportSummary({
6362
>
6463
{monthUtils.format(
6564
startDate,
66-
ReportOptions.intervalFormat.get(interval),
65+
ReportOptions.intervalFormat.get(interval) || '',
6766
)}
6867
{monthUtils.format(
6968
startDate,
70-
ReportOptions.intervalFormat.get(interval),
69+
ReportOptions.intervalFormat.get(interval) || '',
7170
) !==
7271
monthUtils.format(
7372
endDate,
74-
ReportOptions.intervalFormat.get(interval),
73+
ReportOptions.intervalFormat.get(interval) || '',
7574
) &&
7675
' to ' +
7776
monthUtils.format(
7877
endDate,
79-
ReportOptions.intervalFormat.get(interval),
78+
ReportOptions.intervalFormat.get(interval) || '',
8079
)}
8180
</Text>
8281
</View>
@@ -153,7 +152,7 @@ export function ReportSummary({
153152
</PrivacyFilter>
154153
</Text>
155154
<Text style={{ fontWeight: 600 }}>
156-
Per {ReportOptions.intervalMap.get(interval).toLowerCase()}
155+
Per {(ReportOptions.intervalMap.get(interval) || '').toLowerCase()}
157156
</Text>
158157
</View>
159158
</View>

‎packages/desktop-client/src/components/reports/graphs/AreaGraph.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ import {
1717
amountToCurrency,
1818
amountToCurrencyNoDecimal,
1919
} from 'loot-core/src/shared/util';
20-
import { type GroupedEntity } from 'loot-core/src/types/models/reports';
20+
import { type DataEntity } from 'loot-core/src/types/models/reports';
2121

2222
import { usePrivacyMode } from '../../../hooks/usePrivacyMode';
2323
import { useResponsive } from '../../../ResponsiveProvider';
@@ -105,14 +105,14 @@ const customLabel = (props, width, end) => {
105105
const textAnchor = props.index === 0 ? 'left' : 'middle';
106106
const display =
107107
props.value !== 0 && `${amountToCurrencyNoDecimal(props.value)}`;
108-
const textSize = adjustTextSize(width, 'area');
108+
const textSize = adjustTextSize({ sized: width, type: 'area' });
109109

110110
return renderCustomLabel(calcX, calcY, textAnchor, display, textSize);
111111
};
112112

113113
type AreaGraphProps = {
114114
style?: CSSProperties;
115-
data: GroupedEntity;
115+
data: DataEntity;
116116
balanceTypeOp: string;
117117
compact?: boolean;
118118
viewLabels: boolean;

‎packages/desktop-client/src/components/reports/graphs/BarGraph.tsx

+7-7
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ import {
1919
amountToCurrency,
2020
amountToCurrencyNoDecimal,
2121
} from 'loot-core/src/shared/util';
22-
import { type GroupedEntity } from 'loot-core/src/types/models/reports';
22+
import { type DataEntity } from 'loot-core/src/types/models/reports';
2323
import { type RuleConditionEntity } from 'loot-core/types/models/rule';
2424

2525
import { useAccounts } from '../../../hooks/useAccounts';
@@ -122,18 +122,18 @@ const customLabel = (props, typeOp) => {
122122
const textAnchor = 'middle';
123123
const display =
124124
props.value !== 0 && `${amountToCurrencyNoDecimal(props.value)}`;
125-
const textSize = adjustTextSize(
126-
props.width,
127-
typeOp === 'totalTotals' ? 'default' : 'variable',
128-
props.value,
129-
);
125+
const textSize = adjustTextSize({
126+
sized: props.width,
127+
type: typeOp === 'totalTotals' ? 'default' : 'variable',
128+
values: props.value,
129+
});
130130

131131
return renderCustomLabel(calcX, calcY, textAnchor, display, textSize);
132132
};
133133

134134
type BarGraphProps = {
135135
style?: CSSProperties;
136-
data: GroupedEntity;
136+
data: DataEntity;
137137
filters: RuleConditionEntity[];
138138
groupBy: string;
139139
balanceTypeOp: string;

‎packages/desktop-client/src/components/reports/graphs/DonutGraph.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import React, { useState } from 'react';
44
import { PieChart, Pie, Cell, Sector, ResponsiveContainer } from 'recharts';
55

66
import { amountToCurrency } from 'loot-core/src/shared/util';
7-
import { type GroupedEntity } from 'loot-core/src/types/models/reports';
7+
import { type DataEntity } from 'loot-core/src/types/models/reports';
88
import { type RuleConditionEntity } from 'loot-core/types/models/rule';
99

1010
import { useAccounts } from '../../../hooks/useAccounts';
@@ -158,7 +158,7 @@ const customLabel = props => {
158158
const calcY = props.cy + radius * Math.sin(-props.midAngle * RADIAN);
159159
const textAnchor = calcX > props.cx ? 'start' : 'end';
160160
const display = props.value !== 0 && `${(props.percent * 100).toFixed(0)}%`;
161-
const textSize = adjustTextSize(size, 'donut');
161+
const textSize = adjustTextSize({ sized: size, type: 'donut' });
162162
const showLabel = props.percent;
163163
const showLabelThreshold = 0.05;
164164
const fill = theme.reportsInnerLabel;
@@ -177,7 +177,7 @@ const customLabel = props => {
177177

178178
type DonutGraphProps = {
179179
style?: CSSProperties;
180-
data: GroupedEntity;
180+
data: DataEntity;
181181
filters: RuleConditionEntity[];
182182
groupBy: string;
183183
balanceTypeOp: string;

‎packages/desktop-client/src/components/reports/graphs/LineGraph.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ import {
1616
amountToCurrency,
1717
amountToCurrencyNoDecimal,
1818
} from 'loot-core/src/shared/util';
19-
import { type GroupedEntity } from 'loot-core/types/models/reports';
19+
import { type DataEntity } from 'loot-core/types/models/reports';
2020
import { type RuleConditionEntity } from 'loot-core/types/models/rule';
2121

2222
import { useAccounts } from '../../../hooks/useAccounts';
@@ -109,7 +109,7 @@ const CustomTooltip = ({
109109

110110
type LineGraphProps = {
111111
style?: CSSProperties;
112-
data: GroupedEntity;
112+
data: DataEntity;
113113
filters: RuleConditionEntity[];
114114
groupBy: string;
115115
compact?: boolean;

‎packages/desktop-client/src/components/reports/graphs/StackedBarGraph.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ import {
1717
amountToCurrency,
1818
amountToCurrencyNoDecimal,
1919
} from 'loot-core/src/shared/util';
20-
import { type GroupedEntity } from 'loot-core/src/types/models/reports';
20+
import { type DataEntity } from 'loot-core/src/types/models/reports';
2121
import { type RuleConditionEntity } from 'loot-core/types/models/rule';
2222

2323
import { useAccounts } from '../../../hooks/useAccounts';
@@ -138,7 +138,7 @@ const customLabel = props => {
138138

139139
type StackedBarGraphProps = {
140140
style?: CSSProperties;
141-
data: GroupedEntity;
141+
data: DataEntity;
142142
filters: RuleConditionEntity[];
143143
groupBy: string;
144144
compact?: boolean;

‎packages/desktop-client/src/components/reports/graphs/adjustTextSize.ts

+24-10
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,36 @@
1-
// @ts-strict-ignore
2-
export const adjustTextSize = (
3-
sized: number,
4-
type: string,
5-
values?: number,
6-
): `${number}px` => {
7-
let source;
1+
export const adjustTextSize = ({
2+
sized,
3+
type,
4+
values = 0,
5+
}: {
6+
sized: number;
7+
type: string;
8+
values?: number;
9+
}): `${number}px` => {
10+
let source: {
11+
size: number;
12+
font: number;
13+
}[] = [{ size: -1, font: -1 }];
814
switch (type) {
915
case 'variable':
10-
source = variableLookup.find(({ value }) => values >= value).arr;
16+
const findLookup = variableLookup.find(({ value }) => values >= value);
17+
if (!findLookup) {
18+
break;
19+
}
20+
source = findLookup.arr;
1121
break;
1222
case 'donut':
1323
source = donutLookup;
1424
break;
1525
default:
1626
source = defaultLookup;
1727
}
18-
const lookup = source.find(({ size }) => sized >= size);
19-
return `${lookup.font}px`;
28+
const findSource = source.find(({ size }) => sized >= size);
29+
if (!findSource) {
30+
return '13px';
31+
}
32+
33+
return `${findSource.font}px`;
2034
};
2135

2236
const defaultLookup = [

‎packages/desktop-client/src/components/reports/graphs/tableGraph/RenderTableRow.tsx

+55
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
import React, { type ReactNode } from 'react';
2+
3+
import { type GroupedEntity } from 'loot-core/src/types/models/reports';
4+
5+
import { type CSSProperties } from '../../../../style';
6+
import { View } from '../../../common/View';
7+
8+
import { type renderRowProps } from './ReportTable';
9+
10+
type RenderTableRowProps = {
11+
index: number;
12+
parent_index?: number;
13+
compact: boolean;
14+
renderRow: (arg: renderRowProps) => ReactNode;
15+
intervalsCount: number;
16+
mode: string;
17+
metadata: GroupedEntity[];
18+
style?: CSSProperties;
19+
compactStyle?: CSSProperties;
20+
};
21+
22+
export function RenderTableRow({
23+
index,
24+
parent_index,
25+
compact,
26+
renderRow,
27+
intervalsCount,
28+
mode,
29+
metadata,
30+
style,
31+
compactStyle,
32+
}: RenderTableRowProps) {
33+
const child = metadata[index];
34+
const parent =
35+
parent_index !== undefined ? metadata[parent_index] : ({} as GroupedEntity);
36+
37+
const item =
38+
parent_index === undefined
39+
? child
40+
: (parent.categories && parent.categories[index]) ||
41+
({} as GroupedEntity);
42+
43+
return (
44+
<View>
45+
{renderRow({
46+
item,
47+
mode,
48+
intervalsCount,
49+
compact,
50+
style,
51+
compactStyle,
52+
})}
53+
</View>
54+
);
55+
}

‎packages/desktop-client/src/components/reports/graphs/tableGraph/ReportTable.tsx

+26-8
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,15 @@
1-
// @ts-strict-ignore
21
import React, {
2+
type RefObject,
33
useCallback,
44
useLayoutEffect,
55
useRef,
66
type UIEventHandler,
77
} from 'react';
8-
import { type RefProp } from 'react-spring';
98

10-
import { type GroupedEntity } from 'loot-core/src/types/models/reports';
9+
import {
10+
type GroupedEntity,
11+
type DataEntity,
12+
} from 'loot-core/src/types/models/reports';
1113
import { type RuleConditionEntity } from 'loot-core/types/models/rule';
1214

1315
import { type CSSProperties } from '../../../../style';
@@ -19,11 +21,11 @@ import { ReportTableRow } from './ReportTableRow';
1921

2022
type ReportTableProps = {
2123
saveScrollWidth: (value: number) => void;
22-
listScrollRef: RefProp<HTMLDivElement>;
24+
listScrollRef: RefObject<HTMLDivElement>;
2325
handleScroll: UIEventHandler<HTMLDivElement>;
2426
groupBy: string;
2527
balanceTypeOp: 'totalDebts' | 'totalTotals' | 'totalAssets';
26-
data: GroupedEntity;
28+
data: DataEntity;
2729
filters?: RuleConditionEntity[];
2830
mode: string;
2931
intervalsCount: number;
@@ -34,6 +36,15 @@ type ReportTableProps = {
3436
showOffBudget?: boolean;
3537
};
3638

39+
export type renderRowProps = {
40+
item: GroupedEntity;
41+
mode: string;
42+
intervalsCount: number;
43+
compact: boolean;
44+
style?: CSSProperties;
45+
compactStyle?: CSSProperties;
46+
};
47+
3748
export function ReportTable({
3849
saveScrollWidth,
3950
listScrollRef,
@@ -58,8 +69,15 @@ export function ReportTable({
5869
}
5970
});
6071

61-
const renderItem = useCallback(
62-
({ item, mode, intervalsCount, compact, style, compactStyle }) => {
72+
const renderRow = useCallback(
73+
({
74+
item,
75+
mode,
76+
intervalsCount,
77+
compact,
78+
style,
79+
compactStyle,
80+
}: renderRowProps) => {
6381
return (
6482
<ReportTableRow
6583
item={item}
@@ -109,7 +127,7 @@ export function ReportTable({
109127
intervalsCount={intervalsCount}
110128
mode={mode}
111129
groupBy={groupBy}
112-
renderItem={renderItem}
130+
renderRow={renderRow}
113131
compact={compact}
114132
style={style}
115133
compactStyle={compactStyle}

0 commit comments

Comments
 (0)