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 f66d9d3303fca4f31264c32356c7201f55b5e580..9294ae9db3c4522c5c08c952506b390004211221 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 00a8dea62ad110c0c95f1e68d29dadd08131ac8f..e0e0474263d063e608b4693b58a5b562511b185d 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 aaad46b7d0517859355c0ba0eebbb205fa49b604..cb4d8d54a66914df731a9702318ab65881efa237 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
</Button>
- <View style={{ flex: 1 }} />
+
+ {children || <View style={{ flex: 1 }} />}
</View>
)}
{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 d1b82ccaf229b834480eec809ad9f164653f5211..e186a70b64b93ad89184a33c2c49fe07e160819f 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 70f195efdab7925d95eec430ff2fcdaa9e5a74f7..a3ff9241efb4a276d9f996c7d3671c39e88e0f4c 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<RuleConditionEntity>();
- const [allMonths, setAllMonths] = useState(null);
+ const [allMonths, setAllMonths] = useState<null | Array<{
+ name: string;
+ pretty: string;
+ }>>(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}
- />
+ >
+ <View
+ style={{
+ flex: 1,
+ flexDirection: 'row',
+ justifyContent: 'flex-end',
+ }}
+ >
+ <Button onClick={() => setShowBalance(state => !state)}>
+ {showBalance ? 'Hide balance' : 'Show balance'}
+ </Button>
+ </View>
+ </Header>
<View
style={{
backgroundColor: theme.tableBackground,
@@ -168,7 +185,11 @@ export function CashFlow(): JSX.Element {
</Text>
</View>
- <CashFlowGraph graphData={graphData} isConcise={isConcise} />
+ <CashFlowGraph
+ graphData={graphData}
+ isConcise={isConcise}
+ showBalance={showBalance}
+ />
<View style={{ marginTop: 30 }}>
<Paragraph>
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 f13f6105659961ad03da2a5fd0ed8faf5f4fb216..55519b604c51fb6f1a7cae2c3e6150b83cfe82ad 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 586b0f3b270193e3594b0de0a3026744d6d68390..4bb0e98481f78ec8f3a54e1959fe07c686a870a5 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<T>(initialFilters: T[] = []) {
const [filters, setFilters] = useState<T[]>(initialFilters);
- const [conditionsOp, setConditionsOp] = useState('and');
+ const [conditionsOp, setConditionsOp] = useState<'and' | 'or'>('and');
const [saved, setSaved] = useState<T[]>(null);
const onApply = useCallback(
diff --git a/upcoming-release-notes/2322.md b/upcoming-release-notes/2322.md
new file mode 100644
index 0000000000000000000000000000000000000000..e9cacec993c3382f6b727d8e74e52530927b2c75
--- /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