運行図表StringlineExperimental
The time × distance run diagram (運行図表 / ダイヤグラム / Marey / string-line chart): the route's stops on the distance (y) axis, time on the x axis, each run a DIAGONAL polyline across the stops over time. Slope = speed, a horizontal kink = a dwell, two lines converging = a meet / overtake / bunching (続行・だんご). Bidirectional runs (up/down), an optional now-line, planned-vs-actual pairs (planned dashed + actual solid), and focusable runs (onSelect). The transport-ops view a Gantt structurally cannot draw — Gantt is resource rows × horizontal bars (y = identity); this transposes the same time engine onto a continuous distance axis (y = distance) so runs can cross. For rail/bus/tram/ferry dispatch & timetable diagrams. SSR-safe: pass now in rather than reading the clock. SVG line geometry like LineChart.
プレビュー
Props
| プロパティ | 型 | 初期値 | 説明 |
|---|---|---|---|
| stops | StringlineStop[] | - | 路線の停車駅（距離軸）。{ id, label, distance }・distance が y を決める。 |
| runs | StringlineRun[] | - | 各運行（斜め線）。{ id, label?, direction?, tone?, points, actual?, onSelect? }。 |
| startTime / endTime | number | - | 時間軸の範囲（既定の単位＝午前0時からの分）。 |
| now | number | - | 現在時刻 → 縦の now-line。SSR安全（時計を読まず値を渡す）。 |
| tickInterval | number | 60 | 縦の時間目盛りの間隔（時間単位）。分なら60で毎時。 |
| formatTime | (time: number) => string | - | 軸ラベルの整形。既定は分→HH:MM。 |
| selectedRunId | string | number | - | 1本を強調（他は淡色化）。 |
| height | number | 320 | プロット高さ(px)。 |
| StringlineRun.points | StringlineRunPoint[] | - | 計画の (stopId, time)。actual がある時は破線（計画）で描画。 |
| StringlineRun.actual | StringlineRunPoint[] | - | 実績の (stopId, time)。実線で描画＝予実の差・続行が見える。 |
| StringlineRun.direction | "down" | "up" | - | 進行方向。tone 省略時の既定色（下り→primary・上り→info）。 |
Usage
import { Stringline, type StringlineStop, type StringlineRun } from "@gunjo/ui"
const stops: StringlineStop[] = [
{ id: "sjk", label: "新宿", distance: 0 },
{ id: "mtk", label: "三鷹", distance: 14.3 },
{ id: "ttc", label: "立川", distance: 27.2 },
]
const runs: StringlineRun[] = [
{ id: "712T", direction: "down", tone: "primary",
points: [{ stopId: "sjk", time: 432 }, { stopId: "mtk", time: 451 }, { stopId: "ttc", time: 469 }],
actual: [{ stopId: "sjk", time: 432 }, { stopId: "mtk", time: 455 }, { stopId: "ttc", time: 477 }], // 実績(遅延)
onSelect: () => openRun("712T") },
]
<Stringline stops={stops} runs={runs} startTime={420} endTime={500} now={450} tickInterval={20} />