Komponen / Grafik & jadwal
EventTimeline
Linimasa horizontal kejadian dalam satu rentang tanggal (perubahan basis remun di jendela cut-off), dengan ringkasan jumlah per jenis. Berbeda dengan Timeline (riwayat aktivitas vertikal).
Import
tsx
import { EventTimeline, Card } from '@divistant/circca-react';Props
Juga menerima atribut <div>. Visual aria-hidden; pembaca layar membaca <ol> terurut tanggal. Lebar diukur ResizeObserver (awal 516 px, aman untuk hidrasi).
| Prop | Tipe | Default | Keterangan |
|---|---|---|---|
| start | Date | string | — | Awal jendela. ISO tanggal-saja ("2026-08-11") dibaca sebagai tanggal lokal. |
| end | Date | string | — | Akhir jendela. |
| events | { id; date: Date | string; label: string; type: string; tone?: ChartTone }[] | — | Kejadian; di luar rentang diabaikan, urutan bebas. |
| types | { value: string; label: string; tone?: ChartTone }[] | — | Semua jenis untuk ringkasan (termasuk yang nol) dan warna titik. Bawaan: jenis yang muncul di events. |
| label | string | — | Nama daftar kejadian untuk pembaca layar (aria-label <ol>). |
| showSummary | boolean | true | Baris ringkasan jumlah per jenis. |
| formatDate | (date: Date) => string | "11 Agu" | Format tanggal pendek di sumbu & label. |
| emptyMessage | ReactNode | 'Tidak ada kejadian di jendela ini.' | Pesan bila tidak ada kejadian di rentang. |
| className | string | — | Kelas tambahan (digabung aman dengan tailwind-merge). |
Sumber
Kode komponen ada di packages/react/src/components/event-timeline. Gaya hanya memakai kelas token Circca HIG — tidak ada warna, spasi, atau radius mentah.