From 80a7a9873afcd21c3f4641450ea8c1d8cd1b7cc3 Mon Sep 17 00:00:00 2001
From: Neil <55785687+carkom@users.noreply.github.com>
Date: Wed, 25 Sep 2024 12:08:43 +0100
Subject: [PATCH] SpendingReport: Fixing some display issues (#3451)
* work
* notes
* merge fixes
* legenditem
* VRT fixes
---
.../src/components/reports/LegendItem.tsx | 45 ++++++++++++
.../src/components/reports/ReportLegend.tsx | 31 ++------
.../reports/graphs/SpendingGraph.tsx | 4 +-
.../components/reports/reports/Spending.tsx | 71 +++++++++++++------
.../desktop-client/src/style/themes/dark.ts | 1 +
.../src/style/themes/development.ts | 1 +
.../desktop-client/src/style/themes/light.ts | 1 +
.../src/style/themes/midnight.ts | 1 +
upcoming-release-notes/3451.md | 6 ++
9 files changed, 111 insertions(+), 50 deletions(-)
create mode 100644 packages/desktop-client/src/components/reports/LegendItem.tsx
create mode 100644 upcoming-release-notes/3451.md
diff --git a/packages/desktop-client/src/components/reports/LegendItem.tsx b/packages/desktop-client/src/components/reports/LegendItem.tsx
new file mode 100644
index 000000000..8d17d9dfc
--- /dev/null
+++ b/packages/desktop-client/src/components/reports/LegendItem.tsx
@@ -0,0 +1,45 @@
+import React from 'react';
+
+import { type CSSProperties } from '../../style/types';
+import { Text } from '../common/Text';
+import { View } from '../common/View';
+
+export function LegendItem({
+ color,
+ label,
+ style,
+}: {
+ color: string;
+ label: string;
+ style?: CSSProperties;
+}) {
+ return (
+ <View
+ style={{
+ padding: 10,
+ flexDirection: 'row',
+ alignItems: 'center',
+ ...style,
+ }}
+ >
+ <View
+ style={{
+ marginRight: 5,
+ borderRadius: 1000,
+ width: 14,
+ height: 14,
+ backgroundColor: color,
+ }}
+ />
+ <Text
+ style={{
+ whiteSpace: 'nowrap',
+ textOverflow: 'ellipsis',
+ flexShrink: 0,
+ }}
+ >
+ {label}
+ </Text>
+ </View>
+ );
+}
diff --git a/packages/desktop-client/src/components/reports/ReportLegend.tsx b/packages/desktop-client/src/components/reports/ReportLegend.tsx
index 91ea3f86c..3e9d473a0 100644
--- a/packages/desktop-client/src/components/reports/ReportLegend.tsx
+++ b/packages/desktop-client/src/components/reports/ReportLegend.tsx
@@ -4,6 +4,7 @@ import { theme, styles } from '../../style';
import { Text } from '../common/Text';
import { View } from '../common/View';
+import { LegendItem } from './LegendItem';
import { ReportOptions } from './ReportOptions';
type ReportLegendProps = {
@@ -39,33 +40,11 @@ export function ReportLegend({ legend, groupBy, interval }: ReportLegendProps) {
{legend &&
legend.map(item => {
return (
- <View
+ <LegendItem
key={item.name}
- style={{
- padding: 10,
- flexDirection: 'row',
- alignItems: 'center',
- }}
- >
- <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>
+ color={item.color}
+ label={item.name}
+ />
);
})}
</View>
diff --git a/packages/desktop-client/src/components/reports/graphs/SpendingGraph.tsx b/packages/desktop-client/src/components/reports/graphs/SpendingGraph.tsx
index b8c035291..d648e7ee9 100644
--- a/packages/desktop-client/src/components/reports/graphs/SpendingGraph.tsx
+++ b/packages/desktop-client/src/components/reports/graphs/SpendingGraph.tsx
@@ -299,10 +299,10 @@ export function SpendingGraph({
activeDot={false}
animationDuration={0}
dataKey={val => getVal(val, selection)}
- stroke="gray"
+ stroke={theme.reportsGray}
strokeDasharray="10 10"
strokeWidth={3}
- fill="gray"
+ fill={theme.reportsGray}
fillOpacity={0.2}
/>
</AreaChart>
diff --git a/packages/desktop-client/src/components/reports/reports/Spending.tsx b/packages/desktop-client/src/components/reports/reports/Spending.tsx
index 4f5407a4a..f8d44b93d 100644
--- a/packages/desktop-client/src/components/reports/reports/Spending.tsx
+++ b/packages/desktop-client/src/components/reports/reports/Spending.tsx
@@ -32,6 +32,7 @@ import { MobileBackButton } from '../../mobile/MobileBackButton';
import { MobilePageHeader, Page, PageHeader } from '../../Page';
import { PrivacyFilter } from '../../PrivacyFilter';
import { SpendingGraph } from '../graphs/SpendingGraph';
+import { LegendItem } from '../LegendItem';
import { LoadingIndicator } from '../LoadingIndicator';
import { ModeButton } from '../ModeButton';
import { calculateSpendingReportTimeRange } from '../reportRanges';
@@ -169,7 +170,12 @@ function SpendingInternal({ widget }: SpendingInternalProps) {
? 27
: monthUtils.getDay(monthUtils.currentDay()) - 1;
- const showCompareTo = Math.abs(data.intervalData[27].compareTo) > 0;
+ const showCompareTo =
+ compareTo === monthUtils.currentMonth() ||
+ Math.abs(data.intervalData[27].compareTo) > 0;
+ const showCompare =
+ compare === monthUtils.currentMonth() ||
+ Math.abs(data.intervalData[27].compare) > 0;
const title = widget?.meta?.name ?? t('Monthly Spending');
@@ -431,6 +437,24 @@ function SpendingInternal({ widget }: SpendingInternalProps) {
flexDirection: 'row',
}}
>
+ <View>
+ <LegendItem
+ color={theme.reportsGreen}
+ label={monthUtils.format(compare, 'MMM, yyyy')}
+ style={{ padding: 0, paddingBottom: 10 }}
+ />
+ <LegendItem
+ color={theme.reportsGray}
+ label={
+ reportMode === 'single-month'
+ ? monthUtils.format(compareTo, 'MMM, yyyy')
+ : reportMode === 'budget'
+ ? 'Budgeted'
+ : 'Average'
+ }
+ style={{ padding: 0, paddingBottom: 10 }}
+ />
+ </View>
<View style={{ flex: 1 }} />
<View
style={{
@@ -439,7 +463,7 @@ function SpendingInternal({ widget }: SpendingInternalProps) {
}}
>
<View>
- {showCompareTo && (
+ {showCompare && (
<AlignedText
style={{ marginBottom: 5, minWidth: 210 }}
left={
@@ -459,12 +483,13 @@ function SpendingInternal({ widget }: SpendingInternalProps) {
}
/>
)}
- {reportMode === 'single-month' && (
+ {reportMode === 'single-month' && showCompareTo && (
<AlignedText
style={{ marginBottom: 5, minWidth: 210 }}
left={
<Block>
- Spent {monthUtils.format(compareTo, 'MMM, yyyy')}:
+ Spent {monthUtils.format(compareTo, 'MMM, yyyy')}
+ {compare === monthUtils.currentMonth() && ' MTD'}:
</Block>
}
right={
@@ -479,24 +504,26 @@ function SpendingInternal({ widget }: SpendingInternalProps) {
/>
)}
</View>
- <AlignedText
- style={{ marginBottom: 5, minWidth: 210 }}
- left={
- <Block>
- Budgeted
- {compare === monthUtils.currentMonth() && ' MTD'}:
- </Block>
- }
- right={
- <Text style={{ fontWeight: 600 }}>
- <PrivacyFilter blurIntensity={5}>
- {amountToCurrency(
- Math.abs(data.intervalData[todayDay].budget),
- )}
- </PrivacyFilter>
- </Text>
- }
- />
+ {Math.abs(data.intervalData[todayDay].budget) > 0 && (
+ <AlignedText
+ style={{ marginBottom: 5, minWidth: 210 }}
+ left={
+ <Block>
+ Budgeted
+ {compare === monthUtils.currentMonth() && ' MTD'}:
+ </Block>
+ }
+ right={
+ <Text style={{ fontWeight: 600 }}>
+ <PrivacyFilter blurIntensity={5}>
+ {amountToCurrency(
+ Math.abs(data.intervalData[todayDay].budget),
+ )}
+ </PrivacyFilter>
+ </Text>
+ }
+ />
+ )}
{showAverage && (
<AlignedText
style={{ marginBottom: 5, minWidth: 210 }}
diff --git a/packages/desktop-client/src/style/themes/dark.ts b/packages/desktop-client/src/style/themes/dark.ts
index 38aa2a88c..76d3b4b81 100644
--- a/packages/desktop-client/src/style/themes/dark.ts
+++ b/packages/desktop-client/src/style/themes/dark.ts
@@ -191,6 +191,7 @@ export const pillTextSubdued = colorPalette.navy500;
export const reportsRed = colorPalette.red300;
export const reportsBlue = colorPalette.blue400;
export const reportsGreen = colorPalette.green400;
+export const reportsGray = colorPalette.gray400;
export const reportsLabel = pageText;
export const reportsInnerLabel = colorPalette.navy800;
diff --git a/packages/desktop-client/src/style/themes/development.ts b/packages/desktop-client/src/style/themes/development.ts
index b379c2172..4cd616387 100644
--- a/packages/desktop-client/src/style/themes/development.ts
+++ b/packages/desktop-client/src/style/themes/development.ts
@@ -190,6 +190,7 @@ export const pillTextSubdued = colorPalette.navy200;
export const reportsRed = colorPalette.red300;
export const reportsBlue = colorPalette.blue400;
export const reportsGreen = colorPalette.green400;
+export const reportsGray = colorPalette.gray400;
export const reportsLabel = colorPalette.navy900;
export const reportsInnerLabel = colorPalette.navy800;
diff --git a/packages/desktop-client/src/style/themes/light.ts b/packages/desktop-client/src/style/themes/light.ts
index ca1b2a6f4..178175806 100644
--- a/packages/desktop-client/src/style/themes/light.ts
+++ b/packages/desktop-client/src/style/themes/light.ts
@@ -193,6 +193,7 @@ export const pillTextSubdued = colorPalette.navy200;
export const reportsRed = colorPalette.red300;
export const reportsBlue = colorPalette.blue400;
export const reportsGreen = colorPalette.green400;
+export const reportsGray = colorPalette.gray400;
export const reportsLabel = colorPalette.navy900;
export const reportsInnerLabel = colorPalette.navy800;
diff --git a/packages/desktop-client/src/style/themes/midnight.ts b/packages/desktop-client/src/style/themes/midnight.ts
index f851e7163..0b4e0bbb8 100644
--- a/packages/desktop-client/src/style/themes/midnight.ts
+++ b/packages/desktop-client/src/style/themes/midnight.ts
@@ -193,6 +193,7 @@ export const pillTextSubdued = colorPalette.gray500;
export const reportsRed = colorPalette.red300;
export const reportsBlue = colorPalette.blue400;
export const reportsGreen = colorPalette.green400;
+export const reportsGray = colorPalette.gray400;
export const reportsLabel = pageText;
export const reportsInnerLabel = colorPalette.navy800;
diff --git a/upcoming-release-notes/3451.md b/upcoming-release-notes/3451.md
new file mode 100644
index 000000000..9539cc6d7
--- /dev/null
+++ b/upcoming-release-notes/3451.md
@@ -0,0 +1,6 @@
+---
+category: Enhancements
+authors: [carkom]
+---
+
+Fixing display issues in spending report and adding a legend.
--
GitLab