Add computed padding for handling clipped large Net worth amounts (#2818)

* Add computed padding for handling clipped Net worth amounts

* Add comment, early handle 5 character case

* Add release note

* Update packages/desktop-client/src/components/reports/graphs/NetWorthGraph.tsx

Co-authored-by: Robert Dyer <rdyer@unl.edu>

* Update vrt snapshots

* Fix NetWorthGraph cutoff when `compact` is true

This happens in case of `ReportCard`

* Update VRT snapshots to revert to original

* Revert snapshots to original

* vrt

---------

Co-authored-by: Robert Dyer <rdyer@unl.edu>
Co-authored-by: youngcw <calebyoung94@gmail.com>

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);
+}

upcoming-release-notes/2818.md

@@ -0,0 +1,6 @@
+---
+category: Bugfix
+authors: [sreetamdas]
+---
+
+Fix Net Worth amounts being clipped when over 5 characters