Spaces:
Sleeping
Sleeping
| import { BarChart, Bar, XAxis, YAxis, Tooltip, ResponsiveContainer, Cell } from "recharts"; | |
| const COLORS = ["#6366f1", "#8b5cf6", "#a78bfa", "#c4b5fd", "#818cf8", "#7c3aed"]; | |
| interface TokenUsageChartProps { | |
| tokenUsage: Record<string, number>; | |
| } | |
| export function TokenUsageChart({ tokenUsage }: TokenUsageChartProps) { | |
| const data = Object.entries(tokenUsage).map(([name, tokens]) => ({ | |
| name, | |
| tokens, | |
| })); | |
| if (data.length === 0) { | |
| return ( | |
| <div className="flex items-center justify-center h-32 text-xs text-muted-foreground"> | |
| No token data yet | |
| </div> | |
| ); | |
| } | |
| return ( | |
| <div className="h-40"> | |
| <ResponsiveContainer width="100%" height="100%"> | |
| <BarChart data={data} margin={{ top: 5, right: 5, bottom: 5, left: 5 }}> | |
| <XAxis | |
| dataKey="name" | |
| tick={{ fontSize: 10 }} | |
| interval={0} | |
| angle={-20} | |
| textAnchor="end" | |
| /> | |
| <YAxis tick={{ fontSize: 10 }} width={40} /> | |
| <Tooltip | |
| contentStyle={{ fontSize: 12 }} | |
| formatter={(value: number) => [`${value} tokens`, "Usage"]} | |
| /> | |
| <Bar dataKey="tokens" radius={[4, 4, 0, 0]}> | |
| {data.map((_, i) => ( | |
| <Cell key={i} fill={COLORS[i % COLORS.length]} /> | |
| ))} | |
| </Bar> | |
| </BarChart> | |
| </ResponsiveContainer> | |
| </div> | |
| ); | |
| } | |