セグメントタイムラインカード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 | - | ツールチップと凡例行に表示する時間を整形します。 |
| rangeLabel | ReactNode | - | ツールチップ内の開始終了範囲の前に表示するラベルです。 |
使い方
Loading...