Komponen / Grafik & jadwal
ColumnChart
Grafik kolom vertikal tanpa pustaka: kolom tunggal dengan garis target, bertumpuk (komposisi per kategori), histogram (band berurutan), dan divergen (masuk ke atas, keluar ke bawah garis nol).
Kapan dipakai
Gunakan
- Pilih bentuk dari pertanyaan kartu: perbandingan antarperiode → tunggal, komposisi per kategori → stacked, distribusi band → histogram, arus dua arah → divergen.
- Pakai kolom untuk 2–8 kategori berlabel pendek atau periode berurutan.
- Tulis angka di atas kolom; grafik Monitoring tidak memakai sumbu y atau grid.
- Tebalkan periode berjalan dengan `highlightIndex` dan sebut "berjalan" di labelnya.
- Data semua-nol menjadi empty state; satu nilai saja lebih jelas sebagai angka besar + daftar.
Hindari
- Jangan memotong skala (mulai dari selain 0) — tinggi kolom harus sebanding nilainya.
- Jangan memakai kolom untuk banyak kategori berlabel panjang (direktorat, nama orang) — pakai BarList.
- Jangan memakai warna merah/hijau untuk seri yang tidak bermakna baik/buruk; pakai dataviz/cat-*.
- Jangan menumpuk lebih dari 3–4 seri; bagian kecil tak terbaca.
Contoh benar & salah
| Kategori | Jam |
|---|---|
| Agu | 48 |
| Sep | 50 |
- Direktorat Operasi dan Pemeliharaan3 orang
- Direktorat Keuangan dan HC2 orang
- Direktorat Teknik dan Pengembangan2 orang
- Direktorat Komersial1 orang
- Direktorat Utama1 orang
- Satuan Pengawasan Intern0 orang
| Kategori | Orang |
|---|---|
| Direktorat Operasi dan Pemeliharaan | 3 |
| Direktorat Keuangan dan HC | 2 |
| Direktorat Teknik dan Pengembangan | 2 |
| Direktorat Komersial | 1 |
| Direktorat Utama | 1 |
| Satuan Pengawasan Intern | 0 |
Penulisan
- Label kategori singkat: bulan 3 huruf ("Sep"), band dengan en dash ("1–3 tahun"), skema satu kata.
- Periode berjalan diberi akhiran " · berjalan".
- Label target menyebut maknanya: "Batas 12 jam", "Target Rp 400 jt".
- Nilai divergen bertanda: "+2" dan "−1" (minus tipografis).
Komponen terkait
- ChartCardKartu grafik: judul, deskripsi, tautan ke objek, catatan arti angka, keadaan kosong & memuat; KpiCard untuk "x dari y".
- BarListBatang horizontal berlabel di atas untuk peringkat per kategori (headcount per direktorat).
- ProportionBarBatang proporsi bertumpuk/terbelah dengan legenda nominal & persen (beban per komponen, gender).
- DonutChartDonut berangka tengah untuk komposisi status; ProgressRing untuk KPI dan kualitas data.
- StatCardAngka utama + tren baik/buruk + pembanding.