70 lines
1.3 KiB
TypeScript
70 lines
1.3 KiB
TypeScript
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>
|
|
)
|
|
}
|