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

活動量、睡眠、業務負荷などの時間帯別データを、概要値・タイムライン・内訳バーでまとめるカードです。

対象: 12時

時間帯

活動量

ウォーク

ラン

ワークアウト

状態とバリエーション

概要値、タイムライン、内訳バーを一枚のカードで表示します。

時間帯別の活動量

+18%

6時8時10時12時14時16時

selectedSlot と showSlotValues で、確認中の時間帯と値を明示します。

12時の活動量

+18%

6時8時10時12時14時16時

狭いカードやサイドパネルでは variant="compact" で密度を上げます。

6時8時10時12時14時16時

表は横にスクロールできます

プロパティ	型	初期値	説明
metrics	{ label: ReactNode; value: ReactNode; description?: ReactNode; tooltip?: ReactNode }[]	-	タイムライン上部に表示する概要メトリクスです。tooltip で計算根拠を補足できます。
slots	{ label: ReactNode; value: number; color?: ChartColor; segments?: ActivityTimelineSegment[]; description?: ReactNode }[]	-	時間帯ごとの値です。任意の segments を渡すと、同じ内訳を縦棒の中にも積み上げ表示します。
segments	{ label: ReactNode; value: number; color?: ChartColor; description?: ReactNode }[]	-	下部の積み上げバーと統計行に表示する内訳値です。
variant	"default" \| "compact"	"default"	カード密度を切り替える生成済みデザインバリアントです。
selectedSlot	number	-	確認中の時間帯スロットを強調します。
onSlotSelect	(slot: ActivityTimelineSlot, index: number) => void	-	タイムラインの棒がクリックされたときに呼ばれます。
showSlotValues	boolean	false	タイムラインの棒の中にフォーマット済みの値を表示します。
max	number	-	タイムラインの棒の高さを正規化するための最大値です。
formatValue	(value: number) => ReactNode	-	タイムライン、内訳、ツールチップに表示する値のフォーマット関数です。