セグメントゲージカードSegmentedGaugeCardExperimental
支出、進捗、リスクなどを複数セグメントの半円ゲージで示すカードです。
プレビュー
状態とバリエーション
標準表示
標準のセグメントゲージカードです。
支出内訳
82%Total
選択セグメント
確認中の範囲セグメントを強調します。
支出内訳
82%Total
凡例なし
親ビュー側で詳細を持つ場合は凡例行を隠せます。
支出内訳
82%Total
コンパクト
小さなカード向けの密度です。
支出内訳
82%Total
プロパティ
表は横にスクロールできます
| プロパティ | 型 | 初期値 | 説明 |
|---|---|---|---|
| segments | SegmentedGaugeCardSegment[] | - | 半円アークに表示するゲージセグメントです。 |
| value / valueLabel | number / ReactNode | - | 現在値とゲージ中央に表示するラベルです。 |
| centerLabel | ReactNode | - | 中央値の下に表示するラベルです。 |
| delta / deltaDescription | ReactNode | - | カードヘッダーに表示する補助指標と説明です。 |
| targetValue / targetLabel | number / ReactNode | - | 任意の目標マーカーとツールチップ用ラベルです。 |
| selectedIndex | number | - | 確認中のセグメントを強調します。 |
| max | number | - | セグメントと目標値の正規化に使う最大値です。 |
| showLegend | boolean | true | ゲージ下にセグメント凡例を表示します。 |
| 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) |
使い方
const segments = [
{ label: "基礎費", value: 35, rangeLabel: "固定費" },
{ label: "成長投資", value: 45, rangeLabel: "追加投資" },
{ label: "運用費", value: 20, rangeLabel: "運用余力" },
];
<SegmentedGaugeCard segments={segments} value={82} targetValue={90} max={100} />
<SegmentedGaugeCard segments={segments} selectedIndex={1} />
<SegmentedGaugeCard segments={segments} variant="compact" showLegend={false} />