ゲージチャートGaugeChart
Experimental

スコアや進捗、容量を示す半円ゲージです。

スコア

前回スコア

状態とバリエーション

スコアや進捗の現在値を半円で示す、SSOT 登録済みの標準バリエーションです。

82%スコア

狭いカードやサイドパネルで高さを抑える SSOT 登録済みバリエーションです。

64%進捗

最大値を変更して、容量や上限付きの使用量を示す状態です。

420GB容量

最小値が 0 ではない範囲でも、現在値を正規化して表示できます。

+12pt差分

負荷や注意が必要な状態を warning カラーで示します。

73%負荷

高リスクや危険域に近い値を destructive カラーで示します。

91%リスク

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

プロパティ	型	初期値	説明
value	number	-	半円ゲージに表示する現在値です。
min	number	0	正規化に使う最小値です。
max	number	100	正規化に使う最大値です。
variant	"compact" \| "default"	"default"	チャートサイズを切り替える SSOT 登録済みバリエーションです。
color	ChartColor	-	アクティブな円弧のトークンカラーです。未指定時は primary を使います。
label	ReactNode	-	値の下に表示する補足ラベルです。
valueLabel	ReactNode	-	ゲージ内に表示する任意の表示値です。
formatValue	(value: number) => ReactNode	-	ゲージとツールチップ範囲に表示する値を整形します。
rangeLabel	ReactNode	"Range"	ツールチップとアクセシビリティテキストで min/max 範囲の前に表示するラベルです。