ガントチャートGanttExperimental
Gantt / resource timeline: resource rows × a horizontal time axis with bars positioned by start/end and lane-packed within a row so overlapping bars stack instead of covering each other. A bar can carry internal segments[] (sub-spans tinted per segment — an aircraft rotation 便→折返し→便→整備, a crew duty 出区→乗務→入区, a shop visit 入場→検修→出場), with gaps showing as the bar's track. Day-column gridlines + date headers, a sticky row-label gutter, an optional today line, and a contained horizontal scroll. Owns the time math (pass startDate/endDate + rows + items); today is injectable (SSR-safe). Bars are focusable buttons with a composed accessible name. For project schedules, production lines, room/equipment timelines, crew/aircraft rotations, delivery/route plans and any rows-over-time view.
プレビュー
Props
| プロパティ | 型 | 初期値 | 説明 |
|---|---|---|---|
| rows | GanttRow[] | - | Resource lanes (left axis): { id, label, sublabel? }. |
| items | GanttItem[] | - | Bars: { id, rowId, start, end, label, tone?, ariaLabel? }. start/end are 'YYYY-MM-DD' / 'YYYY-MM-DDTHH:mm' / Date. Overlapping bars in a row stack into lanes. |
| startDate / endDate | string | Date | - | Visible time window. The component computes the day columns and bar positions. |
| today | string | Date | - | Date marked with a vertical line. Injectable so render stays SSR-safe (no internal new Date()). |
| laneHeight | number | 28 | Height (px) of one bar lane. |
| rowLabelWidth | number | 120 | Width (px) of the sticky row-label gutter. |
| dayWidth | number | 44 | Min width (px) per day column (drives horizontal scroll). |
| onSelectItem | (item) => void | - | A bar clicked. |
| label | ReactNode | - | Accessible name for the chart. |
Usage
import { Gantt, type GanttRow, type GanttItem } from "@gunjo/ui"
const rows: GanttRow[] = [
{ id: "l1", label: "第1ライン", sublabel: "組立" },
{ id: "l2", label: "第2ライン", sublabel: "塗装" },
]
const items: GanttItem[] = [
{ id: "j1", rowId: "l1", start: "2026-06-22", end: "2026-06-24", label: "A-101", tone: "info" },
{ id: "j3", rowId: "l2", start: "2026-06-22", end: "2026-06-25", label: "B-201", tone: "success" },
{ id: "j4", rowId: "l2", start: "2026-06-23", end: "2026-06-26", label: "B-202", tone: "warning" }, // overlaps → stacks
]
<Gantt
rows={rows}
items={items}
startDate="2026-06-21"
endDate="2026-06-29"
today="2026-06-24" // injectable — SSR-safe
onSelectItem={(i) => openJob(i)}
/>