96 lines
2.2 KiB
TypeScript
96 lines
2.2 KiB
TypeScript
"use client";
|
|
|
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
|
import {
|
|
BarChart,
|
|
Bar,
|
|
XAxis,
|
|
YAxis,
|
|
CartesianGrid,
|
|
Tooltip,
|
|
ResponsiveContainer,
|
|
} from "recharts";
|
|
|
|
interface ModelDistributionChartProps {
|
|
title: string;
|
|
data: Array<{
|
|
name: string;
|
|
value: number;
|
|
}>;
|
|
}
|
|
|
|
interface TooltipPayload {
|
|
value: number;
|
|
payload: {
|
|
name: string;
|
|
value: number;
|
|
};
|
|
}
|
|
|
|
interface CustomTooltipProps {
|
|
active?: boolean;
|
|
payload?: TooltipPayload[];
|
|
}
|
|
|
|
const CustomTooltip = ({ active, payload }: CustomTooltipProps) => {
|
|
if (active && payload && payload.length) {
|
|
return (
|
|
<div style={{
|
|
backgroundColor: "hsl(var(--background))",
|
|
border: "1px solid hsl(var(--border))",
|
|
borderRadius: "8px",
|
|
padding: "8px",
|
|
fontSize: "12px"
|
|
}}>
|
|
<p style={{ margin: 0, color: "#ff0000" }}>
|
|
{`${payload[0].value.toLocaleString()} tokens`}
|
|
</p>
|
|
<p style={{ margin: 0, color: "#ff0000" }}>
|
|
{payload[0].payload.name}
|
|
</p>
|
|
</div>
|
|
);
|
|
}
|
|
return null;
|
|
};
|
|
|
|
export function ModelDistributionChart({
|
|
title,
|
|
data,
|
|
}: ModelDistributionChartProps) {
|
|
return (
|
|
<Card>
|
|
<CardHeader className="pb-2">
|
|
<CardTitle className="text-sm font-medium text-muted-foreground">
|
|
{title}
|
|
</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="pt-0">
|
|
<ResponsiveContainer width="100%" height={200}>
|
|
<BarChart data={data}>
|
|
<CartesianGrid strokeDasharray="3 3" className="stroke-muted/20" />
|
|
<XAxis
|
|
dataKey="name"
|
|
axisLine={false}
|
|
tickLine={false}
|
|
className="text-xs fill-muted-foreground"
|
|
tick={false}
|
|
/>
|
|
<YAxis
|
|
axisLine={false}
|
|
tickLine={false}
|
|
className="text-xs fill-muted-foreground"
|
|
/>
|
|
<Tooltip content={<CustomTooltip />} />
|
|
<Bar
|
|
dataKey="value"
|
|
fill="#000000"
|
|
radius={[4, 4, 0, 0]}
|
|
/>
|
|
</BarChart>
|
|
</ResponsiveContainer>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|