71 lines
1.9 KiB
TypeScript
71 lines
1.9 KiB
TypeScript
"use client";
|
|
|
|
import {
|
|
ResponsiveContainer,
|
|
BarChart,
|
|
Bar,
|
|
XAxis,
|
|
YAxis,
|
|
CartesianGrid,
|
|
Tooltip,
|
|
Cell,
|
|
} from "recharts";
|
|
import { formatTokens } from "@/lib/utils";
|
|
import { useI18n } from "@/lib/i18n";
|
|
|
|
interface RankItem {
|
|
name: string;
|
|
total_tokens: number;
|
|
calls: number;
|
|
}
|
|
|
|
const BAR_COLORS = [
|
|
"#00e5ff", "#00bcd4", "#0097a7", "#7c4dff",
|
|
"#651fff", "#536dfe", "#448aff", "#40c4ff",
|
|
"#18ffff", "#84ffff",
|
|
];
|
|
|
|
export function RankingBar({
|
|
data,
|
|
title,
|
|
}: {
|
|
data: RankItem[];
|
|
title: string;
|
|
}) {
|
|
const { t } = useI18n();
|
|
if (!data.length) return null;
|
|
const sliced = data.slice(0, 10);
|
|
|
|
return (
|
|
<div>
|
|
<h3 className="mb-3 text-xs font-medium uppercase tracking-widest text-gray-500">{title}</h3>
|
|
<ResponsiveContainer width="100%" height={300}>
|
|
<BarChart
|
|
data={sliced}
|
|
layout="vertical"
|
|
margin={{ top: 0, right: 20, left: 0, bottom: 0 }}
|
|
>
|
|
<CartesianGrid strokeDasharray="3 3" stroke="rgba(0,229,255,0.06)" horizontal={false} />
|
|
<XAxis type="number" tickFormatter={(v) => formatTokens(v)} tick={{ fontSize: 10, fill: "rgba(200,214,229,0.4)" }} stroke="rgba(0,229,255,0.1)" />
|
|
<YAxis type="category" dataKey="name" width={100} tick={{ fontSize: 11, fill: "rgba(200,214,229,0.6)" }} stroke="transparent" />
|
|
<Tooltip
|
|
contentStyle={{
|
|
background: "rgba(6,8,13,0.95)",
|
|
border: "1px solid rgba(0,229,255,0.2)",
|
|
borderRadius: "8px",
|
|
color: "#c8d6e5",
|
|
fontSize: "12px",
|
|
}}
|
|
formatter={(v) => [formatTokens(Number(v)), t("th.totalToken")]}
|
|
/>
|
|
<Bar dataKey="total_tokens" radius={[0, 4, 4, 0]}>
|
|
{sliced.map((_, i) => (
|
|
<Cell key={i} fill={BAR_COLORS[i % BAR_COLORS.length]} fillOpacity={0.7} />
|
|
))}
|
|
</Bar>
|
|
</BarChart>
|
|
</ResponsiveContainer>
|
|
</div>
|
|
);
|
|
}
|