From ebe0ccca4c5d414c6adce10c2eccbcf6eb3b5ac0 Mon Sep 17 00:00:00 2001
From: Celes Renata <celes@frameshift.net>
Date: Fri, 17 Apr 2026 01:01:02 +0000
Subject: [PATCH] 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.
---
 frontend/src/pages/CompanyDetail.tsx | 23 ++++++++++++++++++-----
 1 file changed, 18 insertions(+), 5 deletions(-)

diff --git a/frontend/src/pages/CompanyDetail.tsx b/frontend/src/pages/CompanyDetail.tsx
index 456a075..1d341cd 100644
--- a/frontend/src/pages/CompanyDetail.tsx
+++ b/frontend/src/pages/CompanyDetail.tsx
@@ -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"