活動タイムラインカードActivityTimelineCardExperimental
活動量、睡眠、業務負荷などの時間帯別データを、概要値・タイムライン・内訳バーでまとめるカードです。
プレビュー
状態とバリエーション
標準表示
概要値、タイムライン、内訳バーを一枚のカードで表示します。
活動量タイムライン
時間帯別の活動量
+18%
+23%
昨日比
760 kcal
消費
253 kcal
日平均
6時8時10時12時14時16時
選択中の時間帯
selectedSlot と showSlotValues で、確認中の時間帯と値を明示します。
選択中の時間帯
12時の活動量
+18%
+23%
昨日比
760 kcal
消費
253 kcal
日平均
4284581569246
6時8時10時12時14時16時
コンパクト表示
狭いカードやサイドパネルでは variant="compact" で密度を上げます。
コンパクト表示
+23%
昨日比
760 kcal
消費
253 kcal
日平均
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 | - | タイムライン、内訳、ツールチップに表示する値のフォーマット関数です。 関数propのため Client Component からのみ渡すこと（Server Component から渡すと next build が落ちる）。RSC 安全な整形には valueFormat を使う。 |
| valueFormat | "number" | "compact" | "integer" | Intl.NumberFormatOptions | - | シリアライズ可能な数値フォーマット＝formatValue の RSC 安全な代替。formatValue 指定時は無視。en-US ロケール固定。(#338) |
使い方
import { ActivityTimelineCard } from "@gunjo/ui";
const metrics = [
{ label: "昨日比", value: "+23%" },
{ label: "消費", value: "760 kcal" },
{ label: "日平均", value: "253 kcal" },
];
const segments = [
{ label: "ウォーク", value: 127 },
{ label: "ラン", value: 384 },
{ label: "ワークアウト", value: 249 },
];
const slots = [
{ label: "6時", value: 42 },
{ label: "8時", value: 84 },
{ label: "10時", value: 58 },
{ label: "12時", value: 156 },
{ label: "14時", value: 92 },
{ label: "16時", value: 46 },
];
<ActivityTimelineCard metrics={metrics} slots={slots} segments={segments} />
<ActivityTimelineCard metrics={metrics} slots={slots} segments={segments} selectedSlot={3} />
<ActivityTimelineCard metrics={metrics} slots={slots} segments={segments} showSlotValues />
<ActivityTimelineCard metrics={metrics} slots={slots} segments={segments} variant="compact" />