feat: add pie chart component and integrate it into the dashboard

2025-02-25 22:52:26 +07:00
parent b7e029546f
commit bd92f9a09f
2 changed files with 106 additions and 53 deletions
@@ -0,0 +1,66 @@
+import {
+  Chart as ChartJS,
+  ArcElement,
+  Tooltip,
+  Legend,
+  type ChartOptions,
+} from 'chart.js'
+import { Pie } from 'react-chartjs-2'
+ChartJS.register(ArcElement, Tooltip, Legend)
+
+export const ChartPie = () => {
+  const data = {
+    labels: [
+      'Pidana',
+      'Perdata',
+      'Perceraian',
+      'Surat Bisnis',
+      'Surat Tanah',
+      'Lainnya',
+    ],
+    datasets: [
+      {
+        data: [33.7, 13, 22.8, 9.3, 9.3, 21.2],
+        backgroundColor: [
+          '#FFB300',
+          '#4CAF50',
+          '#3F51B5',
+          '#F44336',
+          '#2196F3',
+          '#FF9800',
+        ],
+        hoverOffset: 4,
+      },
+    ],
+  }
+
+  const options: ChartOptions<'pie'> = {
+    maintainAspectRatio: true,
+    responsive: false,
+    plugins: {
+      legend: {
+        position: 'right',
+        labels: {
+          usePointStyle: true,
+          pointStyle: 'circle',
+          padding: 20,
+        },
+      },
+    },
+    layout: {
+      padding: 0,
+    },
+  }
+
+  return (
+    <div className="h-[300px] w-full items-center justify-center rounded-lg bg-white p-5 text-center">
+      <h2 className="text-xl font-bold">Top 5 Konten</h2>
+      <Pie
+        height={225}
+        width={450}
+        data={data}
+        options={options}
+      />
+    </div>
+  )
+}