diff --git a/packages/desktop-client/e2e/reports.test.js-snapshots/Reports-loads-net-worth-graph-and-checks-visuals-1-chromium-linux.png b/packages/desktop-client/e2e/reports.test.js-snapshots/Reports-loads-net-worth-graph-and-checks-visuals-1-chromium-linux.png index d6effa284d177a5b82a535e2b3d001ef7cd5a2f6..6e65aea4e2462823f73f189281ab10337b84d671 100644 Binary files a/packages/desktop-client/e2e/reports.test.js-snapshots/Reports-loads-net-worth-graph-and-checks-visuals-1-chromium-linux.png and b/packages/desktop-client/e2e/reports.test.js-snapshots/Reports-loads-net-worth-graph-and-checks-visuals-1-chromium-linux.png differ diff --git a/packages/desktop-client/e2e/reports.test.js-snapshots/Reports-loads-net-worth-graph-and-checks-visuals-2-chromium-linux.png b/packages/desktop-client/e2e/reports.test.js-snapshots/Reports-loads-net-worth-graph-and-checks-visuals-2-chromium-linux.png index a731be615c83168c5fd3ed131a87078b98cde960..cd3672d33309f39b09630637836daa75babc2f06 100644 Binary files a/packages/desktop-client/e2e/reports.test.js-snapshots/Reports-loads-net-worth-graph-and-checks-visuals-2-chromium-linux.png and b/packages/desktop-client/e2e/reports.test.js-snapshots/Reports-loads-net-worth-graph-and-checks-visuals-2-chromium-linux.png differ diff --git a/packages/desktop-client/e2e/reports.test.js-snapshots/Reports-loads-net-worth-graph-and-checks-visuals-3-chromium-linux.png b/packages/desktop-client/e2e/reports.test.js-snapshots/Reports-loads-net-worth-graph-and-checks-visuals-3-chromium-linux.png index 67c540f9ac964259675e7a298025d5cd5c409233..386eaeb60e1b7ead9505ba877d432c233f804614 100644 Binary files a/packages/desktop-client/e2e/reports.test.js-snapshots/Reports-loads-net-worth-graph-and-checks-visuals-3-chromium-linux.png and b/packages/desktop-client/e2e/reports.test.js-snapshots/Reports-loads-net-worth-graph-and-checks-visuals-3-chromium-linux.png differ diff --git a/packages/desktop-client/src/components/reports/graphs/NetWorthGraph.tsx b/packages/desktop-client/src/components/reports/graphs/NetWorthGraph.tsx index de2aa02949f115c5e3ea22e2f88c976a5d6844f0..98353b31396e4644b53a5f528bebe4cb519d890c 100644 --- a/packages/desktop-client/src/components/reports/graphs/NetWorthGraph.tsx +++ b/packages/desktop-client/src/components/reports/graphs/NetWorthGraph.tsx @@ -121,7 +121,12 @@ export function NetWorthGraph({ width={width} height={height} data={graphData.data} - margin={{ top: 0, right: 0, left: 0, bottom: 0 }} + margin={{ + top: 0, + right: 0, + left: compact ? 0 : computePadding(graphData.data), + bottom: 0, + }} > {compact ? null : ( <CartesianGrid strokeDasharray="3 3" vertical={false} /> @@ -180,3 +185,22 @@ export function NetWorthGraph({ </Container> ); } + +/** + * Add left padding for Y-axis for when large amounts get clipped + * @param netWorthData + * @returns left padding for Net worth graph + */ +function computePadding(netWorthData: Array<{ y: number }>) { + /** + * Convert to string notation, get longest string length + */ + const maxLength = Math.max( + ...netWorthData.map(({ y }) => { + return Math.round(y).toLocaleString().length; + }), + ); + + // No additional left padding is required for upto 5 characters + return Math.max(0, (maxLength - 5) * 5); +} diff --git a/upcoming-release-notes/2818.md b/upcoming-release-notes/2818.md new file mode 100644 index 0000000000000000000000000000000000000000..c191c90e3ff4ab5595a0ca87d9e5f2ebc7795dbc --- /dev/null +++ b/upcoming-release-notes/2818.md @@ -0,0 +1,6 @@ +--- +category: Bugfix +authors: [sreetamdas] +--- + +Fix Net Worth amounts being clipped when over 5 characters