Komponen / Grafik & jadwal
Treemap
Luas kotak sebanding nominal per jenis (Additional Salary per jenis); jenis bernilai nol tampil sebagai chip garis putus.
Import
tsx
import { Treemap, Card, formatMoney } from '@divistant/circca-react';Props
Juga menerima atribut <div>. Tata letak squarified dihitung dalam persen, sehingga melebar mengikuti kartu.
| Prop | Tipe | Default | Keterangan |
|---|---|---|---|
| data | TreemapDatum[] | — | ChartDatum + meta?: ReactNode ("2 orang"). Nilai 0 menjadi chip, bukan kotak. |
| label | string | — | Nama grafik untuk pembaca layar (judul tabel data). |
| height | number | 150 | Tinggi area kotak (px). |
| layoutRatio | number | 3.4 | Perkiraan rasio lebar : tinggi area untuk algoritme squarified (516 : 150 di Figma). Naikkan untuk kartu yang lebih lebar. |
| formatValue | (value: number) => string | formatNumber | Format nominal di kotak dan tabel data. |
| zeroLabel | (datum) => ReactNode | "<jenis> · belum ada baris" | Teks chip untuk jenis bernilai nol. |
| note | ReactNode | — | Catatan Footnote fg/muted di samping chip, mis. "Koperasi (potongan) ada di kartu Potongan." |
| tableColumns | [ReactNode × 4] | ['Jenis', 'Nominal', 'Persen', 'Keterangan'] | Kepala kolom tabel data pembaca layar. |
| emptyMessage | ReactNode | 'Belum ada data.' | Pesan bila semua nilai nol. |
| className | string | — | Kelas tambahan (digabung aman dengan tailwind-merge). |
Sumber
Kode komponen ada di packages/react/src/components/treemap. Gaya hanya memakai kelas token Circca HIG — tidak ada warna, spasi, atau radius mentah.