From cd9d1fb674320cf35ebedc9e065741c62bce95b4 Mon Sep 17 00:00:00 2001
From: Neil <55785687+carkom@users.noreply.github.com>
Date: Fri, 19 Jan 2024 22:39:09 +0000
Subject: [PATCH] Clean-up some custom reports code (#2254)
* work
* missed
* notes
* change element name
* update
* update changes
* merge fixes
---
.../src/components/reports/ReportSidebar.jsx | 124 ++++++++++--------
.../src/components/reports/ReportTopbar.jsx | 41 +++---
.../reports/reports/CustomReport.jsx | 51 ++++---
upcoming-release-notes/2254.md | 6 +
4 files changed, 131 insertions(+), 91 deletions(-)
create mode 100644 upcoming-release-notes/2254.md
diff --git a/packages/desktop-client/src/components/reports/ReportSidebar.jsx b/packages/desktop-client/src/components/reports/ReportSidebar.jsx
index 49857c63d..dc2fdd247 100644
--- a/packages/desktop-client/src/components/reports/ReportSidebar.jsx
+++ b/packages/desktop-client/src/components/reports/ReportSidebar.jsx
@@ -20,34 +20,23 @@ import { ModeButton } from './ModeButton';
import { ReportOptions } from './ReportOptions';
export function ReportSidebar({
- startDate,
- endDate,
- onChangeDates,
- dateRange,
- setDateRange,
+ customReportItems,
+ categories,
dateRangeLine,
allMonths,
- graphType,
- setGraphType,
+ setDateRange,
typeDisabled,
setTypeDisabled,
- groupBy,
+ setGraphType,
setGroupBy,
- balanceType,
setBalanceType,
- mode,
setMode,
- isDateStatic,
setIsDateStatic,
- showEmpty,
setShowEmpty,
- showOffBudgetHidden,
setShowOffBudgetHidden,
- showUncategorized,
setShowUncategorized,
- categories,
- selectedCategories,
setSelectedCategories,
+ onChangeDates,
onChangeViews,
}) {
const onSelectRange = cond => {
@@ -86,26 +75,26 @@ export function ReportSidebar({
const onChangeMode = cond => {
setMode(cond);
if (cond === 'time') {
- if (graphType === 'TableGraph') {
+ if (customReportItems.graphType === 'TableGraph') {
setTypeDisabled([]);
} else {
setTypeDisabled(['Net']);
- if (['Net'].includes(balanceType)) {
+ if (['Net'].includes(customReportItems.balanceType)) {
setBalanceType('Payment');
}
}
- if (graphType === 'BarGraph') {
+ if (customReportItems.graphType === 'BarGraph') {
setGraphType('StackedBarGraph');
}
- if (['AreaGraph', 'DonutGraph'].includes(graphType)) {
+ if (['AreaGraph', 'DonutGraph'].includes(customReportItems.graphType)) {
setGraphType('TableGraph');
onChangeViews('viewLegend', false);
}
- if (['Month', 'Year'].includes(groupBy)) {
+ if (['Month', 'Year'].includes(customReportItems.groupBy)) {
setGroupBy('Category');
}
} else {
- if (graphType === 'StackedBarGraph') {
+ if (customReportItems.graphType === 'StackedBarGraph') {
setGraphType('BarGraph');
} else {
setTypeDisabled([]);
@@ -115,12 +104,17 @@ export function ReportSidebar({
const onChangeSplit = cond => {
setGroupBy(cond);
- if (mode === 'total') {
- if (graphType !== 'TableGraph') {
- setTypeDisabled(!['Month', 'Year'].includes(groupBy) ? [] : ['Net']);
+ if (customReportItems.mode === 'total') {
+ if (customReportItems.graphType !== 'TableGraph') {
+ setTypeDisabled(
+ !['Month', 'Year'].includes(customReportItems.groupBy) ? [] : ['Net'],
+ );
}
}
- if (['Net'].includes(balanceType) && graphType !== 'TableGraph') {
+ if (
+ ['Net'].includes(customReportItems.balanceType) &&
+ customReportItems.graphType !== 'TableGraph'
+ ) {
setBalanceType('Payment');
}
};
@@ -158,13 +152,13 @@ export function ReportSidebar({
Mode:
</Text>
<ModeButton
- selected={mode === 'total'}
+ selected={customReportItems.mode === 'total'}
onSelect={() => onChangeMode('total')}
>
Total
</ModeButton>
<ModeButton
- selected={mode === 'time'}
+ selected={customReportItems.mode === 'time'}
onSelect={() => onChangeMode('time')}
>
Time
@@ -181,16 +175,16 @@ export function ReportSidebar({
Split:
</Text>
<Select
- value={groupBy}
+ value={customReportItems.groupBy}
onChange={e => onChangeSplit(e)}
options={ReportOptions.groupBy.map(option => [
option.description,
option.description,
])}
disabledKeys={
- mode === 'time'
+ customReportItems.mode === 'time'
? ['Month', 'Year']
- : graphType === 'AreaGraph'
+ : customReportItems.graphType === 'AreaGraph'
? ['Category', 'Group', 'Payee', 'Account', 'Year']
: ['Year']
}
@@ -207,7 +201,7 @@ export function ReportSidebar({
Type:
</Text>
<Select
- value={balanceType}
+ value={customReportItems.balanceType}
onChange={setBalanceType}
options={ReportOptions.balanceType.map(option => [
option.description,
@@ -251,9 +245,9 @@ export function ReportSidebar({
<Checkbox
id="show-empty-columns"
- checked={showEmpty}
- value={showEmpty}
- onChange={() => setShowEmpty(!showEmpty)}
+ checked={customReportItems.showEmpty}
+ value={customReportItems.showEmpty}
+ onChange={() => setShowEmpty(!customReportItems.showEmpty)}
/>
<label
htmlFor="show-empty-columns"
@@ -274,9 +268,11 @@ export function ReportSidebar({
<Checkbox
id="show-hidden-columns"
- checked={showOffBudgetHidden}
- value={showOffBudgetHidden}
- onChange={() => setShowOffBudgetHidden(!showOffBudgetHidden)}
+ checked={customReportItems.showOffBudgetHidden}
+ value={customReportItems.showOffBudgetHidden}
+ onChange={() =>
+ setShowOffBudgetHidden(!customReportItems.showOffBudgetHidden)
+ }
/>
<label
htmlFor="show-hidden-columns"
@@ -297,9 +293,11 @@ export function ReportSidebar({
<Checkbox
id="show-uncategorized"
- checked={showUncategorized}
- value={showUncategorized}
- onChange={() => setShowUncategorized(!showUncategorized)}
+ checked={customReportItems.showUncategorized}
+ value={customReportItems.showUncategorized}
+ onChange={() =>
+ setShowUncategorized(!customReportItems.showUncategorized)
+ }
/>
<label
htmlFor="show-uncategorized"
@@ -330,25 +328,28 @@ export function ReportSidebar({
</Text>
<View style={{ flex: 1 }} />
<ModeButton
- selected={!isDateStatic}
+ selected={!customReportItems.isDateStatic}
onSelect={() => {
setIsDateStatic(false);
- onSelectRange(dateRange);
+ onSelectRange(customReportItems.dateRange);
}}
>
Live
</ModeButton>
<ModeButton
- selected={isDateStatic}
+ selected={customReportItems.isDateStatic}
onSelect={() => {
setIsDateStatic(true);
- onChangeDates(startDate, endDate);
+ onChangeDates(
+ customReportItems.startDate,
+ customReportItems.endDate,
+ );
}}
>
Static
</ModeButton>
</View>
- {!isDateStatic ? (
+ {!customReportItems.isDateStatic ? (
<View
style={{
flexDirection: 'row',
@@ -360,7 +361,7 @@ export function ReportSidebar({
Range:
</Text>
<Select
- value={dateRange}
+ value={customReportItems.dateRange}
onChange={e => {
onSelectRange(e);
}}
@@ -385,10 +386,19 @@ export function ReportSidebar({
</Text>
<Select
onChange={newValue =>
- onChangeDates(...validateStart(allMonths, newValue, endDate))
+ onChangeDates(
+ ...validateStart(
+ allMonths,
+ newValue,
+ customReportItems.endDate,
+ ),
+ )
}
- value={startDate}
- defaultLabel={monthUtils.format(startDate, 'MMMM, yyyy')}
+ value={customReportItems.startDate}
+ defaultLabel={monthUtils.format(
+ customReportItems.startDate,
+ 'MMMM, yyyy',
+ )}
options={allMonths.map(({ name, pretty }) => [name, pretty])}
/>
</View>
@@ -404,9 +414,15 @@ export function ReportSidebar({
</Text>
<Select
onChange={newValue =>
- onChangeDates(...validateEnd(allMonths, startDate, newValue))
+ onChangeDates(
+ ...validateEnd(
+ allMonths,
+ customReportItems.startDate,
+ newValue,
+ ),
+ )
}
- value={endDate}
+ value={customReportItems.endDate}
options={allMonths.map(({ name, pretty }) => [name, pretty])}
/>
</View>
@@ -421,7 +437,7 @@ export function ReportSidebar({
}}
/>
</View>
- {['Category', 'Group'].includes(groupBy) && (
+ {['Category', 'Group'].includes(customReportItems.groupBy) && (
<View
style={{
marginTop: 10,
@@ -431,7 +447,7 @@ export function ReportSidebar({
<CategorySelector
categoryGroups={categories.grouped}
categories={categories.list}
- selectedCategories={selectedCategories}
+ selectedCategories={customReportItems.selectedCategories}
setSelectedCategories={setSelectedCategories}
/>
</View>
diff --git a/packages/desktop-client/src/components/reports/ReportTopbar.jsx b/packages/desktop-client/src/components/reports/ReportTopbar.jsx
index 3a29388cf..0704c7c8a 100644
--- a/packages/desktop-client/src/components/reports/ReportTopbar.jsx
+++ b/packages/desktop-client/src/components/reports/ReportTopbar.jsx
@@ -17,15 +17,12 @@ import { GraphButton } from './GraphButton';
import { SaveReportMenuButton } from './SaveReport';
export function ReportTopbar({
- graphType,
+ customReportItems,
setGraphType,
- mode,
- viewLegend,
setTypeDisabled,
- balanceType,
setBalanceType,
- groupBy,
setGroupBy,
+ viewLegend,
viewSummary,
viewLabels,
onApplyFilter,
@@ -41,7 +38,7 @@ export function ReportTopbar({
}}
>
<GraphButton
- selected={graphType === 'TableGraph'}
+ selected={customReportItems.graphType === 'TableGraph'}
title="Data Table"
onSelect={() => {
setGraphType('TableGraph');
@@ -53,15 +50,24 @@ export function ReportTopbar({
<SvgQueue width={15} height={15} />
</GraphButton>
<GraphButton
- title={mode === 'total' ? 'Bar Graph' : 'Stacked Bar Graph'}
- selected={graphType === 'BarGraph' || graphType === 'StackedBarGraph'}
+ title={
+ customReportItems.mode === 'total' ? 'Bar Graph' : 'Stacked Bar Graph'
+ }
+ selected={
+ customReportItems.graphType === 'BarGraph' ||
+ customReportItems.graphType === 'StackedBarGraph'
+ }
onSelect={() => {
- if (mode === 'total') {
+ if (customReportItems.mode === 'total') {
setGraphType('BarGraph');
- if (['Net'].includes(balanceType)) {
+ if (['Net'].includes(customReportItems.balanceType)) {
setBalanceType('Payment');
}
- setTypeDisabled(['Month', 'Year'].includes(groupBy) ? [] : ['Net']);
+ setTypeDisabled(
+ ['Month', 'Year'].includes(customReportItems.groupBy)
+ ? []
+ : ['Net'],
+ );
} else {
setGraphType('StackedBarGraph');
setTypeDisabled(['Net']);
@@ -74,7 +80,7 @@ export function ReportTopbar({
</GraphButton>
<GraphButton
title="Area Graph"
- selected={graphType === 'AreaGraph'}
+ selected={customReportItems.graphType === 'AreaGraph'}
onSelect={() => {
setGraphType('AreaGraph');
setGroupBy('Month');
@@ -82,20 +88,20 @@ export function ReportTopbar({
setTypeDisabled([]);
}}
style={{ marginRight: 15 }}
- disabled={mode === 'total' ? false : true}
+ disabled={customReportItems.mode === 'total' ? false : true}
>
<SvgChart width={15} height={15} />
</GraphButton>
<GraphButton
title="Donut Graph"
- selected={graphType === 'DonutGraph'}
+ selected={customReportItems.graphType === 'DonutGraph'}
onSelect={() => {
setGraphType('DonutGraph');
setTypeDisabled(['Net']);
setBalanceType('Payment');
}}
style={{ marginRight: 15 }}
- disabled={mode === 'total' ? false : true}
+ disabled={customReportItems.mode === 'total' ? false : true}
>
<SvgChartPie width={15} height={15} />
</GraphButton>
@@ -116,7 +122,10 @@ export function ReportTopbar({
style={{ marginRight: 15 }}
title="Show Legend"
disabled={
- graphType === 'TableGraph' || graphType === 'AreaGraph' ? true : false
+ customReportItems.graphType === 'TableGraph' ||
+ customReportItems.graphType === 'AreaGraph'
+ ? true
+ : false
}
>
<SvgListBullet width={15} height={15} />
diff --git a/packages/desktop-client/src/components/reports/reports/CustomReport.jsx b/packages/desktop-client/src/components/reports/reports/CustomReport.jsx
index 07666855a..476057dca 100644
--- a/packages/desktop-client/src/components/reports/reports/CustomReport.jsx
+++ b/packages/desktop-client/src/components/reports/reports/CustomReport.jsx
@@ -129,13 +129,18 @@ export function CustomReport() {
}, [
startDate,
endDate,
+ groupBy,
+ balanceType,
categories,
selectedCategories,
+ payees,
+ accounts,
filters,
conditionsOp,
showEmpty,
showOffBudgetHidden,
showUncategorized,
+ graphType,
]);
const getGraphData = useMemo(() => {
@@ -178,6 +183,24 @@ export function CustomReport() {
const data = { ...graphData, groupedData };
+ const customReportItems = {
+ id: null,
+ mode,
+ groupBy,
+ balanceType,
+ showEmpty,
+ showOffBudgetHidden,
+ showUncategorized,
+ graphType,
+ startDate,
+ endDate,
+ selectedCategories,
+ isDateStatic,
+ dateRange,
+ filters,
+ conditionsOp,
+ data,
+ };
const [scrollWidth, setScrollWidth] = useState(0);
if (!allMonths || !data) {
@@ -214,34 +237,23 @@ export function CustomReport() {
}}
>
<ReportSidebar
- startDate={startDate}
- endDate={endDate}
- onChangeDates={onChangeDates}
- dateRange={dateRange}
- setDateRange={setDateRange}
+ customReportItems={customReportItems}
+ categories={categories}
dateRangeLine={dateRangeLine}
allMonths={allMonths}
- graphType={graphType}
- setGraphType={setGraphType}
+ setDateRange={setDateRange}
typeDisabled={typeDisabled}
setTypeDisabled={setTypeDisabled}
- groupBy={groupBy}
+ setGraphType={setGraphType}
setGroupBy={setGroupBy}
- balanceType={balanceType}
setBalanceType={setBalanceType}
- mode={mode}
setMode={setMode}
- isDateStatic={isDateStatic}
setIsDateStatic={setIsDateStatic}
- showEmpty={showEmpty}
setShowEmpty={setShowEmpty}
- showOffBudgetHidden={showOffBudgetHidden}
setShowOffBudgetHidden={setShowOffBudgetHidden}
- showUncategorized={showUncategorized}
setShowUncategorized={setShowUncategorized}
- categories={categories}
- selectedCategories={selectedCategories}
setSelectedCategories={setSelectedCategories}
+ onChangeDates={onChangeDates}
onChangeViews={onChangeViews}
/>
<View
@@ -250,15 +262,12 @@ export function CustomReport() {
}}
>
<ReportTopbar
- graphType={graphType}
+ customReportItems={customReportItems}
setGraphType={setGraphType}
- mode={mode}
- viewLegend={viewLegend}
setTypeDisabled={setTypeDisabled}
- balanceType={balanceType}
setBalanceType={setBalanceType}
- groupBy={groupBy}
setGroupBy={setGroupBy}
+ viewLegend={viewLegend}
viewSummary={viewSummary}
viewLabels={viewLabels}
onApplyFilter={onApplyFilter}
diff --git a/upcoming-release-notes/2254.md b/upcoming-release-notes/2254.md
new file mode 100644
index 000000000..b4c01bb43
--- /dev/null
+++ b/upcoming-release-notes/2254.md
@@ -0,0 +1,6 @@
+---
+category: Maintenance
+authors: [carkom]
+---
+
+Making custom reports code more compact and efficient.
--
GitLab