Komponen / Grafik & jadwal
HeatmapGrid
Matriks dua dimensi (skema × jenjang) dengan tiga tingkat warna dan angka di setiap sel; dirender sebagai <table> asli, sel bisa tautan.
Import
tsx
import { HeatmapGrid, Card } from '@divistant/circca-react';Props
Dirender sebagai <table> (caption tersembunyi, th scope col/row). Juga menerima atribut <table>.
| Prop | Tipe | Default | Keterangan |
|---|---|---|---|
| columns | { id: string; label: ReactNode }[] | — | Kepala kolom (mis. skema Operasional, Support). |
| rows | { id: string; label: ReactNode }[] | — | Kepala baris (mis. jenjang Staff, Officer, Section Head). |
| values | number[][] | — | Nilai values[baris][kolom]; sel kosong dianggap 0. |
| caption | ReactNode | — | Judul tabel untuk pembaca layar. |
| levels | { light: number; strong: number } | { light: 1, strong: 2 } | ≥ strong = biru tua, ≥ light = biru muda, selain itu abu. |
| getCellHref | (cell) => string | undefined | — | Tautan per sel { row, column, value, level }. undefined = bukan tautan. |
| getCellLabel | (cell) => string | undefined | — | aria-label tautan sel (bawaan "<baris> · <kolom>: <nilai>"). |
| formatValue | (value: number) => string | formatNumber | Format angka sel. |
| rowHeaderWidth | number | 120 | Lebar kolom kepala baris (px). |
| emptyMessage | ReactNode | false | 'Belum ada data.' | Pesan bila semua sel nol; false = tetap tampilkan kisi. |
| className | string | — | Kelas tambahan untuk <table>. |
Sumber
Kode komponen ada di packages/react/src/components/heatmap-grid. Gaya hanya memakai kelas token Circca HIG — tidak ada warna, spasi, atau radius mentah.