Add interval split and menu items to custom reports (actualbudget#2389)

* Add interval split and menu items * notes
FlorianLang06 · Feb 28, 2024 · 3600626 · 3600626
1 parent 8afd032
commit 3600626
Show file tree

Hide file tree

Showing 17 changed files with 114 additions and 76 deletions.
diff --git a/packages/desktop-client/src/components/reports/ChooseGraph.tsx b/packages/desktop-client/src/components/reports/ChooseGraph.tsx
@@ -27,6 +27,7 @@ type ChooseGraphProps = {
   graphType: string;
   balanceType: string;
   groupBy: string;
+  interval: string;
   setScrollWidth?: (value: number) => void;
   viewLabels?: boolean;
   compact?: boolean;
@@ -41,6 +42,7 @@ export function ChooseGraph({
   graphType,
   balanceType,
   groupBy,
+  interval,
   setScrollWidth,
   viewLabels,
   compact,
@@ -52,7 +54,7 @@ export function ChooseGraph({
   const groupByData =
     groupBy === 'Category'
       ? 'groupedData'
-      : ['Month', 'Year'].includes(groupBy)
+      : groupBy === 'Interval'
         ? 'monthData'
         : 'data';
 
@@ -142,8 +144,9 @@ export function ChooseGraph({
         <ReportTableHeader
           headerScrollRef={headerScrollRef}
           handleScroll={handleScroll}
-          interval={mode === 'time' && data.monthData}
+          data={mode === 'time' && data.monthData}
           groupBy={groupBy}
+          interval={interval}
           balanceType={balanceType}
           compact={compact}
           style={rowStyle}

diff --git a/packages/desktop-client/src/components/reports/ReportLegend.tsx b/packages/desktop-client/src/components/reports/ReportLegend.tsx
@@ -4,12 +4,15 @@ import { theme, styles } from '../../style';
 import { Text } from '../common/Text';
 import { View } from '../common/View';
 
+import { ReportOptions } from './ReportOptions';
+
 type ReportLegendProps = {
   legend?: Array<{ name: string; color: string }>;
   groupBy: string;
+  interval: string;
 };
 
-export function ReportLegend({ legend, groupBy }: ReportLegendProps) {
+export function ReportLegend({ legend, groupBy, interval }: ReportLegendProps) {
   return (
     <View
       style={{
@@ -28,7 +31,9 @@ export function ReportLegend({ legend, groupBy }: ReportLegendProps) {
           paddingTop: 10,
         }}
       >
-        {groupBy}
+        {groupBy === 'Interval'
+          ? ReportOptions.intervalMap.get(interval)
+          : groupBy}
       </Text>
       <View>
         {legend &&

diff --git a/packages/desktop-client/src/components/reports/ReportOptions.ts b/packages/desktop-client/src/components/reports/ReportOptions.ts
@@ -17,6 +17,7 @@ export const defaultReport: CustomReportEntity = {
   dateRange: 'Last 6 months',
   mode: 'total',
   groupBy: 'Category',
+  interval: 'Monthly',
   balanceType: 'Payment',
   showEmpty: false,
   showOffBudget: false,
@@ -38,8 +39,7 @@ const groupByOptions = [
   { description: 'Group' },
   { description: 'Payee' },
   { description: 'Account' },
-  { description: 'Month' },
-  { description: 'Year' },
+  { description: 'Interval' },
 ];
 
 const dateRangeOptions = [
@@ -53,6 +53,14 @@ const dateRangeOptions = [
   { description: 'All time', name: 'allMonths' },
 ];
 
+const intervalOptions = [
+  //{ value: 1, description: 'Daily', name: 'Day'},
+  //{ value: 2, description: 'Weekly', name: 'Week'},
+  //{ value: 3, description: 'Fortnightly', name: 3},
+  { value: 4, description: 'Monthly', name: 'Month' },
+  { value: 5, description: 'Yearly', name: 'Year' },
+];
+
 export const ReportOptions = {
   groupBy: groupByOptions,
   balanceType: balanceTypeOptions,
@@ -63,17 +71,12 @@ export const ReportOptions = {
   dateRangeMap: new Map(
     dateRangeOptions.map(item => [item.description, item.name]),
   ),
+  interval: intervalOptions,
+  intervalMap: new Map(
+    intervalOptions.map(item => [item.description, item.name]),
+  ),
 };
 
-/*
-const intervalOptions = [
-{ value: 1, description: 'Daily', name: 1,
-{ value: 2, description: 'Weekly', name: 2,
-{ value: 3, description: 'Fortnightly', name: 3,
-{ value: 4, description: 'Monthly', name: 4,
-{ value: 5, description: 'Yearly', name: 5,
-];
-*/
 export type QueryDataEntity = {
   date: string;
   category: string;
@@ -181,11 +184,7 @@ export const groupBySelections = (
       groupByList = accounts;
       groupByLabel = 'account';
       break;
-    case 'Month':
-      groupByList = categoryList;
-      groupByLabel = 'category';
-      break;
-    case 'Year':
+    case 'Interval':
       groupByList = categoryList;
       groupByLabel = 'category';
       break;

diff --git a/packages/desktop-client/src/components/reports/ReportSidebar.jsx b/packages/desktop-client/src/components/reports/ReportSidebar.jsx
@@ -31,6 +31,7 @@ export function ReportSidebar({
   setTypeDisabled,
   setGraphType,
   setGroupBy,
+  setInterval,
   setBalanceType,
   setMode,
   setIsDateStatic,
@@ -97,7 +98,7 @@ export function ReportSidebar({
         setGraphType('TableGraph');
         onChangeViews('viewLegend', false);
       }
-      if (['Month', 'Year'].includes(customReportItems.groupBy)) {
+      if (customReportItems.groupBy === 'Interval') {
         setGroupBy('Category');
       }
     } else {
@@ -115,7 +116,7 @@ export function ReportSidebar({
     if (customReportItems.mode === 'total') {
       if (customReportItems.graphType !== 'TableGraph') {
         setTypeDisabled(
-          !['Month', 'Year'].includes(customReportItems.groupBy) ? [] : ['Net'],
+          customReportItems.groupBy !== 'Interval' ? [] : ['Net'],
         );
       }
     }
@@ -161,7 +162,7 @@ export function ReportSidebar({
             alignItems: 'center',
           }}
         >
-          <Text style={{ width: 40, textAlign: 'right', marginRight: 5 }}>
+          <Text style={{ width: 50, textAlign: 'right', marginRight: 5 }}>
             Mode:
           </Text>
           <ModeButton
@@ -184,7 +185,7 @@ export function ReportSidebar({
             alignItems: 'center',
           }}
         >
-          <Text style={{ width: 40, textAlign: 'right', marginRight: 5 }}>
+          <Text style={{ width: 50, textAlign: 'right', marginRight: 5 }}>
             Split:
           </Text>
           <Select
@@ -196,10 +197,10 @@ export function ReportSidebar({
             ])}
             disabledKeys={
               customReportItems.mode === 'time'
-                ? ['Month', 'Year']
+                ? ['Interval']
                 : customReportItems.graphType === 'AreaGraph'
-                  ? ['Category', 'Group', 'Payee', 'Account', 'Year']
-                  : ['Year']
+                  ? ['Category', 'Group', 'Payee', 'Account']
+                  : []
             }
           />
         </View>
@@ -210,7 +211,7 @@ export function ReportSidebar({
             alignItems: 'center',
           }}
         >
-          <Text style={{ width: 40, textAlign: 'right', marginRight: 5 }}>
+          <Text style={{ width: 50, textAlign: 'right', marginRight: 5 }}>
             Type:
           </Text>
           <Select
@@ -223,38 +224,41 @@ export function ReportSidebar({
             disabledKeys={typeDisabled}
           />
         </View>
-        {/* //It would be nice to retain this for future usage
-            <View
-              style={{
-                flexDirection: 'row',
-                padding: 5,
-                alignItems: 'center',
-              }}
-            >
-              <Text style={{ width: 40, textAlign: 'right', marginRight: 5, paddingLeft: -10 }}>
-                Interval:
-              </Text>
-              <Select
-                value={interval}
-                onChange={setInterval}
-                options={intervalOptions.map(option => [
-                  option.value,
-                  option.description,
-                ])}
-                disabledKeys={
-                  [1,2,3,4,5]
-                }
-              />
-            </View>
-            */}
         <View
           style={{
             flexDirection: 'row',
             padding: 5,
             alignItems: 'center',
           }}
         >
-          <Text style={{ width: 40, textAlign: 'right', marginRight: 5 }} />
+          <Text style={{ width: 50, textAlign: 'right', marginRight: 5 }}>
+            Interval:
+          </Text>
+          <Select
+            value={customReportItems.interval}
+            onChange={e => {
+              setInterval(e);
+              onReportChange({ type: 'modify' });
+            }}
+            options={ReportOptions.interval.map(option => [
+              option.description,
+              option.description,
+            ])}
+            disabledKeys={
+              customReportItems.mode === 'time'
+                ? ['Monthly', 'Yearly']
+                : ['Yearly']
+            }
+          />
+        </View>
+        <View
+          style={{
+            flexDirection: 'row',
+            padding: 5,
+            alignItems: 'center',
+          }}
+        >
+          <Text style={{ width: 50, textAlign: 'right', marginRight: 5 }} />
           <Button
             onClick={() => {
               setMenuOpen(true);
@@ -372,7 +376,7 @@ export function ReportSidebar({
               alignItems: 'center',
             }}
           >
-            <Text style={{ width: 40, textAlign: 'right', marginRight: 5 }}>
+            <Text style={{ width: 50, textAlign: 'right', marginRight: 5 }}>
               Range:
             </Text>
             <Select
@@ -396,7 +400,7 @@ export function ReportSidebar({
                 alignItems: 'center',
               }}
             >
-              <Text style={{ width: 40, textAlign: 'right', marginRight: 5 }}>
+              <Text style={{ width: 50, textAlign: 'right', marginRight: 5 }}>
                 From:
               </Text>
               <Select
@@ -424,7 +428,7 @@ export function ReportSidebar({
                 alignItems: 'center',
               }}
             >
-              <Text style={{ width: 40, textAlign: 'right', marginRight: 5 }}>
+              <Text style={{ width: 50, textAlign: 'right', marginRight: 5 }}>
                 To:
               </Text>
               <Select

diff --git a/packages/desktop-client/src/components/reports/ReportTopbar.jsx b/packages/desktop-client/src/components/reports/ReportTopbar.jsx
@@ -70,9 +70,7 @@ export function ReportTopbar({
               setBalanceType('Payment');
             }
             setTypeDisabled(
-              ['Month', 'Year'].includes(customReportItems.groupBy)
-                ? []
-                : ['Net'],
+              ['Interval'].includes(customReportItems.groupBy) ? [] : ['Net'],
             );
           } else {
             setGraphType('StackedBarGraph');
@@ -90,7 +88,7 @@ export function ReportTopbar({
         onSelect={() => {
           onReportChange({ type: 'modify' });
           setGraphType('AreaGraph');
-          setGroupBy('Month');
+          setGroupBy('Interval');
           onChangeViews('viewLegend', false);
           setTypeDisabled([]);
         }}

diff --git a/packages/desktop-client/src/components/reports/graphs/BarGraph.tsx b/packages/desktop-client/src/components/reports/graphs/BarGraph.tsx
@@ -141,8 +141,8 @@ export function BarGraph({
 }: BarGraphProps) {
   const privacyMode = usePrivacyMode();
 
-  const yAxis = ['Month', 'Year'].includes(groupBy) ? 'date' : 'name';
-  const splitData = ['Month', 'Year'].includes(groupBy) ? 'monthData' : 'data';
+  const yAxis = groupBy === 'Interval' ? 'date' : 'name';
+  const splitData = groupBy === 'Interval' ? 'monthData' : 'data';
   const labelsMargin = viewLabels ? 30 : 0;
 
   const getVal = obj => {

diff --git a/packages/desktop-client/src/components/reports/graphs/DonutGraph.tsx b/packages/desktop-client/src/components/reports/graphs/DonutGraph.tsx
@@ -187,8 +187,8 @@ export function DonutGraph({
   compact,
   viewLabels,
 }: DonutGraphProps) {
-  const yAxis = ['Month', 'Year'].includes(groupBy) ? 'date' : 'name';
-  const splitData = ['Month', 'Year'].includes(groupBy) ? 'monthData' : 'data';
+  const yAxis = groupBy === 'Interval' ? 'date' : 'name';
+  const splitData = groupBy === 'Interval' ? 'monthData' : 'data';
 
   const getVal = obj => {
     if (balanceTypeOp === 'totalDebts') {

diff --git a/packages/desktop-client/src/components/reports/graphs/tableGraph/ReportTableHeader.tsx b/packages/desktop-client/src/components/reports/graphs/tableGraph/ReportTableHeader.tsx
@@ -8,10 +8,12 @@ import { theme } from '../../../../style';
 import { type CSSProperties } from '../../../../style/types';
 import { View } from '../../../common/View';
 import { Row, Cell } from '../../../table';
+import { ReportOptions } from '../../ReportOptions';
 
 type ReportTableHeaderProps = {
   groupBy: string;
-  interval?: DataEntity[];
+  interval?: string;
+  data?: DataEntity[];
   balanceType: string;
   headerScrollRef: RefProp<HTMLDivElement>;
   handleScroll: UIEventHandler<HTMLDivElement>;
@@ -23,6 +25,7 @@ type ReportTableHeaderProps = {
 export function ReportTableHeader({
   groupBy,
   interval,
+  data,
   balanceType,
   headerScrollRef,
   handleScroll,
@@ -61,10 +64,14 @@ export function ReportTableHeader({
             flexShrink: 0,
           }}
           valueStyle={compactStyle}
-          value={groupBy}
+          value={
+            groupBy === 'Interval'
+              ? ReportOptions.intervalMap.get(interval)
+              : groupBy
+          }
         />
-        {interval
-          ? interval.map((header, index) => {
+        {data
+          ? data.map((header, index) => {
               return (
                 <Cell
                   style={{

diff --git a/packages/desktop-client/src/components/reports/graphs/tableGraph/ReportTableList.tsx b/packages/desktop-client/src/components/reports/graphs/tableGraph/ReportTableList.tsx
@@ -28,7 +28,7 @@ export function ReportTableList({
   style,
   compactStyle,
 }: ReportTableListProps) {
-  const groupByItem = ['Month', 'Year'].includes(groupBy) ? 'date' : 'name';
+  const groupByItem = groupBy === 'Interval' ? 'date' : 'name';
 
   type RenderRowProps = {
     index: number;