first commit

components/dashboard/charts/model-distribution-chart.tsx

@@ -0,0 +1,95 @@
+"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>
+  );
+}