Komponen / Grafik & jadwal

BarList

Batang horizontal berlabel di atas untuk peringkat per kategori — nama panjang (direktorat, unit, customer) tetap utuh, nilai tertulis di kanan.

React · BetaFigma · siapFigma Sumber

Headcount per direktorat

Diurutkan dari terbesar (`sort="desc"`). Batang 12 px radius 4 di atas trek neutral/subtle. Nilai 0 → label abu dan trek kosong. `href` menjadikan seluruh baris tautan ke daftar terfilter.

Headcount per direktorat

Daftar Karyawan ›

Direktorat Operasi dan Pemeliharaan3 orang
Direktorat Keuangan dan HC2 orang
Direktorat Utama0 orang

import { BarList, Card } from '@divistant/circca-react';

// Headcount per direktorat — label di atas batang agar nama direktorat panjang tetap utuh.
// Diurutkan dari terbesar; nilai 0 tetap tampil dengan label abu dan trek kosong. Label bisa menjadi tautan.
export default function Example() {
  return (
    <Card
      title="Headcount per direktorat"
      action={
        <a href="#" className="type-footnote-default text-accent-fg">
          Daftar Karyawan ›
        </a>
      }
      className="w-full max-w-[548px]"
    >
      <BarList
        aria-label="Headcount per direktorat"
        valueFormat={v => `${v} orang`}
        data={[
          { label: 'Direktorat Keuangan dan HC', value: 2, href: '#keuangan-hc' },
          { label: 'Direktorat Utama', value: 0, href: '#utama' },
          { label: 'Direktorat Operasi dan Pemeliharaan', value: 3, href: '#operasi' },
        ]}
      />
    </Card>
  );
}

Semua nol

Bila semua nilai 0, `emptyState` menggantikan daftar (aturan Monitoring).

Headcount per direktorat

Belum ada karyawan aktif

Karyawan di PE ini akan terhitung per direktorat setelah data master diisi.

import { BarList, Card, EmptyState } from '@divistant/circca-react';
import { UsersThree } from '@phosphor-icons/react';

// Semua nilai 0 → empty state, bukan deretan trek kosong (aturan Monitoring).
export default function Example() {
  return (
    <Card title="Headcount per direktorat" className="w-full max-w-[548px]">
      <BarList
        aria-label="Headcount per direktorat"
        valueFormat={v => `${v} orang`}
        data={[
          { label: 'Direktorat Operasi dan Pemeliharaan', value: 0 },
          { label: 'Direktorat Keuangan dan HC', value: 0 },
          { label: 'Direktorat Utama', value: 0 },
        ]}
        emptyState={
          <EmptyState
            size="compact"
            icon={UsersThree}
            title="Belum ada karyawan aktif"
            description="Karyawan di PE ini akan terhitung per direktorat setelah data master diisi."
          />
        }
      />
    </Card>
  );
}