diff --git a/packages/desktop-client/src/components/reports/ChooseGraph.tsx b/packages/desktop-client/src/components/reports/ChooseGraph.tsx index dce8850f8fa..1eef9fabc0c 100644 --- 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({ ; groupBy: string; + interval: string; }; -export function ReportLegend({ legend, groupBy }: ReportLegendProps) { +export function ReportLegend({ legend, groupBy, interval }: ReportLegendProps) { return ( - {groupBy} + {groupBy === 'Interval' + ? ReportOptions.intervalMap.get(interval) + : groupBy} {legend && diff --git a/packages/desktop-client/src/components/reports/ReportOptions.ts b/packages/desktop-client/src/components/reports/ReportOptions.ts index a79c2059abf..1f868ef1fdd 100644 --- 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 index 46981a2c085..6bf50b8463f 100644 --- 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', }} > - + Mode: - + Split: - {/* //It would be nice to retain this for future usage - - - Interval: - - { + setInterval(e); + onReportChange({ type: 'modify' }); + }} + options={ReportOptions.interval.map(option => [ + option.description, + option.description, + ])} + disabledKeys={ + customReportItems.mode === 'time' + ? ['Monthly', 'Yearly'] + : ['Yearly'] + } + /> + + +