セグメントタイムラインカードSegmentTimelineCardExperimental

睡眠ステージ、稼働状態、配送状態などの時間範囲を横方向に示すカードです。

プレビュー

データ

対象: 浅い睡眠

深い睡眠
112
浅い睡眠
248
レム
86
覚醒
28
区間数
16 / 474 分

状態とバリエーション

標準表示

指標付きの標準タイムラインカードです。

睡眠ステージ

83%
睡眠品質
基準品質 76% と比較した睡眠品質スコアです。
7時間26分
睡眠時間
総時間から覚醒時間を除いた睡眠時間です。
28分
覚醒時間
覚醒ステージに分類された時間の合計です。
23:4207:18

選択セグメント

確認中の時間範囲を強調します。

睡眠ステージ

83%
睡眠品質
基準品質 76% と比較した睡眠品質スコアです。
7時間26分
睡眠時間
総時間から覚醒時間を除いた睡眠時間です。
28分
覚醒時間
覚醒ステージに分類された時間の合計です。

マーカー付き

タイムライン上に基準点を表示します。

睡眠ステージ

コンパクト

カード密度を抑えた表示です。

睡眠ステージ

プロパティ

表は横にスクロールできます
プロパティ型初期値説明
segmentsSegmentTimelineSegment[]-横方向のタイムラインに表示するカテゴリ別の時間範囲です。
metricsSegmentTimelineMetric[]-タイムライン上部に表示する概要指標です。
selectedIndexnumber-確認中の時間範囲を強調します。
min / maxnumber-セグメントとマーカー位置を正規化するタイムライン範囲です。
startLabel / endLabelReactNode-タイムラインの開始端と終了端に表示するラベルです。
markersSegmentTimelineMarker[]-タイムライン上に表示する任意の基準マーカーです。
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)
rangeLabelReactNode-ツールチップ内の開始終了範囲の前に表示するラベルです。

使い方

import { SegmentTimelineCard } from "@gunjo/ui";

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" },
];

export function SleepStageTimelineVariants() {
    return (
        <div className="grid gap-6">
            <SegmentTimelineCard segments={segments} />
            <SegmentTimelineCard segments={segments} selectedIndex={1} />
            <SegmentTimelineCard
              segments={segments}
              min={0}
              max={474}
              markers={[{ value: 360, label: "アラーム" }]}
            />
        </div>
    );
}

設計の判断

  • 時間の帯を横スクロールでカードの中に収めた。帯は最低 36rem を確保し、overflow-x-auto の入れ物に入れています。スマホでカードごと横に伸びると、ページ全体が横に流れてしまうためです。
  • 押せるのは区分と凡例で、目印は読み物にした。segments の一片と凡例の行は button ですが、markers（締切・交代の時刻）は role="img" の飾りです。目印は幅を持たないので、タップの的として使えないためです。
  • 時間の左端と右端は呼ぶ側が書く。startLabel と endLabel、min と max は渡された値をそのまま使い、部品は時刻の書式を持ちません。24時間の1日なのか、8時間の1シフトなのかで、書き方も刻みも変わるからです。
    一般のカードの設計は UIXHERO の「カード」にあります。

使用コンポーネント

セグメントタイムラインカードチャート凡例ツールチップ

関連コンポーネント

タイムライン活動タイムラインカード

いつ・なぜ使うか（UIXHERO）

「いつ・なぜ使うか」の判断は、姉妹サイト UIXHERO の記事で解説しています。

UIXHERO: カード（Card）近い記事