ゲージチャートGaugeChartExperimental
スコアや進捗、容量を示す半円ゲージです。
プレビュー
状態とバリエーション
標準表示
スコアや進捗の現在値を半円で示す、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 | - | ゲージとツールチップ範囲に表示する値を整形します。関数propのため Client Component からのみ渡すこと（Server Component から渡すと next build が落ちる）。RSC 安全な整形には valueFormat を使う。 |
| valueFormat | "number" | "compact" | "integer" | Intl.NumberFormatOptions | - | シリアライズ可能な数値フォーマット＝formatValue の RSC 安全な代替。formatValue 指定時は無視。en-US ロケール固定で整形。(#338) |
| rangeLabel | ReactNode | "Range" | ツールチップとアクセシビリティテキストで min/max 範囲の前に表示するラベルです。 |
使い方
import { GaugeChart } from "@gunjo/ui";
<GaugeChart value={82} label="スコア" valueLabel="82%" formatValue={(value) => `${value}%`} rangeLabel="範囲" />
<GaugeChart value={420} max={500} label="容量" />
<GaugeChart value={64} variant="compact" color="success" />
<GaugeChart value={260} max={500} color="warning" formatValue={(value) => `${value}GB`} />