Treemap

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

// Monitoring payroll › Additional Salary per jenis: luas kotak = nominal.
// Jenis bernilai nol menjadi chip garis putus "· belum ada baris".
export default function Example() {
  return (
    <Card
      className="w-full max-w-[548px]"
      title="Additional Salary per jenis"
      subtitle="Luas kotak = nominal pendapatan variabel periode ini."
      action={
        <a href="#additional-salary" className="type-footnote-default text-accent-fg hover:underline">
          Additional Salary ›
        </a>
      }
    >
      <Treemap
        label="Additional Salary per jenis"
        formatValue={v => formatMoney(v)}
        note="Koperasi (potongan) ada di kartu Potongan."
        data={[
          { label: 'Natura', value: 2_651_000, meta: '2 orang', tone: 'cat-1' },
          { label: 'Jasop', value: 750_000, meta: '1 orang', tone: 'cat-5' },
          { label: 'Rapel / koreksi', value: 0 },
        ]}
      />
    </Card>
  );
}

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

// Banyak jenis: kotak kecil menyembunyikan labelnya bertahap (nominal → jenis), tetap ada di tabel data.
// Kanan: semua jenis nol = empty state.
export default function Example() {
  return (
    <div className="grid w-full gap-4 md:grid-cols-2">
      <Card title="Additional Salary per jenis" subtitle="Periode Oktober 2026.">
        <Treemap
          label="Additional Salary per jenis, Oktober 2026"
          formatValue={v => formatMoney(v, { compact: true })}
          data={[
            { label: 'Natura', value: 12_400_000, meta: '9 orang' },
            { label: 'Jasop', value: 6_750_000, meta: '5 orang' },
            { label: 'Insentif proyek', value: 4_200_000, meta: '3 orang' },
            { label: 'Uang makan lembur', value: 1_150_000, meta: '7 orang' },
            { label: 'Rapel / koreksi', value: 380_000, meta: '1 orang' },
          ]}
        />
      </Card>
      <Card title="Additional Salary per jenis" subtitle="Belum ada baris periode ini.">
        <Treemap
          label="Additional Salary per jenis"
          emptyMessage="Belum ada Additional Salary di periode ini."
          data={[
            { label: 'Natura', value: 0 },
            { label: 'Jasop', value: 0 },
          ]}
        />
      </Card>
    </div>
  );
}