From 273fa8cd5957817c62283c8a27fddef0a09a0e36 Mon Sep 17 00:00:00 2001 From: Neil <55785687+carkom@users.noreply.github.com> Date: Sun, 17 Dec 2023 22:18:57 +0000 Subject: [PATCH] Custom reports: make views global (#2094) * make views global * notes and lint fixes * fixes * lint fix * fix * fix --- .../src/components/reports/ReportLegend.tsx | 57 ++++++++++--------- .../src/components/reports/ReportSidebar.js | 4 +- .../src/components/reports/ReportSummary.tsx | 2 +- .../src/components/reports/ReportTopbar.js | 14 ++--- .../reports/reports/CustomReport.js | 33 ++++++++--- packages/loot-core/src/types/prefs.d.ts | 3 + upcoming-release-notes/2094.md | 6 ++ 7 files changed, 72 insertions(+), 47 deletions(-) create mode 100644 upcoming-release-notes/2094.md diff --git a/packages/desktop-client/src/components/reports/ReportLegend.tsx b/packages/desktop-client/src/components/reports/ReportLegend.tsx index 5f17f119deb..5ff1b39c53c 100644 --- a/packages/desktop-client/src/components/reports/ReportLegend.tsx +++ b/packages/desktop-client/src/components/reports/ReportLegend.tsx @@ -5,7 +5,7 @@ import Text from '../common/Text'; import View from '../common/View'; type ReportLegendProps = { - legend: Array<{ name: string; color: string }>; + legend?: Array<{ name: string; color: string }>; groupBy: string; }; @@ -31,37 +31,38 @@ function ReportLegend({ legend, groupBy }: ReportLegendProps) { {groupBy} - {legend.map(item => { - return ( - + {legend && + legend.map(item => { + return ( - - {item.name} - - - ); - })} + + + {item.name} + + + ); + })} ); diff --git a/packages/desktop-client/src/components/reports/ReportSidebar.js b/packages/desktop-client/src/components/reports/ReportSidebar.js index d3bad3e9a1a..97b97fcea3f 100644 --- a/packages/desktop-client/src/components/reports/ReportSidebar.js +++ b/packages/desktop-client/src/components/reports/ReportSidebar.js @@ -29,7 +29,6 @@ export function ReportSidebar({ allMonths, graphType, setGraphType, - setViewLegend, typeDisabled, setTypeDisabled, groupBy, @@ -49,6 +48,7 @@ export function ReportSidebar({ categories, selectedCategories, setSelectedCategories, + onChangeViews, }) { const onSelectRange = cond => { setDateRange(cond); @@ -99,7 +99,7 @@ export function ReportSidebar({ } if (['AreaGraph', 'DonutGraph'].includes(graphType)) { setGraphType('TableGraph'); - setViewLegend(false); + onChangeViews('viewLegend', false); } if (['Month', 'Year'].includes(groupBy)) { setGroupBy('Category'); diff --git a/packages/desktop-client/src/components/reports/ReportSummary.tsx b/packages/desktop-client/src/components/reports/ReportSummary.tsx index 2a32dfc747a..77313138216 100644 --- a/packages/desktop-client/src/components/reports/ReportSummary.tsx +++ b/packages/desktop-client/src/components/reports/ReportSummary.tsx @@ -130,7 +130,7 @@ function ReportSummary({ }} > - {integerToCurrency(Math.round(average))} + {!isNaN(average) && integerToCurrency(Math.round(average))} Per month diff --git a/packages/desktop-client/src/components/reports/ReportTopbar.js b/packages/desktop-client/src/components/reports/ReportTopbar.js index 353f9ddcb1e..1592d0d011c 100644 --- a/packages/desktop-client/src/components/reports/ReportTopbar.js +++ b/packages/desktop-client/src/components/reports/ReportTopbar.js @@ -19,17 +19,15 @@ export function ReportTopbar({ setGraphType, mode, viewLegend, - setViewLegend, setTypeDisabled, balanceType, setBalanceType, groupBy, setGroupBy, viewSummary, - setViewSummary, viewLabels, - setViewLabels, onApplyFilter, + onChangeViews, }) { return ( { setGraphType('TableGraph'); - setViewLegend(false); + onChangeViews('viewLegend', false); setTypeDisabled([]); }} style={{ marginRight: 15 }} @@ -78,7 +76,7 @@ export function ReportTopbar({ onSelect={() => { setGraphType('AreaGraph'); setGroupBy('Month'); - setViewLegend(false); + onChangeViews('viewLegend', false); setTypeDisabled([]); }} style={{ marginRight: 15 }} @@ -111,7 +109,7 @@ export function ReportTopbar({ { - setViewLegend(!viewLegend); + onChangeViews('viewLegend'); }} style={{ marginRight: 15 }} title="Show Legend" @@ -124,7 +122,7 @@ export function ReportTopbar({ { - setViewSummary(!viewSummary); + onChangeViews('viewSummary'); }} style={{ marginRight: 15 }} title="Show Summary" @@ -134,7 +132,7 @@ export function ReportTopbar({ { - setViewLabels(!viewLabels); + onChangeViews('viewLabels'); }} style={{ marginRight: 15 }} title="Show labels" diff --git a/packages/desktop-client/src/components/reports/reports/CustomReport.js b/packages/desktop-client/src/components/reports/reports/CustomReport.js index edd208d9a30..4a5f019bcc8 100644 --- a/packages/desktop-client/src/components/reports/reports/CustomReport.js +++ b/packages/desktop-client/src/components/reports/reports/CustomReport.js @@ -1,4 +1,5 @@ import React, { useState, useEffect, useMemo } from 'react'; +import { useSelector } from 'react-redux'; import * as d from 'date-fns'; @@ -8,6 +9,7 @@ import { send } from 'loot-core/src/platform/client/fetch'; import * as monthUtils from 'loot-core/src/shared/months'; import { amountToCurrency } from 'loot-core/src/shared/util'; +import { useActions } from '../../../hooks/useActions'; import useCategories from '../../../hooks/useCategories'; import useFilters from '../../../hooks/useFilters'; import { theme, styles } from '../../../style'; @@ -33,6 +35,14 @@ import { fromDateRepr } from '../util'; export default function CustomReport() { const categories = useCategories(); + const viewLegend = + useSelector(state => state.prefs.local?.reportsViewLegend) || false; + const viewSummary = + useSelector(state => state.prefs.local?.reportsViewSummary) || false; + const viewLabels = + useSelector(state => state.prefs.local?.reportsViewLabel) || false; + const { savePrefs } = useActions(); + const { filters, conditionsOp, @@ -61,9 +71,6 @@ export default function CustomReport() { const [dataCheck, setDataCheck] = useState(false); const [graphType, setGraphType] = useState('BarGraph'); - const [viewLegend, setViewLegend] = useState(false); - const [viewSummary, setViewSummary] = useState(false); - const [viewLabels, setViewLabels] = useState(false); const dateRangeLine = ReportOptions.dateRange.length - 3; const months = monthUtils.rangeInclusive(startDate, endDate); @@ -182,6 +189,18 @@ export default function CustomReport() { setEndDate(endDate); }; + const onChangeViews = (viewType, status) => { + if (viewType === 'viewLegend') { + savePrefs({ reportsViewLegend: status ?? !viewLegend }); + } + if (viewType === 'viewSummary') { + savePrefs({ reportsViewSummary: !viewSummary }); + } + if (viewType === 'viewLabels') { + savePrefs({ reportsViewLabels: !viewLabels }); + } + }; + return (
@@ -204,7 +223,6 @@ export default function CustomReport() { allMonths={allMonths} graphType={graphType} setGraphType={setGraphType} - setViewLegend={setViewLegend} typeDisabled={typeDisabled} setTypeDisabled={setTypeDisabled} groupBy={groupBy} @@ -224,6 +242,7 @@ export default function CustomReport() { categories={categories} selectedCategories={selectedCategories} setSelectedCategories={setSelectedCategories} + onChangeViews={onChangeViews} /> {filters && filters.length > 0 && ( )} - {(viewLegend || viewSummary) && ( + {(viewLegend || viewSummary) && data && ( >; diff --git a/upcoming-release-notes/2094.md b/upcoming-release-notes/2094.md new file mode 100644 index 00000000000..8b11d74b738 --- /dev/null +++ b/upcoming-release-notes/2094.md @@ -0,0 +1,6 @@ +--- +category: Enhancements +authors: [carkom] +--- + +Custom reports: Convert the view options (legend/summary/labels) to global preferences that apply to all graphs. \ No newline at end of file