74 lines
2.1 KiB
TypeScript
74 lines
2.1 KiB
TypeScript
"use client";
|
|
|
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
|
import {
|
|
LineChart,
|
|
Line,
|
|
XAxis,
|
|
YAxis,
|
|
CartesianGrid,
|
|
Tooltip,
|
|
ResponsiveContainer
|
|
} from "recharts";
|
|
|
|
interface UsageChartProps {
|
|
data: Array<{
|
|
date: string;
|
|
conversations: number;
|
|
tokens: number;
|
|
}>;
|
|
}
|
|
|
|
export function UsageChart({ data }: UsageChartProps) {
|
|
return (
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle className="text-base font-medium">Usage quotidien</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<ResponsiveContainer width="100%" height={300}>
|
|
<LineChart data={data}>
|
|
<CartesianGrid strokeDasharray="3 3" className="stroke-muted" />
|
|
<XAxis
|
|
dataKey="date"
|
|
className="text-xs fill-muted-foreground"
|
|
tickFormatter={(value) => new Date(value).toLocaleDateString('fr-FR', {
|
|
month: 'short',
|
|
day: 'numeric'
|
|
})}
|
|
/>
|
|
<YAxis className="text-xs fill-muted-foreground" />
|
|
<Tooltip
|
|
contentStyle={{
|
|
backgroundColor: 'hsl(var(--background))',
|
|
border: '1px solid hsl(var(--border))',
|
|
borderRadius: '8px',
|
|
}}
|
|
labelFormatter={(value) => new Date(value).toLocaleDateString('fr-FR')}
|
|
formatter={(value: number, name: string) => {
|
|
if (name === 'tokens') {
|
|
return [Math.round(value / 1000), "Tokens (k)"];
|
|
}
|
|
return [value, name];
|
|
}}
|
|
/>
|
|
<Line
|
|
type="monotone"
|
|
dataKey="conversations"
|
|
stroke="hsl(var(--primary))"
|
|
strokeWidth={2}
|
|
name="Conversations"
|
|
/>
|
|
<Line
|
|
type="monotone"
|
|
dataKey="tokens"
|
|
stroke="hsl(var(--destructive))"
|
|
strokeWidth={2}
|
|
name="tokens"
|
|
/>
|
|
</LineChart>
|
|
</ResponsiveContainer>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
} |