kaze風
Meter
メーター（既知範囲の値表示）
プレビュー
CPU 使用率30 / 100
メモリ使用率75 / 100
ディスク使用率95 / 100
使いどころ
使う場面
- ストレージ、API の呼び出し回数、予算など、上限に対して今どれだけ使っているか
- warningThreshold（既定 0.7）と dangerThreshold（既定 0.9）を超えると、色が positive から warning、negative に変わる。しきい値は 0 から 1 の割合で渡す
- min と max で範囲を指定できる。showValue は「value / max」の形で表示する
使わない場面
- 終わりに向かって進む作業。Progress を使う（Meter は満タンが「良い状態」とは限らない）
- しきい値の色分けが合わない指標（多いほどよい数など）。tone を渡すと自動の色分けは止まる
- 構成比や項目ごとの比較。DonutChart、CategoryBar、BarList を使う
- 時間の推移。Sparkline や LineChart を使う
使い方
<Meter value={75} label="使用率" showValue />プロパティ
| 名前 | 型 | デフォルト | 説明 |
|---|---|---|---|
value必須 | number | なし | 現在の値（必須） |
min | number | 0 | 最小値 |
max | number | 100 | 最大値 |
warningThreshold | number | 0.7 | 警告しきい値（0-1） |
dangerThreshold | number | 0.9 | 危険しきい値（0-1） |
label | string | なし | ラベルテキスト |
showValue | boolean | false | 値を表示するか |
tone | "default" | "positive" | "negative" | "warning" | "info" | なし | 意味色（旧 color） |
size | "sm" | "md" | "lg" | なし | バーの高さ |
型と必須かどうかはソースの型定義から自動で生成しています。表にない HTML 標準の属性（className や aria-* など）も、ルート要素にそのまま渡せます。
アクセシビリティ
- role="meter" と aria-valuenow / aria-valuemin / aria-valuemax が付く。aria-label には label が使われる
- 色の変化は支援技術に伝わらない。「残りわずか」など状態を文言でも示す
- しきい値のマーカーは aria-hidden で読み上げられない
文言
- label は何の量かを書く（「ストレージ使用量」「今月の API 呼び出し」）
- 単位は label か周囲の文に含める。showValue の表示は数値のみ