diff --git a/packages/desktop-client/src/components/reports/graphs/CashFlowGraph.tsx b/packages/desktop-client/src/components/reports/graphs/CashFlowGraph.tsx index 4cc94bc14d8..9e461df8acc 100644 --- a/packages/desktop-client/src/components/reports/graphs/CashFlowGraph.tsx +++ b/packages/desktop-client/src/components/reports/graphs/CashFlowGraph.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { useState } from 'react'; import * as d from 'date-fns'; import { css } from 'glamor'; @@ -16,7 +16,10 @@ import { } from 'recharts'; import { usePrivacyMode } from 'loot-core/src/client/privacy'; -import { amountToCurrency } from 'loot-core/src/shared/util'; +import { + amountToCurrency, + amountToCurrencyNoDecimal, +} from 'loot-core/src/shared/util'; import { theme } from '../../../style'; import { AlignedText } from '../../common/AlignedText'; @@ -96,6 +99,7 @@ type CashFlowGraphProps = { }; export function CashFlowGraph({ graphData, isConcise }: CashFlowGraphProps) { const privacyMode = usePrivacyMode(); + const [yAxisIsHovered, setYAxisIsHovered] = useState(false); const data = graphData.expenses.map((row, idx) => ({ date: row.x, @@ -118,7 +122,14 @@ export function CashFlowGraph({ graphData, isConcise }: CashFlowGraphProps) { /> (privacyMode ? '...' : value)} + tickCount={8} + tickFormatter={value => + privacyMode && !yAxisIsHovered + ? '...' + : amountToCurrencyNoDecimal(value) + } + onMouseEnter={() => setYAxisIsHovered(true)} + onMouseLeave={() => setYAxisIsHovered(false)} /> {