ColumnChart

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

// Kolom tunggal + garis target (Chart/TargetLine) + tooltip (Chart/Tooltip).
// Arahkan kursor atau Tab ke grafik lalu pakai panah kiri/kanan untuk membaca nilai tiap periode.
export default function Example() {
  return (
    <Card title="Jam lembur per periode" subtitle="Total jam lembur tersetujui · batas 12 jam per periode." className="w-full max-w-[548px]">
      <ColumnChart
        caption="Jam lembur per periode"
        categoryHeader="Periode"
        categories={['Apr', 'Mei', 'Jun', 'Jul', 'Agu', 'Sep · berjalan']}
        highlightIndex={5}
        series={[{ key: 'jam', label: 'Jam lembur', tone: 'cat-2', values: [8, 12, 9.5, 14, 10, 11.5] }]}
        target={{ value: 12, label: 'Batas 12 jam' }}
        barWidth={36}
        valueFormat={v => formatNumber(v, { fractionDigits: v % 1 ? 1 : 0 })}
        tooltip
      />
    </Card>
  );
}

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

// Stacked column — komposisi kontrak per skema (Figma Monitoring "PKWTT vs PKWT").
// Total di atas kolom; legenda menyebut jumlah & persen kolom "Semua".
const categories = ['Semua', 'Operasional', 'Support'];
const series = [
  { key: 'pkwtt', label: 'PKWTT', tone: 'cat-1' as const, values: [4, 3, 1] },
  { key: 'pkwt', label: 'PKWT', tone: 'cat-3' as const, values: [1, 0, 1] },
];

export default function Example() {
  const semua = series.reduce((sum, s) => sum + (s.values[0] ?? 0), 0);
  return (
    <Card
      title="PKWTT vs PKWT"
      subtitle="Komposisi kontrak per skema."
      action={
        <a href="#" className="type-footnote-default text-accent-fg">
          Daftar Karyawan ›
        </a>
      }
      className="w-full max-w-[548px]"
    >
      <ColumnChart
        mode="stacked"
        caption="Komposisi kontrak per skema"
        categoryHeader="Skema"
        categories={categories}
        series={series}
        legendValue={s => `· ${s.values[0] ?? 0} (${formatShare(s.values[0] ?? 0, semua)})`}
      />
    </Card>
  );
}

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

// Histogram — band masa kerja berurutan, kolom rapat (celah 4). Band bernilai 0 tetap tampil labelnya.
export default function Example() {
  return (
    <Card
      title="Masa kerja"
      subtitle="Distribusi lama kerja orang aktif (band tahun)."
      footer="Sebagian besar 1–5 tahun; 1 orang baru (< 1 tahun)."
      className="w-full max-w-[548px]"
    >
      <ColumnChart
        mode="histogram"
        height={96}
        caption="Distribusi masa kerja orang aktif"
        categoryHeader="Masa kerja"
        categories={['< 1 tahun', '1–3 tahun', '3–5 tahun', '5+ tahun']}
        series={[{ key: 'orang', label: 'Orang', tone: 'cat-5', values: [1, 2, 2, 0] }]}
      />
    </Card>
  );
}

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

// Divergen — masuk ke atas (success), keluar ke bawah garis nol (warning). Periode berjalan ditebalkan.
export default function Example() {
  return (
    <Card
      title="Tren masuk & keluar · 6 periode"
      subtitle="Masuk ke atas, keluar ke bawah garis nol."
      className="w-full"
    >
      <ColumnChart
        mode="diverging"
        caption="Karyawan masuk dan keluar per periode"
        categoryHeader="Periode"
        categories={['Apr', 'Mei', 'Jun', 'Jul', 'Agu', 'Sep · berjalan']}
        highlightIndex={5}
        series={[
          { key: 'masuk', label: 'Masuk', values: [2, 0, 1, 3, 1, 1] },
          { key: 'keluar', label: 'Keluar', values: [1, 1, 0, 2, 0, 1] },
        ]}
        tooltip
      />
    </Card>
  );
}