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;
|
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 }) {
|
function TrendHistoryChart({ trends, latestTrends, ticker }: { trends: TrendSummary[]; latestTrends: TrendSummary[]; ticker: string }) {
|
||||||
const [selectedWindow, setSelectedWindow] = useState('7d');
|
const [selectedWindow, setSelectedWindow] = useState('7d');
|
||||||
|
|
||||||
@@ -640,11 +657,7 @@ function TrendHistoryChart({ trends, latestTrends, ticker }: { trends: TrendSumm
|
|||||||
tickLine={{ stroke: '#475569' }}
|
tickLine={{ stroke: '#475569' }}
|
||||||
tickFormatter={(v) => `${v}%`}
|
tickFormatter={(v) => `${v}%`}
|
||||||
/>
|
/>
|
||||||
<Tooltip
|
<Tooltip content={TrendTooltip} />
|
||||||
contentStyle={{ backgroundColor: '#1e293b', border: '1px solid #334155', borderRadius: '8px' }}
|
|
||||||
labelStyle={{ color: '#94a3b8' }}
|
|
||||||
formatter={(value, name) => [`${value}%`, name]}
|
|
||||||
/>
|
|
||||||
<Legend wrapperStyle={{ color: '#94a3b8', fontSize: 12 }} />
|
<Legend wrapperStyle={{ color: '#94a3b8', fontSize: 12 }} />
|
||||||
<Line
|
<Line
|
||||||
type="monotone"
|
type="monotone"
|
||||||
|
|||||||
Reference in New Issue
Block a user