diff --git a/client/src/pages/Analytics.tsx b/client/src/pages/Analytics.tsx index 42a2a99..d4bca88 100644 --- a/client/src/pages/Analytics.tsx +++ b/client/src/pages/Analytics.tsx @@ -652,43 +652,39 @@ const Analytics = () => {

Revenue Trend

{monthlyData.length > 0 ? ( -
+ (() => { + // Tallest bar fills the chart area; others scale against it. + // Heights are in px because percentage heights need a + // fixed-height parent, which the flex column doesn't provide. + const maxRevenue = Math.max(...monthlyData.map(d => d.revenue), 0); + const maxBarPx = 200; + return ( +
{monthlyData.map((data, index) => { - const maxRevenue = Math.max(...monthlyData.map(d => d.revenue)); - const height = maxRevenue > 0 ? Math.max((data.revenue / maxRevenue) * 75, 3) : 0; - + const heightPx = maxRevenue > 0 + ? (data.revenue > 0 ? Math.max((data.revenue / maxRevenue) * maxBarPx, 4) : 0) + : 0; + return ( -
- {/* Value label above bar */} +
+ {/* Value label above bar (on hover) */}
${data.revenue.toFixed(0)}
- - {/* Permanent value label for larger values */} - {data.revenue > maxRevenue * 0.3 && ( -
- ${data.revenue > 1000 ? `${(data.revenue/1000).toFixed(1)}k` : data.revenue.toFixed(0)} -
- )} - +
+ {/* Value label above every bar */} + {data.revenue > 0 && ( +
+ ${data.revenue > 1000 ? `${(data.revenue/1000).toFixed(1)}k` : data.revenue.toFixed(0)} +
+ )}
0 ? '8px' : '2px', - maxHeight: '180px' - }} + style={{ height: `${heightPx}px` }} > - {/* Value label on smaller bars */} - {data.revenue <= maxRevenue * 0.3 && data.revenue > 0 && ( -
- ${data.revenue > 1000 ? `${(data.revenue/1000).toFixed(1)}k` : data.revenue.toFixed(0)} -
- )}
{/* Enhanced Tooltip */} @@ -714,6 +710,8 @@ const Analytics = () => { ); })}
+ ); + })() ) : (