From 2799dbee3e68217ff70037ddb7af017ee440e6f3 Mon Sep 17 00:00:00 2001
From: Neil <55785687+carkom@users.noreply.github.com>
Date: Wed, 31 Jul 2024 21:35:23 +0100
Subject: [PATCH] Spending Report: Add Last Month (#3132)

* AddLastMonth

* notes

* Add data for last month a year ago

* Adjustments for save button

* spending card fix

* notes

* fix typecheck

* fix averages
---
 .../reports/graphs/SpendingGraph.tsx          |  29 +++--
 .../components/reports/reports/Spending.tsx   | 107 +++++++++++++++---
 .../reports/reports/SpendingCard.tsx          |  15 ++-
 .../spreadsheets/spending-spreadsheet.ts      |  48 ++++++--
 .../loot-core/src/types/models/reports.d.ts   |  10 +-
 packages/loot-core/src/types/prefs.d.ts       |   1 +
 upcoming-release-notes/3132.md                |   6 +
 7 files changed, 178 insertions(+), 38 deletions(-)
 create mode 100644 upcoming-release-notes/3132.md

diff --git a/packages/desktop-client/src/components/reports/graphs/SpendingGraph.tsx b/packages/desktop-client/src/components/reports/graphs/SpendingGraph.tsx
index 1592e0b99b..f6ad918a54 100644
--- a/packages/desktop-client/src/components/reports/graphs/SpendingGraph.tsx
+++ b/packages/desktop-client/src/components/reports/graphs/SpendingGraph.tsx
@@ -47,6 +47,7 @@ type CustomTooltipProps = {
   thisMonth?: string;
   lastYear?: string;
   selection?: string;
+  compare?: string;
 };
 
 const CustomTooltip = ({
@@ -56,6 +57,7 @@ const CustomTooltip = ({
   thisMonth,
   lastYear,
   selection,
+  compare,
 }: CustomTooltipProps) => {
   if (active && payload && payload.length) {
     const comparison =
@@ -86,7 +88,7 @@ const CustomTooltip = ({
           <div style={{ lineHeight: 1.5 }}>
             {payload[0].payload.months[thisMonth].cumulative ? (
               <AlignedText
-                left="This month:"
+                left={compare === 'thisMonth' ? 'This month:' : 'Last month:'}
                 right={amountToCurrency(
                   payload[0].payload.months[thisMonth].cumulative * -1,
                 )}
@@ -96,10 +98,12 @@ const CustomTooltip = ({
               <AlignedText
                 left={
                   selection === 'average'
-                    ? 'Average'
+                    ? 'Average:'
                     : selection === lastYear
-                      ? 'Last year'
-                      : 'Last month'
+                      ? 'Last year:'
+                      : compare === 'thisMonth'
+                        ? 'Last month:'
+                        : '2 months ago:'
                 }
                 right={amountToCurrency(comparison)}
               />
@@ -125,6 +129,7 @@ type SpendingGraphProps = {
   data: SpendingEntity;
   compact?: boolean;
   mode: string;
+  compare: string;
 };
 
 export function SpendingGraph({
@@ -132,12 +137,19 @@ export function SpendingGraph({
   data,
   compact,
   mode,
+  compare,
 }: SpendingGraphProps) {
   const privacyMode = usePrivacyMode();
   const balanceTypeOp = 'cumulative';
-  const thisMonth = monthUtils.currentMonth();
-  const lastMonth = monthUtils.subMonths(monthUtils.currentMonth(), 1);
-  const lastYear = monthUtils.prevYear(monthUtils.currentMonth());
+  const thisMonth = monthUtils.subMonths(
+    monthUtils.currentMonth(),
+    compare === 'thisMonth' ? 0 : 1,
+  );
+  const previousMonth = monthUtils.subMonths(
+    monthUtils.currentMonth(),
+    compare === 'thisMonth' ? 1 : 2,
+  );
+  const lastYear = monthUtils.prevYear(thisMonth);
   let selection;
   switch (mode) {
     case 'average':
@@ -147,7 +159,7 @@ export function SpendingGraph({
       selection = lastYear;
       break;
     default:
-      selection = lastMonth;
+      selection = previousMonth;
       break;
   }
 
@@ -256,6 +268,7 @@ export function SpendingGraph({
                       thisMonth={thisMonth}
                       lastYear={lastYear}
                       selection={selection}
+                      compare={compare}
                     />
                   }
                   formatter={numberFormatterTooltip}
diff --git a/packages/desktop-client/src/components/reports/reports/Spending.tsx b/packages/desktop-client/src/components/reports/reports/Spending.tsx
index 529c62c06f..82992ae933 100644
--- a/packages/desktop-client/src/components/reports/reports/Spending.tsx
+++ b/packages/desktop-client/src/components/reports/reports/Spending.tsx
@@ -14,6 +14,7 @@ import { AlignedText } from '../../common/AlignedText';
 import { Block } from '../../common/Block';
 import { Button } from '../../common/Button';
 import { Paragraph } from '../../common/Paragraph';
+import { Select } from '../../common/Select';
 import { Text } from '../../common/Text';
 import { Tooltip } from '../../common/Tooltip';
 import { View } from '../../common/View';
@@ -45,15 +46,19 @@ export function Spending() {
   );
   const [spendingReportTime = 'lastMonth', setSpendingReportTime] =
     useLocalPref('spendingReportTime');
+  const [spendingReportCompare = 'thisMonth', setSpendingReportCompare] =
+    useLocalPref('spendingReportCompare');
 
   const [dataCheck, setDataCheck] = useState(false);
+  const [compare, setCompare] = useState(spendingReportCompare);
   const [mode, setMode] = useState(spendingReportTime);
 
   const parseFilter = spendingReportFilter && JSON.parse(spendingReportFilter);
   const filterSaved =
     JSON.stringify(parseFilter.conditions) === JSON.stringify(conditions) &&
     parseFilter.conditionsOp === conditionsOp &&
-    spendingReportTime === mode;
+    spendingReportTime === mode &&
+    spendingReportCompare === compare;
 
   useEffect(() => {
     const checkFilter =
@@ -70,8 +75,9 @@ export function Spending() {
       conditions,
       conditionsOp,
       setDataCheck,
+      compare,
     });
-  }, [categories, conditions, conditionsOp]);
+  }, [categories, conditions, conditionsOp, compare]);
 
   const data = useReport('default', getGraphData);
   const navigate = useNavigate();
@@ -89,6 +95,7 @@ export function Spending() {
       }),
     );
     setSpendingReportTime(mode);
+    setSpendingReportCompare(compare);
   };
 
   const showAverage =
@@ -99,12 +106,20 @@ export function Spending() {
     ) > 0;
 
   const todayDay =
-    monthUtils.getDay(monthUtils.currentDay()) - 1 >= 28
+    compare === 'lastMonth'
       ? 27
-      : monthUtils.getDay(monthUtils.currentDay()) - 1;
+      : monthUtils.getDay(monthUtils.currentDay()) - 1 >= 28
+        ? 27
+        : monthUtils.getDay(monthUtils.currentDay()) - 1;
 
-  const showLastYear = Math.abs(data.intervalData[27].lastYear) > 0;
-  const showLastMonth = Math.abs(data.intervalData[27].lastMonth) > 0;
+  const showLastYear =
+    Math.abs(
+      data.intervalData[27][
+        compare === 'thisMonth' ? 'lastYear' : 'lastYearPrevious'
+      ],
+    ) > 0;
+  const showPreviousMonth =
+    Math.abs(data.intervalData[27][spendingReportTime]) > 0;
   return (
     <Page
       header={
@@ -231,7 +246,7 @@ export function Spending() {
                     marginBottom: 5,
                   }}
                 >
-                  {showLastMonth && (
+                  {showPreviousMonth && (
                     <View
                       style={{
                         ...styles.mediumText,
@@ -240,24 +255,49 @@ export function Spending() {
                       }}
                     >
                       <AlignedText
-                        left={<Block>Spent MTD:</Block>}
+                        left={
+                          <Block>
+                            Spent{' '}
+                            {compare === 'thisMonth' ? 'MTD' : 'Last Month'}:
+                          </Block>
+                        }
                         right={
                           <Text>
                             <PrivacyFilter blurIntensity={5}>
                               {amountToCurrency(
-                                Math.abs(data.intervalData[todayDay].thisMonth),
+                                Math.abs(
+                                  data.intervalData[todayDay][
+                                    compare === 'thisMonth'
+                                      ? 'thisMonth'
+                                      : 'lastMonth'
+                                  ],
+                                ),
                               )}
                             </PrivacyFilter>
                           </Text>
                         }
                       />
                       <AlignedText
-                        left={<Block>Spent Last MTD:</Block>}
+                        left={
+                          <Block>
+                            Spent{' '}
+                            {compare === 'thisMonth'
+                              ? ' Last MTD'
+                              : '2 Months Ago'}
+                            :
+                          </Block>
+                        }
                         right={
                           <Text>
                             <PrivacyFilter blurIntensity={5}>
                               {amountToCurrency(
-                                Math.abs(data.intervalData[todayDay].lastMonth),
+                                Math.abs(
+                                  data.intervalData[todayDay][
+                                    compare === 'thisMonth'
+                                      ? 'lastMonth'
+                                      : 'twoMonthsPrevious'
+                                  ],
+                                ),
                               )}
                             </PrivacyFilter>
                           </Text>
@@ -267,7 +307,11 @@ export function Spending() {
                   )}
                   {showAverage && (
                     <AlignedText
-                      left={<Block>Spent Average MTD:</Block>}
+                      left={
+                        <Block>
+                          Spent Average{compare === 'thisMonth' && ' MTD'}:
+                        </Block>
+                      }
                       right={
                         <Text>
                           <PrivacyFilter blurIntensity={5}>
@@ -281,7 +325,7 @@ export function Spending() {
                   )}
                 </View>
               </View>
-              {!showLastMonth ? (
+              {!showPreviousMonth ? (
                 <View style={{ marginTop: 30 }}>
                   <h1>Additional data required to generate graph</h1>
                   <Paragraph>
@@ -298,18 +342,46 @@ export function Spending() {
                       flexDirection: 'row',
                     }}
                   >
+                    <Text
+                      style={{
+                        paddingRight: 5,
+                      }}
+                    >
+                      Compare
+                    </Text>
+                    <Select
+                      value={compare}
+                      onChange={e => {
+                        setCompare(e);
+                        if (mode === 'lastMonth') setMode('twoMonthsPrevious');
+                        if (mode === 'twoMonthsPrevious') setMode('lastMonth');
+                      }}
+                      options={[
+                        ['thisMonth', 'this month'],
+                        ['lastMonth', 'last month'],
+                      ]}
+                    />
                     <Text
                       style={{
                         paddingRight: 10,
+                        paddingLeft: 5,
                       }}
                     >
-                      Compare this month to:
+                      to the:
                     </Text>
                     <ModeButton
-                      selected={mode === 'lastMonth'}
-                      onSelect={() => setMode('lastMonth')}
+                      selected={['lastMonth', 'twoMonthsPrevious'].includes(
+                        mode,
+                      )}
+                      onSelect={() =>
+                        setMode(
+                          compare === 'thisMonth'
+                            ? 'lastMonth'
+                            : 'twoMonthsPrevious',
+                        )
+                      }
                     >
-                      Last month
+                      Month previous
                     </ModeButton>
                     {showLastYear && (
                       <ModeButton
@@ -335,6 +407,7 @@ export function Spending() {
                       compact={false}
                       data={data}
                       mode={mode}
+                      compare={compare}
                     />
                   ) : (
                     <LoadingIndicator message="Loading report..." />
diff --git a/packages/desktop-client/src/components/reports/reports/SpendingCard.tsx b/packages/desktop-client/src/components/reports/reports/SpendingCard.tsx
index 94deb49fb3..83a313bcaa 100644
--- a/packages/desktop-client/src/components/reports/reports/SpendingCard.tsx
+++ b/packages/desktop-client/src/components/reports/reports/SpendingCard.tsx
@@ -23,6 +23,9 @@ export function SpendingCard() {
   const [isCardHovered, setIsCardHovered] = useState(false);
   const [spendingReportFilter = ''] = useLocalPref('spendingReportFilter');
   const [spendingReportTime = 'lastMonth'] = useLocalPref('spendingReportTime');
+  const [spendingReportCompare = 'thisMonth'] = useLocalPref(
+    'spendingReportCompare',
+  );
 
   const parseFilter = spendingReportFilter && JSON.parse(spendingReportFilter);
   const getGraphData = useMemo(() => {
@@ -30,18 +33,21 @@ export function SpendingCard() {
       categories,
       conditions: parseFilter.conditions,
       conditionsOp: parseFilter.conditionsOp,
+      compare: spendingReportCompare,
     });
-  }, [categories, parseFilter]);
+  }, [categories, parseFilter, spendingReportCompare]);
 
   const data = useReport('default', getGraphData);
   const todayDay =
-    monthUtils.getDay(monthUtils.currentDay()) - 1 >= 28
+    spendingReportCompare === 'lastMonth'
       ? 27
-      : monthUtils.getDay(monthUtils.currentDay()) - 1;
+      : monthUtils.getDay(monthUtils.currentDay()) - 1 >= 28
+        ? 27
+        : monthUtils.getDay(monthUtils.currentDay()) - 1;
   const difference =
     data &&
     data.intervalData[todayDay][spendingReportTime] -
-      data.intervalData[todayDay].thisMonth;
+      data.intervalData[todayDay][spendingReportCompare];
   const showLastMonth = data && Math.abs(data.intervalData[27].lastMonth) > 0;
 
   return (
@@ -99,6 +105,7 @@ export function SpendingCard() {
             compact={true}
             data={data}
             mode={spendingReportTime}
+            compare={spendingReportCompare}
           />
         ) : (
           <LoadingIndicator message="Loading report..." />
diff --git a/packages/desktop-client/src/components/reports/spreadsheets/spending-spreadsheet.ts b/packages/desktop-client/src/components/reports/spreadsheets/spending-spreadsheet.ts
index 205a1b160b..718203c73a 100644
--- a/packages/desktop-client/src/components/reports/spreadsheets/spending-spreadsheet.ts
+++ b/packages/desktop-client/src/components/reports/spreadsheets/spending-spreadsheet.ts
@@ -25,6 +25,7 @@ type createSpendingSpreadsheetProps = {
   conditions?: RuleConditionEntity[];
   conditionsOp?: string;
   setDataCheck?: (value: boolean) => void;
+  compare?: string;
 };
 
 export function createSpendingSpreadsheet({
@@ -32,11 +33,20 @@ export function createSpendingSpreadsheet({
   conditions = [],
   conditionsOp,
   setDataCheck,
+  compare,
 }: createSpendingSpreadsheetProps) {
-  const [startDate, endDate] = getSpecificRange(3, null, 'Months');
+  const thisMonth = monthUtils.subMonths(
+    monthUtils.currentMonth(),
+    compare === 'thisMonth' ? 0 : 1,
+  );
+  const [startDate, endDate] = getSpecificRange(
+    compare === 'thisMonth' ? 3 : 4,
+    null,
+    'Months',
+  );
   const [lastYearStartDate, lastYearEndDate] = getSpecificRange(
-    12,
-    0,
+    13,
+    1,
     'Months',
   );
   const interval = 'Daily';
@@ -92,6 +102,14 @@ export function createSpendingSpreadsheet({
         return { month, perMonthAssets: 0, perMonthDebts: 0 };
       });
 
+    months.unshift({
+      month: monthUtils.prevYear(
+        monthUtils.subMonths(monthUtils.currentMonth(), 1),
+      ),
+      perMonthAssets: 0,
+      perMonthDebts: 0,
+    });
+
     months.unshift({
       month: monthUtils.prevYear(monthUtils.currentMonth()),
       perMonthAssets: 0,
@@ -141,10 +159,22 @@ export function createSpendingSpreadsheet({
             });
             if (
               month.month !== monthUtils.currentMonth() &&
-              month.month !== monthUtils.prevYear(monthUtils.currentMonth())
+              month.month !== thisMonth &&
+              month.month !== monthUtils.prevYear(monthUtils.currentMonth()) &&
+              month.month !==
+                monthUtils.prevYear(
+                  monthUtils.subMonths(monthUtils.currentMonth(), 1),
+                )
             ) {
-              averageSum += cumulativeAssets + cumulativeDebts;
-              monthCount += 1;
+              if (day === '28') {
+                if (monthUtils.getMonthEnd(intervalItem) === intervalItem) {
+                  averageSum += cumulativeAssets + cumulativeDebts;
+                  monthCount += 1;
+                }
+              } else {
+                averageSum += cumulativeAssets + cumulativeDebts;
+                monthCount += 1;
+              }
             }
 
             arr.push({
@@ -181,9 +211,11 @@ export function createSpendingSpreadsheet({
         months: indexedData,
         day,
         average: integerToAmount(averageSum) / monthCount,
-        thisMonth: dayData[4].cumulative,
-        lastMonth: dayData[3].cumulative,
+        thisMonth: dayData[dayData.length - 1].cumulative,
+        lastMonth: dayData[dayData.length - 2].cumulative,
+        twoMonthsPrevious: dayData[dayData.length - 3].cumulative,
         lastYear: dayData[0].cumulative,
+        lastYearPrevious: dayData[1].cumulative,
       };
     });
 
diff --git a/packages/loot-core/src/types/models/reports.d.ts b/packages/loot-core/src/types/models/reports.d.ts
index 3fd9a0a424..f336dbeb37 100644
--- a/packages/loot-core/src/types/models/reports.d.ts
+++ b/packages/loot-core/src/types/models/reports.d.ts
@@ -32,7 +32,13 @@ export type balanceTypeOpType =
   | 'netAssets'
   | 'netDebts';
 
-export type spendingReportTimeType = 'lastMonth' | 'lastYear' | 'average';
+export type spendingReportTimeType =
+  | 'average'
+  | 'thisMonth'
+  | 'lastMonth'
+  | 'twoMonthsPrevious'
+  | 'lastYear'
+  | 'lastYearPrevious';
 
 export type SpendingMonthEntity = Record<
   string | number,
@@ -59,7 +65,9 @@ export interface SpendingEntity {
     average: number;
     thisMonth: number;
     lastMonth: number;
+    twoMonthsPrevious: number;
     lastYear: number;
+    lastYearPrevious: number;
   }[];
   startDate?: string;
   endDate?: string;
diff --git a/packages/loot-core/src/types/prefs.d.ts b/packages/loot-core/src/types/prefs.d.ts
index b859d537f7..2a578a845b 100644
--- a/packages/loot-core/src/types/prefs.d.ts
+++ b/packages/loot-core/src/types/prefs.d.ts
@@ -54,6 +54,7 @@ export type LocalPrefs = Partial<
     reportsViewLabel: boolean;
     spendingReportFilter: string;
     spendingReportTime: spendingReportTimeType;
+    spendingReportCompare: spendingReportTimeType;
     sidebarWidth: number;
     'mobile.showSpentColumn': boolean;
   } & Record<`flags.${FeatureFlag}`, boolean>
diff --git a/upcoming-release-notes/3132.md b/upcoming-release-notes/3132.md
new file mode 100644
index 0000000000..e4067c388f
--- /dev/null
+++ b/upcoming-release-notes/3132.md
@@ -0,0 +1,6 @@
+---
+category: Enhancements
+authors: [carkom]
+---
+
+In spending report - adding last month as an option for the primary graph