Komponen / Grafik & jadwal
WaffleChart
Satu ikon = satu orang untuk cakupan populasi kecil (cakupan populasi vs PE); sel kotak tanpa nama untuk populasi besar.
Import
tsx
import { WaffleChart, Card } from '@divistant/circca-react';Props
Juga menerima atribut <div>. Ikon/sel aria-hidden; tabel data tersembunyi membawa jumlah & persen per kelompok.
| Prop | Tipe | Default | Keterangan |
|---|---|---|---|
| items | { id: string; label?: ReactNode; tone: ChartTone }[] | — | Satu entri = satu orang (nama di bawah ikon). |
| groups | { id?; label: ReactNode; count?: number; tone: ChartTone }[] | — | Kelompok legenda. Dengan items, count dihitung dari item ber-tone sama; tanpa items, sel dibangkitkan dari count. |
| label | string | — | Nama grafik untuk pembaca layar (judul tabel data). |
| mode | 'auto' | 'person' | 'cell' | 'auto' | person = ikon + nama; cell = sel kotak tanpa nama. auto memilih person sampai personLimit. |
| personLimit | number | 60 | Batas jumlah orang untuk mode person saat mode="auto". |
| tableColumns | [ReactNode, ReactNode, ReactNode] | ['Kelompok', 'Jumlah', 'Persen'] | Kepala kolom tabel data pembaca layar. |
| emptyMessage | ReactNode | 'Belum ada orang di populasi ini.' | Pesan bila populasi kosong. |
| className | string | — | Kelas tambahan (digabung aman dengan tailwind-merge). |
Sumber
Kode komponen ada di packages/react/src/components/waffle-chart. Gaya hanya memakai kelas token Circca HIG — tidak ada warna, spasi, atau radius mentah.