first commit

components/ui/pie-chart.tsx

@@ -0,0 +1,37 @@
+"use client"
+import React from "react"
+import { Chart as ChartJS, ArcElement, Tooltip, Legend } from "chart.js"
+import { Pie } from "react-chartjs-2"
+
+ChartJS.register(ArcElement, Tooltip, Legend)
+
+type Props = {
+  labels: string[]
+  data: number[]
+  backgroundColor?: string[]
+}
+
+export default function PieChart({ labels, data: values, backgroundColor }: Props) {
+  const data = {
+    labels,
+    datasets: [
+      {
+        data: values,
+        backgroundColor: backgroundColor || ["#4ade80", "#60a5fa", "#f97316", "#f43f5e"],
+        hoverOffset: 6,
+      },
+    ],
+  }
+
+  const options = {
+    responsive: true,
+    maintainAspectRatio: false,
+    plugins: { legend: { position: "right" as const } },
+  }
+
+  return (
+    <div style={{ width: "100%", minHeight: 220 }}>
+      <Pie data={data} options={options} />
+    </div>
+  )
+}