Komponen / Grafik & jadwal
BarList
Batang horizontal berlabel di atas untuk peringkat per kategori — nama panjang (direktorat, unit, customer) tetap utuh, nilai tertulis di kanan.
Import
tsx
import { BarList, Card, EmptyState } from '@divistant/circca-react';Props
Dirender sebagai <ul>; beri aria-label. Batang aria-hidden, label + nilai dibaca sebagai teks.
| Prop | Tipe | Default | Keterangan |
|---|---|---|---|
| data | { id?, label, value, tone?, valueLabel?, href? }[] | — | Item (ChartDatum + `href`). `valueLabel` menimpa `valueFormat` untuk item itu. |
| max | number | — | Nilai batang penuh. Bawaan nilai terbesar — pakai total/kapasitas bila batang mewakili porsi dari batas. |
| valueFormat | (value, item) => ReactNode | — | Teks nilai di kanan: `(v) => `${v} orang``. Bawaan angka id-ID. |
| sort | 'desc' | 'asc' | 'none' | 'desc' | Urutan. `none` untuk urutan bermakna (struktur organisasi, band). |
| tone | ChartTone | 'cat-1' | Warna batang (dataviz/cat-* atau */emphasis bermakna). |
| emptyState | ReactNode | — | Pengganti bila semua nilai 0. |
| className | string | — | Kelas tambahan (digabung aman dengan tailwind-merge). |
Sumber
Kode komponen ada di packages/react/src/components/bar-list. Gaya hanya memakai kelas token Circca HIG — tidak ada warna, spasi, atau radius mentah.