From d18fd36ae151627bf9c38a29b307ae0b810c7685 Mon Sep 17 00:00:00 2001
From: Neil <55785687+carkom@users.noreply.github.com>
Date: Sun, 4 Aug 2024 20:06:48 +0100
Subject: [PATCH] Spending Report: UI Adjustments (#3166)
* adjust UI
* notes
* revert cashflow change
* merge fixes
* remove bold, adjust style code
---
.../src/components/reports/ModeButton.tsx | 2 +-
.../reports/graphs/SpendingGraph.tsx | 4 +-
.../components/reports/reports/Spending.tsx | 254 +++++++++---------
upcoming-release-notes/3166.md | 6 +
4 files changed, 135 insertions(+), 131 deletions(-)
create mode 100644 upcoming-release-notes/3166.md
diff --git a/packages/desktop-client/src/components/reports/ModeButton.tsx b/packages/desktop-client/src/components/reports/ModeButton.tsx
index 503d9692e..e0bb035f9 100644
--- a/packages/desktop-client/src/components/reports/ModeButton.tsx
+++ b/packages/desktop-client/src/components/reports/ModeButton.tsx
@@ -24,6 +24,7 @@ export function ModeButton({
backgroundColor: theme.menuBackground,
marginRight: 5,
fontSize: 'inherit',
+ ...style,
...(selected && {
backgroundColor: theme.buttonPrimaryBackground,
color: theme.buttonPrimaryText,
@@ -32,7 +33,6 @@ export function ModeButton({
color: theme.buttonPrimaryTextHover,
},
}),
- ...style,
}}
onClick={onSelect}
>
diff --git a/packages/desktop-client/src/components/reports/graphs/SpendingGraph.tsx b/packages/desktop-client/src/components/reports/graphs/SpendingGraph.tsx
index f6ad918a5..a8a99807c 100644
--- a/packages/desktop-client/src/components/reports/graphs/SpendingGraph.tsx
+++ b/packages/desktop-client/src/components/reports/graphs/SpendingGraph.tsx
@@ -227,13 +227,13 @@ export function SpendingGraph({
data.intervalData && (
<ResponsiveContainer>
<div>
- {!compact && <div style={{ marginTop: '15px' }} />}
+ {!compact && <div style={{ marginTop: '5px' }} />}
<AreaChart
width={width}
height={height}
data={data.intervalData}
margin={{
- top: 10,
+ top: 0,
right: 0,
left: 0,
bottom: 0,
diff --git a/packages/desktop-client/src/components/reports/reports/Spending.tsx b/packages/desktop-client/src/components/reports/reports/Spending.tsx
index 82992ae93..4f7391376 100644
--- a/packages/desktop-client/src/components/reports/reports/Spending.tsx
+++ b/packages/desktop-client/src/components/reports/reports/Spending.tsx
@@ -139,48 +139,118 @@ export function Spending() {
<View
style={{
flexDirection: 'row',
+ alignItems: 'center',
+ padding: 20,
+ paddingBottom: conditions.length > 0 ? 0 : 10,
flexShrink: 0,
}}
>
<View
style={{
- padding: 20,
- flexShrink: 0,
+ alignItems: 'center',
+ flexDirection: 'row',
+ marginRight: 5,
}}
>
- {conditions && (
- <View style={{ flexDirection: 'row' }}>
- <FilterButton
- onApply={onApplyFilter}
- compact={false}
- hover={false}
- exclude={['date']}
- />
- <Tooltip
- placement="bottom start"
- content={<Text>Save compare and filter options</Text>}
- style={{
- ...styles.tooltip,
- lineHeight: 1.5,
- padding: '6px 10px',
- marginLeft: 10,
- }}
- >
- <Button
- type="primary"
- style={{
- marginLeft: 10,
- }}
- onClick={saveFilter}
- disabled={filterSaved ? true : false}
- >
- {filterSaved ? 'Saved' : 'Save'}
- </Button>
- </Tooltip>
- <View style={{ flex: 1 }} />
- </View>
+ <Text
+ style={{
+ paddingRight: 5,
+ }}
+ >
+ Compare
+ </Text>
+ <Select
+ value={compare}
+ onChange={e => {
+ setCompare(e);
+ if (mode === 'lastMonth') setMode('twoMonthsPrevious');
+ if (mode === 'twoMonthsPrevious') setMode('lastMonth');
+ }}
+ options={[
+ ['thisMonth', 'this month'],
+ ['lastMonth', 'last month'],
+ ]}
+ />
+ <Text
+ style={{
+ paddingRight: 10,
+ paddingLeft: 5,
+ }}
+ >
+ to the:
+ </Text>
+ <ModeButton
+ selected={['lastMonth', 'twoMonthsPrevious'].includes(mode)}
+ style={{
+ backgroundColor: 'inherit',
+ }}
+ onSelect={() =>
+ setMode(
+ compare === 'thisMonth' ? 'lastMonth' : 'twoMonthsPrevious',
+ )
+ }
+ >
+ Previous month
+ </ModeButton>
+ {showLastYear && (
+ <ModeButton
+ selected={mode === 'lastYear'}
+ onSelect={() => setMode('lastYear')}
+ style={{
+ backgroundColor: 'inherit',
+ }}
+ >
+ Last year
+ </ModeButton>
+ )}
+ {showAverage && (
+ <ModeButton
+ selected={mode === 'average'}
+ onSelect={() => setMode('average')}
+ style={{
+ backgroundColor: 'inherit',
+ }}
+ >
+ Average
+ </ModeButton>
)}
</View>
+ <View
+ style={{
+ width: 1,
+ height: 30,
+ backgroundColor: theme.pillBorderDark,
+ marginRight: 10,
+ }}
+ />{' '}
+ <FilterButton
+ onApply={onApplyFilter}
+ compact={false}
+ hover={false}
+ exclude={['date']}
+ />
+ <View style={{ flex: 1 }} />
+ <Tooltip
+ placement="bottom start"
+ content={<Text>Save compare and filter options</Text>}
+ style={{
+ ...styles.tooltip,
+ lineHeight: 1.5,
+ padding: '6px 10px',
+ marginLeft: 10,
+ }}
+ >
+ <Button
+ type="primary"
+ style={{
+ marginLeft: 10,
+ }}
+ onClick={saveFilter}
+ disabled={filterSaved ? true : false}
+ >
+ {filterSaved ? 'Saved' : 'Save'}
+ </Button>
+ </Tooltip>
</View>
<View
style={{
@@ -199,7 +269,7 @@ export function Spending() {
<View
style={{
marginBottom: 10,
- marginLeft: 5,
+ marginLeft: 20,
flexShrink: 0,
flexDirection: 'row',
spacing: 2,
@@ -235,26 +305,21 @@ export function Spending() {
>
<View
style={{
- alignItems: 'flex-end',
- paddingTop: 10,
+ alignItems: 'center',
+ flexDirection: 'row',
}}
>
+ <View style={{ flex: 1 }} />
<View
style={{
- ...styles.mediumText,
- fontWeight: 500,
- marginBottom: 5,
+ alignItems: 'flex-end',
+ color: theme.pageText,
}}
>
{showPreviousMonth && (
- <View
- style={{
- ...styles.mediumText,
- fontWeight: 500,
- marginBottom: 5,
- }}
- >
+ <View>
<AlignedText
+ style={{ marginBottom: 5, minWidth: 210 }}
left={
<Block>
Spent{' '}
@@ -262,7 +327,7 @@ export function Spending() {
</Block>
}
right={
- <Text>
+ <Text style={{ fontWeight: 600 }}>
<PrivacyFilter blurIntensity={5}>
{amountToCurrency(
Math.abs(
@@ -278,6 +343,7 @@ export function Spending() {
}
/>
<AlignedText
+ style={{ marginBottom: 5, minWidth: 210 }}
left={
<Block>
Spent{' '}
@@ -288,7 +354,7 @@ export function Spending() {
</Block>
}
right={
- <Text>
+ <Text style={{ fontWeight: 600 }}>
<PrivacyFilter blurIntensity={5}>
{amountToCurrency(
Math.abs(
@@ -307,13 +373,14 @@ export function Spending() {
)}
{showAverage && (
<AlignedText
+ style={{ marginBottom: 5, minWidth: 210 }}
left={
<Block>
Spent Average{compare === 'thisMonth' && ' MTD'}:
</Block>
}
right={
- <Text>
+ <Text style={{ fontWeight: 600 }}>
<PrivacyFilter blurIntensity={5}>
{amountToCurrency(
Math.abs(data.intervalData[todayDay].average),
@@ -326,7 +393,7 @@ export function Spending() {
</View>
</View>
{!showPreviousMonth ? (
- <View style={{ marginTop: 30 }}>
+ <View style={{ marginTop: 20 }}>
<h1>Additional data required to generate graph</h1>
<Paragraph>
Currently, there is insufficient data to display any
@@ -334,85 +401,16 @@ export function Spending() {
transactions from last month to enable graph visualization.
</Paragraph>
</View>
+ ) : dataCheck ? (
+ <SpendingGraph
+ style={{ flexGrow: 1 }}
+ compact={false}
+ data={data}
+ mode={mode}
+ compare={compare}
+ />
) : (
- <>
- <View
- style={{
- alignItems: 'center',
- flexDirection: 'row',
- }}
- >
- <Text
- style={{
- paddingRight: 5,
- }}
- >
- Compare
- </Text>
- <Select
- value={compare}
- onChange={e => {
- setCompare(e);
- if (mode === 'lastMonth') setMode('twoMonthsPrevious');
- if (mode === 'twoMonthsPrevious') setMode('lastMonth');
- }}
- options={[
- ['thisMonth', 'this month'],
- ['lastMonth', 'last month'],
- ]}
- />
- <Text
- style={{
- paddingRight: 10,
- paddingLeft: 5,
- }}
- >
- to the:
- </Text>
- <ModeButton
- selected={['lastMonth', 'twoMonthsPrevious'].includes(
- mode,
- )}
- onSelect={() =>
- setMode(
- compare === 'thisMonth'
- ? 'lastMonth'
- : 'twoMonthsPrevious',
- )
- }
- >
- Month previous
- </ModeButton>
- {showLastYear && (
- <ModeButton
- selected={mode === 'lastYear'}
- onSelect={() => setMode('lastYear')}
- >
- Last year
- </ModeButton>
- )}
- {showAverage && (
- <ModeButton
- selected={mode === 'average'}
- onSelect={() => setMode('average')}
- >
- Average
- </ModeButton>
- )}
- </View>
-
- {dataCheck ? (
- <SpendingGraph
- style={{ flexGrow: 1 }}
- compact={false}
- data={data}
- mode={mode}
- compare={compare}
- />
- ) : (
- <LoadingIndicator message="Loading report..." />
- )}
- </>
+ <LoadingIndicator message="Loading report..." />
)}
{showAverage && (
<View style={{ marginTop: 30 }}>
diff --git a/upcoming-release-notes/3166.md b/upcoming-release-notes/3166.md
new file mode 100644
index 000000000..a14093b7c
--- /dev/null
+++ b/upcoming-release-notes/3166.md
@@ -0,0 +1,6 @@
+---
+category: Maintenance
+authors: [carkom]
+---
+
+Tweaking the UI of spending report to make it more consistent with other reports.
--
GitLab