WaffleChart

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

// Monitoring payroll › Cakupan populasi vs PE: satu ikon = satu orang aktif di jendela periode.
// Jumlah kelompok dihitung dari item ber-tone sama; kelompok nol tetap tampil di legenda.
export default function Example() {
  return (
    <Card
      className="w-full max-w-[548px]"
      title="Cakupan populasi vs PE"
      subtitle="Satu ikon = satu orang aktif di jendela periode."
      action={
        <a href="#karyawan" className="type-footnote-default text-accent-fg hover:underline">
          Daftar Karyawan ›
        </a>
      }
    >
      <WaffleChart
        label="Cakupan populasi vs Payroll Entry"
        items={[
          { id: 'raka', label: 'Raka', tone: 'accent' },
          { id: 'sinta', label: 'Sinta', tone: 'accent' },
          { id: 'dewi', label: 'Dewi', tone: 'accent' },
          { id: 'andi', label: 'Andi', tone: 'accent' },
          { id: 'maya', label: 'Maya', tone: 'accent' },
          { id: 'budi', label: 'Budi', tone: 'warning' },
        ]}
        groups={[
          { label: 'Aktif di PE', tone: 'accent' },
          { label: 'Relieving di jendela', tone: 'warning' },
          { label: 'Aktif belum di PE', tone: 'neutral' },
        ]}
      />
    </Card>
  );
}

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

// Populasi besar (> 60 orang): mode otomatis berganti ke sel kotak tanpa nama, dibangkitkan dari `groups`.
// Kanan: populasi kosong = empty state.
export default function Example() {
  return (
    <div className="grid w-full gap-4 md:grid-cols-2">
      <Card title="Cakupan populasi vs PE" subtitle="Satu kotak = satu orang.">
        <WaffleChart
          label="Cakupan populasi vs Payroll Entry"
          groups={[
            { label: 'Aktif di PE', count: 132, tone: 'accent' },
            { label: 'Relieving di jendela', count: 6, tone: 'warning' },
            { label: 'Aktif belum di PE', count: 4, tone: 'neutral' },
          ]}
        />
      </Card>
      <Card title="Cakupan populasi vs PE" subtitle="Entitas baru.">
        <WaffleChart
          label="Cakupan populasi vs Payroll Entry"
          emptyMessage="Belum ada orang aktif di jendela periode."
          groups={[
            { label: 'Aktif di PE', count: 0, tone: 'accent' },
            { label: 'Relieving di jendela', count: 0, tone: 'warning' },
          ]}
        />
      </Card>
    </div>
  );
}