diff --git a/packages/desktop-client/e2e/reports.test.js-snapshots/Reports-loads-cash-flow-graph-and-checks-visuals-1-chromium-linux.png b/packages/desktop-client/e2e/reports.test.js-snapshots/Reports-loads-cash-flow-graph-and-checks-visuals-1-chromium-linux.png index f66d9d3303f..9294ae9db3c 100644 Binary files a/packages/desktop-client/e2e/reports.test.js-snapshots/Reports-loads-cash-flow-graph-and-checks-visuals-1-chromium-linux.png and b/packages/desktop-client/e2e/reports.test.js-snapshots/Reports-loads-cash-flow-graph-and-checks-visuals-1-chromium-linux.png differ diff --git a/packages/desktop-client/e2e/reports.test.js-snapshots/Reports-loads-cash-flow-graph-and-checks-visuals-2-chromium-linux.png b/packages/desktop-client/e2e/reports.test.js-snapshots/Reports-loads-cash-flow-graph-and-checks-visuals-2-chromium-linux.png index 00a8dea62ad..e0e0474263d 100644 Binary files a/packages/desktop-client/e2e/reports.test.js-snapshots/Reports-loads-cash-flow-graph-and-checks-visuals-2-chromium-linux.png and b/packages/desktop-client/e2e/reports.test.js-snapshots/Reports-loads-cash-flow-graph-and-checks-visuals-2-chromium-linux.png differ diff --git a/packages/desktop-client/src/components/reports/Header.jsx b/packages/desktop-client/src/components/reports/Header.jsx index aaad46b7d05..cb4d8d54a66 100644 --- a/packages/desktop-client/src/components/reports/Header.jsx +++ b/packages/desktop-client/src/components/reports/Header.jsx @@ -76,6 +76,7 @@ export function Header({ onDeleteFilter, onCondOpChange, headerPrefixItems, + children, }) { const location = useLocation(); const path = location.pathname; @@ -167,7 +168,8 @@ export function Header({ > All Time - + + {children || } )} {filters && filters.length > 0 && ( diff --git a/packages/desktop-client/src/components/reports/graphs/CashFlowGraph.tsx b/packages/desktop-client/src/components/reports/graphs/CashFlowGraph.tsx index d1b82ccaf22..e186a70b64b 100644 --- a/packages/desktop-client/src/components/reports/graphs/CashFlowGraph.tsx +++ b/packages/desktop-client/src/components/reports/graphs/CashFlowGraph.tsx @@ -89,8 +89,13 @@ type CashFlowGraphProps = { transfers: { x: Date; y: number }[]; }; isConcise: boolean; + showBalance?: boolean; }; -export function CashFlowGraph({ graphData, isConcise }: CashFlowGraphProps) { +export function CashFlowGraph({ + graphData, + isConcise, + showBalance = true, +}: CashFlowGraphProps) { const privacyMode = usePrivacyMode(); const [yAxisIsHovered, setYAxisIsHovered] = useState(false); @@ -154,6 +159,7 @@ export function CashFlowGraph({ graphData, isConcise }: CashFlowGraphProps) { type="monotone" dataKey="balance" dot={false} + hide={!showBalance} stroke={theme.pageTextLight} strokeWidth={2} animationDuration={ANIMATION_DURATION} diff --git a/packages/desktop-client/src/components/reports/reports/CashFlow.tsx b/packages/desktop-client/src/components/reports/reports/CashFlow.tsx index 70f195efdab..a3ff9241efb 100644 --- a/packages/desktop-client/src/components/reports/reports/CashFlow.tsx +++ b/packages/desktop-client/src/components/reports/reports/CashFlow.tsx @@ -1,4 +1,3 @@ -// @ts-strict-ignore import React, { useState, useEffect, useMemo } from 'react'; import * as d from 'date-fns'; @@ -6,11 +5,13 @@ import * as d from 'date-fns'; import { send } from 'loot-core/src/platform/client/fetch'; import * as monthUtils from 'loot-core/src/shared/months'; import { integerToCurrency } from 'loot-core/src/shared/util'; +import { type RuleConditionEntity } from 'loot-core/types/models'; import { useFilters } from '../../../hooks/useFilters'; import { theme, styles } from '../../../style'; import { AlignedText } from '../../common/AlignedText'; import { Block } from '../../common/Block'; +import { Button } from '../../common/Button'; import { Paragraph } from '../../common/Paragraph'; import { Text } from '../../common/Text'; import { View } from '../../common/View'; @@ -21,7 +22,7 @@ import { Header } from '../Header'; import { cashFlowByDate } from '../spreadsheets/cash-flow-spreadsheet'; import { useReport } from '../useReport'; -export function CashFlow(): JSX.Element { +export function CashFlow() { const { filters, conditionsOp, @@ -29,13 +30,17 @@ export function CashFlow(): JSX.Element { onDelete: onDeleteFilter, onUpdate: onUpdateFilter, onCondOpChange, - } = useFilters(); + } = useFilters(); - const [allMonths, setAllMonths] = useState(null); + const [allMonths, setAllMonths] = useState>(null); const [start, setStart] = useState( monthUtils.subMonths(monthUtils.currentMonth(), 5), ); const [end, setEnd] = useState(monthUtils.currentDay()); + const [showBalance, setShowBalance] = useState(true); const [isConcise, setIsConcise] = useState(() => { const numDays = d.differenceInCalendarDays( @@ -71,7 +76,7 @@ export function CashFlow(): JSX.Element { run(); }, []); - function onChangeDates(start, end) { + function onChangeDates(start: string, end: string) { const numDays = d.differenceInCalendarDays( d.parseISO(end), d.parseISO(start), @@ -110,7 +115,19 @@ export function CashFlow(): JSX.Element { conditionsOp={conditionsOp} onCondOpChange={onCondOpChange} headerPrefixItems={undefined} - /> + > + + + + - + 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 f13f6105659..55519b604c5 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 @@ -7,6 +7,7 @@ import { send } from 'loot-core/src/platform/client/fetch'; import * as monthUtils from 'loot-core/src/shared/months'; import { q } from 'loot-core/src/shared/query'; import { integerToCurrency, integerToAmount } from 'loot-core/src/shared/util'; +import { type RuleConditionEntity } from 'loot-core/types/models'; import { AlignedText } from '../../common/AlignedText'; import { runAll, indexCashFlow } from '../util'; @@ -46,11 +47,11 @@ export function simpleCashFlow(start, end) { } export function cashFlowByDate( - start, - end, - isConcise, - conditions = [], - conditionsOp, + start: string, + end: string, + isConcise: boolean, + conditions: RuleConditionEntity[] = [], + conditionsOp: 'and' | 'or', ) { return async (spreadsheet, setData) => { const { filters } = await send('make-filters-from-conditions', { diff --git a/packages/desktop-client/src/hooks/useFilters.ts b/packages/desktop-client/src/hooks/useFilters.ts index 586b0f3b270..4bb0e98481f 100644 --- a/packages/desktop-client/src/hooks/useFilters.ts +++ b/packages/desktop-client/src/hooks/useFilters.ts @@ -3,7 +3,7 @@ import { useCallback, useMemo, useState } from 'react'; export function useFilters(initialFilters: T[] = []) { const [filters, setFilters] = useState(initialFilters); - const [conditionsOp, setConditionsOp] = useState('and'); + const [conditionsOp, setConditionsOp] = useState<'and' | 'or'>('and'); const [saved, setSaved] = useState(null); const onApply = useCallback( diff --git a/upcoming-release-notes/2322.md b/upcoming-release-notes/2322.md new file mode 100644 index 00000000000..e9cacec993c --- /dev/null +++ b/upcoming-release-notes/2322.md @@ -0,0 +1,6 @@ +--- +category: Enhancements +authors: [MatissJanis] +--- + +Added `show/hide balance` button to the cash flow report