セグメントタイムラインカードSegmentTimelineCardExperimental
睡眠ステージ、稼働状態、配送状態などの時間範囲を横方向に示すカードです。
プレビュー
状態とバリエーション
標準表示
指標付きの標準タイムラインカードです。
睡眠ステージ
83%
睡眠品質
基準品質 76% と比較した睡眠品質スコアです。
7時間26分
睡眠時間
総時間から覚醒時間を除いた睡眠時間です。
28分
覚醒時間
覚醒ステージに分類された時間の合計です。
23:4207:18
選択セグメント
確認中の時間範囲を強調します。
睡眠ステージ
83%
睡眠品質
基準品質 76% と比較した睡眠品質スコアです。
7時間26分
睡眠時間
総時間から覚醒時間を除いた睡眠時間です。
28分
覚醒時間
覚醒ステージに分類された時間の合計です。
マーカー付き
タイムライン上に基準点を表示します。
睡眠ステージ
コンパクト
カード密度を抑えた表示です。
睡眠ステージ
プロパティ
表は横にスクロールできます
| プロパティ | 型 | 初期値 | 説明 |
|---|---|---|---|
| segments | SegmentTimelineSegment[] | - | 横方向のタイムラインに表示するカテゴリ別の時間範囲です。 |
| metrics | SegmentTimelineMetric[] | - | タイムライン上部に表示する概要指標です。 |
| selectedIndex | number | - | 確認中の時間範囲を強調します。 |
| min / max | number | - | セグメントとマーカー位置を正規化するタイムライン範囲です。 |
| startLabel / endLabel | ReactNode | - | タイムラインの開始端と終了端に表示するラベルです。 |
| markers | SegmentTimelineMarker[] | - | タイムライン上に表示する任意の基準マーカーです。 |
| formatValue | (value: number) => ReactNode | - | ツールチップと凡例行に表示する時間を整形します。 関数propのため Client Component からのみ渡すこと（Server Component から渡すと next build が落ちる）。RSC 安全な整形には valueFormat を使う。 |
| valueFormat | "number" | "compact" | "integer" | Intl.NumberFormatOptions | - | シリアライズ可能な数値フォーマット＝formatValue の RSC 安全な代替。formatValue 指定時は無視。en-US ロケール固定。(#338) |
| rangeLabel | ReactNode | - | ツールチップ内の開始終了範囲の前に表示するラベルです。 |
使い方
const metrics = [
{ label: "睡眠品質", value: "83%", description: "基準品質 76% と比較した睡眠品質スコアです。" },
{ label: "睡眠時間", value: "7時間26分", description: "総時間から覚醒時間を除いた睡眠時間です。" },
{ label: "覚醒時間", value: "28分", description: "覚醒ステージに分類された時間の合計です。" },
];
const segments = [
{ label: "浅い睡眠", value: 31, start: 0, end: 31, color: "info" },
{ label: "深い睡眠", value: 37, start: 31, end: 68, color: "primary" },
{ label: "浅い睡眠", value: 31, start: 68, end: 99, color: "info" },
{ label: "レム", value: 29, start: 99, end: 128, color: "success" },
{ label: "浅い睡眠", value: 31, start: 128, end: 159, color: "info" },
{ label: "覚醒", value: 14, start: 159, end: 173, color: "warning" },
{ label: "浅い睡眠", value: 31, start: 173, end: 204, color: "info" },
{ label: "深い睡眠", value: 37, start: 204, end: 241, color: "primary" },
{ label: "浅い睡眠", value: 31, start: 241, end: 272, color: "info" },
{ label: "レム", value: 29, start: 272, end: 301, color: "success" },
{ label: "浅い睡眠", value: 31, start: 301, end: 332, color: "info" },
{ label: "深い睡眠", value: 38, start: 332, end: 370, color: "primary" },
{ label: "浅い睡眠", value: 31, start: 370, end: 401, color: "info" },
{ label: "レム", value: 28, start: 401, end: 429, color: "success" },
{ label: "覚醒", value: 14, start: 429, end: 443, color: "warning" },
{ label: "浅い睡眠", value: 31, start: 443, end: 474, color: "info" },
];
const formatDuration = (minutes) => `${Math.floor(minutes / 60)}時間${minutes % 60}分`;
<SegmentTimelineCard segments={segments} />
<SegmentTimelineCard segments={segments} selectedIndex={1} />
<SegmentTimelineCard segments={segments} min={0} max={474} markers={[{ value: 360, label: "アラーム" }]} />