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