Added Year comparison feature.

packages/desktop-client/src/components/reports/graphs/SpendingGraph.tsx

@@ -45,6 +45,7 @@ type CustomTooltipProps = {
   payload?: PayloadItem[];
   balanceTypeOp?: string;
   thisMonth?: string;
+  lastYear?: string;
   selection?: string;
 };
 
@@ -53,6 +54,7 @@ const CustomTooltip = ({
   payload,
   balanceTypeOp,
   thisMonth,
+  lastYear,
   selection,
 }: CustomTooltipProps) => {
   if (active && payload && payload.length) {
@@ -92,7 +94,13 @@ const CustomTooltip = ({
             )}
             {['cumulative'].includes(balanceTypeOp) && (
               <AlignedText
-                left={selection === 'average' ? 'Average' : 'Last month:'}
+                left={
+                  selection === 'average'
+                    ? 'Average'
+                    : selection === lastYear
+                      ? 'Last year'
+                      : 'Last month'
+                }
                 right={amountToCurrency(comparison)}
               />
             )}
@@ -129,7 +137,15 @@ export function SpendingGraph({
   const balanceTypeOp = 'cumulative';
   const thisMonth = monthUtils.currentMonth();
   const lastMonth = monthUtils.subMonths(monthUtils.currentMonth(), 1);
-  const selection = mode.toLowerCase() === 'average' ? 'average' : lastMonth;
+  const lastYear = monthUtils.prevYear(monthUtils.currentMonth());
+  let selection;
+  if (mode.toLowerCase() === 'average') {
+    selection = 'average';
+  } else if (mode.toLowerCase() === 'last month') {
+    selection = lastMonth;
+  } else {
+    selection = lastYear;
+  }
   const thisMonthMax = data.intervalData.reduce((a, b) =>
     a.months[thisMonth][balanceTypeOp] < b.months[thisMonth][balanceTypeOp]
       ? a
@@ -139,11 +155,15 @@ export function SpendingGraph({
     selection === 'average'
       ? data.intervalData[27].average
       : data.intervalData.reduce((a, b) =>
-          a.months[lastMonth][balanceTypeOp] <
-          b.months[lastMonth][balanceTypeOp]
+          a.months[selection === lastMonth ? lastMonth : lastYear][
+            balanceTypeOp
+          ] <
+          b.months[selection === lastMonth ? lastMonth : lastYear][
+            balanceTypeOp
+          ]
             ? a
             : b,
-        ).months[lastMonth][balanceTypeOp];
+        ).months[selection === lastMonth ? lastMonth : lastYear][balanceTypeOp];
   const maxYAxis = selectionMax > thisMonthMax;
   const dataMax = Math.max(
     ...data.intervalData.map(i => i.months[thisMonth].cumulative),
@@ -233,6 +253,7 @@ export function SpendingGraph({
                     <CustomTooltip
                       balanceTypeOp={balanceTypeOp}
                       thisMonth={thisMonth}
+                      lastYear={lastYear}
                       selection={selection}
                     />
                   }

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

@@ -47,13 +47,13 @@ export function Spending() {
       conditions: filters,
       conditionsOp,
       setDataCheck,
+      mode,
     });
-  }, [categories, filters, conditionsOp]);
+  }, [categories, filters, conditionsOp, mode]);
 
   const data = useReport('default', getGraphData);
   const navigate = useNavigate();
   const { isNarrowWidth } = useResponsive();
-
   if (!data) {
     return null;
   }
@@ -175,8 +175,8 @@ export function Spending() {
                           {amountToCurrency(
                             Math.abs(
                               data.intervalData[
-                                monthUtils.getDay(monthUtils.currentDay()) >= 29
-                                  ? 28
+                                monthUtils.getDay(monthUtils.currentDay()) >= 28
+                                  ? 27
                                   : monthUtils.getDay(monthUtils.currentDay()) -
                                     1
                               ].thisMonth,
@@ -194,8 +194,8 @@ export function Spending() {
                           {amountToCurrency(
                             Math.abs(
                               data.intervalData[
-                                monthUtils.getDay(monthUtils.currentDay()) >= 29
-                                  ? 28
+                                monthUtils.getDay(monthUtils.currentDay()) >= 28
+                                  ? 27
                                   : monthUtils.getDay(monthUtils.currentDay()) -
                                     1
                               ].lastMonth,
@@ -215,8 +215,8 @@ export function Spending() {
                               Math.abs(
                                 data.intervalData[
                                   monthUtils.getDay(monthUtils.currentDay()) >=
-                                  29
-                                    ? 28
+                                  28
+                                    ? 27
                                     : monthUtils.getDay(
                                         monthUtils.currentDay(),
                                       ) - 1
@@ -249,6 +249,12 @@ export function Spending() {
                 >
                   Last month
                 </ModeButton>
+                <ModeButton
+                  selected={mode === 'Last year'}
+                  onSelect={() => setMode('Last year')}
+                >
+                  Last year
+                </ModeButton>
                 {showAverage && (
                   <ModeButton
                     selected={mode === 'Average'}

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

@@ -27,11 +27,11 @@ export function SpendingCard() {
   }, [categories]);
 
   const data = useReport('default', getGraphData);
+  const todayDate = monthUtils.getDay(monthUtils.currentDay());
   const difference =
     data &&
-    data.intervalData[monthUtils.getDay(monthUtils.currentDay()) - 1].average -
-      data.intervalData[monthUtils.getDay(monthUtils.currentDay()) - 1]
-        .thisMonth;
+    data.intervalData[todayDate >= 28 ? 27 : todayDate - 1].average -
+      data.intervalData[todayDate >= 28 ? 27 : todayDate - 1].thisMonth;
 
   return (
     <ReportCard flex="1" to="/reports/spending">

packages/desktop-client/src/components/reports/spreadsheets/spending-spreadsheet.ts

@@ -1,5 +1,4 @@
 // @ts-strict-ignore
-
 import keyBy from 'lodash/keyBy';
 
 import { runQuery } from 'loot-core/src/client/query-helpers';
@@ -26,15 +25,18 @@ type createSpendingSpreadsheetProps = {
   conditions?: RuleConditionEntity[];
   conditionsOp?: string;
   setDataCheck?: (value: boolean) => void;
+  mode?: string;
 };
 
 export function createSpendingSpreadsheet({
   categories,
   conditions = [],
   conditionsOp,
   setDataCheck,
+  mode,
 }: createSpendingSpreadsheetProps) {
   const [startDate, endDate] = getSpecificRange(3, null, 'Months');
+  const [startDate2, endDate2] = getSpecificRange(13, 1, 'Months');
   const interval = 'Daily';
 
   return async (
@@ -45,7 +47,6 @@ export function createSpendingSpreadsheet({
       conditions: conditions.filter(cond => !cond.customName),
     });
     const conditionsOpKey = conditionsOp === 'or' ? '$or' : '$and';
-
     const [assets, debts] = await Promise.all([
       runQuery(
         makeQuery(
@@ -70,8 +71,38 @@ export function createSpendingSpreadsheet({
         ),
       ).then(({ data }) => data),
     ]);
+    if (mode === 'Last year') {
+      const [assetsLastYear, debtsLastYear] = await Promise.all([
+        runQuery(
+          makeQuery(
+            'assets',
+            startDate2,
+            endDate2,
+            interval,
+            categories.list,
+            conditionsOpKey,
+            filters,
+          ),
+        ).then(({ data }) => data),
+        runQuery(
+          makeQuery(
+            'debts',
+            startDate2,
+            endDate2,
+            interval,
+            categories.list,
+            conditionsOpKey,
+            filters,
+          ),
+        ).then(({ data }) => data),
+      ]);
+      // Add data from last year to existing arrays
+      assets.push(...assetsLastYear);
+      debts.push(...debtsLastYear);
+    }
 
     const intervals = monthUtils.dayRangeInclusive(startDate, endDate);
+    intervals.push(...monthUtils.dayRangeInclusive(startDate2, endDate2));
     const days = [...Array(29).keys()]
       .filter(f => f > 0)
       .map(n => n.toString().padStart(2, '0'));
@@ -85,6 +116,12 @@ export function createSpendingSpreadsheet({
         return { month, perMonthAssets: 0, perMonthDebts: 0 };
       });
 
+    months.unshift({
+      month: monthUtils.prevYear(monthUtils.currentMonth()),
+      perMonthAssets: 0,
+      perMonthDebts: 0,
+    });
+
     const intervalData = days.map(day => {
       let averageSum = 0;
       let monthCount = 0;
@@ -96,7 +133,6 @@ export function createSpendingSpreadsheet({
               : intervalItem.substring(8, 10);
           let perIntervalAssets = 0;
           let perIntervalDebts = 0;
-
           if (
             month.month === monthUtils.getMonth(intervalItem) &&
             day === offsetDay
@@ -126,7 +162,10 @@ export function createSpendingSpreadsheet({
               }
               return null;
             });
-            if (month.month !== monthUtils.currentMonth()) {
+            if (
+              month.month !== monthUtils.currentMonth() &&
+              month.month !== monthUtils.prevYear(monthUtils.currentMonth())
+            ) {
               averageSum += cumulativeAssets + cumulativeDebts;
               monthCount += 1;
             }
@@ -165,6 +204,7 @@ export function createSpendingSpreadsheet({
         average: integerToAmount(averageSum) / monthCount,
         thisMonth: dayData[3].cumulative,
         lastMonth: dayData[2].cumulative,
+        lastYear: dayData[0].cumulative,
       };
     });
 

upcoming-release-notes/2806.md

@@ -0,0 +1,6 @@
+---
+category: Features
+authors: [Crazypkr1099]
+---
+
+Add Year Spending Comparison Feature & Bug Fixes