dlawler489/etsy-finance-tracker
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix Revenue Trend bars not scaling with values

Browse source 
Bars used percentage heights, but their flex-column parent has no fixed
height, so the browser fell back to the min-height and every bar
rendered as the same flat stub. Switch to pixel heights scaled against
the tallest month, with a per-bar value label, so bar heights now
reflect the data.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
dlawler489 2026-06-13 18:35:50 +10:00
parent 71a01e92ff
commit a470707fae
1 changed files with 24 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

50
client/src/pages/Analytics.tsx
View file

@ -652,43 +652,39 @@ const Analytics = () => {
<h3 className="text-lg font-medium text-gray-900 mb-4">Revenue Trend</h3>
<div className="h-64 relative">
{monthlyData.length > 0 ? (
<div className="h-full flex items-end justify-between space-x-1 relative">
(() => {
// 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 (
<div className="h-full flex items-end justify-between space-x-1 relative pb-6">
{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 (
<div key={`month-${index}`} className="flex-1 flex flex-col items-center group relative">
{/* Value label above bar */}
<div key={`month-${index}`} className="flex-1 flex flex-col items-center justify-end group relative h-full">
{/* Value label above bar (on hover) */}
<div className="absolute -top-8 left-1/2 transform -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-200 z-20">
<div className="bg-gray-900 text-white text-xs rounded py-1 px-2 whitespace-nowrap">
${data.revenue.toFixed(0)}
</div>
</div>
{/* Permanent value label for larger values */}
{data.revenue > maxRevenue * 0.3 && (
<div className="absolute left-1/2 transform -translate-x-1/2 text-xs text-white font-medium z-10"
style={{ bottom: `${height/2}%` }}>
${data.revenue > 1000 ? `${(data.revenue/1000).toFixed(1)}k` : data.revenue.toFixed(0)}
</div>
)}
<div className="relative w-full flex flex-col items-center">
{/* Value label above every bar */}
{data.revenue > 0 && (
<div className="text-xs text-gray-600 font-medium mb-1">
${data.revenue > 1000 ? `${(data.revenue/1000).toFixed(1)}k` : data.revenue.toFixed(0)}
</div>
)}
<div
className="w-full bg-gradient-to-t from-blue-600 to-blue-400 rounded-t-sm transition-all duration-300 group-hover:from-blue-700 group-hover:to-blue-500 group-hover:shadow-lg relative"
style={{
height: `${height}%`,
minHeight: data.revenue > 0 ? '8px' : '2px',
maxHeight: '180px'
}}
style={{ height: `${heightPx}px` }}
>
{/* Value label on smaller bars */}
{data.revenue <= maxRevenue * 0.3 && data.revenue > 0 && (
<div className="absolute -top-6 left-1/2 transform -translate-x-1/2 text-xs text-gray-600 font-medium">
${data.revenue > 1000 ? `${(data.revenue/1000).toFixed(1)}k` : data.revenue.toFixed(0)}
</div>
)}
</div>
{/* Enhanced Tooltip */}
@ -714,6 +710,8 @@ const Analytics = () => {
);
})}
</div>
);
})()
) : (
<div className="flex items-center justify-center w-full h-full text-gray-500 bg-gray-50 rounded-lg border-2 border-dashed border-gray-200">
<div className="text-center">