sudacode/SubMiner
1
0
Fork 0
mirror of https://github.com/ksyasuda/SubMiner.git synced 2026-03-20 12:11:28 -07:00
Code Issues Packages Projects Releases Wiki Activity

feat(stats): add click handler to bar charts for word detail navigation

Browse Source
This commit is contained in:
Kyle Yasuda
2026-03-16 01:42:55 -07:00
parent 6634255f43
commit 5a30446809
1 changed files with 9 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
stats/src/components/trends/TrendChart.tsx
View File

@@ -9,9 +9,10 @@ interface TrendChartProps {
color: string; color: string;
type: 'bar' | 'line'; type: 'bar' | 'line';
formatter?: (value: number) => string; 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 = { const tooltipStyle = {
background: '#363a4f', border: '1px solid #494d64', borderRadius: 6, color: '#cad3f5', fontSize: 12, 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} /> <XAxis dataKey="label" tick={{ fontSize: 9, fill: '#a5adcb' }} axisLine={false} tickLine={false} />
<YAxis tick={{ fontSize: 9, fill: '#a5adcb' }} axisLine={false} tickLine={false} width={28} /> <YAxis tick={{ fontSize: 9, fill: '#a5adcb' }} axisLine={false} tickLine={false} width={28} />
<Tooltip contentStyle={tooltipStyle} formatter={formatValue} /> <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> </BarChart>
) : ( ) : (
<LineChart data={data}> <LineChart data={data}>