fix: trend chart tooltip shows no data on hover

Replaced Recharts default Tooltip with formatter prop (broken in
Recharts v3 with explicit type annotations) with a custom
TrendTooltip component matching the SQL Explorer pattern. Shows
each series name, value, and color on hover.
This commit is contained in:
Celes Renata
2026-04-17 01:01:02 +00:00
parent 5593ee6d92
commit ebe0ccca4c
+18 -5
View File
@@ -565,6 +565,23 @@ interface ChartPoint {
window: string;
}
function TrendTooltip({ active, payload, label }: Record<string, unknown>) {
if (!active) return null;
const items = payload as Array<{ name: string; value: number; color: string }> | undefined;
if (!items?.length) return null;
return (
<div className="rounded-lg border border-surface-700 bg-surface-900 px-3 py-2 text-xs shadow-lg">
<div className="mb-1 text-gray-400">{String(label ?? '')}</div>
{items.map((item, i) => (
<div key={i} className="flex justify-between gap-4" style={{ color: item.color }}>
<span>{item.name}:</span>
<span className="font-semibold">{item.value}%</span>
</div>
))}
</div>
);
}
function TrendHistoryChart({ trends, latestTrends, ticker }: { trends: TrendSummary[]; latestTrends: TrendSummary[]; ticker: string }) {
const [selectedWindow, setSelectedWindow] = useState('7d');
@@ -640,11 +657,7 @@ function TrendHistoryChart({ trends, latestTrends, ticker }: { trends: TrendSumm
tickLine={{ stroke: '#475569' }}
tickFormatter={(v) => `${v}%`}
/>
<Tooltip
contentStyle={{ backgroundColor: '#1e293b', border: '1px solid #334155', borderRadius: '8px' }}
labelStyle={{ color: '#94a3b8' }}
formatter={(value, name) => [`${value}%`, name]}
/>
<Tooltip content={TrendTooltip} />
<Legend wrapperStyle={{ color: '#94a3b8', fontSize: 12 }} />
<Line
type="monotone"