From 6e694ce7e45a8a6574b39dfea45ca247dc2b557a Mon Sep 17 00:00:00 2001 From: carkom Date: Thu, 7 Dec 2023 10:41:05 +0000 Subject: [PATCH 01/11] work --- .../src/components/reports/ChooseGraph.tsx | 43 ++-- .../src/components/reports/ModeButton.tsx | 39 ++++ .../src/components/reports/ReportLegend.tsx | 70 +++++++ .../src/components/reports/ReportOptions.tsx | 17 +- .../src/components/reports/ReportSidebar.js | 76 +++---- .../src/components/reports/ReportSummary.js | 197 ------------------ .../src/components/reports/ReportSummary.tsx | 140 +++++++++++++ .../components/reports/ReportTableHeader.tsx | 12 +- .../components/reports/ReportTableTotals.tsx | 17 +- .../src/components/reports/ReportTopbar.js | 6 +- .../src/components/reports/entities.d.ts | 44 ++++ .../components/reports/graphs/AreaGraph.tsx | 3 +- .../components/reports/graphs/BarGraph.tsx | 15 +- .../components/reports/graphs/DonutGraph.tsx | 9 +- .../reports/graphs/StackedBarGraph.tsx | 5 +- .../reports/reports/CustomReport.js | 89 ++++---- .../spreadsheets/default-spreadsheet.tsx | 42 ++-- .../spreadsheets/grouped-spreadsheet.ts | 158 +++++++------- .../reports/spreadsheets/makeQuery.ts | 12 +- 19 files changed, 553 insertions(+), 441 deletions(-) create mode 100644 packages/desktop-client/src/components/reports/ModeButton.tsx create mode 100644 packages/desktop-client/src/components/reports/ReportLegend.tsx delete mode 100644 packages/desktop-client/src/components/reports/ReportSummary.js create mode 100644 packages/desktop-client/src/components/reports/ReportSummary.tsx create mode 100644 packages/desktop-client/src/components/reports/entities.d.ts diff --git a/packages/desktop-client/src/components/reports/ChooseGraph.tsx b/packages/desktop-client/src/components/reports/ChooseGraph.tsx index 4dca723153a..995b04a2618 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,17 +15,31 @@ import ReportTableHeader from './ReportTableHeader'; import ReportTableList from './ReportTableList'; import ReportTableTotals from './ReportTableTotals'; -export function ChooseGraph({ +type ChooseGraphProps = { + data: DataEntity; + mode: string; + graphType: string; + balanceType: string; + groupBy: string; + showEmpty: boolean; + scrollWidth: number; + setScrollWidth: (value: number) => void; + months: Month[]; +}; + +function ChooseGraph({ data, mode, graphType, balanceType, groupBy, - empty, + showEmpty, scrollWidth, setScrollWidth, months, -}) { +}: ChooseGraphProps) { + const balanceTypeOp = ReportOptions.balanceTypeMap.get(balanceType); + const saveScrollWidth = value => { setScrollWidth(!value ? 0 : value); }; @@ -43,7 +58,7 @@ export function ChooseGraph({ ); } @@ -53,13 +68,13 @@ export function ChooseGraph({ style={{ flexGrow: 1 }} data={data} groupBy={groupBy} - empty={empty} - balanceTypeOp={ReportOptions.balanceTypeMap.get(balanceType)} + showEmpty={showEmpty} + balanceTypeOp={balanceTypeOp} /> ); } if (graphType === 'BarLineGraph') { - return ; + return ; } if (graphType === 'DonutGraph') { return ( @@ -67,13 +82,13 @@ export function ChooseGraph({ style={{ flexGrow: 1 }} data={data} groupBy={groupBy} - empty={empty} - balanceTypeOp={ReportOptions.balanceTypeMap.get(balanceType)} + showEmpty={showEmpty} + balanceTypeOp={balanceTypeOp} /> ); } if (graphType === 'LineGraph') { - return ; + return ; } if (graphType === 'StackedBarGraph') { return ; @@ -94,9 +109,9 @@ export function ChooseGraph({ > @@ -107,10 +122,12 @@ export function ChooseGraph({ scrollWidth={scrollWidth} data={data} mode={mode} - balanceTypeOp={ReportOptions.balanceTypeMap.get(balanceType)} + balanceTypeOp={balanceTypeOp} monthsCount={months.length} /> ); } } + +export default ChooseGraph; diff --git a/packages/desktop-client/src/components/reports/ModeButton.tsx b/packages/desktop-client/src/components/reports/ModeButton.tsx new file mode 100644 index 00000000000..e0f216d84fa --- /dev/null +++ b/packages/desktop-client/src/components/reports/ModeButton.tsx @@ -0,0 +1,39 @@ +import React, { type MouseEventHandler, type ReactNode } from 'react'; + +import { type CSSProperties, theme } from '../../style'; +import Button from '../common/Button'; + +type ModeButtonProps = { + selected: boolean; + children: ReactNode; + style: CSSProperties; + onSelect: MouseEventHandler; +}; + +function ModeButton({ selected, children, style, onSelect }: ModeButtonProps) { + return ( + + ); +} + +export default ModeButton; diff --git a/packages/desktop-client/src/components/reports/ReportLegend.tsx b/packages/desktop-client/src/components/reports/ReportLegend.tsx new file mode 100644 index 00000000000..34004db4980 --- /dev/null +++ b/packages/desktop-client/src/components/reports/ReportLegend.tsx @@ -0,0 +1,70 @@ +import React from 'react'; + +import { theme, styles } from '../../style'; +import Text from '../common/Text'; +import View from '../common/View'; + +type ReportLegendProps = { + legend; + groupBy: string; +}; + +function ReportLegend({ legend, groupBy }: ReportLegendProps) { + return ( + + + {groupBy} + + + {legend.map(item => { + return ( + + + + {item.name} + + + ); + })} + + + ); +} + +export default ReportLegend; diff --git a/packages/desktop-client/src/components/reports/ReportOptions.tsx b/packages/desktop-client/src/components/reports/ReportOptions.tsx index 69f0ef1626c..13e665d4d15 100644 --- a/packages/desktop-client/src/components/reports/ReportOptions.tsx +++ b/packages/desktop-client/src/components/reports/ReportOptions.tsx @@ -6,8 +6,8 @@ import { } from 'loot-core/src/types/models'; const balanceTypeOptions = [ - { description: 'Expense', format: 'totalDebts' }, - { description: 'Income', format: 'totalAssets' }, + { description: 'Payment', format: 'totalDebts' }, + { description: 'Deposit', format: 'totalAssets' }, { description: 'Net', format: 'totalTotals' }, ]; @@ -21,10 +21,11 @@ const groupByOptions = [ ]; const dateRangeOptions = [ - { description: '1 month', name: 1 }, - { description: '3 months', name: 2 }, - { description: '6 months', name: 5 }, - { description: '1 year', name: 11 }, + { description: 'This month', name: 0 }, + { description: 'Last month', name: 1 }, + { description: 'Last 3 months', name: 2 }, + { description: 'Last 6 months', name: 5 }, + { description: 'Last 12 months', name: 11 }, { description: 'Year to date', name: 'yearToDate' }, { description: 'Last year', name: 'lastYear' }, { description: 'All time', name: 'allMonths' }, @@ -108,7 +109,7 @@ type UncategorizedGroupEntity = CategoryGroupEntity & { categories?: UncategorizedEntity[]; }; -const uncategouncatGrouprizedGroup: UncategorizedGroupEntity = { +const uncategorizedGroup: UncategorizedGroupEntity = { name: 'Uncategorized & Off Budget', id: null, hidden: false, @@ -131,7 +132,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/ReportSidebar.js b/packages/desktop-client/src/components/reports/ReportSidebar.js index 5f22d0a13c7..2c182b1abb9 100644 --- a/packages/desktop-client/src/components/reports/ReportSidebar.js +++ b/packages/desktop-client/src/components/reports/ReportSidebar.js @@ -3,7 +3,6 @@ import React from 'react'; import * as monthUtils from 'loot-core/src/shared/months'; import { theme } from '../../style'; -import Button from '../common/Button'; import Select from '../common/Select'; import Text from '../common/Text'; import View from '../common/View'; @@ -17,37 +16,12 @@ import { getFullRange, validateRange, } from './Header'; +import ModeButton from './ModeButton'; import { ReportOptions } from './ReportOptions'; -function ModeButton({ selected, children, style, onSelect }) { - return ( - - ); -} - export function ReportSidebar({ - start, - end, + startDate, + endDate, onChangeDates, dateRange, setDateRange, @@ -64,12 +38,12 @@ export function ReportSidebar({ setBalanceType, mode, setMode, - empty, - setEmpty, - hidden, - setHidden, - uncat, - setUncat, + showEmpty, + setShowEmpty, + showOffBudgetHidden, + setShowOffBudgetHidden, + showUncategorized, + setShowUncategorized, categories, selectedCategories, setSelectedCategories, @@ -114,7 +88,7 @@ export function ReportSidebar({ } else { setTypeDisabled(['Net']); if (['Net'].includes(balanceType)) { - setBalanceType('Expense'); + setBalanceType('Payment'); } } if (graphType === 'BarGraph') { @@ -144,7 +118,7 @@ export function ReportSidebar({ } } if (['Net'].includes(balanceType) && graphType !== 'TableGraph') { - setBalanceType('Expense'); + setBalanceType('Payment'); } }; @@ -274,9 +248,9 @@ export function ReportSidebar({ setEmpty(!empty)} + checked={showEmpty} + value={showEmpty} + onChange={() => setShowEmpty(!showEmpty)} /> diff --git a/packages/desktop-client/src/components/reports/ReportSummary.js b/packages/desktop-client/src/components/reports/ReportSummary.js deleted file mode 100644 index cfe2e5b7090..00000000000 --- a/packages/desktop-client/src/components/reports/ReportSummary.js +++ /dev/null @@ -1,197 +0,0 @@ -import React from 'react'; - -import * as monthUtils from 'loot-core/src/shared/months'; -import { - amountToCurrency, - integerToCurrency, - amountToInteger, -} from 'loot-core/src/shared/util'; - -import { theme, styles } from '../../style'; -import Text from '../common/Text'; -import View from '../common/View'; -import PrivacyFilter from '../PrivacyFilter'; - -export function ReportSummary({ - start, - end, - data, - balanceTypeOp, - monthsCount, -}) { - const net = data.totalDebts > data.totalAssets ? 'EXPENSE' : 'INCOME'; - const average = amountToInteger(data[balanceTypeOp]) / monthsCount; - return ( - - - - {monthUtils.format(start, 'MMM yyyy')} -{' '} - {monthUtils.format(end, 'MMM yyyy')} - - - - - {balanceTypeOp === 'totalDebts' - ? 'TOTAL SPENDING' - : balanceTypeOp === 'totalAssets' - ? 'TOTAL INCOME' - : 'NET ' + net} - - - - {amountToCurrency(data[balanceTypeOp])} - - - For this time period - - - - {balanceTypeOp === 'totalDebts' - ? 'AVERAGE SPENDING' - : balanceTypeOp === 'totalAssets' - ? 'AVERAGE INCOME' - : 'AVERAGE NET'} - - - - {integerToCurrency(Math.round(average))} - - - Per month - - - ); -} - -export function ReportLegend({ data, legend, groupBy }) { - return ( - - - {groupBy} - - - {legend.map(item => { - return ( - - - - {item.name} - - - ); - })} - - - ); -} diff --git a/packages/desktop-client/src/components/reports/ReportSummary.tsx b/packages/desktop-client/src/components/reports/ReportSummary.tsx new file mode 100644 index 00000000000..f8680f2deb9 --- /dev/null +++ b/packages/desktop-client/src/components/reports/ReportSummary.tsx @@ -0,0 +1,140 @@ +import React from 'react'; + +import * as monthUtils from 'loot-core/src/shared/months'; +import { + amountToCurrency, + integerToCurrency, + amountToInteger, +} from 'loot-core/src/shared/util'; + +import { theme, styles } from '../../style'; +import Text from '../common/Text'; +import View from '../common/View'; +import PrivacyFilter from '../PrivacyFilter'; + +type ReportSummaryProps = { + startDate: string; + endDate: string; + data; + balanceTypeOp: string; + monthsCount: number; +}; + +function ReportSummary({ + startDate, + endDate, + data, + balanceTypeOp, + monthsCount, +}: ReportSummaryProps) { + const net = + Math.abs(data.totalDebts) > Math.abs(data.totalAssets) + ? 'PAYMENT' + : 'DEPOSIT'; + const average = amountToInteger(data[balanceTypeOp]) / monthsCount; + return ( + + + + {monthUtils.format(startDate, 'MMM yyyy')} -{' '} + {monthUtils.format(endDate, 'MMM yyyy')} + + + + + {balanceTypeOp === 'totalDebts' + ? 'TOTAL SPENDING' + : balanceTypeOp === 'totalAssets' + ? 'TOTAL DEPOSITS' + : 'NET ' + net} + + + + {amountToCurrency(data[balanceTypeOp])} + + + For this time period + + + + {balanceTypeOp === 'totalDebts' + ? 'AVERAGE SPENDING' + : balanceTypeOp === 'totalAssets' + ? 'AVERAGE DEPOSIT' + : 'AVERAGE NET'} + + + + {integerToCurrency(Math.round(average))} + + + Per month + + + ); +} + +export default ReportSummary; diff --git a/packages/desktop-client/src/components/reports/ReportTableHeader.tsx b/packages/desktop-client/src/components/reports/ReportTableHeader.tsx index a2aaee9f506..983495d7370 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; + interval?: Month[]; balanceType: string; headerScrollRef?: Ref; }; @@ -50,14 +52,14 @@ export default function ReportTableHeader({ width="flex" /> {interval - ? interval.map(header => { + ? interval.map((header, index) => { return ( 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; + handleScrollTotals: UIEventHandler; +}; + 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 ( { setGraphType('DonutGraph'); setTypeDisabled(['Net']); - setBalanceType('Expense'); + setBalanceType('Payment'); }} style={{ marginRight: 15 }} disabled={mode === 'total' ? false : true} 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; + monthData: Array; + groupedData: Array; + 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; + categories?: Array; + 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..60531573107 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,10 @@ const CustomLegend = ({ active, payload, label }: CustomLegendProps) => { type BarGraphProps = { style?: CSSProperties; - data; + data: DataEntity; groupBy: string; - balanceTypeOp; - empty: boolean; + balanceTypeOp: string; + showEmpty: boolean; compact?: boolean; }; @@ -140,7 +141,7 @@ function BarGraph({ style, data, groupBy, - empty, + showEmpty, balanceTypeOp, compact, }: BarGraphProps) { @@ -179,7 +180,7 @@ function BarGraph({ height={height} stackOffset="sign" data={data[splitData].filter(i => - !empty ? i[balanceTypeOp] !== 0 : true, + !showEmpty ? i[balanceTypeOp] !== 0 : true, )} margin={{ top: 0, right: 0, left: 0, bottom: 0 }} > @@ -219,7 +220,7 @@ function BarGraph({ )} getVal(val)} stackId="a"> {data[splitData] - .filter(i => (!empty ? i[balanceTypeOp] !== 0 : true)) + .filter(i => (!showEmpty ? i[balanceTypeOp] !== 0 : true)) .map((entry, index) => ( {data[splitData] - .filter(i => (!empty ? i[balanceTypeOp] !== 0 : true)) + .filter(i => (!showEmpty ? i[balanceTypeOp] !== 0 : true)) .map((entry, index) => ( { type DonutGraphProps = { style?: CSSProperties; - data; + data: DataEntity; groupBy: string; balanceTypeOp: string; - empty: boolean; + showEmpty: boolean; compact?: boolean; }; @@ -105,7 +106,7 @@ function DonutGraph({ style, data, groupBy, - empty, + showEmpty, balanceTypeOp, compact, }: DonutGraphProps) { @@ -147,7 +148,7 @@ function DonutGraph({ nameKey={yAxis} isAnimationActive={false} data={data[splitData].filter(i => - !empty ? i[balanceTypeOp] !== 0 : true, + !showEmpty ? i[balanceTypeOp] !== 0 : true, )} 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) => ( { if (selectedCategories === null && categories.list.length !== 0) { @@ -107,37 +108,37 @@ export default function CustomReport() { const getGroupData = useMemo(() => { return groupedSpreadsheet({ - start, - end, + startDate, + endDate, categories, selectedCategories, filters, conditionsOp, - hidden, - uncat, + showOffBudgetHidden, + showUncategorized, }); }, [ - start, - end, + startDate, + endDate, categories, selectedCategories, filters, conditionsOp, - hidden, - uncat, + showOffBudgetHidden, + showUncategorized, ]); const getGraphData = useMemo(() => { setDataCheck(false); return defaultSpreadsheet({ - start, - end, + startDate, + endDate, categories, selectedCategories, filters, conditionsOp, - hidden, - uncat, + showOffBudgetHidden, + showUncategorized, groupBy, balanceTypeOp, payees, @@ -145,8 +146,8 @@ export default function CustomReport() { setDataCheck, }); }, [ - start, - end, + startDate, + endDate, groupBy, balanceType, categories, @@ -155,8 +156,8 @@ export default function CustomReport() { accounts, filters, conditionsOp, - hidden, - uncat, + showOffBudgetHidden, + showUncategorized, ]); const graphData = useReport('default', getGraphData); const groupedData = useReport('grouped', getGroupData); @@ -169,9 +170,9 @@ export default function CustomReport() { return null; } - const onChangeDates = (start, end) => { - setStart(start); - setEnd(end); + const onChangeDates = (startDate, endDate) => { + setStartDate(startDate); + setEndDate(endDate); }; return ( @@ -187,8 +188,8 @@ export default function CustomReport() { }} > )} 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..343ad0a10e0 100644 --- a/packages/desktop-client/src/components/reports/spreadsheets/default-spreadsheet.tsx +++ b/packages/desktop-client/src/components/reports/spreadsheets/default-spreadsheet.tsx @@ -19,14 +19,14 @@ import makeQuery from './makeQuery'; import recalculate from './recalculate'; export type createSpreadsheetProps = { - start: string; - end: string; + startDate: string; + endDate: string; categories: { list: CategoryEntity[]; grouped: CategoryGroupEntity[] }; selectedCategories: CategoryEntity[]; conditions: RuleConditionEntity[]; conditionsOp: string; - hidden: boolean; - uncat: boolean; + showOffBudgetHidden: boolean; + showUncategorized: boolean; groupBy?: string; balanceTypeOp?: string; payees?: PayeeEntity[]; @@ -35,21 +35,25 @@ export type createSpreadsheetProps = { }; export default function createSpreadsheet({ - start, - end, + startDate, + endDate, categories, selectedCategories, conditions = [], conditionsOp, - hidden, - uncat, + showOffBudgetHidden, + showUncategorized, groupBy, balanceTypeOp, payees, accounts, setDataCheck, -}) { - const [catList, catGroup] = categoryLists(hidden, uncat, categories); +}: createSpreadsheetProps) { + const [catList, catGroup] = categoryLists( + showOffBudgetHidden, + showUncategorized, + categories, + ); const categoryFilter = (catList || []).filter( category => @@ -82,9 +86,9 @@ export default function createSpreadsheet({ runQuery( makeQuery( 'assets', - start, - end, - hidden, + startDate, + endDate, + showOffBudgetHidden, selectedCategories, categoryFilter, conditionsOpKey, @@ -94,9 +98,9 @@ export default function createSpreadsheet({ runQuery( makeQuery( 'debts', - start, - end, - hidden, + startDate, + endDate, + showOffBudgetHidden, selectedCategories, categoryFilter, conditionsOpKey, @@ -105,7 +109,7 @@ export default function createSpreadsheet({ ).then(({ data }) => data), ]); - const months = monthUtils.rangeInclusive(start, end); + const months = monthUtils.rangeInclusive(startDate, endDate); let totalAssets = 0; let totalDebts = 0; @@ -165,8 +169,8 @@ export default function createSpreadsheet({ setData({ data: calcData, monthData, - start, - end, + startDate, + endDate, totalDebts: integerToAmount(totalDebts), totalAssets: integerToAmount(totalAssets), totalTotals: integerToAmount(totalAssets + 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..649a82ce22e 100644 --- a/packages/desktop-client/src/components/reports/spreadsheets/grouped-spreadsheet.ts +++ b/packages/desktop-client/src/components/reports/spreadsheets/grouped-spreadsheet.ts @@ -11,18 +11,22 @@ import makeQuery from './makeQuery'; import recalculate from './recalculate'; function createGroupedSpreadsheet({ - start, - end, + startDate, + endDate, categories, selectedCategories, conditions = [], conditionsOp, - hidden, - uncat, + showOffBudgetHidden, + showUncategorized, }: createSpreadsheetProps) { - const [catList, catGroup] = categoryLists(hidden, uncat, categories); + const [categoryList, categoryGroup] = categoryLists( + showOffBudgetHidden, + showUncategorized, + categories, + ); - const categoryFilter = (catList || []).filter( + const categoryFilter = (categoryList || []).filter( category => !category.hidden && selectedCategories && @@ -32,7 +36,7 @@ function createGroupedSpreadsheet({ ); return async (spreadsheet, setData) => { - if (catList.length === 0) { + if (categoryList.length === 0) { return null; } @@ -45,9 +49,9 @@ function createGroupedSpreadsheet({ runQuery( makeQuery( 'assets', - start, - end, - hidden, + startDate, + endDate, + showOffBudgetHidden, selectedCategories, categoryFilter, conditionsOpKey, @@ -57,9 +61,9 @@ function createGroupedSpreadsheet({ runQuery( makeQuery( 'debts', - start, - end, - hidden, + startDate, + endDate, + showOffBudgetHidden, selectedCategories, categoryFilter, conditionsOpKey, @@ -68,71 +72,73 @@ function createGroupedSpreadsheet({ ).then(({ data }) => data), ]); - const months = monthUtils.rangeInclusive(start, end); - - const groupedData = catGroup.map( - group => { - let totalAssets = 0; - let totalDebts = 0; - - const monthData = months.reduce((arr, month) => { - let groupedAssets = 0; - let groupedDebts = 0; - - group.categories.map(item => { - const monthAssets = filterHiddenItems(item, assets) - .filter( - asset => asset.date === month && asset.category === item.id, - ) - .reduce((a, v) => (a = a + v.amount), 0); - groupedAssets += monthAssets; - - const monthDebts = filterHiddenItems(item, debts) - .filter( - debts => debts.date === month && debts.category === item.id, - ) - .reduce((a, v) => (a = a + v.amount), 0); - groupedDebts += monthDebts; - - return null; - }); - - totalAssets += groupedAssets; - totalDebts += groupedDebts; - - arr.push({ - date: month, - totalAssets: integerToAmount(groupedAssets), - totalDebts: integerToAmount(groupedDebts), - totalTotals: integerToAmount(groupedDebts + groupedAssets), + const months = monthUtils.rangeInclusive(startDate, endDate); + + const groupedData = categoryGroup + .filter(f => (showOffBudgetHidden || f.hidden === false) && f) + .map( + group => { + let totalAssets = 0; + let totalDebts = 0; + + const monthData = months.reduce((arr, month) => { + let groupedAssets = 0; + let groupedDebts = 0; + + group.categories.map(item => { + const monthAssets = filterHiddenItems(item, assets) + .filter( + asset => asset.date === month && asset.category === item.id, + ) + .reduce((a, v) => (a = a + v.amount), 0); + groupedAssets += monthAssets; + + const monthDebts = filterHiddenItems(item, debts) + .filter( + debts => debts.date === month && debts.category === item.id, + ) + .reduce((a, v) => (a = a + v.amount), 0); + groupedDebts += monthDebts; + + return null; + }); + + totalAssets += groupedAssets; + totalDebts += groupedDebts; + + arr.push({ + date: month, + totalAssets: integerToAmount(groupedAssets), + totalDebts: integerToAmount(groupedDebts), + totalTotals: integerToAmount(groupedDebts + groupedAssets), + }); + + return arr; + }, []); + + const stackedCategories = group.categories.map(item => { + const calc = recalculate({ + item, + months, + assets, + debts, + groupByLabel: 'category', + }); + return { ...calc }; }); - return arr; - }, []); - - const stackedCategories = group.categories.map(item => { - const calc = recalculate({ - item, - months, - assets, - debts, - groupByLabel: 'category', - }); - return { ...calc }; - }); - - return { - id: group.id, - name: group.name, - totalAssets: integerToAmount(totalAssets), - totalDebts: integerToAmount(totalDebts), - totalTotals: integerToAmount(totalAssets + totalDebts), - monthData, - categories: stackedCategories, - }; - }, - [start, end], - ); + return { + id: group.id, + name: group.name, + totalAssets: integerToAmount(totalAssets), + totalDebts: integerToAmount(totalDebts), + totalTotals: integerToAmount(totalAssets + totalDebts), + monthData, + categories: stackedCategories, + }; + }, + [startDate, endDate], + ); setData(groupedData); }; diff --git a/packages/desktop-client/src/components/reports/spreadsheets/makeQuery.ts b/packages/desktop-client/src/components/reports/spreadsheets/makeQuery.ts index 19d56b811d3..2e61c3eb922 100644 --- a/packages/desktop-client/src/components/reports/spreadsheets/makeQuery.ts +++ b/packages/desktop-client/src/components/reports/spreadsheets/makeQuery.ts @@ -3,9 +3,9 @@ import { type CategoryEntity } from 'loot-core/src/types/models'; function makeQuery( name: string, - start: string, - end: string, - hidden: boolean, + startDate: string, + endDate: string, + showOffBudgetHidden: boolean, selectedCategories: CategoryEntity[], categoryFilter: CategoryEntity[], conditionsOpKey: string, @@ -14,7 +14,7 @@ function makeQuery( const query = q('transactions') .filter( //Show Offbudget and hidden categories - !hidden && { + !showOffBudgetHidden && { $and: [ { 'account.offbudget': false, @@ -54,8 +54,8 @@ function makeQuery( //Apply month range filters .filter({ $and: [ - { date: { $transform: '$month', $gte: start } }, - { date: { $transform: '$month', $lte: end } }, + { date: { $transform: '$month', $gte: startDate } }, + { date: { $transform: '$month', $lte: endDate } }, ], }) //Show assets or debts From 66764dbdb4d6d645744ef4276b66087287c859c2 Mon Sep 17 00:00:00 2001 From: carkom Date: Thu, 7 Dec 2023 11:07:25 +0000 Subject: [PATCH 02/11] notes --- upcoming-release-notes/2046.md | 6 ++++++ 1 file changed, 6 insertions(+) create mode 100644 upcoming-release-notes/2046.md diff --git a/upcoming-release-notes/2046.md b/upcoming-release-notes/2046.md new file mode 100644 index 00000000000..b2e9aaa9898 --- /dev/null +++ b/upcoming-release-notes/2046.md @@ -0,0 +1,6 @@ +--- +category: Enhancements +authors: [carkom] +--- + +Updating variable naming as well as adding typescript to custom report files. \ No newline at end of file From b4e1bff9761826c830cbdadc5c64ffa9ddde3569 Mon Sep 17 00:00:00 2001 From: carkom Date: Thu, 7 Dec 2023 11:28:42 +0000 Subject: [PATCH 03/11] error fixes --- .../src/components/reports/ChooseGraph.tsx | 2 - .../components/reports/graphs/BarGraph.tsx | 48 ++++++++----------- .../components/reports/graphs/DonutGraph.tsx | 6 +-- .../reports/reports/CustomReport.js | 3 ++ .../spreadsheets/default-spreadsheet.tsx | 8 +++- .../spreadsheets/grouped-spreadsheet.ts | 6 ++- 6 files changed, 35 insertions(+), 38 deletions(-) diff --git a/packages/desktop-client/src/components/reports/ChooseGraph.tsx b/packages/desktop-client/src/components/reports/ChooseGraph.tsx index 995b04a2618..0c8825046ca 100644 --- a/packages/desktop-client/src/components/reports/ChooseGraph.tsx +++ b/packages/desktop-client/src/components/reports/ChooseGraph.tsx @@ -68,7 +68,6 @@ function ChooseGraph({ style={{ flexGrow: 1 }} data={data} groupBy={groupBy} - showEmpty={showEmpty} balanceTypeOp={balanceTypeOp} /> ); @@ -82,7 +81,6 @@ function ChooseGraph({ style={{ flexGrow: 1 }} data={data} groupBy={groupBy} - showEmpty={showEmpty} balanceTypeOp={balanceTypeOp} /> ); diff --git a/packages/desktop-client/src/components/reports/graphs/BarGraph.tsx b/packages/desktop-client/src/components/reports/graphs/BarGraph.tsx index 60531573107..c92bd05bf46 100644 --- a/packages/desktop-client/src/components/reports/graphs/BarGraph.tsx +++ b/packages/desktop-client/src/components/reports/graphs/BarGraph.tsx @@ -133,7 +133,6 @@ type BarGraphProps = { data: DataEntity; groupBy: string; balanceTypeOp: string; - showEmpty: boolean; compact?: boolean; }; @@ -141,7 +140,6 @@ function BarGraph({ style, data, groupBy, - showEmpty, balanceTypeOp, compact, }: BarGraphProps) { @@ -179,9 +177,7 @@ function BarGraph({ width={width} height={height} stackOffset="sign" - data={data[splitData].filter(i => - !showEmpty ? i[balanceTypeOp] !== 0 : true, - )} + data={data[splitData]} margin={{ top: 0, right: 0, left: 0, bottom: 0 }} > { @@ -219,33 +215,29 @@ function BarGraph({ )} getVal(val)} stackId="a"> - {data[splitData] - .filter(i => (!showEmpty ? i[balanceTypeOp] !== 0 : true)) - .map((entry, index) => ( + {data[splitData].map((entry, index) => ( + + ))} + + {yAxis === 'date' && balanceTypeOp === 'totalTotals' && ( + + {data[splitData].map((entry, index) => ( ))} - - {yAxis === 'date' && balanceTypeOp === 'totalTotals' && ( - - {data[splitData] - .filter(i => (!showEmpty ? i[balanceTypeOp] !== 0 : true)) - .map((entry, index) => ( - - ))} )} diff --git a/packages/desktop-client/src/components/reports/graphs/DonutGraph.tsx b/packages/desktop-client/src/components/reports/graphs/DonutGraph.tsx index fa560ec6cde..1fee824db3e 100644 --- a/packages/desktop-client/src/components/reports/graphs/DonutGraph.tsx +++ b/packages/desktop-client/src/components/reports/graphs/DonutGraph.tsx @@ -98,7 +98,6 @@ type DonutGraphProps = { data: DataEntity; groupBy: string; balanceTypeOp: string; - showEmpty: boolean; compact?: boolean; }; @@ -106,7 +105,6 @@ function DonutGraph({ style, data, groupBy, - showEmpty, balanceTypeOp, compact, }: DonutGraphProps) { @@ -147,9 +145,7 @@ function DonutGraph({ dataKey={val => getVal(val)} nameKey={yAxis} isAnimationActive={false} - data={data[splitData].filter(i => - !showEmpty ? 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/reports/CustomReport.js b/packages/desktop-client/src/components/reports/reports/CustomReport.js index 376724ad10f..b7caa4645b1 100644 --- a/packages/desktop-client/src/components/reports/reports/CustomReport.js +++ b/packages/desktop-client/src/components/reports/reports/CustomReport.js @@ -114,8 +114,10 @@ export default function CustomReport() { selectedCategories, filters, conditionsOp, + showEmpty, showOffBudgetHidden, showUncategorized, + balanceTypeOp, }); }, [ startDate, @@ -137,6 +139,7 @@ export default function CustomReport() { selectedCategories, filters, conditionsOp, + showEmpty, showOffBudgetHidden, showUncategorized, groupBy, 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 343ad0a10e0..7d282bc84c2 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; + showEmpty: boolean; showOffBudgetHidden: boolean; showUncategorized: boolean; groupBy?: string; @@ -41,6 +42,7 @@ export default function createSpreadsheet({ selectedCategories, conditions = [], conditionsOp, + showEmpty, showOffBudgetHidden, showUncategorized, groupBy, @@ -167,8 +169,10 @@ export default function createSpreadsheet({ }); setData({ - data: calcData, - monthData, + data: calcData.filter(i => (!showEmpty ? i[balanceTypeOp] !== 0 : true)), + monthData: monthData.filter(i => + !showEmpty ? i[balanceTypeOp] !== 0 : true, + ), startDate, endDate, 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 649a82ce22e..2a2c253cbb2 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, + showEmpty, showOffBudgetHidden, showUncategorized, + balanceTypeOp, }: createSpreadsheetProps) { const [categoryList, categoryGroup] = categoryLists( showOffBudgetHidden, @@ -140,7 +142,9 @@ function createGroupedSpreadsheet({ [startDate, endDate], ); - setData(groupedData); + setData( + groupedData.filter(i => (!showEmpty ? i[balanceTypeOp] !== 0 : true)), + ); }; } From e686011c2f43e1e05ff2b3275160b61b25e89a74 Mon Sep 17 00:00:00 2001 From: carkom Date: Thu, 7 Dec 2023 11:41:41 +0000 Subject: [PATCH 04/11] updates --- .../src/components/reports/ReportOptions.tsx | 2 +- .../spreadsheets/default-spreadsheet.tsx | 8 +- .../spreadsheets/grouped-spreadsheet.ts | 124 +++++++++--------- 3 files changed, 66 insertions(+), 68 deletions(-) diff --git a/packages/desktop-client/src/components/reports/ReportOptions.tsx b/packages/desktop-client/src/components/reports/ReportOptions.tsx index 13e665d4d15..2642e634354 100644 --- a/packages/desktop-client/src/components/reports/ReportOptions.tsx +++ b/packages/desktop-client/src/components/reports/ReportOptions.tsx @@ -123,7 +123,7 @@ export const categoryLists = ( ) => { const categoryList = showUncategorized ? [ - ...categories.list, + ...categories.list.filter(f => showOffBudgetHidden || !f.hidden), uncategorizedCategory, transferCategory, offBudgetCategory, 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 7d282bc84c2..4d17270d4c5 100644 --- a/packages/desktop-client/src/components/reports/spreadsheets/default-spreadsheet.tsx +++ b/packages/desktop-client/src/components/reports/spreadsheets/default-spreadsheet.tsx @@ -51,13 +51,13 @@ export default function createSpreadsheet({ accounts, setDataCheck, }: createSpreadsheetProps) { - const [catList, catGroup] = categoryLists( + const [categoryList, categoryGroup] = categoryLists( showOffBudgetHidden, showUncategorized, categories, ); - const categoryFilter = (catList || []).filter( + const categoryFilter = (categoryList || []).filter( category => !category.hidden && selectedCategories && @@ -68,8 +68,8 @@ export default function createSpreadsheet({ const [groupByList, groupByLabel] = groupBySelections( groupBy, - catList, - catGroup, + categoryList, + categoryGroup, payees, accounts, ); 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 2a2c253cbb2..00a49e2c692 100644 --- a/packages/desktop-client/src/components/reports/spreadsheets/grouped-spreadsheet.ts +++ b/packages/desktop-client/src/components/reports/spreadsheets/grouped-spreadsheet.ts @@ -76,71 +76,69 @@ function createGroupedSpreadsheet({ const months = monthUtils.rangeInclusive(startDate, endDate); - const groupedData = categoryGroup - .filter(f => (showOffBudgetHidden || f.hidden === false) && f) - .map( - group => { - let totalAssets = 0; - let totalDebts = 0; - - const monthData = months.reduce((arr, month) => { - let groupedAssets = 0; - let groupedDebts = 0; - - group.categories.map(item => { - const monthAssets = filterHiddenItems(item, assets) - .filter( - asset => asset.date === month && asset.category === item.id, - ) - .reduce((a, v) => (a = a + v.amount), 0); - groupedAssets += monthAssets; - - const monthDebts = filterHiddenItems(item, debts) - .filter( - debts => debts.date === month && debts.category === item.id, - ) - .reduce((a, v) => (a = a + v.amount), 0); - groupedDebts += monthDebts; - - return null; - }); - - totalAssets += groupedAssets; - totalDebts += groupedDebts; - - arr.push({ - date: month, - totalAssets: integerToAmount(groupedAssets), - totalDebts: integerToAmount(groupedDebts), - totalTotals: integerToAmount(groupedDebts + groupedAssets), - }); - - return arr; - }, []); - - const stackedCategories = group.categories.map(item => { - const calc = recalculate({ - item, - months, - assets, - debts, - groupByLabel: 'category', - }); - return { ...calc }; + const groupedData = categoryGroup.map( + group => { + let totalAssets = 0; + let totalDebts = 0; + + const monthData = months.reduce((arr, month) => { + let groupedAssets = 0; + let groupedDebts = 0; + + group.categories.map(item => { + const monthAssets = filterHiddenItems(item, assets) + .filter( + asset => asset.date === month && asset.category === item.id, + ) + .reduce((a, v) => (a = a + v.amount), 0); + groupedAssets += monthAssets; + + const monthDebts = filterHiddenItems(item, debts) + .filter( + debts => debts.date === month && debts.category === item.id, + ) + .reduce((a, v) => (a = a + v.amount), 0); + groupedDebts += monthDebts; + + return null; }); - return { - id: group.id, - name: group.name, - totalAssets: integerToAmount(totalAssets), - totalDebts: integerToAmount(totalDebts), - totalTotals: integerToAmount(totalAssets + totalDebts), - monthData, - categories: stackedCategories, - }; - }, - [startDate, endDate], - ); + totalAssets += groupedAssets; + totalDebts += groupedDebts; + + arr.push({ + date: month, + totalAssets: integerToAmount(groupedAssets), + totalDebts: integerToAmount(groupedDebts), + totalTotals: integerToAmount(groupedDebts + groupedAssets), + }); + + return arr; + }, []); + + const stackedCategories = group.categories.map(item => { + const calc = recalculate({ + item, + months, + assets, + debts, + groupByLabel: 'category', + }); + return { ...calc }; + }); + + return { + id: group.id, + name: group.name, + totalAssets: integerToAmount(totalAssets), + totalDebts: integerToAmount(totalDebts), + totalTotals: integerToAmount(totalAssets + totalDebts), + monthData, + categories: stackedCategories, + }; + }, + [startDate, endDate], + ); setData( groupedData.filter(i => (!showEmpty ? i[balanceTypeOp] !== 0 : true)), From ab9b611c8159b37b4c4905f8116b31918e7c68b3 Mon Sep 17 00:00:00 2001 From: carkom Date: Thu, 7 Dec 2023 12:38:05 +0000 Subject: [PATCH 05/11] card fix --- .../reports/reports/CustomReportCard.js | 15 ++++++--------- 1 file changed, 6 insertions(+), 9 deletions(-) diff --git a/packages/desktop-client/src/components/reports/reports/CustomReportCard.js b/packages/desktop-client/src/components/reports/reports/CustomReportCard.js index b4b3d53114f..77f5eccdafc 100644 --- a/packages/desktop-client/src/components/reports/reports/CustomReportCard.js +++ b/packages/desktop-client/src/components/reports/reports/CustomReportCard.js @@ -16,19 +16,19 @@ import useReport from '../useReport'; function CustomReportCard() { const categories = useCategories(); - const end = monthUtils.currentMonth(); - const start = monthUtils.subMonths(end, 3); + const endDate = monthUtils.currentMonth(); + const startDate = monthUtils.subMonths(endDate, 3); const groupBy = 'Category'; const getGraphData = useMemo(() => { return defaultSpreadsheet({ - start, - end, + startDate, + endDate, groupBy, balanceTypeOp: 'totalDebts', categories, }); - }, [start, end, categories]); + }, [startDate, endDate, categories]); const data = useReport('default', getGraphData); return ( @@ -42,19 +42,16 @@ function CustomReportCard() { > Custom Report - + {data ? ( From ebead445c49577bfa92ea353b26b128fe288ad44 Mon Sep 17 00:00:00 2001 From: carkom Date: Sat, 9 Dec 2023 11:39:14 +0000 Subject: [PATCH 06/11] fix filters --- .../src/components/reports/reports/CustomReport.js | 4 ++-- .../components/reports/spreadsheets/cash-flow-spreadsheet.tsx | 2 +- .../src/components/reports/spreadsheets/makeQuery.ts | 2 +- .../components/reports/spreadsheets/net-worth-spreadsheet.tsx | 2 +- 4 files changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/desktop-client/src/components/reports/reports/CustomReport.js b/packages/desktop-client/src/components/reports/reports/CustomReport.js index b7caa4645b1..42818ec18e3 100644 --- a/packages/desktop-client/src/components/reports/reports/CustomReport.js +++ b/packages/desktop-client/src/components/reports/reports/CustomReport.js @@ -112,7 +112,7 @@ export default function CustomReport() { endDate, categories, selectedCategories, - filters, + conditions: filters, conditionsOp, showEmpty, showOffBudgetHidden, @@ -137,7 +137,7 @@ export default function CustomReport() { endDate, categories, selectedCategories, - filters, + conditions: filters, conditionsOp, showEmpty, showOffBudgetHidden, diff --git a/packages/desktop-client/src/components/reports/spreadsheets/cash-flow-spreadsheet.tsx b/packages/desktop-client/src/components/reports/spreadsheets/cash-flow-spreadsheet.tsx index 20ae05ef9c3..5d874cb821a 100644 --- a/packages/desktop-client/src/components/reports/spreadsheets/cash-flow-spreadsheet.tsx +++ b/packages/desktop-client/src/components/reports/spreadsheets/cash-flow-spreadsheet.tsx @@ -60,7 +60,7 @@ export function cashFlowByDate( function makeQuery(where) { const query = q('transactions') .filter({ - [conditionsOpKey]: [...filters], + [conditionsOpKey]: filters, }) .filter({ $and: [ diff --git a/packages/desktop-client/src/components/reports/spreadsheets/makeQuery.ts b/packages/desktop-client/src/components/reports/spreadsheets/makeQuery.ts index 2e61c3eb922..6d6ee2ca349 100644 --- a/packages/desktop-client/src/components/reports/spreadsheets/makeQuery.ts +++ b/packages/desktop-client/src/components/reports/spreadsheets/makeQuery.ts @@ -49,7 +49,7 @@ function makeQuery( ) //Apply filters and split by "Group By" .filter({ - [conditionsOpKey]: [...filters], + [conditionsOpKey]: filters, }) //Apply month range filters .filter({ diff --git a/packages/desktop-client/src/components/reports/spreadsheets/net-worth-spreadsheet.tsx b/packages/desktop-client/src/components/reports/spreadsheets/net-worth-spreadsheet.tsx index 4bc90d04124..328f8354f03 100644 --- a/packages/desktop-client/src/components/reports/spreadsheets/net-worth-spreadsheet.tsx +++ b/packages/desktop-client/src/components/reports/spreadsheets/net-worth-spreadsheet.tsx @@ -44,7 +44,7 @@ export default function createSpreadsheet( runQuery( q('transactions') .filter({ - [conditionsOpKey]: [...filters], + [conditionsOpKey]: filters, }) .filter({ account: acct.id, From 1759616b823c4e56e01196254ea5d31e3fcdb29a Mon Sep 17 00:00:00 2001 From: carkom Date: Tue, 12 Dec 2023 00:53:32 +0000 Subject: [PATCH 07/11] splitting PR work --- .../src/components/reports/ChooseGraph.tsx | 14 ++-- .../src/components/reports/ModeButton.tsx | 39 ----------- .../src/components/reports/ReportLegend.tsx | 70 ------------------- .../src/components/reports/ReportSidebar.js | 28 +++++++- .../{ReportSummary.tsx => ReportSummary.js} | 70 ++++++++++++++++--- .../components/reports/graphs/BarGraph.tsx | 2 +- .../reports/reports/CustomReport.js | 17 +++-- .../spreadsheets/cash-flow-spreadsheet.tsx | 2 +- .../reports/spreadsheets/makeQuery.ts | 2 +- .../spreadsheets/net-worth-spreadsheet.tsx | 2 +- upcoming-release-notes/2046.md | 2 +- 11 files changed, 107 insertions(+), 141 deletions(-) delete mode 100644 packages/desktop-client/src/components/reports/ModeButton.tsx delete mode 100644 packages/desktop-client/src/components/reports/ReportLegend.tsx rename packages/desktop-client/src/components/reports/{ReportSummary.tsx => ReportSummary.js} (70%) diff --git a/packages/desktop-client/src/components/reports/ChooseGraph.tsx b/packages/desktop-client/src/components/reports/ChooseGraph.tsx index a6835150b6a..ad71b87a1eb 100644 --- a/packages/desktop-client/src/components/reports/ChooseGraph.tsx +++ b/packages/desktop-client/src/components/reports/ChooseGraph.tsx @@ -37,8 +37,6 @@ export function ChooseGraph({ setScrollWidth, months, }: ChooseGraphProps) { - const balanceTypeOp = ReportOptions.balanceTypeMap.get(balanceType); - const saveScrollWidth = value => { setScrollWidth(!value ? 0 : value); }; @@ -57,7 +55,7 @@ export function ChooseGraph({ ); } @@ -67,7 +65,7 @@ export function ChooseGraph({ style={{ flexGrow: 1 }} data={data} groupBy={groupBy} - balanceTypeOp={balanceTypeOp} + balanceTypeOp={ReportOptions.balanceTypeMap.get(balanceType)} /> ); } @@ -80,7 +78,7 @@ export function ChooseGraph({ style={{ flexGrow: 1 }} data={data} groupBy={groupBy} - balanceTypeOp={balanceTypeOp} + balanceTypeOp={ReportOptions.balanceTypeMap.get(balanceType)} /> ); } @@ -108,7 +106,7 @@ export function ChooseGraph({ data={data} empty={showEmpty} monthsCount={months.length} - balanceTypeOp={balanceTypeOp} + balanceTypeOp={ReportOptions.balanceTypeMap.get(balanceType)} mode={mode} groupBy={groupBy} /> @@ -119,12 +117,10 @@ export function ChooseGraph({ scrollWidth={scrollWidth} data={data} mode={mode} - balanceTypeOp={balanceTypeOp} + balanceTypeOp={ReportOptions.balanceTypeMap.get(balanceType)} monthsCount={months.length} /> ); } } - -export default ChooseGraph; diff --git a/packages/desktop-client/src/components/reports/ModeButton.tsx b/packages/desktop-client/src/components/reports/ModeButton.tsx deleted file mode 100644 index e0f216d84fa..00000000000 --- a/packages/desktop-client/src/components/reports/ModeButton.tsx +++ /dev/null @@ -1,39 +0,0 @@ -import React, { type MouseEventHandler, type ReactNode } from 'react'; - -import { type CSSProperties, theme } from '../../style'; -import Button from '../common/Button'; - -type ModeButtonProps = { - selected: boolean; - children: ReactNode; - style: CSSProperties; - onSelect: MouseEventHandler; -}; - -function ModeButton({ selected, children, style, onSelect }: ModeButtonProps) { - return ( - - ); -} - -export default ModeButton; diff --git a/packages/desktop-client/src/components/reports/ReportLegend.tsx b/packages/desktop-client/src/components/reports/ReportLegend.tsx deleted file mode 100644 index 34004db4980..00000000000 --- a/packages/desktop-client/src/components/reports/ReportLegend.tsx +++ /dev/null @@ -1,70 +0,0 @@ -import React from 'react'; - -import { theme, styles } from '../../style'; -import Text from '../common/Text'; -import View from '../common/View'; - -type ReportLegendProps = { - legend; - groupBy: string; -}; - -function ReportLegend({ legend, groupBy }: ReportLegendProps) { - return ( - - - {groupBy} - - - {legend.map(item => { - return ( - - - - {item.name} - - - ); - })} - - - ); -} - -export default ReportLegend; diff --git a/packages/desktop-client/src/components/reports/ReportSidebar.js b/packages/desktop-client/src/components/reports/ReportSidebar.js index 2c182b1abb9..c95c79ad595 100644 --- a/packages/desktop-client/src/components/reports/ReportSidebar.js +++ b/packages/desktop-client/src/components/reports/ReportSidebar.js @@ -3,6 +3,7 @@ import React from 'react'; import * as monthUtils from 'loot-core/src/shared/months'; import { theme } from '../../style'; +import Button from '../common/Button'; import Select from '../common/Select'; import Text from '../common/Text'; import View from '../common/View'; @@ -16,9 +17,34 @@ import { getFullRange, validateRange, } from './Header'; -import ModeButton from './ModeButton'; import { ReportOptions } from './ReportOptions'; +function ModeButton({ selected, children, style, onSelect }) { + return ( + + ); +} + export function ReportSidebar({ startDate, endDate, diff --git a/packages/desktop-client/src/components/reports/ReportSummary.tsx b/packages/desktop-client/src/components/reports/ReportSummary.js similarity index 70% rename from packages/desktop-client/src/components/reports/ReportSummary.tsx rename to packages/desktop-client/src/components/reports/ReportSummary.js index f8680f2deb9..eb626934201 100644 --- a/packages/desktop-client/src/components/reports/ReportSummary.tsx +++ b/packages/desktop-client/src/components/reports/ReportSummary.js @@ -12,21 +12,13 @@ import Text from '../common/Text'; import View from '../common/View'; import PrivacyFilter from '../PrivacyFilter'; -type ReportSummaryProps = { - startDate: string; - endDate: string; - data; - balanceTypeOp: string; - monthsCount: number; -}; - -function ReportSummary({ +export function ReportSummary({ startDate, endDate, data, balanceTypeOp, monthsCount, -}: ReportSummaryProps) { +}) { const net = Math.abs(data.totalDebts) > Math.abs(data.totalAssets) ? 'PAYMENT' @@ -137,4 +129,60 @@ function ReportSummary({ ); } -export default ReportSummary; +export function ReportLegend({ legend, groupBy }) { + return ( + + + {groupBy} + + + {legend.map(item => { + return ( + + + + {item.name} + + + ); + })} + + + ); +} diff --git a/packages/desktop-client/src/components/reports/graphs/BarGraph.tsx b/packages/desktop-client/src/components/reports/graphs/BarGraph.tsx index c92bd05bf46..2e9f992f84b 100644 --- a/packages/desktop-client/src/components/reports/graphs/BarGraph.tsx +++ b/packages/desktop-client/src/components/reports/graphs/BarGraph.tsx @@ -132,7 +132,7 @@ type BarGraphProps = { style?: CSSProperties; data: DataEntity; groupBy: string; - balanceTypeOp: string; + balanceTypeOp; compact?: boolean; }; diff --git a/packages/desktop-client/src/components/reports/reports/CustomReport.js b/packages/desktop-client/src/components/reports/reports/CustomReport.js index 12b7f07052a..55347a8e54c 100644 --- a/packages/desktop-client/src/components/reports/reports/CustomReport.js +++ b/packages/desktop-client/src/components/reports/reports/CustomReport.js @@ -17,13 +17,12 @@ import Text from '../../common/Text'; import View from '../../common/View'; import { AppliedFilters } from '../../filters/FiltersMenu'; import PrivacyFilter from '../../PrivacyFilter'; -import ChooseGraph from '../ChooseGraph'; +import { ChooseGraph } from '../ChooseGraph'; import Header from '../Header'; import LoadingIndicator from '../LoadingIndicator'; -import ReportLegend from '../ReportLegend'; import { ReportOptions } from '../ReportOptions'; import { ReportSidebar } from '../ReportSidebar'; -import ReportSummary from '../ReportSummary'; +import { ReportLegend, ReportSummary } from '../ReportSummary'; import { ReportTopbar } from '../ReportTopbar'; import defaultSpreadsheet from '../spreadsheets/default-spreadsheet'; import groupedSpreadsheet from '../spreadsheets/grouped-spreadsheet'; @@ -112,7 +111,7 @@ export default function CustomReport() { endDate, categories, selectedCategories, - conditions: filters, + filters, conditionsOp, showEmpty, showOffBudgetHidden, @@ -137,7 +136,7 @@ export default function CustomReport() { endDate, categories, selectedCategories, - conditions: filters, + filters, conditionsOp, showEmpty, showOffBudgetHidden, @@ -309,6 +308,8 @@ export default function CustomReport() { {dataCheck ? ( )} {viewLegend && ( - + )} )} diff --git a/packages/desktop-client/src/components/reports/spreadsheets/cash-flow-spreadsheet.tsx b/packages/desktop-client/src/components/reports/spreadsheets/cash-flow-spreadsheet.tsx index 5d874cb821a..20ae05ef9c3 100644 --- a/packages/desktop-client/src/components/reports/spreadsheets/cash-flow-spreadsheet.tsx +++ b/packages/desktop-client/src/components/reports/spreadsheets/cash-flow-spreadsheet.tsx @@ -60,7 +60,7 @@ export function cashFlowByDate( function makeQuery(where) { const query = q('transactions') .filter({ - [conditionsOpKey]: filters, + [conditionsOpKey]: [...filters], }) .filter({ $and: [ diff --git a/packages/desktop-client/src/components/reports/spreadsheets/makeQuery.ts b/packages/desktop-client/src/components/reports/spreadsheets/makeQuery.ts index 6d6ee2ca349..2e61c3eb922 100644 --- a/packages/desktop-client/src/components/reports/spreadsheets/makeQuery.ts +++ b/packages/desktop-client/src/components/reports/spreadsheets/makeQuery.ts @@ -49,7 +49,7 @@ function makeQuery( ) //Apply filters and split by "Group By" .filter({ - [conditionsOpKey]: filters, + [conditionsOpKey]: [...filters], }) //Apply month range filters .filter({ diff --git a/packages/desktop-client/src/components/reports/spreadsheets/net-worth-spreadsheet.tsx b/packages/desktop-client/src/components/reports/spreadsheets/net-worth-spreadsheet.tsx index 328f8354f03..4bc90d04124 100644 --- a/packages/desktop-client/src/components/reports/spreadsheets/net-worth-spreadsheet.tsx +++ b/packages/desktop-client/src/components/reports/spreadsheets/net-worth-spreadsheet.tsx @@ -44,7 +44,7 @@ export default function createSpreadsheet( runQuery( q('transactions') .filter({ - [conditionsOpKey]: filters, + [conditionsOpKey]: [...filters], }) .filter({ account: acct.id, diff --git a/upcoming-release-notes/2046.md b/upcoming-release-notes/2046.md index b2e9aaa9898..137a21c318e 100644 --- a/upcoming-release-notes/2046.md +++ b/upcoming-release-notes/2046.md @@ -3,4 +3,4 @@ category: Enhancements authors: [carkom] --- -Updating variable naming as well as adding typescript to custom report files. \ No newline at end of file +Updating variable naming. \ No newline at end of file From db3547e457d4847726b948409b6cd2d520be225d Mon Sep 17 00:00:00 2001 From: carkom Date: Tue, 12 Dec 2023 00:55:01 +0000 Subject: [PATCH 08/11] notes --- upcoming-release-notes/{2046.md => 2069.md} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename upcoming-release-notes/{2046.md => 2069.md} (100%) diff --git a/upcoming-release-notes/2046.md b/upcoming-release-notes/2069.md similarity index 100% rename from upcoming-release-notes/2046.md rename to upcoming-release-notes/2069.md From 478c67827d3a41fdcc287e0136b78f62ffcd3325 Mon Sep 17 00:00:00 2001 From: carkom Date: Tue, 12 Dec 2023 01:02:08 +0000 Subject: [PATCH 09/11] fixes --- .../src/components/reports/ReportSummary.js | 86 +++++++++++-------- 1 file changed, 49 insertions(+), 37 deletions(-) diff --git a/packages/desktop-client/src/components/reports/ReportSummary.js b/packages/desktop-client/src/components/reports/ReportSummary.js index eb626934201..3aaaed057a9 100644 --- a/packages/desktop-client/src/components/reports/ReportSummary.js +++ b/packages/desktop-client/src/components/reports/ReportSummary.js @@ -40,12 +40,14 @@ export function ReportSummary({ }} > {monthUtils.format(startDate, 'MMM yyyy')} -{' '} {monthUtils.format(endDate, 'MMM yyyy')} @@ -61,12 +63,14 @@ export function ReportSummary({ }} > {balanceTypeOp === 'totalDebts' ? 'TOTAL SPENDING' @@ -75,12 +79,14 @@ export function ReportSummary({ : 'NET ' + net} {amountToCurrency(data[balanceTypeOp])} @@ -98,12 +104,14 @@ export function ReportSummary({ }} > {balanceTypeOp === 'totalDebts' ? 'AVERAGE SPENDING' @@ -112,12 +120,14 @@ export function ReportSummary({ : 'AVERAGE NET'} {integerToCurrency(Math.round(average))} @@ -140,13 +150,15 @@ export function ReportLegend({ legend, groupBy }) { }} > {groupBy} From 8b13d5b9f1d9e1d92882c492e8ec27e0e5e010d5 Mon Sep 17 00:00:00 2001 From: carkom Date: Tue, 12 Dec 2023 01:03:23 +0000 Subject: [PATCH 10/11] lint fix --- packages/desktop-client/src/components/reports/ReportSummary.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/desktop-client/src/components/reports/ReportSummary.js b/packages/desktop-client/src/components/reports/ReportSummary.js index 3aaaed057a9..892bab6f792 100644 --- a/packages/desktop-client/src/components/reports/ReportSummary.js +++ b/packages/desktop-client/src/components/reports/ReportSummary.js @@ -139,7 +139,7 @@ export function ReportSummary({ ); } -export function ReportLegend({ legend, groupBy }) { +export function ReportLegend({ data, legend, groupBy }) { return ( Date: Tue, 12 Dec 2023 02:43:34 -0800 Subject: [PATCH 11/11] Update upcoming-release-notes/2069.md Co-authored-by: Matiss Janis Aboltins --- upcoming-release-notes/2069.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/upcoming-release-notes/2069.md b/upcoming-release-notes/2069.md index 137a21c318e..e8b1f4db822 100644 --- a/upcoming-release-notes/2069.md +++ b/upcoming-release-notes/2069.md @@ -3,4 +3,4 @@ category: Enhancements authors: [carkom] --- -Updating variable naming. \ No newline at end of file +Updating variable naming for custom reports page. \ No newline at end of file