feat: add bar, donut, and pie charts to dashboard for enhanced data visualization

2025-03-13 05:45:03 +08:00
parent 474c6dc750
commit 0680fb4dc8
5 changed files with 157 additions and 118 deletions
@@ -0,0 +1,69 @@
+import {
+  Chart as ChartJS,
+  ArcElement,
+  Tooltip,
+  Legend,
+  CategoryScale,
+  LinearScale,
+  BarElement,
+  Title,
+  type ChartOptions,
+} from 'chart.js'
+import { Doughnut } from 'react-chartjs-2'
+ChartJS.register(
+  ArcElement,
+  CategoryScale,
+  LinearScale,
+  BarElement,
+  Title,
+  Tooltip,
+  Legend,
+)
+
+export const ChartDonut = () => {
+  const data = {
+    labels: ['Selesai', 'Belum Selesai'],
+    datasets: [
+      {
+        data: [70, 30],
+        backgroundColor: ['#1e3a8a', '#e5e7eb'],
+        borderWidth: 0,
+        cutout: '70%',
+        circumference: 180,
+        rotation: 270,
+      },
+    ],
+  }
+
+  const options: ChartOptions<'doughnut'> = {
+    responsive: true,
+    maintainAspectRatio: false,
+    plugins: {
+      legend: {
+        position: 'right',
+        labels: {
+          usePointStyle: true,
+          pointStyle: 'circle',
+          boxWidth: 10,
+        },
+      },
+      tooltip: {
+        enabled: false,
+      },
+    },
+  }
+
+  return (
+    <div className="rounded-xl bg-white p-6 shadow-sm">
+      <h2 className="mb-4 text-[20px]">Subscription Selesai</h2>
+      <div className="flex items-center justify-between">
+        <div style={{ height: 'auto', width: '100%' }}>
+          <Doughnut
+            data={data}
+            options={options}
+          />
+        </div>
+      </div>
+    </div>
+  )
+}