Komponen / Grafik & jadwal
DonutChart
Donut berangka tengah untuk komposisi satu populasi menurut status (Bersih · Peringatan · Menahan), dengan legenda daftar "3 · 50%". ProgressRing untuk satu nilai: ring KPI dan mini ring kualitas data.
Import
tsx
import { DonutChart, ProgressRing } from '@divistant/circca-react';Props · DonutChart
Dirender sebagai <div role="group" aria-label={label}>. Donut aria-hidden; legenda (atau tabel sr-only bila legend={false}) membawa angka.
| Prop | Tipe | Default | Keterangan |
|---|---|---|---|
| data | ChartDatum[] | — | Segmen searah jarum jam dari jam 12: { label, value, tone?, valueLabel?, id? }. Tanpa tone → dataviz/cat-* berurutan. |
| label | string | — | Nama grafik untuk pembaca layar dan judul tabel data: "Status orang di PE". |
| centerValue | ReactNode | — | Angka besar di tengah (Display/Page title). |
| centerLabel | ReactNode | — | Keterangan angka tengah (Footnote/Default fg/muted): "belum bersih". |
| size | number | 140 | Diameter maksimum (px); menyusut mengikuti wadah. |
| thickness | number | 24 | Tebal cincin (px). |
| gap | number | 0,04 rad × jari-jari | Celah antarsegmen (px). 0 = tanpa celah. Segmen tunggal tanpa celah. |
| legend | boolean | true | Legenda daftar di kanan (ChartLegend layout list). |
| formatValue | (datum, total) => ReactNode | "3 · 50%" | Teks nilai legenda. |
| emptyLabel | ReactNode | "Belum ada data" | Teks tengah saat semua nilai 0. |
| className | string | — | Kelas tambahan (digabung aman dengan tailwind-merge). |
Props · ProgressRing
Tanpa caption: role="img" aria-label="<label> <persen>". Dengan showLabel/note: teks terlihat + persen sr-only.
| Prop | Tipe | Default | Keterangan |
|---|---|---|---|
| value | number | — | Nilai saat ini (dipotong ke 0…max). |
| max | number | 100 | Target/populasi: value={3} max={5}. |
| tone | ChartTone | 'accent' | accent (KPI), warning (belum lengkap), success (lengkap), atau cat-*. |
| size | 'sm' | 'md' | number | 'sm' | sm = 40 px tebal 6; md = 64 px tebal 7; angka = px. |
| thickness | number | — | Tebal cincin (px); bawaan mengikuti size. |
| label | string | — | Apa yang diukur: "Rekening". Membentuk nama aksesibel "Rekening 60%". |
| showValue | boolean | false | Persen di tengah (Footnote/Medium). Cocok untuk md. |
| valueLabel | ReactNode | — | Pengganti persen di tengah, mis. "5/6". |
| showLabel | boolean | false | Tampilkan label di bawah cincin. |
| note | ReactNode | — | Catatan di bawah label: "3/5 · sisa 2", "5/5 ✓". |
| noteTone | 'muted' | 'success' | 'warning' | 'danger' | 'muted' | Warna catatan (*/fg). |
| decorative | boolean | false | aria-hidden bila angka sudah ada di teks sekitar (ring KpiCard). |
Sumber
Kode komponen ada di packages/react/src/components/donut-chart. Gaya hanya memakai kelas token Circca HIG — tidak ada warna, spasi, atau radius mentah.