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.

React · BetaFigma · siapFigma Sumber

Jam lembur per orang

Nama + NIP di kiri, garis 2 px dan titik 12 dataviz/cat-2, nilai di kanan. Garis putus-putus 4/3 neutral/emphasis menandai rata-rata (`average="auto"`), labelnya di atas garis.

Jam lembur per orang

Diurutkan dari jam terbanyak. Garis putus-putus = rata-rata per slip lembur.

Data Overtime ›

rata-rata 3,8 jam

Sinta Lestari10069
6 jam
Andi Wijaya10312
3 jam
Maya Kusuma10401
2,5 jam

Total 11,5 jam periode ini; Sinta 52% dari total.

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

// Jam lembur per orang — diurutkan dari terbesar, garis putus-putus = rata-rata per slip lembur.
const jam = (v: number) => `${formatNumber(v, { fractionDigits: v % 1 ? 1 : 0 })} jam`;

export default function Example() {
  return (
    <Card
      title="Jam lembur per orang"
      subtitle="Diurutkan dari jam terbanyak. Garis putus-putus = rata-rata per slip lembur."
      action={
        <a href="#" className="type-footnote-default text-accent-fg">
          Data Overtime ›
        </a>
      }
      footer="Total 11,5 jam periode ini; Sinta 52% dari total."
      className="w-full max-w-[548px]"
    >
      <LollipopChart
        aria-label="Jam lembur per orang"
        valueFormat={jam}
        averageLabel={avg => `rata-rata ${formatNumber(avg, { fractionDigits: 1 })} jam`}
        data={[
          { label: 'Andi Wijaya', sublabel: '10312', value: 3 },
          { label: 'Sinta Lestari', sublabel: '10069', value: 6 },
          { label: 'Maya Kusuma', sublabel: '10401', value: 2.5 },
        ]}
      />
    </Card>
  );
}

Belum ada data

Tanpa data atau semua 0 → `emptyState`; garis rata-rata tidak ditampilkan.

Jam lembur per orang

Belum ada lembur periode ini

Slip lembur yang disetujui akan tampil di sini, diurutkan dari jam terbanyak.

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

// Belum ada slip lembur di periode ini → empty state, tanpa garis rata-rata "0 jam".
export default function Example() {
  return (
    <Card title="Jam lembur per orang" className="w-full max-w-[548px]">
      <LollipopChart
        aria-label="Jam lembur per orang"
        data={[]}
        emptyState={
          <EmptyState
            size="compact"
            icon={Clock}
            title="Belum ada lembur periode ini"
            description="Slip lembur yang disetujui akan tampil di sini, diurutkan dari jam terbanyak."
          />
        }
      />
    </Card>
  );
}