Komponen / Grafik & jadwal
ActivityRings
Cincin konsentris gaya Activity untuk beberapa cakupan terhadap populasi yang sama (bekal SSA/AS/OT), dengan legenda kisi "Punya SSA 5/6 · 83%" dan catatan sisa.
Import
tsx
import { ActivityRings, ChartCard } from '@divistant/circca-react';Props
Dirender sebagai <div role="group">; beri aria-label. Cincin aria-hidden, legenda (teks) membawa angka. Juga menerima atribut <div>.
| Prop | Tipe | Default | Keterangan |
|---|---|---|---|
| rings | { id?, label, value, max, tone?, valueLabel?, note?, noteTone? }[] | — | Cincin dari luar ke dalam. Tiap cincin penuh = value/max 100%. 2–4 cincin. |
| size | number | 164 | Diameter cincin terluar (px); menyusut mengikuti wadah. |
| thickness | number | 18 | Tebal tiap cincin (px); jarak antarcincin 4. |
| legend | boolean | true | Legenda kisi: titik 10 + label, nilai Heading/Small "5/6 · 83%", catatan. |
| rings[].noteTone | 'muted' | 'success' | 'warning' | 'danger' | 'muted' | danger untuk sisa yang menahan proses; muted bila boleh kosong. |
| className | string | — | Kelas tambahan (digabung aman dengan tailwind-merge). |
Sumber
Kode komponen ada di packages/react/src/components/activity-rings. Gaya hanya memakai kelas token Circca HIG — tidak ada warna, spasi, atau radius mentah.