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 d6effa284d..6e65aea4e2 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 a731be615c..cd3672d333 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 67c540f9ac..386eaeb60e 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 de2aa02949..98353b3139 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 : ( @@ -180,3 +185,22 @@ export function NetWorthGraph({ ); } + +/** + * 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 0000000000..c191c90e3f --- /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