DonutChart

import { DonutChart } from '@divistant/circca-react';

// Donut + angka tengah menjawab "berapa yang belum bersih"; legenda daftar membawa jumlah dan persen.
// Warna status bermakna memakai tone semantik (success/warning/danger), bukan urutan kategori.
export default function Example() {
  return (
    <DonutChart
      className="w-full max-w-[516px]"
      label="Status orang di PE"
      centerValue={3}
      centerLabel="belum bersih"
      data={[
        { label: 'Bersih', value: 3, tone: 'success' },
        { label: 'Peringatan', value: 1, tone: 'warning' },
        { label: 'Menahan', value: 2, tone: 'danger' },
      ]}
    />
  );
}

import { DonutChart } from '@divistant/circca-react';

// Semua nilai 0: cincin abu penuh + teks kosong di tengah — tidak menggambar segmen palsu.
// Di dalam ChartCard, lebih baik pakai `empty` pada kartunya.
export default function Example() {
  return (
    <DonutChart
      className="w-full max-w-[516px]"
      label="Status orang di PE"
      emptyLabel="Belum ada orang di PE"
      data={[
        { label: 'Bersih', value: 0, tone: 'success' },
        { label: 'Peringatan', value: 0, tone: 'warning' },
        { label: 'Menahan', value: 0, tone: 'danger' },
      ]}
    />
  );
}

import { ProgressRing } from '@divistant/circca-react';

// ProgressRing: satu nilai terhadap target. `sm` (40) untuk KPI, `md` (64) untuk mini ring kualitas data
// dengan persen di tengah, nama, dan catatan sisa. Belum lengkap = warning, lengkap = success.
export default function Example() {
  const fields = [
    { label: 'Rekening', value: 3 },
    { label: 'SSA', value: 4 },
    { label: 'Status pajak', value: 5 },
    { label: 'Jenis kontrak', value: 5 },
    { label: 'Skema & jenjang', value: 5 },
  ];
  return (
    <div className="grid w-full gap-6">
      <div className="flex items-center gap-4">
        <ProgressRing label="Slip draf" value={5} max={6} />
        <span className="type-callout-default text-muted">Slip draf 5 dari 6 orang (ring KPI, size sm)</span>
      </div>
      <div className="grid grid-cols-[repeat(auto-fill,minmax(96px,1fr))] gap-y-4">
        {fields.map(f => {
          const complete = f.value === 5;
          return (
            <ProgressRing
              key={f.label}
              size="md"
              label={f.label}
              value={f.value}
              max={5}
              tone={complete ? 'success' : 'warning'}
              showValue
              showLabel
              note={complete ? '5/5 ✓' : `${f.value}/5 · sisa ${5 - f.value}`}
              noteTone={complete ? 'success' : 'danger'}
            />
          );
        })}
      </div>
    </div>
  );
}