Komponen / Grafik & jadwal
LollipopChart
Lollipop terurut (garis + titik) untuk membandingkan nilai per orang atau item terhadap rata-rata — jam lembur per orang, keterlambatan per karyawan.
Import
tsx
import { LollipopChart, Card, EmptyState, formatNumber } from '@divistant/circca-react';Props
Baris dibaca sebagai daftar (<ul> berlabel `aria-label`); garis & titik aria-hidden. Juga menerima atribut <div>.
| Prop | Tipe | Default | Keterangan |
|---|---|---|---|
| data | { id?, label, sublabel?, value, valueLabel? }[] | — | Baris: nama, keterangan kecil (NIP), nilai. |
| average | number | 'auto' | false | 'auto' | Garis rata-rata: rerata data, angka tetap (mis. rata-rata per slip), atau disembunyikan. |
| averageLabel | (average: number) => ReactNode | — | Label garis rata-rata. Bawaan "rata-rata <valueFormat(rerata)>". |
| valueFormat | (value: number) => string | — | Format nilai: `(v) => `${formatNumber(v)} jam``. Bawaan id-ID maks. 1 desimal. |
| max | number | — | Batas kanan skala. Bawaan nilai terbesar. |
| sort | 'desc' | 'none' | 'desc' | Urutkan dari terbesar. |
| tone | ChartTone | 'cat-2' | Warna garis & titik. |
| aria-label | string | — | Nama daftar untuk pembaca layar ("Jam lembur per orang"). |
| emptyState | ReactNode | — | Pengganti bila tanpa data atau semua 0. |
| className | string | — | Kelas tambahan (digabung aman dengan tailwind-merge). |
Sumber
Kode komponen ada di packages/react/src/components/lollipop-chart. Gaya hanya memakai kelas token Circca HIG — tidak ada warna, spasi, atau radius mentah.