From d032fce7ea701aa054796a6b54eb914276ac6e08 Mon Sep 17 00:00:00 2001
From: Sreetam Das <sreetamdas@gmail.com>
Date: Fri, 19 Jul 2024 00:32:01 +0530
Subject: [PATCH] fix: number format config not being respected for graphs
(#2832)
* Add computed padding for handling clipped Net worth amounts
* Add comment, early handle 5 character case
* Add release note
* Use currency decimal preference for Net Worth graph Y-axis ticks
* use number format preference for `BarLineGraph` ticks
* use number format preference for checking `NetWorthGraph` tick overflow
* prevent `numberFormatConfig` overwrite
`getNumberFormat` uses `numberFormatConfig` as the default argument;
passing just `{ hideFraction: true }` caused `numberFormatConfig.format`
to be ignored
* add release note
* use `amountToCurrencyNoDecimal` instead for `{BarLine,NetWorth}Graph` ticks
---
.../src/components/reports/graphs/BarLineGraph.tsx | 4 +++-
.../src/components/reports/graphs/NetWorthGraph.tsx | 10 ++++++++--
packages/loot-core/src/shared/util.ts | 5 ++++-
upcoming-release-notes/2832.md | 6 ++++++
4 files changed, 21 insertions(+), 4 deletions(-)
create mode 100644 upcoming-release-notes/2832.md
diff --git a/packages/desktop-client/src/components/reports/graphs/BarLineGraph.tsx b/packages/desktop-client/src/components/reports/graphs/BarLineGraph.tsx
index ffdac1e01..c7e5ec785 100644
--- a/packages/desktop-client/src/components/reports/graphs/BarLineGraph.tsx
+++ b/packages/desktop-client/src/components/reports/graphs/BarLineGraph.tsx
@@ -13,6 +13,8 @@ import {
ResponsiveContainer,
} from 'recharts';
+import { amountToCurrencyNoDecimal } from 'loot-core/shared/util';
+
import { theme } from '../../../style';
import { type CSSProperties } from '../../../style';
import { AlignedText } from '../../common/AlignedText';
@@ -77,7 +79,7 @@ type BarLineGraphProps = {
export function BarLineGraph({ style, data, compact }: BarLineGraphProps) {
const tickFormatter = tick => {
- return `${Math.round(tick).toLocaleString()}`; // Formats the tick values as strings with commas
+ return `${amountToCurrencyNoDecimal(Math.round(tick))}`; // Formats the tick values as strings with commas
};
return (
diff --git a/packages/desktop-client/src/components/reports/graphs/NetWorthGraph.tsx b/packages/desktop-client/src/components/reports/graphs/NetWorthGraph.tsx
index 98353b313..3d84d5968 100644
--- a/packages/desktop-client/src/components/reports/graphs/NetWorthGraph.tsx
+++ b/packages/desktop-client/src/components/reports/graphs/NetWorthGraph.tsx
@@ -12,6 +12,8 @@ import {
ResponsiveContainer,
} from 'recharts';
+import { amountToCurrencyNoDecimal } from 'loot-core/shared/util';
+
import { usePrivacyMode } from '../../../hooks/usePrivacyMode';
import { useResponsive } from '../../../ResponsiveProvider';
import { theme } from '../../../style';
@@ -35,7 +37,11 @@ export function NetWorthGraph({
const { isNarrowWidth } = useResponsive();
const tickFormatter = tick => {
- return privacyMode ? '...' : `${Math.round(tick).toLocaleString()}`; // Formats the tick values as strings with commas
+ const res = privacyMode
+ ? '...'
+ : `${amountToCurrencyNoDecimal(Math.round(tick))}`; // Formats the tick values as strings with commas
+
+ return res;
};
const gradientOffset = () => {
@@ -197,7 +203,7 @@ function computePadding(netWorthData: Array<{ y: number }>) {
*/
const maxLength = Math.max(
...netWorthData.map(({ y }) => {
- return Math.round(y).toLocaleString().length;
+ return amountToCurrencyNoDecimal(Math.round(y)).length;
}),
);
diff --git a/packages/loot-core/src/shared/util.ts b/packages/loot-core/src/shared/util.ts
index 7a45a48f8..0f2a10c10 100644
--- a/packages/loot-core/src/shared/util.ts
+++ b/packages/loot-core/src/shared/util.ts
@@ -341,7 +341,10 @@ export function amountToCurrency(n) {
}
export function amountToCurrencyNoDecimal(n) {
- return getNumberFormat({ hideFraction: true }).formatter.format(n);
+ return getNumberFormat({
+ ...numberFormatConfig,
+ hideFraction: true,
+ }).formatter.format(n);
}
export function currencyToAmount(str: string) {
diff --git a/upcoming-release-notes/2832.md b/upcoming-release-notes/2832.md
new file mode 100644
index 000000000..73ba6d988
--- /dev/null
+++ b/upcoming-release-notes/2832.md
@@ -0,0 +1,6 @@
+---
+category: Bugfix
+authors: [sreetamdas]
+---
+
+Fix number format preference not being used for graphs
--
GitLab