From 625390e045071a68882225c31f5dd19f45b1a297 Mon Sep 17 00:00:00 2001
From: Mohamed El Mahdali <mohamed.elmahdali.developer@gmail.com>
Date: Sat, 13 Apr 2024 16:21:08 +0000
Subject: [PATCH] fix(#2575): Stop cash flow card labels from getting cutting
 off if bar height is too low

---
 .../reports/reports/CashFlowCard.jsx          | 72 +++++++++++++------
 1 file changed, 50 insertions(+), 22 deletions(-)

diff --git a/packages/desktop-client/src/components/reports/reports/CashFlowCard.jsx b/packages/desktop-client/src/components/reports/reports/CashFlowCard.jsx
index 07759a4ece3..ced4d06b6fc 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,43 @@ 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 xOffsets = {
+    right: 5,
+    left: -valueLengthOffset,
+  };
+
+  const anchorValue = {
+    right: 'start',
+    left: 'end',
+  };
+
   return (
     <>
       <text
-        {...props}
-        dy={10}
-        dx={position === 'right' ? 20 : -5}
-        textAnchor={position === 'right' ? 'start' : 'end'}
+        x={x + barWidth + xOffsets[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 + xOffsets[position]}
+        y={yOffset + 25}
+        textAnchor={anchorValue[position]}
         fill={theme.tableText}
       >
         <PrivacyFilter>{integerToCurrency(value)}</PrivacyFilter>
@@ -100,18 +120,26 @@ 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"
+                  content={props =>
+                    CustomLabel({ ...props, name: 'Income', position: 'left' })
+                  }
+                />
+              </Bar>
+              <Bar dataKey="expenses" fill={chartTheme.colors.red} barSize={14}>
+                <LabelList
+                  dataKey="expenses"
+                  content={props =>
+                    CustomLabel({
+                      ...props,
+                      name: 'Expenses',
+                      position: 'right',
+                    })
+                  }
+                />
+              </Bar>
             </BarChart>
           </ResponsiveContainer>
         ) : (