Komponen / Grafik & jadwal
ChartCard
Wadah kartu grafik di Monitoring: judul (pertanyaan kartu), keterangan, tautan ke daftar sumber, grafik, dan footnote penjelas — lengkap dengan keadaan kosong dan memuat. KpiCard untuk angka "x dari y" dengan ring kecil.
Import
tsx
import { ChartCard, ChartCardLink, KpiCard, DonutChart } from '@divistant/circca-react';Props · ChartCard
Dirender sebagai <section aria-labelledby> (judul) dan aria-describedby (keterangan). Juga menerima atribut <section>.
| Prop | Tipe | Default | Keterangan |
|---|---|---|---|
| title | ReactNode | — | Judul kartu = pertanyaan yang dijawab grafik: "Status orang di PE". Headline/Default. |
| description | ReactNode | — | Keterangan Footnote/Default di bawah judul: cara membaca angka, satuan, atau sumber. |
| link | { label: ReactNode; href: string } | — | Tautan kanan header ke daftar sumber ("Payroll Entry ›"). Tanda › otomatis. |
| action | ReactNode | — | Slot kanan header (menimpa link): ChartCardLink asChild untuk router, filter periode, atau IconButton. |
| footnote | ReactNode | — | Catatan penjelas arti angka di bawah grafik. Tetap tampil saat kosong. |
| empty | boolean | false | Data semua-nol → grafik diganti pesan kosong. |
| emptyTitle | ReactNode | "Belum ada data periode ini." | Pesan kosong satu kalimat (Body/Default fg/muted). |
| emptyDescription | ReactNode | — | Bila diisi, pesan kosong tampil sebagai kotak neutral/subtle: emptyTitle (Body Medium) + keterangan. |
| loading | boolean | false | Skeleton setinggi grafik + aria-busy. |
| loadingHeight | number | 150 | Tinggi Skeleton saat memuat (px). |
| headingLevel | 2 | 3 | 4 | 5 | 6 | 3 | Tingkat heading judul sesuai struktur halaman. |
| children | ReactNode | — | Isi grafik: DonutChart, ActivityRings, ColumnChart, BarList, dsb. |
| className | string | — | Kelas tambahan (digabung aman dengan tailwind-merge). |
Props · ChartCardLink
Tautan bergaya kartu (Footnote/Default accent/fg) dengan › otomatis. Menerima atribut <a>.
| Prop | Tipe | Default | Keterangan |
|---|---|---|---|
| asChild | boolean | false | Render sebagai anak tunggal, mis. <Link> Next.js, dengan gaya tautan kartu. |
| href | string | — | Tujuan tautan (bila tidak asChild). |
Props · KpiCard
Dirender sebagai <div role="group"> berlabel `label`. Juga menerima atribut <div>.
| Prop | Tipe | Default | Keterangan |
|---|---|---|---|
| label | ReactNode | — | Nama angka, Footnote/Medium fg/muted: "Slip draf". |
| value | ReactNode | — | Angka utama, Display/Page title: 5. |
| note | ReactNode | — | Populasi/pembanding: "dari 6 orang di PE". |
| progress | { value: number; max: number; tone?: ChartTone } | — | Cakupan → ProgressRing 40 px di kanan (bawaan accent). Dekoratif bagi pembaca layar karena angka sudah di teks. |
| loading | boolean | false | Skeleton angka + aria-busy. |
Sumber
Kode komponen ada di packages/react/src/components/chart-card. Gaya hanya memakai kelas token Circca HIG — tidak ada warna, spasi, atau radius mentah.