From 62a0a0fedcab9b2477e8e9d580817105419a66ef Mon Sep 17 00:00:00 2001
From: Neil <55785687+carkom@users.noreply.github.com>
Date: Fri, 19 Jan 2024 08:59:47 +0000
Subject: [PATCH] Custom Reports compact additions (#2245)
* compact additions
* notes
* vrt fix
* revert AnchorLink
* Update upcoming-release-notes/2245.md
Co-authored-by: Matiss Janis Aboltins <matiss@mja.lv>
* merge fixes
---------
Co-authored-by: Matiss Janis Aboltins <matiss@mja.lv>
---
.../src/components/common/MenuButton.tsx | 12 ++++--
.../src/components/reports/ChooseGraph.tsx | 37 +++++++++++------
.../components/reports/graphs/BarGraph.tsx | 40 +++++++++----------
.../reports/graphs/BarLineGraph.tsx | 10 +++--
.../components/reports/graphs/DonutGraph.tsx | 4 +-
.../components/reports/graphs/LineGraph.tsx | 10 +++--
.../reports/graphs/StackedBarGraph.tsx | 26 ++++++------
.../reports/graphs/tableGraph/ReportTable.tsx | 3 ++
.../graphs/tableGraph/ReportTableHeader.tsx | 2 +
.../graphs/tableGraph/ReportTableList.tsx | 2 +
.../graphs/tableGraph/ReportTableTotals.tsx | 2 +
.../reports/reports/CustomReport.jsx | 1 +
.../desktop-client/src/hooks/useFilters.ts | 5 ++-
packages/desktop-client/src/style/styles.ts | 3 ++
upcoming-release-notes/2245.md | 6 +++
15 files changed, 107 insertions(+), 56 deletions(-)
create mode 100644 upcoming-release-notes/2245.md
diff --git a/packages/desktop-client/src/components/common/MenuButton.tsx b/packages/desktop-client/src/components/common/MenuButton.tsx
index 30cd07722..b707ef6ba 100644
--- a/packages/desktop-client/src/components/common/MenuButton.tsx
+++ b/packages/desktop-client/src/components/common/MenuButton.tsx
@@ -1,13 +1,19 @@
-// @ts-strict-ignore
import React from 'react';
import { SvgDotsHorizontalTriple } from '../../icons/v1';
+import { type CSSProperties } from '../../style';
import { Button } from './Button';
-export function MenuButton({ onClick }) {
+export function MenuButton({
+ onClick,
+ style,
+}: {
+ onClick: () => void;
+ style?: CSSProperties;
+}) {
return (
- <Button type="bare" onClick={onClick} aria-label="Menu">
+ <Button type="bare" onClick={onClick} aria-label="Menu" style={style}>
<SvgDotsHorizontalTriple
width={15}
height={15}
diff --git a/packages/desktop-client/src/components/reports/ChooseGraph.tsx b/packages/desktop-client/src/components/reports/ChooseGraph.tsx
index 2188d075c..244a4b050 100644
--- a/packages/desktop-client/src/components/reports/ChooseGraph.tsx
+++ b/packages/desktop-client/src/components/reports/ChooseGraph.tsx
@@ -6,6 +6,7 @@ import {
type Month,
} from 'loot-core/src/types/models/reports';
+import { type CSSProperties } from '../../style';
import { View } from '../common/View';
import { AreaGraph } from './graphs/AreaGraph';
@@ -25,11 +26,12 @@ type ChooseGraphProps = {
graphType: string;
balanceType: string;
groupBy: string;
- showEmpty: boolean;
- scrollWidth: number;
- setScrollWidth: (value: number) => void;
- months: Month[];
- viewLabels: boolean;
+ scrollWidth?: number;
+ setScrollWidth?: (value: number) => void;
+ months?: Month[];
+ viewLabels?: boolean;
+ compact?: boolean;
+ style?: CSSProperties;
};
export function ChooseGraph({
@@ -38,12 +40,14 @@ export function ChooseGraph({
graphType,
balanceType,
groupBy,
- showEmpty,
scrollWidth,
setScrollWidth,
months,
viewLabels,
+ compact,
+ style,
}: ChooseGraphProps) {
+ const graphStyle = compact ? { ...style } : { flexGrow: 1 };
const balanceTypeOp = ReportOptions.balanceTypeMap.get(balanceType);
const groupByData =
groupBy === 'Category'
@@ -78,7 +82,8 @@ export function ChooseGraph({
if (graphType === 'AreaGraph') {
return (
<AreaGraph
- style={{ flexGrow: 1 }}
+ style={graphStyle}
+ compact={compact}
data={data}
balanceTypeOp={balanceTypeOp}
viewLabels={viewLabels}
@@ -88,7 +93,8 @@ export function ChooseGraph({
if (graphType === 'BarGraph') {
return (
<BarGraph
- style={{ flexGrow: 1 }}
+ style={graphStyle}
+ compact={compact}
data={data}
groupBy={groupBy}
balanceTypeOp={balanceTypeOp}
@@ -97,12 +103,15 @@ export function ChooseGraph({
);
}
if (graphType === 'BarLineGraph') {
- return <BarLineGraph style={{ flexGrow: 1 }} graphData={data} />;
+ return (
+ <BarLineGraph style={graphStyle} compact={compact} graphData={data} />
+ );
}
if (graphType === 'DonutGraph') {
return (
<DonutGraph
- style={{ flexGrow: 1 }}
+ style={graphStyle}
+ compact={compact}
data={data}
groupBy={groupBy}
balanceTypeOp={balanceTypeOp}
@@ -111,12 +120,13 @@ export function ChooseGraph({
);
}
if (graphType === 'LineGraph') {
- return <LineGraph style={{ flexGrow: 1 }} graphData={data} />;
+ return <LineGraph style={graphStyle} compact={compact} graphData={data} />;
}
if (graphType === 'StackedBarGraph') {
return (
<StackedBarGraph
- style={{ flexGrow: 1 }}
+ style={graphStyle}
+ compact={compact}
data={data}
viewLabels={viewLabels}
/>
@@ -132,6 +142,7 @@ export function ChooseGraph({
scrollWidth={scrollWidth}
groupBy={groupBy}
balanceType={balanceType}
+ compact={compact}
/>
<ReportTable
saveScrollWidth={saveScrollWidth}
@@ -142,6 +153,7 @@ export function ChooseGraph({
data={data[groupByData]}
mode={mode}
monthsCount={months.length}
+ compact={compact}
/>
<ReportTableTotals
totalScrollRef={totalScrollRef}
@@ -151,6 +163,7 @@ export function ChooseGraph({
mode={mode}
balanceTypeOp={balanceTypeOp}
monthsCount={months.length}
+ compact={compact}
/>
</View>
);
diff --git a/packages/desktop-client/src/components/reports/graphs/BarGraph.tsx b/packages/desktop-client/src/components/reports/graphs/BarGraph.tsx
index 6f34a07b5..e17171b56 100644
--- a/packages/desktop-client/src/components/reports/graphs/BarGraph.tsx
+++ b/packages/desktop-client/src/components/reports/graphs/BarGraph.tsx
@@ -190,29 +190,27 @@ export function BarGraph({
formatter={numberFormatterTooltip}
isAnimationActive={false}
/>
- {!compact && <CartesianGrid strokeDasharray="3 3" />}
{!compact && (
- <XAxis
- dataKey={yAxis}
- angle={-35}
- textAnchor="end"
- height={Math.sqrt(longestLabelLength) * 25}
- tick={{ fill: theme.pageText }}
- tickLine={{ stroke: theme.pageText }}
- />
- )}
- {!compact && (
- <YAxis
- tickFormatter={value => getCustomTick(value, privacyMode)}
- tick={{ fill: theme.pageText }}
- tickLine={{ stroke: theme.pageText }}
- />
- )}
- {!compact && (
- <ReferenceLine y={0} stroke={theme.pageTextLight} />
+ <>
+ <CartesianGrid strokeDasharray="3 3" />
+ <XAxis
+ dataKey={yAxis}
+ angle={-35}
+ textAnchor="end"
+ height={Math.sqrt(longestLabelLength) * 25}
+ tick={{ fill: theme.pageText }}
+ tickLine={{ stroke: theme.pageText }}
+ />
+ <YAxis
+ tickFormatter={value => getCustomTick(value, privacyMode)}
+ tick={{ fill: theme.pageText }}
+ tickLine={{ stroke: theme.pageText }}
+ />
+ <ReferenceLine y={0} stroke={theme.pageTextLight} />
+ </>
)}
<Bar dataKey={val => getVal(val)} stackId="a">
- {viewLabels && (
+ {viewLabels && !compact && (
<LabelList
dataKey={val => getVal(val)}
content={customLabel}
@@ -228,7 +226,7 @@ export function BarGraph({
</Bar>
{yAxis === 'date' && balanceTypeOp === 'totalTotals' && (
<Bar dataKey="totalDebts" stackId="a">
- {viewLabels && (
+ {viewLabels && !compact && (
<LabelList dataKey="totalDebts" content={customLabel} />
)}
{data[splitData].map((entry, index) => (
diff --git a/packages/desktop-client/src/components/reports/graphs/BarLineGraph.tsx b/packages/desktop-client/src/components/reports/graphs/BarLineGraph.tsx
index 9e39d8003..fe659df81 100644
--- a/packages/desktop-client/src/components/reports/graphs/BarLineGraph.tsx
+++ b/packages/desktop-client/src/components/reports/graphs/BarLineGraph.tsx
@@ -104,9 +104,13 @@ export function BarLineGraph({ style, graphData, compact }: BarLineGraphProps) {
formatter={numberFormatterTooltip}
isAnimationActive={false}
/>
- <CartesianGrid strokeDasharray="3 3" />
- <XAxis dataKey="x" />
- <YAxis dataKey="y" tickFormatter={tickFormatter} />
+ {!compact && (
+ <>
+ <CartesianGrid strokeDasharray="3 3" />
+ <XAxis dataKey="x" />
+ <YAxis dataKey="y" tickFormatter={tickFormatter} />
+ </>
+ )}
<Bar type="monotone" dataKey="y" fill="#8884d8" />
<Line type="monotone" dataKey="y" stroke="#8884d8" />
</ComposedChart>
diff --git a/packages/desktop-client/src/components/reports/graphs/DonutGraph.tsx b/packages/desktop-client/src/components/reports/graphs/DonutGraph.tsx
index e7c70c88b..6a69bb2ec 100644
--- a/packages/desktop-client/src/components/reports/graphs/DonutGraph.tsx
+++ b/packages/desktop-client/src/components/reports/graphs/DonutGraph.tsx
@@ -173,7 +173,9 @@ export function DonutGraph({
innerRadius={Math.min(width, height) * 0.2}
fill="#8884d8"
labelLine={false}
- label={e => (viewLabels ? customLabel(e) : <div />)}
+ label={e =>
+ viewLabels && !compact ? customLabel(e) : <div />
+ }
onMouseEnter={onPieEnter}
>
{data.legend.map((entry, index) => (
diff --git a/packages/desktop-client/src/components/reports/graphs/LineGraph.tsx b/packages/desktop-client/src/components/reports/graphs/LineGraph.tsx
index ba78ad7e3..4cba1f3e7 100644
--- a/packages/desktop-client/src/components/reports/graphs/LineGraph.tsx
+++ b/packages/desktop-client/src/components/reports/graphs/LineGraph.tsx
@@ -103,9 +103,13 @@ export function LineGraph({ style, graphData, compact }: LineGraphProps) {
formatter={numberFormatterTooltip}
isAnimationActive={false}
/>
- <CartesianGrid strokeDasharray="3 3" />
- <XAxis dataKey="x" />
- <YAxis dataKey="y" tickFormatter={tickFormatter} />
+ {!compact && (
+ <>
+ <CartesianGrid strokeDasharray="3 3" />
+ <XAxis dataKey="x" />
+ <YAxis dataKey="y" tickFormatter={tickFormatter} />
+ </>
+ )}
<Line type="monotone" dataKey="y" stroke="#8884d8" />
</LineChart>
</div>
diff --git a/packages/desktop-client/src/components/reports/graphs/StackedBarGraph.tsx b/packages/desktop-client/src/components/reports/graphs/StackedBarGraph.tsx
index 683969f3c..812be419a 100644
--- a/packages/desktop-client/src/components/reports/graphs/StackedBarGraph.tsx
+++ b/packages/desktop-client/src/components/reports/graphs/StackedBarGraph.tsx
@@ -159,18 +159,20 @@ export function StackedBarGraph({
isAnimationActive={false}
cursor={{ fill: 'transparent' }}
/>
- <CartesianGrid strokeDasharray="3 3" />
- <XAxis
- dataKey="date"
- tick={{ fill: theme.pageText }}
- tickLine={{ stroke: theme.pageText }}
- />
{!compact && (
- <YAxis
- tickFormatter={value => getCustomTick(value, privacyMode)}
- tick={{ fill: theme.pageText }}
- tickLine={{ stroke: theme.pageText }}
- />
+ <>
+ <CartesianGrid strokeDasharray="3 3" />
+ <XAxis
+ dataKey="date"
+ tick={{ fill: theme.pageText }}
+ tickLine={{ stroke: theme.pageText }}
+ />
+ <YAxis
+ tickFormatter={value => getCustomTick(value, privacyMode)}
+ tick={{ fill: theme.pageText }}
+ tickLine={{ stroke: theme.pageText }}
+ />
+ </>
)}
{data.legend
.slice(0)
@@ -182,7 +184,7 @@ export function StackedBarGraph({
stackId="a"
fill={entry.color}
>
- {viewLabels && (
+ {viewLabels && !compact && (
<LabelList dataKey={entry.name} content={customLabel} />
)}
</Bar>
diff --git a/packages/desktop-client/src/components/reports/graphs/tableGraph/ReportTable.tsx b/packages/desktop-client/src/components/reports/graphs/tableGraph/ReportTable.tsx
index b7f34e1f0..ca7f71188 100644
--- a/packages/desktop-client/src/components/reports/graphs/tableGraph/ReportTable.tsx
+++ b/packages/desktop-client/src/components/reports/graphs/tableGraph/ReportTable.tsx
@@ -26,6 +26,7 @@ type ReportTableProps = {
data: DataEntity[];
mode: string;
monthsCount: number;
+ compact: boolean;
};
export function ReportTable({
@@ -38,6 +39,7 @@ export function ReportTable({
data,
mode,
monthsCount,
+ compact,
}: ReportTableProps) {
const contentRef = useRef<HTMLDivElement>(null);
@@ -95,6 +97,7 @@ export function ReportTable({
mode={mode}
groupBy={groupBy}
renderItem={renderItem}
+ compact={compact}
/>
</Block>
</View>
diff --git a/packages/desktop-client/src/components/reports/graphs/tableGraph/ReportTableHeader.tsx b/packages/desktop-client/src/components/reports/graphs/tableGraph/ReportTableHeader.tsx
index 3abe20775..7db0209fd 100644
--- a/packages/desktop-client/src/components/reports/graphs/tableGraph/ReportTableHeader.tsx
+++ b/packages/desktop-client/src/components/reports/graphs/tableGraph/ReportTableHeader.tsx
@@ -15,6 +15,7 @@ type ReportTableHeaderProps = {
balanceType: string;
headerScrollRef: RefProp<HTMLDivElement>;
handleScroll: UIEventHandler<HTMLDivElement>;
+ compact: boolean;
};
export function ReportTableHeader({
@@ -24,6 +25,7 @@ export function ReportTableHeader({
balanceType,
headerScrollRef,
handleScroll,
+ compact,
}: ReportTableHeaderProps) {
return (
<Row
diff --git a/packages/desktop-client/src/components/reports/graphs/tableGraph/ReportTableList.tsx b/packages/desktop-client/src/components/reports/graphs/tableGraph/ReportTableList.tsx
index ec462b611..95b377995 100644
--- a/packages/desktop-client/src/components/reports/graphs/tableGraph/ReportTableList.tsx
+++ b/packages/desktop-client/src/components/reports/graphs/tableGraph/ReportTableList.tsx
@@ -13,6 +13,7 @@ type ReportTableListProps = {
monthsCount?: number;
groupBy: string;
renderItem;
+ compact: boolean;
};
export function ReportTableList({
@@ -21,6 +22,7 @@ export function ReportTableList({
mode,
groupBy,
renderItem,
+ compact,
}: ReportTableListProps) {
const groupByItem = ['Month', 'Year'].includes(groupBy) ? 'date' : 'name';
diff --git a/packages/desktop-client/src/components/reports/graphs/tableGraph/ReportTableTotals.tsx b/packages/desktop-client/src/components/reports/graphs/tableGraph/ReportTableTotals.tsx
index 79e895838..c98527cd0 100644
--- a/packages/desktop-client/src/components/reports/graphs/tableGraph/ReportTableTotals.tsx
+++ b/packages/desktop-client/src/components/reports/graphs/tableGraph/ReportTableTotals.tsx
@@ -21,6 +21,7 @@ type ReportTableTotalsProps = {
monthsCount: number;
totalScrollRef: RefProp<HTMLDivElement>;
handleScroll: UIEventHandler<HTMLDivElement>;
+ compact: boolean;
};
export function ReportTableTotals({
@@ -31,6 +32,7 @@ export function ReportTableTotals({
monthsCount,
totalScrollRef,
handleScroll,
+ compact,
}: ReportTableTotalsProps) {
const [scrollWidthTotals, setScrollWidthTotals] = useState(0);
diff --git a/packages/desktop-client/src/components/reports/reports/CustomReport.jsx b/packages/desktop-client/src/components/reports/reports/CustomReport.jsx
index a5a149c93..07666855a 100644
--- a/packages/desktop-client/src/components/reports/reports/CustomReport.jsx
+++ b/packages/desktop-client/src/components/reports/reports/CustomReport.jsx
@@ -341,6 +341,7 @@ export function CustomReport() {
setScrollWidth={setScrollWidth}
months={months}
viewLabels={viewLabels}
+ compact={false}
/>
) : (
<LoadingIndicator message="Loading report..." />
diff --git a/packages/desktop-client/src/hooks/useFilters.ts b/packages/desktop-client/src/hooks/useFilters.ts
index fb54839ec..586b0f3b2 100644
--- a/packages/desktop-client/src/hooks/useFilters.ts
+++ b/packages/desktop-client/src/hooks/useFilters.ts
@@ -8,7 +8,10 @@ export function useFilters<T>(initialFilters: T[] = []) {
const onApply = useCallback(
newFilter => {
- if (newFilter.conditions) {
+ if (newFilter === null) {
+ setFilters([]);
+ setSaved(null);
+ } else if (newFilter.conditions) {
setFilters([...newFilter.conditions]);
setConditionsOp(newFilter.conditionsOp);
setSaved(newFilter.id);
diff --git a/packages/desktop-client/src/style/styles.ts b/packages/desktop-client/src/style/styles.ts
index 027cd27ad..862ac7ebf 100644
--- a/packages/desktop-client/src/style/styles.ts
+++ b/packages/desktop-client/src/style/styles.ts
@@ -41,6 +41,9 @@ export const styles = {
verySmallText: {
fontSize: 13,
},
+ tinyText: {
+ fontSize: 10,
+ },
page: {
flex: 1,
'@media (max-height: 550px)': {
diff --git a/upcoming-release-notes/2245.md b/upcoming-release-notes/2245.md
new file mode 100644
index 000000000..207f53551
--- /dev/null
+++ b/upcoming-release-notes/2245.md
@@ -0,0 +1,6 @@
+---
+category: Enhancements
+authors: [carkom]
+---
+
+Adding compact identifier to all of the graphs and cleaning them up. Plus other staging bits for saving custom reports.
--
GitLab