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:
@@ -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"
|
||||
|
||||
Reference in New Issue
Block a user