diff --git a/packages/desktop-client/src/components/reports/NetWorth.js b/packages/desktop-client/src/components/reports/NetWorth.js index 5c9a8acbe6..e03f82d5a6 100644 --- a/packages/desktop-client/src/components/reports/NetWorth.js +++ b/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], + }} /> diff --git a/packages/desktop-client/src/components/reports/graphs/NetWorthGraph.tsx b/packages/desktop-client/src/components/reports/graphs/NetWorthGraph.tsx index 5c58527bd1..ae18bd1f94 100644 --- a/packages/desktop-client/src/components/reports/graphs/NetWorthGraph.tsx +++ b/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={ diff --git a/packages/desktop-client/src/components/reports/graphs/net-worth-spreadsheet.tsx b/packages/desktop-client/src/components/reports/graphs/net-worth-spreadsheet.tsx index 997dffc4fb..4750d289f6 100644 --- a/packages/desktop-client/src/components/reports/graphs/net-worth-spreadsheet.tsx +++ b/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, }; } diff --git a/upcoming-release-notes/1709.md b/upcoming-release-notes/1709.md new file mode 100644 index 0000000000..4955bfc029 --- /dev/null +++ b/upcoming-release-notes/1709.md @@ -0,0 +1,6 @@ +--- +category: Enhancements +authors: [Crazypkr1099] +--- + +Enhance Y-Axis Scaling on Net Worth Graph