セグメントゲージカード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 | ゲージ下にセグメント凡例を表示します。 |
使い方
Loading...