Skip to content

Commit

Permalink
Custom reports: make views global (#2094)
Browse files Browse the repository at this point in the history
* make views global

* notes and lint fixes

* fixes

* lint fix

* fix

* fix
  • Loading branch information
carkom authored Dec 17, 2023
1 parent d4c8b5f commit 273fa8c
Show file tree
Hide file tree
Showing 7 changed files with 72 additions and 47 deletions.
57 changes: 29 additions & 28 deletions packages/desktop-client/src/components/reports/ReportLegend.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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;
};

Expand All @@ -31,37 +31,38 @@ function ReportLegend({ legend, groupBy }: ReportLegendProps) {
{groupBy}
</Text>
<View>
{legend.map(item => {
return (
<View
key={item.name}
style={{
padding: 10,
flexDirection: 'row',
alignItems: 'center',
}}
>
{legend &&
legend.map(item => {
return (
<View
key={item.name}
style={{
marginRight: 5,
borderRadius: 1000,
width: 14,
height: 14,
backgroundColor: item.color,
}}
/>
<Text
style={{
whiteSpace: 'nowrap',
textOverflow: 'ellipsis',
flexShrink: 0,
padding: 10,
flexDirection: 'row',
alignItems: 'center',
}}
>
{item.name}
</Text>
</View>
);
})}
<View
style={{
marginRight: 5,
borderRadius: 1000,
width: 14,
height: 14,
backgroundColor: item.color,
}}
/>
<Text
style={{
whiteSpace: 'nowrap',
textOverflow: 'ellipsis',
flexShrink: 0,
}}
>
{item.name}
</Text>
</View>
);
})}
</View>
</View>
);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,6 @@ export function ReportSidebar({
allMonths,
graphType,
setGraphType,
setViewLegend,
typeDisabled,
setTypeDisabled,
groupBy,
Expand All @@ -49,6 +48,7 @@ export function ReportSidebar({
categories,
selectedCategories,
setSelectedCategories,
onChangeViews,
}) {
const onSelectRange = cond => {
setDateRange(cond);
Expand Down Expand Up @@ -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');
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -130,7 +130,7 @@ function ReportSummary({
}}
>
<PrivacyFilter blurIntensity={7}>
{integerToCurrency(Math.round(average))}
{!isNaN(average) && integerToCurrency(Math.round(average))}
</PrivacyFilter>
</Text>
<Text style={{ fontWeight: 600 }}>Per month</Text>
Expand Down
14 changes: 6 additions & 8 deletions packages/desktop-client/src/components/reports/ReportTopbar.js
Original file line number Diff line number Diff line change
Expand Up @@ -19,17 +19,15 @@ export function ReportTopbar({
setGraphType,
mode,
viewLegend,
setViewLegend,
setTypeDisabled,
balanceType,
setBalanceType,
groupBy,
setGroupBy,
viewSummary,
setViewSummary,
viewLabels,
setViewLabels,
onApplyFilter,
onChangeViews,
}) {
return (
<View
Expand All @@ -45,7 +43,7 @@ export function ReportTopbar({
title="Data Table"
onSelect={() => {
setGraphType('TableGraph');
setViewLegend(false);
onChangeViews('viewLegend', false);
setTypeDisabled([]);
}}
style={{ marginRight: 15 }}
Expand Down Expand Up @@ -78,7 +76,7 @@ export function ReportTopbar({
onSelect={() => {
setGraphType('AreaGraph');
setGroupBy('Month');
setViewLegend(false);
onChangeViews('viewLegend', false);
setTypeDisabled([]);
}}
style={{ marginRight: 15 }}
Expand Down Expand Up @@ -111,7 +109,7 @@ export function ReportTopbar({
<GraphButton
selected={viewLegend}
onSelect={() => {
setViewLegend(!viewLegend);
onChangeViews('viewLegend');
}}
style={{ marginRight: 15 }}
title="Show Legend"
Expand All @@ -124,7 +122,7 @@ export function ReportTopbar({
<GraphButton
selected={viewSummary}
onSelect={() => {
setViewSummary(!viewSummary);
onChangeViews('viewSummary');
}}
style={{ marginRight: 15 }}
title="Show Summary"
Expand All @@ -134,7 +132,7 @@ export function ReportTopbar({
<GraphButton
selected={viewLabels}
onSelect={() => {
setViewLabels(!viewLabels);
onChangeViews('viewLabels');
}}
style={{ marginRight: 15 }}
title="Show labels"
Expand Down
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import React, { useState, useEffect, useMemo } from 'react';
import { useSelector } from 'react-redux';

import * as d from 'date-fns';

Expand All @@ -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';
Expand All @@ -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,
Expand Down Expand Up @@ -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);

Expand Down Expand Up @@ -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 (
<View style={{ ...styles.page, minWidth: 650, overflow: 'hidden' }}>
<Header title="Custom Reports" />
Expand All @@ -204,7 +223,6 @@ export default function CustomReport() {
allMonths={allMonths}
graphType={graphType}
setGraphType={setGraphType}
setViewLegend={setViewLegend}
typeDisabled={typeDisabled}
setTypeDisabled={setTypeDisabled}
groupBy={groupBy}
Expand All @@ -224,6 +242,7 @@ export default function CustomReport() {
categories={categories}
selectedCategories={selectedCategories}
setSelectedCategories={setSelectedCategories}
onChangeViews={onChangeViews}
/>
<View
style={{
Expand All @@ -235,17 +254,15 @@ export default function CustomReport() {
setGraphType={setGraphType}
mode={mode}
viewLegend={viewLegend}
setViewLegend={setViewLegend}
setTypeDisabled={setTypeDisabled}
balanceType={balanceType}
setBalanceType={setBalanceType}
groupBy={groupBy}
setGroupBy={setGroupBy}
viewSummary={viewSummary}
setViewSummary={setViewSummary}
viewLabels={viewLabels}
setViewLabels={setViewLabels}
onApplyFilter={onApplyFilter}
onChangeViews={onChangeViews}
/>
{filters && filters.length > 0 && (
<View
Expand Down Expand Up @@ -328,7 +345,7 @@ export default function CustomReport() {
<LoadingIndicator message={'Loading report...'} />
)}
</View>
{(viewLegend || viewSummary) && (
{(viewLegend || viewSummary) && data && (
<View
style={{
padding: 10,
Expand Down
3 changes: 3 additions & 0 deletions packages/loot-core/src/types/prefs.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,9 @@ export type LocalPrefs = Partial<
userId: string;
resetClock: boolean;
lastScheduleRun: string;
reportsViewLegend: boolean;
reportsViewSummary: boolean;
reportsViewLabel: boolean;
} & Record<`flags.${FeatureFlag}`, boolean>
>;

Expand Down
6 changes: 6 additions & 0 deletions upcoming-release-notes/2094.md
Original file line number Diff line number Diff line change
@@ -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.

0 comments on commit 273fa8c

Please sign in to comment.