From 6a0b7d6b7dc926d272d5f582a3956bbb069f86c6 Mon Sep 17 00:00:00 2001
From: Oleh <OlegWock@gmail.com>
Date: Sun, 3 Sep 2023 18:28:13 +0200
Subject: [PATCH] Make reports more responsive (#1592)
---
packages/desktop-client/src/components/forms.tsx | 1 +
.../src/components/reports/CategorySelector.tsx | 1 +
.../src/components/reports/CategorySpending.js | 9 ++++++++-
.../src/components/reports/NetWorth.js | 8 +++++++-
.../reports/graphs/CategorySpendingGraph.tsx | 14 ++++++++++----
.../components/reports/graphs/NetWorthGraph.tsx | 8 ++++++--
upcoming-release-notes/1592.md | 6 ++++++
7 files changed, 39 insertions(+), 8 deletions(-)
create mode 100644 upcoming-release-notes/1592.md
diff --git a/packages/desktop-client/src/components/forms.tsx b/packages/desktop-client/src/components/forms.tsx
index 15685ad39..a34fdbd59 100644
--- a/packages/desktop-client/src/components/forms.tsx
+++ b/packages/desktop-client/src/components/forms.tsx
@@ -75,6 +75,7 @@ export const Checkbox = (props: CheckboxProps) => {
{
position: 'relative',
margin: 0,
+ flexShrink: 0,
marginRight: 6,
width: 15,
height: 15,
diff --git a/packages/desktop-client/src/components/reports/CategorySelector.tsx b/packages/desktop-client/src/components/reports/CategorySelector.tsx
index 01c5b9db1..9c388348a 100644
--- a/packages/desktop-client/src/components/reports/CategorySelector.tsx
+++ b/packages/desktop-client/src/components/reports/CategorySelector.tsx
@@ -48,6 +48,7 @@ export default function CategorySelector({
paddingLeft: 0,
paddingRight: 10,
height: 320,
+ flexGrow: 1,
overflowY: 'scroll',
}}
>
diff --git a/packages/desktop-client/src/components/reports/CategorySpending.js b/packages/desktop-client/src/components/reports/CategorySpending.js
index 7b1ce7f29..0a01fa495 100644
--- a/packages/desktop-client/src/components/reports/CategorySpending.js
+++ b/packages/desktop-client/src/components/reports/CategorySpending.js
@@ -135,7 +135,13 @@ function CategoryAverage() {
headerPrefixItems={headerPrefixItems}
/>
<View
- style={{ display: 'flex', flexDirection: 'row', padding: 15, gap: 15 }}
+ style={{
+ display: 'flex',
+ flexDirection: 'row',
+ padding: 15,
+ gap: 15,
+ flexGrow: 1,
+ }}
>
<View style={{ width: 200 }}>
<CategorySelector
@@ -157,6 +163,7 @@ function CategoryAverage() {
}}
>
<CategorySpendingGraph
+ style={{ flexGrow: 1 }}
start={start}
end={end}
graphData={perCategorySpending}
diff --git a/packages/desktop-client/src/components/reports/NetWorth.js b/packages/desktop-client/src/components/reports/NetWorth.js
index 8988cff78..49be07245 100644
--- a/packages/desktop-client/src/components/reports/NetWorth.js
+++ b/packages/desktop-client/src/components/reports/NetWorth.js
@@ -105,6 +105,7 @@ export default function NetWorth() {
padding: 30,
paddingTop: 0,
overflow: 'auto',
+ flexGrow: 1,
}}
>
<View
@@ -127,7 +128,12 @@ export default function NetWorth() {
</PrivacyFilter>
</View>
- <NetWorthGraph start={start} end={end} graphData={data.graphData} />
+ <NetWorthGraph
+ style={{ flexGrow: 1 }}
+ start={start}
+ end={end}
+ graphData={data.graphData}
+ />
<View style={{ marginTop: 30 }}>
<Paragraph>
diff --git a/packages/desktop-client/src/components/reports/graphs/CategorySpendingGraph.tsx b/packages/desktop-client/src/components/reports/graphs/CategorySpendingGraph.tsx
index a5dfdb8db..438c2db2a 100644
--- a/packages/desktop-client/src/components/reports/graphs/CategorySpendingGraph.tsx
+++ b/packages/desktop-client/src/components/reports/graphs/CategorySpendingGraph.tsx
@@ -1,3 +1,5 @@
+import type { CSSProperties } from 'react';
+
import * as d from 'date-fns';
import { VictoryAxis, VictoryBar, VictoryChart, VictoryStack } from 'victory';
@@ -13,8 +15,10 @@ type CategorySpendingGraphProps = {
end: string;
graphData: CategorySpendingGraphData;
compact?: boolean;
+ style?: CSSProperties;
};
function CategorySpendingGraph({
+ style,
start,
end,
graphData,
@@ -25,17 +29,19 @@ function CategorySpendingGraph({
}
return (
- <Container style={compact && { height: 'auto', flex: 1 }}>
+ <Container style={[style, compact && { height: 'auto', flex: 1 }]}>
{(width, height, portalHost) => (
<VictoryChart
scale={{ x: 'time', y: 'linear' }}
theme={theme}
- domainPadding={compact ? { x: 10, y: 5 } : { x: 50, y: 10 }}
width={width}
height={height}
>
<Area start={start} end={end} />
- <VictoryStack colorScale="qualitative">
+ <VictoryStack
+ colorScale="qualitative"
+ domainPadding={{ x: compact ? 5 : 15 }}
+ >
{graphData.categories.map(category => (
<VictoryBar
key={category.id}
@@ -65,7 +71,7 @@ function CategorySpendingGraph({
dependentAxis
crossAxis={false}
invertAxis
- tickCount={compact ? 2 : undefined}
+ tickCount={compact ? 2 : height / 70}
/>
</VictoryChart>
)}
diff --git a/packages/desktop-client/src/components/reports/graphs/NetWorthGraph.tsx b/packages/desktop-client/src/components/reports/graphs/NetWorthGraph.tsx
index 5990ffa84..f19da27d8 100644
--- a/packages/desktop-client/src/components/reports/graphs/NetWorthGraph.tsx
+++ b/packages/desktop-client/src/components/reports/graphs/NetWorthGraph.tsx
@@ -92,12 +92,16 @@ function NetWorthGraph({ style, graphData, compact }: NetWorthGraphProps) {
// eslint-disable-next-line rulesdir/typography
tickFormat={x => d.format(x, "MMM ''yy")}
tickValues={graphData.data.map(item => item.x)}
- tickCount={Math.min(5, graphData.data.length)}
+ tickCount={Math.min(width / 220, graphData.data.length)}
offsetY={50}
/>
)}
{!compact && (
- <VictoryAxis dependentAxis crossAxis={!graphData.hasNegative} />
+ <VictoryAxis
+ dependentAxis
+ tickCount={Math.round(height / 70)}
+ crossAxis={!graphData.hasNegative}
+ />
)}
</Chart>
)
diff --git a/upcoming-release-notes/1592.md b/upcoming-release-notes/1592.md
new file mode 100644
index 000000000..823c5ef17
--- /dev/null
+++ b/upcoming-release-notes/1592.md
@@ -0,0 +1,6 @@
+---
+category: Enhancements
+authors: [OlegWock]
+---
+
+Make reports more responsive.
--
GitLab