From cd2d18659904b707292a9740a2dff2f99a8c9bb0 Mon Sep 17 00:00:00 2001 From: Neil <55785687+carkom@users.noreply.github.com> Date: Tue, 12 Dec 2023 00:31:25 +0000 Subject: [PATCH] Add new types for reports files (#2067) * work * notes * error fixes * updates * card fix * fix filters * splitting PR work * notes --- .../src/components/reports/ChooseGraph.tsx | 20 ++++++-- .../src/components/reports/ReportOptions.tsx | 6 +-- .../components/reports/ReportTableHeader.tsx | 8 +-- .../components/reports/ReportTableTotals.tsx | 17 ++++++- .../src/components/reports/entities.d.ts | 44 ++++++++++++++++ .../components/reports/graphs/AreaGraph.tsx | 3 +- .../components/reports/graphs/BarGraph.tsx | 51 ++++++++----------- .../components/reports/graphs/DonutGraph.tsx | 9 ++-- .../reports/graphs/StackedBarGraph.tsx | 5 +- .../reports/reports/CustomReport.js | 4 ++ .../spreadsheets/default-spreadsheet.tsx | 8 ++- .../spreadsheets/grouped-spreadsheet.ts | 4 +- upcoming-release-notes/2067.md | 6 +++ 13 files changed, 131 insertions(+), 54 deletions(-) create mode 100644 packages/desktop-client/src/components/reports/entities.d.ts create mode 100644 upcoming-release-notes/2067.md diff --git a/packages/desktop-client/src/components/reports/ChooseGraph.tsx b/packages/desktop-client/src/components/reports/ChooseGraph.tsx index 4dca723153a..ec9630c0f36 100644 --- a/packages/desktop-client/src/components/reports/ChooseGraph.tsx +++ b/packages/desktop-client/src/components/reports/ChooseGraph.tsx @@ -2,6 +2,7 @@ import React, { useRef } from 'react'; import View from '../common/View'; +import { type DataEntity, type Month } from './entities'; import AreaGraph from './graphs/AreaGraph'; import BarGraph from './graphs/BarGraph'; import BarLineGraph from './graphs/BarLineGraph'; @@ -14,6 +15,17 @@ import ReportTableHeader from './ReportTableHeader'; import ReportTableList from './ReportTableList'; import ReportTableTotals from './ReportTableTotals'; +type ChooseGraphProps = { + data: DataEntity; + mode: string; + graphType: string; + balanceType: string; + groupBy: string; + empty: boolean; + scrollWidth: number; + setScrollWidth: (value: number) => void; + months: Month[]; +}; export function ChooseGraph({ data, mode, @@ -24,7 +36,7 @@ export function ChooseGraph({ scrollWidth, setScrollWidth, months, -}) { +}: ChooseGraphProps) { const saveScrollWidth = value => { setScrollWidth(!value ? 0 : value); }; @@ -53,13 +65,12 @@ export function ChooseGraph({ style={{ flexGrow: 1 }} data={data} groupBy={groupBy} - empty={empty} balanceTypeOp={ReportOptions.balanceTypeMap.get(balanceType)} /> ); } if (graphType === 'BarLineGraph') { - return <BarLineGraph style={{ flexGrow: 1 }} graphData={data.graphData} />; + return <BarLineGraph style={{ flexGrow: 1 }} graphData={data} />; } if (graphType === 'DonutGraph') { return ( @@ -67,13 +78,12 @@ export function ChooseGraph({ style={{ flexGrow: 1 }} data={data} groupBy={groupBy} - empty={empty} balanceTypeOp={ReportOptions.balanceTypeMap.get(balanceType)} /> ); } if (graphType === 'LineGraph') { - return <LineGraph style={{ flexGrow: 1 }} graphData={data.graphData} />; + return <LineGraph style={{ flexGrow: 1 }} graphData={data} />; } if (graphType === 'StackedBarGraph') { return <StackedBarGraph style={{ flexGrow: 1 }} data={data} />; diff --git a/packages/desktop-client/src/components/reports/ReportOptions.tsx b/packages/desktop-client/src/components/reports/ReportOptions.tsx index 69f0ef1626c..9c4d8113731 100644 --- a/packages/desktop-client/src/components/reports/ReportOptions.tsx +++ b/packages/desktop-client/src/components/reports/ReportOptions.tsx @@ -108,7 +108,7 @@ type UncategorizedGroupEntity = CategoryGroupEntity & { categories?: UncategorizedEntity[]; }; -const uncategouncatGrouprizedGroup: UncategorizedGroupEntity = { +const uncategorizedGroup: UncategorizedGroupEntity = { name: 'Uncategorized & Off Budget', id: null, hidden: false, @@ -122,7 +122,7 @@ export const categoryLists = ( ) => { const categoryList = showUncategorized ? [ - ...categories.list, + ...categories.list.filter(f => showOffBudgetHidden || !f.hidden), uncategorizedCategory, transferCategory, offBudgetCategory, @@ -131,7 +131,7 @@ export const categoryLists = ( const categoryGroup = showUncategorized ? [ ...categories.grouped.filter(f => showOffBudgetHidden || !f.hidden), - uncategouncatGrouprizedGroup, + uncategorizedGroup, ] : categories.grouped; return [categoryList, categoryGroup] as const; diff --git a/packages/desktop-client/src/components/reports/ReportTableHeader.tsx b/packages/desktop-client/src/components/reports/ReportTableHeader.tsx index a2aaee9f506..a19554aad4d 100644 --- a/packages/desktop-client/src/components/reports/ReportTableHeader.tsx +++ b/packages/desktop-client/src/components/reports/ReportTableHeader.tsx @@ -6,10 +6,12 @@ import { styles, theme } from '../../style'; import View from '../common/View'; import { Row, Cell } from '../table'; +import { type Month } from './entities'; + type ReportTableHeaderProps = { scrollWidth?: number; groupBy: string; - interval?: Array<string>; + interval?: Month[]; balanceType: string; headerScrollRef?: Ref<HTMLDivElement>; }; @@ -50,14 +52,14 @@ export default function ReportTableHeader({ width="flex" /> {interval - ? interval.map(header => { + ? interval.map((header, index) => { return ( <Cell style={{ minWidth: 85, ...styles.tnum, }} - key={header} + key={index} // eslint-disable-next-line rulesdir/typography value={d.format(d.parseISO(`${header}-01`), "MMM ''yy")} width="flex" diff --git a/packages/desktop-client/src/components/reports/ReportTableTotals.tsx b/packages/desktop-client/src/components/reports/ReportTableTotals.tsx index f60a91b5ab5..daf758ac335 100644 --- a/packages/desktop-client/src/components/reports/ReportTableTotals.tsx +++ b/packages/desktop-client/src/components/reports/ReportTableTotals.tsx @@ -1,4 +1,5 @@ -import React from 'react'; +import React, { type UIEventHandler } from 'react'; +import { type RefProp } from 'react-spring'; import { amountToCurrency, @@ -10,6 +11,18 @@ import { styles, theme } from '../../style'; import View from '../common/View'; import { Row, Cell } from '../table'; +import { type DataEntity } from './entities'; + +type ReportTableTotalsProps = { + data: DataEntity; + scrollWidth?: number; + balanceTypeOp: string; + mode: string; + monthsCount: number; + totalScrollRef: RefProp<HTMLDivElement>; + handleScrollTotals: UIEventHandler<HTMLDivElement>; +}; + export default function ReportTableTotals({ data, scrollWidth, @@ -18,7 +31,7 @@ export default function ReportTableTotals({ monthsCount, totalScrollRef, handleScrollTotals, -}) { +}: ReportTableTotalsProps) { const average = amountToInteger(data[balanceTypeOp]) / monthsCount; return ( <View diff --git a/packages/desktop-client/src/components/reports/entities.d.ts b/packages/desktop-client/src/components/reports/entities.d.ts new file mode 100644 index 00000000000..cbd01affb52 --- /dev/null +++ b/packages/desktop-client/src/components/reports/entities.d.ts @@ -0,0 +1,44 @@ +export type DataEntity = { + data: Array<ItemEntity>; + monthData: Array<MonthData>; + groupedData: Array<GroupedEntity>; + startDate: string; + endDate: string; + totalDebts: number; + totalAssets: number; + totalTotals: number; +}; + +type ItemEntity = { + id: string; + name: string; + monthData: MonthData[]; + totalAssets: number; + totalDebts: number; + totalTotals: number; +}; + +type MonthData = { + date: string; + totalAssets: number; + totalDebts: number; + totalTotals: number; +}; + +/* this will be used in a future PR + +export type GroupedEntity = { + id: string; + name: string; + date?: string; + monthData: Array<MonthData>; + categories?: Array<ItemEntity>; + totalAssets: number; + totalDebts: number; + totalTotals: number; +}; +*/ + +export type Month = { + month: string; +}; diff --git a/packages/desktop-client/src/components/reports/graphs/AreaGraph.tsx b/packages/desktop-client/src/components/reports/graphs/AreaGraph.tsx index 50022af9df1..59950f15b6e 100644 --- a/packages/desktop-client/src/components/reports/graphs/AreaGraph.tsx +++ b/packages/desktop-client/src/components/reports/graphs/AreaGraph.tsx @@ -19,6 +19,7 @@ import { type CSSProperties } from '../../../style'; import AlignedText from '../../common/AlignedText'; import PrivacyFilter from '../../PrivacyFilter'; import Container from '../Container'; +import { type DataEntity } from '../entities'; import numberFormatterTooltip from '../numberFormatter'; type PayloadItem = { @@ -92,7 +93,7 @@ const CustomTooltip = ({ type AreaGraphProps = { style?: CSSProperties; - data; + data: DataEntity; balanceTypeOp: string; compact?: boolean; }; diff --git a/packages/desktop-client/src/components/reports/graphs/BarGraph.tsx b/packages/desktop-client/src/components/reports/graphs/BarGraph.tsx index dd8b5558e83..2e9f992f84b 100644 --- a/packages/desktop-client/src/components/reports/graphs/BarGraph.tsx +++ b/packages/desktop-client/src/components/reports/graphs/BarGraph.tsx @@ -23,6 +23,7 @@ import AlignedText from '../../common/AlignedText'; import PrivacyFilter from '../../PrivacyFilter'; import { getColorScale } from '../chart-theme'; import Container from '../Container'; +import { type DataEntity } from '../entities'; import getCustomTick from '../getCustomTick'; import numberFormatterTooltip from '../numberFormatter'; @@ -129,10 +130,9 @@ const CustomLegend = ({ active, payload, label }: CustomLegendProps) => { type BarGraphProps = { style?: CSSProperties; - data; + data: DataEntity; groupBy: string; balanceTypeOp; - empty: boolean; compact?: boolean; }; @@ -140,7 +140,6 @@ function BarGraph({ style, data, groupBy, - empty, balanceTypeOp, compact, }: BarGraphProps) { @@ -178,9 +177,7 @@ function BarGraph({ width={width} height={height} stackOffset="sign" - data={data[splitData].filter(i => - !empty ? i[balanceTypeOp] !== 0 : true, - )} + data={data[splitData]} margin={{ top: 0, right: 0, left: 0, bottom: 0 }} > { @@ -218,33 +215,29 @@ function BarGraph({ <ReferenceLine y={0} stroke={theme.pageTextLight} /> )} <Bar dataKey={val => getVal(val)} stackId="a"> - {data[splitData] - .filter(i => (!empty ? i[balanceTypeOp] !== 0 : true)) - .map((entry, index) => ( + {data[splitData].map((entry, index) => ( + <Cell + key={`cell-${index}`} + fill={ + yAxis === 'date' + ? balanceTypeOp === 'totalDebts' + ? theme.reportsRed + : theme.reportsBlue + : colorScale[index % colorScale.length] + } + name={entry[yAxis]} + /> + ))} + </Bar> + {yAxis === 'date' && balanceTypeOp === 'totalTotals' && ( + <Bar dataKey={'totalDebts'} stackId="a"> + {data[splitData].map((entry, index) => ( <Cell key={`cell-${index}`} - fill={ - yAxis === 'date' - ? balanceTypeOp === 'totalDebts' - ? theme.reportsRed - : theme.reportsBlue - : colorScale[index % colorScale.length] - } - name={entry[yAxis]} + fill={theme.reportsRed} + name={entry.name} /> ))} - </Bar> - {yAxis === 'date' && balanceTypeOp === 'totalTotals' && ( - <Bar dataKey={'totalDebts'} stackId="a"> - {data[splitData] - .filter(i => (!empty ? i[balanceTypeOp] !== 0 : true)) - .map((entry, index) => ( - <Cell - key={`cell-${index}`} - fill={theme.reportsRed} - name={entry.name} - /> - ))} </Bar> )} </BarChart> diff --git a/packages/desktop-client/src/components/reports/graphs/DonutGraph.tsx b/packages/desktop-client/src/components/reports/graphs/DonutGraph.tsx index a8ad506a00e..1fee824db3e 100644 --- a/packages/desktop-client/src/components/reports/graphs/DonutGraph.tsx +++ b/packages/desktop-client/src/components/reports/graphs/DonutGraph.tsx @@ -18,6 +18,7 @@ import Text from '../../common/Text'; import PrivacyFilter from '../../PrivacyFilter'; import { getColorScale } from '../chart-theme'; import Container from '../Container'; +import { type DataEntity } from '../entities'; import numberFormatterTooltip from '../numberFormatter'; type PayloadItem = { @@ -94,10 +95,9 @@ const CustomLegend = ({ active, payload, label }: CustomLegendProps) => { type DonutGraphProps = { style?: CSSProperties; - data; + data: DataEntity; groupBy: string; balanceTypeOp: string; - empty: boolean; compact?: boolean; }; @@ -105,7 +105,6 @@ function DonutGraph({ style, data, groupBy, - empty, balanceTypeOp, compact, }: DonutGraphProps) { @@ -146,9 +145,7 @@ function DonutGraph({ dataKey={val => getVal(val)} nameKey={yAxis} isAnimationActive={false} - data={data[splitData].filter(i => - !empty ? i[balanceTypeOp] !== 0 : true, - )} + data={data[splitData]} innerRadius={Math.min(width, height) * 0.2} fill="#8884d8" > diff --git a/packages/desktop-client/src/components/reports/graphs/StackedBarGraph.tsx b/packages/desktop-client/src/components/reports/graphs/StackedBarGraph.tsx index 37e2b3ea41c..9839b26145c 100644 --- a/packages/desktop-client/src/components/reports/graphs/StackedBarGraph.tsx +++ b/packages/desktop-client/src/components/reports/graphs/StackedBarGraph.tsx @@ -21,6 +21,7 @@ import AlignedText from '../../common/AlignedText'; import PrivacyFilter from '../../PrivacyFilter'; import { getColorScale } from '../chart-theme'; import Container from '../Container'; +import { type DataEntity } from '../entities'; import getCustomTick from '../getCustomTick'; import numberFormatterTooltip from '../numberFormatter'; @@ -115,7 +116,7 @@ const CustomLegend = ({ active, payload, label }: CustomLegendProps) => { type StackedBarGraphProps = { style?: CSSProperties; - data; + data: DataEntity; compact?: boolean; }; @@ -164,7 +165,7 @@ function StackedBarGraph({ style, data, compact }: StackedBarGraphProps) { )} {data.data.reverse().map((c, index) => ( <Bar - key={c.date} + key={c.name} dataKey={c.name} stackId="a" fill={colorScale[index % colorScale.length]} diff --git a/packages/desktop-client/src/components/reports/reports/CustomReport.js b/packages/desktop-client/src/components/reports/reports/CustomReport.js index a8d1f3a42cf..900b181799e 100644 --- a/packages/desktop-client/src/components/reports/reports/CustomReport.js +++ b/packages/desktop-client/src/components/reports/reports/CustomReport.js @@ -113,8 +113,10 @@ export default function CustomReport() { selectedCategories, filters, conditionsOp, + empty, hidden, uncat, + balanceTypeOp, }); }, [ start, @@ -136,6 +138,7 @@ export default function CustomReport() { selectedCategories, filters, conditionsOp, + empty, hidden, uncat, groupBy, @@ -155,6 +158,7 @@ export default function CustomReport() { accounts, filters, conditionsOp, + empty, hidden, uncat, ]); diff --git a/packages/desktop-client/src/components/reports/spreadsheets/default-spreadsheet.tsx b/packages/desktop-client/src/components/reports/spreadsheets/default-spreadsheet.tsx index 47c1cf8cdb1..5d63b02e660 100644 --- a/packages/desktop-client/src/components/reports/spreadsheets/default-spreadsheet.tsx +++ b/packages/desktop-client/src/components/reports/spreadsheets/default-spreadsheet.tsx @@ -25,6 +25,7 @@ export type createSpreadsheetProps = { selectedCategories: CategoryEntity[]; conditions: RuleConditionEntity[]; conditionsOp: string; + empty: boolean; hidden: boolean; uncat: boolean; groupBy?: string; @@ -41,6 +42,7 @@ export default function createSpreadsheet({ selectedCategories, conditions = [], conditionsOp, + empty, hidden, uncat, groupBy, @@ -163,8 +165,10 @@ export default function createSpreadsheet({ }); setData({ - data: calcData, - monthData, + data: calcData.filter(i => (!empty ? i[balanceTypeOp] !== 0 : true)), + monthData: monthData.filter(i => + !empty ? i[balanceTypeOp] !== 0 : true, + ), start, end, totalDebts: integerToAmount(totalDebts), diff --git a/packages/desktop-client/src/components/reports/spreadsheets/grouped-spreadsheet.ts b/packages/desktop-client/src/components/reports/spreadsheets/grouped-spreadsheet.ts index 90d679c046e..445f60a92e5 100644 --- a/packages/desktop-client/src/components/reports/spreadsheets/grouped-spreadsheet.ts +++ b/packages/desktop-client/src/components/reports/spreadsheets/grouped-spreadsheet.ts @@ -17,8 +17,10 @@ function createGroupedSpreadsheet({ selectedCategories, conditions = [], conditionsOp, + empty, hidden, uncat, + balanceTypeOp, }: createSpreadsheetProps) { const [catList, catGroup] = categoryLists(hidden, uncat, categories); @@ -134,7 +136,7 @@ function createGroupedSpreadsheet({ [start, end], ); - setData(groupedData); + setData(groupedData.filter(i => (!empty ? i[balanceTypeOp] !== 0 : true))); }; } diff --git a/upcoming-release-notes/2067.md b/upcoming-release-notes/2067.md new file mode 100644 index 00000000000..72b9a7d05f0 --- /dev/null +++ b/upcoming-release-notes/2067.md @@ -0,0 +1,6 @@ +--- +category: Enhancements +authors: [carkom] +--- + +Adding types for future typescript changes.