Lompat ke isi
CirccaHIG

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).
React · BetaFigma · siapFigmaSumber

Kapan dipakai

Gunakan

  • Pakai stacked untuk komposisi 3–7 komponen yang jumlahnya bermakna (beban perusahaan = gaji pokok + tunjangan + …); tulis totalnya besar di atas.
  • Pakai split untuk perbandingan dua kelompok (gender, PKWT vs PKWTT) — label di dalam batang langsung terbaca tanpa legenda.
  • Urutkan segmen dari komponen utama ke tambahan, dan pakai warna yang sama untuk komponen yang sama di seluruh dashboard.
  • Satu nilai saja? Tampilkan angka besar + daftar, bukan batang penuh satu warna.

Hindari

  • Jangan memakai ProportionBar untuk nilai yang tidak menjumlah ke satu keseluruhan (mis. jam lembur per orang) — pakai BarList.
  • Jangan menampilkan batang kosong berlabel 0% — data semua nol adalah empty state.
  • Jangan lebih dari 7 segmen; gabungkan sisanya ke "Lainnya".

Contoh benar & salah

Beban per komponen
BagianNilaiPersen
Gaji pokokRp 14.124.00064%
LemburRp 4.200.00019%
Tunjangan tetapRp 3.800.00017%
GunakanKomponen yang menjumlah ke satu total beban: stacked bar + legenda nominal & persen.
Jam lembur per orang
BagianNilaiPersen
Andi18 jam46%
Sinta12 jam31%
Budi9 jam23%
HindariSegmen dari angka yang tidak menjumlah (jam lembur per orang) — proporsinya tidak bermakna.
Gender
BagianNilaiPersen
Laki-laki240%
Perempuan360%
GunakanDua kelompok: split bar dengan label di dalam batang.
Gender
BagianNilaiPersen
Laki-laki240%
Perempuan360%
HindariDua kelompok dengan batang tipis + legenda — mata bolak-balik antara warna dan teks.

Penulisan

  • Label segmen kata benda singkat sesuai istilah payroll: "Gaji pokok", "Tunjangan tetap (UT/UK)", "Iuran BPJS perusahaan".
  • Nilai legenda "nominal · persen": "Rp 14.124.000 · 52%". Persen dibulatkan (formatShare), sehingga jumlahnya bisa 99–101%.
  • Label split "jumlah · kelompok": "2 · Laki-laki".
  • Keterangan total menyebut cakupan: "total beban perusahaan periode ini"; orang yang belum masuk disebut di subjudul kartu.

Komponen terkait

Esc
↑↓ pilih↵ buka12 hasil