Add daily and weekly to custom reports interval list (#2483)

* Button changes and time filters * rename on dashboard * notes * fix time filters * Sort Categories * Page title * category sort order * move button * featureflag * Highlight report name * sankey fix * VRT * remove doubled element * adjust to match master * add Year * notes * lint fix * update names * IntervalsUpdates * fixing bugs * ts updates * lint fix * merge fixes * notes * simplify lookups * Add Daily and Weekly * notes * notes * merge fix * TS fix * Change week start date based on user prefs * fix weeks * fix averages * remove $week * remove date-week * TS fixes
actualbudget · Apr 16, 2024 · d9f5546 · d9f5546
1 parent 77a670b
commit d9f5546
Show file tree

Hide file tree

Showing 15 changed files with 331 additions and 47 deletions.
diff --git a/packages/desktop-client/src/components/reports/ChooseGraph.tsx b/packages/desktop-client/src/components/reports/ChooseGraph.tsx
@@ -1,7 +1,6 @@
 // @ts-strict-ignore
 import React, { useRef } from 'react';
 
-import * as monthUtils from 'loot-core/src/shared/months';
 import { type GroupedEntity } from 'loot-core/src/types/models/reports';
 
 import { type CSSProperties } from '../../style';
@@ -20,8 +19,6 @@ import { ReportTableTotals } from './graphs/tableGraph/ReportTableTotals';
 import { ReportOptions } from './ReportOptions';
 
 type ChooseGraphProps = {
-  startDate: string;
-  endDate: string;
   data: GroupedEntity;
   mode: string;
   graphType: string;
@@ -34,11 +31,10 @@ type ChooseGraphProps = {
   style?: CSSProperties;
   showHiddenCategories?: boolean;
   showOffBudget?: boolean;
+  intervalsCount?: number;
 };
 
 export function ChooseGraph({
-  startDate,
-  endDate,
   data,
   mode,
   graphType,
@@ -51,8 +47,8 @@ export function ChooseGraph({
   style,
   showHiddenCategories,
   showOffBudget,
+  intervalsCount,
 }: ChooseGraphProps) {
-  const intervals: string[] = monthUtils.rangeInclusive(startDate, endDate);
   const graphStyle = compact ? { ...style } : { flexGrow: 1 };
   const balanceTypeOp = ReportOptions.balanceTypeMap.get(balanceType);
   const groupByData =
@@ -166,7 +162,7 @@ export function ChooseGraph({
           groupBy={groupBy}
           data={data[groupByData]}
           mode={mode}
-          intervalsCount={intervals.length}
+          intervalsCount={intervalsCount}
           compact={compact}
           style={rowStyle}
           compactStyle={compactStyle}
@@ -177,7 +173,7 @@ export function ChooseGraph({
           data={data}
           mode={mode}
           balanceTypeOp={balanceTypeOp}
-          intervalsCount={intervals.length}
+          intervalsCount={intervalsCount}
           compact={compact}
           style={rowStyle}
           compactStyle={compactStyle}

diff --git a/packages/desktop-client/src/components/reports/ReportOptions.ts b/packages/desktop-client/src/components/reports/ReportOptions.ts
@@ -45,24 +45,106 @@ const groupByOptions = [
 ];
 
 const dateRangeOptions = [
-  { description: 'This month', name: 0, Yearly: false, Monthly: true },
-  { description: 'Last month', name: 1, Yearly: false, Monthly: true },
-  { description: 'Last 3 months', name: 2, Yearly: false, Monthly: true },
-  { description: 'Last 6 months', name: 5, Yearly: false, Monthly: true },
-  { description: 'Last 12 months', name: 11, Yearly: false, Monthly: true },
+  {
+    description: 'This week',
+    type: 'Weeks',
+    name: 0,
+    Yearly: false,
+    Monthly: false,
+    Daily: true,
+    Weekly: true,
+  },
+  {
+    description: 'Last week',
+    type: 'Weeks',
+    name: 1,
+    Yearly: false,
+    Monthly: false,
+    Daily: true,
+    Weekly: true,
+  },
+  {
+    description: 'This month',
+    type: 'Months',
+    name: 0,
+    Yearly: false,
+    Monthly: true,
+    Daily: true,
+    Weekly: true,
+  },
+  {
+    description: 'Last month',
+    type: 'Months',
+    name: 1,
+    Yearly: false,
+    Monthly: true,
+    Daily: true,
+    Weekly: true,
+  },
+  {
+    description: 'Last 3 months',
+    type: 'Months',
+    name: 2,
+    Yearly: false,
+    Monthly: true,
+    Daily: true,
+    Weekly: true,
+  },
+  {
+    description: 'Last 6 months',
+    type: 'Months',
+    name: 5,
+    Yearly: false,
+    Monthly: true,
+    Daily: false,
+  },
+  {
+    description: 'Last 12 months',
+    type: 'Months',
+    name: 11,
+    Yearly: false,
+    Monthly: true,
+    Daily: false,
+  },
   {
     description: 'Year to date',
     name: 'yearToDate',
     Yearly: true,
     Monthly: true,
+    Daily: true,
+    Weekly: true,
+  },
+  {
+    description: 'Last year',
+    name: 'lastYear',
+    Yearly: true,
+    Monthly: true,
+    Daily: true,
+    Weekly: true,
+  },
+  {
+    description: 'All time',
+    name: 'allTime',
+    Yearly: true,
+    Monthly: true,
+    Daily: true,
+    Weekly: true,
   },
-  { description: 'Last year', name: 'lastYear', Yearly: true, Monthly: true },
-  { description: 'All time', name: 'allMonths', Yearly: true, Monthly: true },
 ];
 
 const intervalOptions = [
-  //{ value: 1, description: 'Daily', name: 'Day'},
-  //{ value: 2, description: 'Weekly', name: 'Week'},
+  {
+    description: 'Daily',
+    name: 'Day',
+    format: 'yyyy-MM-dd',
+    range: 'dayRangeInclusive',
+  },
+  {
+    description: 'Weekly',
+    name: 'Week',
+    format: 'yyyy-MM-dd',
+    range: 'weekRangeInclusive',
+  },
   //{ value: 3, description: 'Fortnightly', name: 3},
   {
     description: 'Monthly',
@@ -88,6 +170,9 @@ export const ReportOptions = {
   dateRangeMap: new Map(
     dateRangeOptions.map(item => [item.description, item.name]),
   ),
+  dateRangeType: new Map(
+    dateRangeOptions.map(item => [item.description, item.type]),
+  ),
   interval: intervalOptions,
   intervalMap: new Map(
     intervalOptions.map(item => [item.description, item.name]),

diff --git a/packages/desktop-client/src/components/reports/ReportSidebar.jsx b/packages/desktop-client/src/components/reports/ReportSidebar.jsx
@@ -11,6 +11,7 @@ import { View } from '../common/View';
 import { Tooltip } from '../tooltips';
 
 import { CategorySelector } from './CategorySelector';
+import { defaultsList } from './disabledList';
 import { getLiveRange } from './getLiveRange';
 import { ModeButton } from './ModeButton';
 import { ReportOptions } from './ReportOptions';
@@ -39,6 +40,7 @@ export function ReportSidebar({
   defaultItems,
   defaultModeItems,
   earliestTransaction,
+  firstDayOfWeekIdx,
 }) {
   const [menuOpen, setMenuOpen] = useState(false);
   const onSelectRange = cond => {
@@ -49,7 +51,9 @@ export function ReportSidebar({
     );
     onReportChange({ type: 'modify' });
     setDateRange(cond);
-    onChangeDates(...getLiveRange(cond, earliestTransaction));
+    onChangeDates(
+      ...getLiveRange(cond, earliestTransaction, firstDayOfWeekIdx),
+    );
   };
 
   const onChangeMode = cond => {
@@ -207,7 +211,7 @@ export function ReportSidebar({
                   .map(int => int.description)
                   .includes(customReportItems.dateRange)
               ) {
-                onSelectRange('Year to date');
+                onSelectRange(defaultsList.intervalRange.get(e));
               }
             }}
             options={ReportOptions.interval.map(option => [
@@ -396,7 +400,7 @@ export function ReportSidebar({
               options={ReportOptions.dateRange
                 .filter(f => f[customReportItems.interval])
                 .map(option => [option.description, option.description])}
-              line={customReportItems.interval === 'Monthly' && dateRangeLine}
+              line={dateRangeLine > 0 && dateRangeLine}
             />
           </View>
         ) : (
@@ -419,6 +423,7 @@ export function ReportSidebar({
                       newValue,
                       customReportItems.endDate,
                       customReportItems.interval,
+                      firstDayOfWeekIdx,
                     ),
                   )
                 }
@@ -448,6 +453,7 @@ export function ReportSidebar({
                       customReportItems.startDate,
                       newValue,
                       customReportItems.interval,
+                      firstDayOfWeekIdx,
                     ),
                   )
                 }

diff --git a/packages/desktop-client/src/components/reports/ReportSummary.tsx b/packages/desktop-client/src/components/reports/ReportSummary.tsx
@@ -64,12 +64,20 @@ export function ReportSummary({
           {monthUtils.format(
             startDate,
             ReportOptions.intervalFormat.get(interval),
-          )}{' '}
-          -{' '}
+          )}
           {monthUtils.format(
-            endDate,
+            startDate,
             ReportOptions.intervalFormat.get(interval),
-          )}
+          ) !==
+            monthUtils.format(
+              endDate,
+              ReportOptions.intervalFormat.get(interval),
+            ) &&
+            ' to ' +
+              monthUtils.format(
+                endDate,
+                ReportOptions.intervalFormat.get(interval),
+              )}
         </Text>
       </View>
       <View

diff --git a/packages/desktop-client/src/components/reports/disabledList.ts b/packages/desktop-client/src/components/reports/disabledList.ts
@@ -1,3 +1,22 @@
+const intervalOptions = [
+  {
+    description: 'Daily',
+    defaultRange: 'This month',
+  },
+  {
+    description: 'Weekly',
+    defaultRange: 'Last 3 months',
+  },
+  {
+    description: 'Monthly',
+    defaultRange: 'Last 6 months',
+  },
+  {
+    description: 'Yearly',
+    defaultRange: 'Year to date',
+  },
+];
+
 const totalGraphOptions = [
   {
     description: 'TableGraph',
@@ -123,4 +142,7 @@ export const defaultsList = {
       new Map([...item.graphs].map(f => [f.description, f.defaultType])),
     ]),
   ),
+  intervalRange: new Map(
+    intervalOptions.map(item => [item.description, item.defaultRange]),
+  ),
 };
diff --git a/packages/desktop-client/src/components/reports/getLiveRange.ts b/packages/desktop-client/src/components/reports/getLiveRange.ts
@@ -3,7 +3,11 @@ import * as monthUtils from 'loot-core/src/shared/months';
 import { ReportOptions } from './ReportOptions';
 import { getSpecificRange, validateRange } from './reportRanges';
 
-export function getLiveRange(cond: string, earliestTransaction: string) {
+export function getLiveRange(
+  cond: string,
+  earliestTransaction: string,
+  firstDayOfWeekIdx?: 0 | 1 | 2 | 3 | 4 | 5 | 6,
+) {
   let dateStart;
   let dateEnd;
   const rangeName = ReportOptions.dateRangeMap.get(cond);
@@ -25,15 +29,17 @@ export function getLiveRange(cond: string, earliestTransaction: string) {
           '-31',
       );
       break;
-    case 'allMonths':
+    case 'allTime':
       dateStart = earliestTransaction;
       dateEnd = monthUtils.currentDay();
       break;
     default:
       if (typeof rangeName === 'number') {
         [dateStart, dateEnd] = getSpecificRange(
           rangeName,
-          cond === 'Last month' ? 0 : null,
+          cond === 'Last month' || cond === 'Last week' ? 0 : null,
+          ReportOptions.dateRangeType.get(cond),
+          firstDayOfWeekIdx,
         );
       } else {
         break;