From 5a30446809d13c272c426a36d573df3be09c83b7 Mon Sep 17 00:00:00 2001
From: sudacode <suda@sudacode.com>
Date: Mon, 16 Mar 2026 01:42:55 -0700
Subject: [PATCH] feat(stats): add click handler to bar charts for word detail
 navigation

---
 stats/src/components/trends/TrendChart.tsx | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/stats/src/components/trends/TrendChart.tsx b/stats/src/components/trends/TrendChart.tsx
index 4a7862e..965d32a 100644
--- a/stats/src/components/trends/TrendChart.tsx
+++ b/stats/src/components/trends/TrendChart.tsx
@@ -9,9 +9,10 @@ interface TrendChartProps {
   color: string;
   type: 'bar' | 'line';
   formatter?: (value: number) => string;
+  onBarClick?: (label: string) => void;
 }
 
-export function TrendChart({ title, data, color, type, formatter }: TrendChartProps) {
+export function TrendChart({ title, data, color, type, formatter, onBarClick }: TrendChartProps) {
   const tooltipStyle = {
     background: '#363a4f', border: '1px solid #494d64', borderRadius: 6, color: '#cad3f5', fontSize: 12,
   };
@@ -27,7 +28,13 @@ export function TrendChart({ title, data, color, type, formatter }: TrendChartPr
             <XAxis dataKey="label" tick={{ fontSize: 9, fill: '#a5adcb' }} axisLine={false} tickLine={false} />
             <YAxis tick={{ fontSize: 9, fill: '#a5adcb' }} axisLine={false} tickLine={false} width={28} />
             <Tooltip contentStyle={tooltipStyle} formatter={formatValue} />
-            <Bar dataKey="value" fill={color} radius={[2, 2, 0, 0]} />
+            <Bar
+              dataKey="value"
+              fill={color}
+              radius={[2, 2, 0, 0]}
+              cursor={onBarClick ? 'pointer' : undefined}
+              onClick={onBarClick ? (entry: { label: string }) => onBarClick(entry.label) : undefined}
+            />
           </BarChart>
         ) : (
           <LineChart data={data}>