Komponen / Grafik & jadwal
ProportionBar
Batang proporsi bagian dari satu keseluruhan: stacked tipis + legenda nominal & persen (beban per komponen), atau split tebal berlabel di dalam (gender).
Import
tsx
import { ProportionBar, Card, formatMoney } from '@divistant/circca-react';Props
Juga menerima atribut <div>. Batang & legenda aria-hidden; angka lengkap dibawa tabel data tersembunyi.
| Prop | Tipe | Default | Keterangan |
|---|---|---|---|
| data | ChartDatum[] | — | Segmen berurutan { id?, label, value, tone?, valueLabel? }. tone bawaan mengikuti dataviz/cat-1…8. |
| variant | 'stacked' | 'split' | 'stacked' | stacked = batang tipis + legenda; split = batang tebal berlabel di dalam + persen di bawah. |
| label | string | — | Nama grafik untuk pembaca layar (judul tabel data), mis. "Beban per komponen". |
| total | ReactNode | — | Angka besar di atas batang (stacked), mis. formatMoney(27_136_338). |
| totalCaption | ReactNode | — | Keterangan di samping total, Footnote fg/muted: "total beban perusahaan periode ini". |
| formatValue | (value: number) => string | formatNumber | Format nilai di legenda, label split, dan tabel data. |
| showLegend | boolean | stacked: true · split: false | Tampilkan legenda titik + label + "nilai · persen". |
| legendLayout | 'inline' | 'list' | 'grid' | 'grid' | Tata letak legenda (ChartLegend). |
| minLabelShare | number | 0.15 | Split: segmen di bawah porsi ini memindahkan labelnya ke bawah batang agar tidak terpotong. |
| tableColumns | [ReactNode, ReactNode, ReactNode] | ['Bagian', 'Nilai', 'Persen'] | 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/proportion-bar. Gaya hanya memakai kelas token Circca HIG — tidak ada warna, spasi, atau radius mentah.