added 'show/hide balance' button to cash flow report (#2322)

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 && (

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}

packages/desktop-client/src/components/reports/reports/CashFlow.tsx

-// @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>

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', {

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(

upcoming-release-notes/2322.md

+---
+category: Enhancements
+authors: [MatissJanis]
+---
+
+Added `show/hide balance` button to the cash flow report