Enhance Y-Axis Scaling on Net Worth Graph (#1709)

packages/desktop-client/src/components/reports/NetWorth.js

@@ -43,7 +43,6 @@ export default function NetWorth() {
     [start, end, accounts, filters, conditionsOp],
   );
   const data = useReport('net_worth', params);
-
   useEffect(() => {
     async function run() {
       const trans = await send('get-earliest-transaction');
@@ -133,6 +132,9 @@ export default function NetWorth() {
           start={start}
           end={end}
           graphData={data.graphData}
+          domain={{
+            y: [data.lowestNetWorth * 0.99, data.highestNetWorth * 1.01],
+          }}
         />
 
         <View style={{ marginTop: 30 }}>

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

@@ -21,8 +21,16 @@ type NetWorthGraphProps = {
   style?: CSSProperties;
   graphData;
   compact: boolean;
+  domain?: {
+    y?: [number, number];
+  };
 };
-function NetWorthGraph({ style, graphData, compact }: NetWorthGraphProps) {
+function NetWorthGraph({
+  style,
+  graphData,
+  compact,
+  domain,
+}: NetWorthGraphProps) {
   const Chart = compact ? VictoryGroup : VictoryChart;
 
   return (
@@ -38,6 +46,7 @@ function NetWorthGraph({ style, graphData, compact }: NetWorthGraphProps) {
             scale={{ x: 'time', y: 'linear' }}
             theme={chartTheme}
             domainPadding={{ x: 0, y: 10 }}
+            domain={domain}
             width={width}
             height={height}
             containerComponent={

packages/desktop-client/src/components/reports/graphs/net-worth-spreadsheet.tsx

@@ -93,6 +93,8 @@ function recalculate(data, start, end) {
   let hasNegative = false;
   let startNetWorth = 0;
   let endNetWorth = 0;
+  let lowestNetWorth = null;
+  let highestNetWorth = null;
 
   const graphData = months.reduce((arr, month, idx) => {
     let debt = 0;
@@ -140,6 +142,15 @@ function recalculate(data, start, end) {
     endNetWorth = total;
 
     arr.push({ x, y: integerToAmount(total), premadeLabel: label });
+
+    arr.forEach(item => {
+      if (item.y < lowestNetWorth || lowestNetWorth === null) {
+        lowestNetWorth = item.y;
+      }
+      if (item.y > highestNetWorth || highestNetWorth === null) {
+        highestNetWorth = item.y;
+      }
+    });
     return arr;
   }, []);
 
@@ -152,5 +163,7 @@ function recalculate(data, start, end) {
     },
     netWorth: endNetWorth,
     totalChange: endNetWorth - startNetWorth,
+    lowestNetWorth,
+    highestNetWorth,
   };
 }

upcoming-release-notes/1709.md

@@ -0,0 +1,6 @@
+---
+category: Enhancements
+authors: [Crazypkr1099]
+---
+
+Enhance Y-Axis Scaling on Net Worth Graph