HeatmapGrid

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

// Monitoring payroll › Skema × jenjang: tiga tingkat warna (≥ 2 biru tua, 1 biru muda, 0 abu),
// angka selalu tertulis. Sel menjadi tautan ke daftar karyawan terfilter.
export default function Example() {
  return (
    <Card
      className="w-full max-w-[548px]"
      title="Skema × jenjang"
      subtitle="Orang aktif per sel · biru tua ≥ 2 · biru muda 1 · abu = kosong."
      action={
        <a href="#karyawan" className="type-footnote-default text-accent-fg hover:underline">
          Daftar Karyawan ›
        </a>
      }
    >
      <HeatmapGrid
        caption="Orang aktif per skema dan jenjang"
        columns={[
          { id: 'operasional', label: 'Operasional' },
          { id: 'support', label: 'Support' },
        ]}
        rows={[
          { id: 'staff', label: 'Staff' },
          { id: 'officer', label: 'Officer' },
          { id: 'section-head', label: 'Section Head' },
        ]}
        values={[
          [3, 1],
          [0, 1],
          [1, 0],
        ]}
        getCellHref={({ row, column, value }) => (value > 0 ? `#karyawan?skema=${column.id}&jenjang=${row.id}` : undefined)}
        getCellLabel={({ row, column, value }) => `${value} orang, ${String(row.label)} · ${String(column.label)}`}
      />
    </Card>
  );
}

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

// Ambang bisa diatur lewat `levels` untuk populasi besar: biru muda mulai 1, biru tua mulai 10.
// Kanan: semua sel nol = empty state.
export default function Example() {
  return (
    <div className="grid w-full gap-4 md:grid-cols-2">
      <Card title="Skema × jenjang" subtitle="Biru tua ≥ 10 · biru muda 1–9 · abu = kosong.">
        <HeatmapGrid
          caption="Orang aktif per skema dan jenjang"
          levels={{ light: 1, strong: 10 }}
          rowHeaderWidth={96}
          columns={[
            { id: 'ops', label: 'Operasional' },
            { id: 'sup', label: 'Support' },
            { id: 'pro', label: 'Proyek' },
          ]}
          rows={[
            { id: 'staff', label: 'Staff' },
            { id: 'officer', label: 'Officer' },
            { id: 'head', label: 'Section Head' },
          ]}
          values={[
            [42, 18, 7],
            [12, 6, 0],
            [3, 2, 1],
          ]}
        />
      </Card>
      <Card title="Skema × jenjang" subtitle="Entitas baru.">
        <HeatmapGrid
          caption="Orang aktif per skema dan jenjang"
          emptyMessage="Belum ada orang aktif di skema mana pun."
          columns={[
            { id: 'ops', label: 'Operasional' },
            { id: 'sup', label: 'Support' },
          ]}
          rows={[{ id: 'staff', label: 'Staff' }]}
          values={[[0, 0]]}
        />
      </Card>
    </div>
  );
}