diff --git a/packages/desktop-client/src/components/reports/ReportOptions.ts b/packages/desktop-client/src/components/reports/ReportOptions.ts
index d8eda05e91ecf921720ec9279a89c10f01ca03ab..b62b6c367b30fed0ae07aa81df11167ad00b1865 100644
--- a/packages/desktop-client/src/components/reports/ReportOptions.ts
+++ b/packages/desktop-client/src/components/reports/ReportOptions.ts
@@ -64,7 +64,7 @@ const intervalOptions = [
];
export const ReportOptions = {
- groupBy: groupByOptions,
+ groupBy: groupByOptions.map(item => item.description),
balanceType: balanceTypeOptions,
balanceTypeMap: new Map(
balanceTypeOptions.map(item => [item.description, item.format]),
diff --git a/packages/desktop-client/src/components/reports/ReportSidebar.jsx b/packages/desktop-client/src/components/reports/ReportSidebar.jsx
index 1c0125d39bddde708fc4de21de8986651a7b47e2..2b42b4af260ad159fd905f8315cd16d242d7b629 100644
--- a/packages/desktop-client/src/components/reports/ReportSidebar.jsx
+++ b/packages/desktop-client/src/components/reports/ReportSidebar.jsx
@@ -27,8 +27,6 @@ export function ReportSidebar({
dateRangeLine,
allMonths,
setDateRange,
- typeDisabled,
- setTypeDisabled,
setGraphType,
setGroupBy,
setInterval,
@@ -41,8 +39,10 @@ export function ReportSidebar({
setShowUncategorized,
setSelectedCategories,
onChangeDates,
- onChangeViews,
onReportChange,
+ disabledItems,
+ defaultItems,
+ defaultModeItems,
}) {
const [menuOpen, setMenuOpen] = useState(false);
const onSelectRange = cond => {
@@ -87,50 +87,25 @@ export function ReportSidebar({
const onChangeMode = cond => {
onReportChange({ type: 'modify' });
setMode(cond);
+ let graph;
if (cond === 'time') {
- if (customReportItems.graphType === 'TableGraph') {
- setTypeDisabled([]);
- } else {
- setTypeDisabled(['Net']);
- if (['Net'].includes(customReportItems.balanceType)) {
- setBalanceType('Payment');
- }
- }
if (customReportItems.graphType === 'BarGraph') {
setGraphType('StackedBarGraph');
- }
- if (['AreaGraph', 'DonutGraph'].includes(customReportItems.graphType)) {
- setGraphType('TableGraph');
- onChangeViews('viewLegend', false);
- }
- if (customReportItems.groupBy === 'Interval') {
- setGroupBy('Category');
+ graph = 'StackedBarGraph';
}
} else {
if (customReportItems.graphType === 'StackedBarGraph') {
setGraphType('BarGraph');
- } else {
- setTypeDisabled([]);
+ graph = 'BarGraph';
}
}
+ defaultModeItems(graph, cond);
};
const onChangeSplit = cond => {
onReportChange({ type: 'modify' });
setGroupBy(cond);
- if (customReportItems.mode === 'total') {
- if (customReportItems.graphType !== 'TableGraph') {
- setTypeDisabled(
- customReportItems.groupBy !== 'Interval' ? [] : ['Net'],
- );
- }
- }
- if (
- ['Net'].includes(customReportItems.balanceType) &&
- customReportItems.graphType !== 'TableGraph'
- ) {
- setBalanceType('Payment');
- }
+ defaultItems(cond);
};
const onChangeBalanceType = cond => {
@@ -196,17 +171,8 @@ export function ReportSidebar({
<Select
value={customReportItems.groupBy}
onChange={e => onChangeSplit(e)}
- options={ReportOptions.groupBy.map(option => [
- option.description,
- option.description,
- ])}
- disabledKeys={
- customReportItems.mode === 'time'
- ? ['Interval']
- : customReportItems.graphType === 'AreaGraph'
- ? ['Category', 'Group', 'Payee', 'Account']
- : []
- }
+ options={ReportOptions.groupBy.map(option => [option, option])}
+ disabledKeys={disabledItems('split')}
/>
</View>
<View
@@ -226,7 +192,7 @@ export function ReportSidebar({
option.description,
option.description,
])}
- disabledKeys={typeDisabled}
+ disabledKeys={disabledItems('type')}
/>
</View>
<View
diff --git a/packages/desktop-client/src/components/reports/ReportTopbar.jsx b/packages/desktop-client/src/components/reports/ReportTopbar.jsx
index 81728a30b4877741faf9392e4a99e820613a0e6e..10e8eaf2363b418f0df6a2c590188783e0463622 100644
--- a/packages/desktop-client/src/components/reports/ReportTopbar.jsx
+++ b/packages/desktop-client/src/components/reports/ReportTopbar.jsx
@@ -21,15 +21,14 @@ export function ReportTopbar({
report,
savedStatus,
setGraphType,
- setTypeDisabled,
- setBalanceType,
- setGroupBy,
viewLegend,
viewSummary,
viewLabels,
onApplyFilter,
onChangeViews,
onReportChange,
+ disabledItems,
+ defaultItems,
}) {
return (
<View
@@ -46,10 +45,10 @@ export function ReportTopbar({
onSelect={() => {
onReportChange({ type: 'modify' });
setGraphType('TableGraph');
- onChangeViews('viewLegend', false);
- setTypeDisabled([]);
+ defaultItems('TableGraph');
}}
style={{ marginRight: 15 }}
+ disabled={disabledItems('TableGraph')}
>
<SvgQueue width={15} height={15} />
</GraphButton>
@@ -63,21 +62,17 @@ export function ReportTopbar({
}
onSelect={() => {
onReportChange({ type: 'modify' });
- if (customReportItems.mode === 'total') {
- setGraphType('BarGraph');
- if (['Net'].includes(customReportItems.balanceType)) {
- setBalanceType('Payment');
- }
- setTypeDisabled(
- ['Interval'].includes(customReportItems.groupBy) ? [] : ['Net'],
- );
- } else {
- setGraphType('StackedBarGraph');
- setTypeDisabled(['Net']);
- setBalanceType('Payment');
- }
+ setGraphType(
+ customReportItems.mode === 'total' ? 'BarGraph' : 'StackedBarGraph',
+ );
+ defaultItems(
+ customReportItems.mode === 'total' ? 'BarGraph' : 'StackedBarGraph',
+ );
}}
style={{ marginRight: 15 }}
+ disabled={disabledItems(
+ customReportItems.mode === 'total' ? 'BarGraph' : 'StackedBarGraph',
+ )}
>
<SvgChartBar width={15} height={15} />
</GraphButton>
@@ -87,12 +82,10 @@ export function ReportTopbar({
onSelect={() => {
onReportChange({ type: 'modify' });
setGraphType('AreaGraph');
- setGroupBy('Interval');
- onChangeViews('viewLegend', false);
- setTypeDisabled([]);
+ defaultItems('AreaGraph');
}}
style={{ marginRight: 15 }}
- disabled={customReportItems.mode === 'total' ? false : true}
+ disabled={disabledItems('AreaGraph')}
>
<SvgChart width={15} height={15} />
</GraphButton>
@@ -102,11 +95,10 @@ export function ReportTopbar({
onSelect={() => {
onReportChange({ type: 'modify' });
setGraphType('DonutGraph');
- setTypeDisabled(['Net']);
- setBalanceType('Payment');
+ defaultItems('DonutGraph');
}}
style={{ marginRight: 15 }}
- disabled={customReportItems.mode === 'total' ? false : true}
+ disabled={disabledItems('DonutGraph')}
>
<SvgChartPie width={15} height={15} />
</GraphButton>
@@ -126,12 +118,7 @@ export function ReportTopbar({
}}
style={{ marginRight: 15 }}
title="Show Legend"
- disabled={
- customReportItems.graphType === 'TableGraph' ||
- customReportItems.graphType === 'AreaGraph'
- ? true
- : false
- }
+ disabled={disabledItems('ShowLegend')}
>
<SvgListBullet width={15} height={15} />
</GraphButton>
@@ -152,6 +139,7 @@ export function ReportTopbar({
}}
style={{ marginRight: 15 }}
title="Show Labels"
+ disabled={disabledItems('ShowLabels')}
>
<SvgTag width={15} height={15} />
</GraphButton>
diff --git a/packages/desktop-client/src/components/reports/disabledList.ts b/packages/desktop-client/src/components/reports/disabledList.ts
new file mode 100644
index 0000000000000000000000000000000000000000..b8fdb89d47eb5e1d7fbe54f2b6d3f76b40569cdd
--- /dev/null
+++ b/packages/desktop-client/src/components/reports/disabledList.ts
@@ -0,0 +1,117 @@
+const totalGraphOptions = [
+ {
+ description: 'TableGraph',
+ disabledSplit: [],
+ defaultSplit: 'Category',
+ disabledType: [],
+ defaultType: 'Payment',
+ disableLegend: true,
+ disableLabel: true,
+ },
+ {
+ description: 'BarGraph',
+ disabledSplit: [],
+ defaultSplit: 'Category',
+ disabledType: ['Net'],
+ defaultType: 'Payment',
+ },
+ {
+ description: 'AreaGraph',
+ disabledSplit: ['Category', 'Group', 'Payee', 'Account'],
+ defaultSplit: 'Interval',
+ disabledType: [],
+ defaultType: 'Payment',
+ disableLegend: true,
+ },
+ {
+ description: 'DonutGraph',
+ disabledSplit: [],
+ defaultSplit: 'Category',
+ disabledType: ['Net'],
+ defaultType: 'Payment',
+ },
+];
+
+const timeGraphOptions = [
+ {
+ description: 'TableGraph',
+ disabledSplit: ['Interval'],
+ defaultSplit: 'Category',
+ disabledType: [],
+ defaultType: 'Payment',
+ disableLegend: true,
+ disableLabel: true,
+ },
+ {
+ description: 'StackedBarGraph',
+ disabledSplit: ['Interval'],
+ defaultSplit: 'Category',
+ disabledType: ['Net'],
+ defaultType: 'Payment',
+ },
+];
+
+const modeOptions = [
+ {
+ description: 'total',
+ graphs: totalGraphOptions,
+ disabledGraph: [],
+ defaultGraph: 'TableGraph',
+ },
+ {
+ description: 'time',
+ graphs: timeGraphOptions,
+ disabledGraph: ['AreaGraph', 'DonutGraph'],
+ defaultGraph: 'TableGraph',
+ },
+];
+
+export const disabledList = {
+ mode: modeOptions,
+ modeGraphsMap: new Map(
+ modeOptions.map(item => [item.description, item.disabledGraph]),
+ ),
+ graphSplitMap: new Map(
+ modeOptions.map(item => [
+ item.description,
+ new Map([...item.graphs].map(f => [f.description, f.disabledSplit])),
+ ]),
+ ),
+ graphTypeMap: new Map(
+ modeOptions.map(item => [
+ item.description,
+ new Map([...item.graphs].map(f => [f.description, f.disabledType])),
+ ]),
+ ),
+ graphLegendMap: new Map(
+ modeOptions.map(item => [
+ item.description,
+ new Map([...item.graphs].map(f => [f.description, f.disableLegend])),
+ ]),
+ ),
+ graphLabelsMap: new Map(
+ modeOptions.map(item => [
+ item.description,
+ new Map([...item.graphs].map(f => [f.description, f.disableLabel])),
+ ]),
+ ),
+};
+
+export const defaultsList = {
+ mode: modeOptions,
+ modeGraphsMap: new Map(
+ modeOptions.map(item => [item.description, item.defaultGraph]),
+ ),
+ graphSplitMap: new Map(
+ modeOptions.map(item => [
+ item.description,
+ new Map([...item.graphs].map(f => [f.description, f.defaultSplit])),
+ ]),
+ ),
+ graphTypeMap: new Map(
+ modeOptions.map(item => [
+ item.description,
+ new Map([...item.graphs].map(f => [f.description, f.defaultType])),
+ ]),
+ ),
+};
diff --git a/packages/desktop-client/src/components/reports/reports/CustomReport.jsx b/packages/desktop-client/src/components/reports/reports/CustomReport.jsx
index e94d025d7eaab44282a77beeab3d74fe942828cd..406c14991f95b207957d8de785f22abdb451af1d 100644
--- a/packages/desktop-client/src/components/reports/reports/CustomReport.jsx
+++ b/packages/desktop-client/src/components/reports/reports/CustomReport.jsx
@@ -20,6 +20,7 @@ import { View } from '../../common/View';
import { AppliedFilters } from '../../filters/AppliedFilters';
import { PrivacyFilter } from '../../PrivacyFilter';
import { ChooseGraph } from '../ChooseGraph';
+import { defaultsList, disabledList } from '../disabledList';
import { Header } from '../Header';
import { LoadingIndicator } from '../LoadingIndicator';
import { ReportLegend } from '../ReportLegend';
@@ -57,7 +58,6 @@ export function CustomReport() {
: defaultReport;
const [allMonths, setAllMonths] = useState(null);
- const [typeDisabled, setTypeDisabled] = useState(['Net']);
const [selectedCategories, setSelectedCategories] = useState(
loadReport.selectedCategories,
@@ -230,6 +230,65 @@ export function CustomReport() {
return null;
}
+ const defaultModeItems = (graph, item) => {
+ const chooseGraph = graph || graphType;
+ const newGraph = disabledList.modeGraphsMap.get(item).includes(chooseGraph)
+ ? defaultsList.modeGraphsMap.get(item)
+ : chooseGraph;
+ if (disabledList.modeGraphsMap.get(item).includes(graphType)) {
+ setGraphType(newGraph);
+ }
+
+ if (disabledList.graphSplitMap.get(item).get(newGraph).includes(groupBy)) {
+ setGroupBy(defaultsList.graphSplitMap.get(item).get(newGraph));
+ }
+
+ if (
+ disabledList.graphTypeMap.get(item).get(newGraph).includes(balanceType)
+ ) {
+ setBalanceType(defaultsList.graphTypeMap.get(item).get(newGraph));
+ }
+ };
+
+ const defaultItems = item => {
+ const chooseGraph = ReportOptions.groupBy.includes(item) ? graphType : item;
+ if (
+ disabledList.graphSplitMap.get(mode).get(chooseGraph).includes(groupBy)
+ ) {
+ setGroupBy(defaultsList.graphSplitMap.get(mode).get(chooseGraph));
+ }
+ if (
+ disabledList.graphTypeMap.get(mode).get(chooseGraph).includes(balanceType)
+ ) {
+ setBalanceType(defaultsList.graphTypeMap.get(mode).get(chooseGraph));
+ }
+ };
+
+ const disabledItems = type => {
+ switch (type) {
+ case 'split':
+ return disabledList.graphSplitMap.get(mode).get(graphType);
+ case 'type':
+ return graphType === 'BarGraph' && groupBy === 'Interval'
+ ? []
+ : disabledList.graphTypeMap.get(mode).get(graphType);
+ case 'ShowLegend': {
+ if (disabledList.graphLegendMap.get(mode).get(graphType)) {
+ setViewLegendPref(false);
+ }
+ return disabledList.graphLegendMap.get(mode).get(graphType);
+ }
+ case 'ShowLabels': {
+ if (disabledList.graphLabelsMap.get(mode).get(graphType)) {
+ setViewLabelsPref(false);
+ }
+ return disabledList.graphLabelsMap.get(mode).get(graphType);
+ }
+ default:
+ return disabledList.modeGraphsMap.get(mode).includes(type);
+ }
+ };
+
const onChangeDates = (startDate, endDate) => {
setStartDate(startDate);
setEndDate(endDate);
@@ -344,8 +403,6 @@ export function CustomReport() {
dateRangeLine={dateRangeLine}
allMonths={allMonths}
setDateRange={setDateRange}
- typeDisabled={typeDisabled}
- setTypeDisabled={setTypeDisabled}
setGraphType={setGraphType}
setGroupBy={setGroupBy}
setInterval={setInterval}
@@ -358,8 +415,10 @@ export function CustomReport() {
setShowUncategorized={setShowUncategorized}
setSelectedCategories={setSelectedCategories}
onChangeDates={onChangeDates}
- onChangeViews={onChangeViews}
onReportChange={onReportChange}
+ disabledItems={disabledItems}
+ defaultItems={defaultItems}
+ defaultModeItems={defaultModeItems}
/>
<View
style={{
@@ -371,15 +430,14 @@ export function CustomReport() {
report={report}
savedStatus={savedStatus}
setGraphType={setGraphType}
- setTypeDisabled={setTypeDisabled}
- setBalanceType={setBalanceType}
- setGroupBy={setGroupBy}
viewLegend={viewLegend}
viewSummary={viewSummary}
viewLabels={viewLabels}
onApplyFilter={onApplyFilter}
onChangeViews={onChangeViews}
onReportChange={onReportChange}
+ disabledItems={disabledItems}
+ defaultItems={defaultItems}
/>
{filters && filters.length > 0 && (
<View
diff --git a/upcoming-release-notes/2410.md b/upcoming-release-notes/2410.md
new file mode 100644
index 0000000000000000000000000000000000000000..f97934733ad067e986719d137399c21538c064ee
--- /dev/null
+++ b/upcoming-release-notes/2410.md
@@ -0,0 +1,6 @@
+---
+category: Enhancements
+authors: [carkom]
+---
+
+Create a list where disabled items can be easily managed for custom reports.