From 1e462714e406a14adfc244de7bd58231994f2a0e Mon Sep 17 00:00:00 2001
From: Mohamed El Mahdali <mohamed.elmahdali.developer@gmail.com>
Date: Tue, 16 Apr 2024 18:27:13 +0100
Subject: [PATCH] fix(#2575): Stop cash flow card labels from getting cutting
off if bar height is too low (#2597)
---
.../reports/reports/CashFlowCard.jsx | 71 +++++++++++++------
upcoming-release-notes/2597.md | 6 ++
2 files changed, 55 insertions(+), 22 deletions(-)
create mode 100644 upcoming-release-notes/2597.md
diff --git a/packages/desktop-client/src/components/reports/reports/CashFlowCard.jsx b/packages/desktop-client/src/components/reports/reports/CashFlowCard.jsx
index 07759a4ec..ed8daeb6a 100644
--- a/packages/desktop-client/src/components/reports/reports/CashFlowCard.jsx
+++ b/packages/desktop-client/src/components/reports/reports/CashFlowCard.jsx
@@ -1,6 +1,6 @@
import React, { useState, useMemo, useCallback } from 'react';
-import { Bar, BarChart, ResponsiveContainer } from 'recharts';
+import { Bar, BarChart, LabelList, ResponsiveContainer } from 'recharts';
import * as monthUtils from 'loot-core/src/shared/months';
import { integerToCurrency } from 'loot-core/src/shared/util';
@@ -17,23 +17,48 @@ import { ReportCard } from '../ReportCard';
import { simpleCashFlow } from '../spreadsheets/cash-flow-spreadsheet';
import { useReport } from '../useReport';
-function CustomLabel({ value, name, position, ...props }) {
+function CustomLabel({
+ value,
+ name,
+ position,
+ x,
+ y,
+ width: barWidth,
+ height: barHeight,
+}) {
+ const valueLengthOffset = value.toString().length < 5 ? -40 : 20;
+
+ const yOffset = barHeight < 25 ? 105 : y;
+
+ const labelXOffsets = {
+ right: 6,
+ left: -valueLengthOffset + 1,
+ };
+
+ const valueXOffsets = {
+ right: 6,
+ left: -valueLengthOffset + 2,
+ };
+
+ const anchorValue = {
+ right: 'start',
+ left: 'end',
+ };
+
return (
<>
<text
- {...props}
- dy={10}
- dx={position === 'right' ? 20 : -5}
- textAnchor={position === 'right' ? 'start' : 'end'}
+ x={x + barWidth + labelXOffsets[position]}
+ y={yOffset + 10}
+ textAnchor={anchorValue[position]}
fill={theme.tableText}
>
{name}
</text>
<text
- {...props}
- dy={26}
- dx={position === 'right' ? 20 : -4}
- textAnchor={position === 'right' ? 'start' : 'end'}
+ x={x + barWidth + valueXOffsets[position]}
+ y={yOffset + 26}
+ textAnchor={anchorValue[position]}
fill={theme.tableText}
>
<PrivacyFilter>{integerToCurrency(value)}</PrivacyFilter>
@@ -100,18 +125,20 @@ export function CashFlowCard() {
bottom: 0,
}}
>
- <Bar
- dataKey="income"
- fill={chartTheme.colors.blue}
- barSize={14}
- label={<CustomLabel name="Income" position="left" />}
- />
- <Bar
- dataKey="expenses"
- fill={chartTheme.colors.red}
- barSize={14}
- label={<CustomLabel name="Expenses" position="right" />}
- />
+ <Bar dataKey="income" fill={chartTheme.colors.blue} barSize={14}>
+ <LabelList
+ dataKey="income"
+ position="left"
+ content={<CustomLabel name="Income" />}
+ />
+ </Bar>
+ <Bar dataKey="expenses" fill={chartTheme.colors.red} barSize={14}>
+ <LabelList
+ dataKey="expenses"
+ position="right"
+ content={<CustomLabel name="Expenses" />}
+ />
+ </Bar>
</BarChart>
</ResponsiveContainer>
) : (
diff --git a/upcoming-release-notes/2597.md b/upcoming-release-notes/2597.md
new file mode 100644
index 000000000..3e370b40f
--- /dev/null
+++ b/upcoming-release-notes/2597.md
@@ -0,0 +1,6 @@
+---
+category: Bugfix
+authors: [ttlgeek]
+---
+
+Stop cash flow card labels from getting cutting off if bar height is too low
--
GitLab