kaze風
Metric
メトリクス表示
プレビュー
ユーザー数1,234
売上1,234,567+12%
離脱率3.2%-0.5%
総収益¥12,345,678
使いどころ
使う場面
- 売上・会員数・達成率など、画面の主役になる 1 つの数字を、ラベルとセットで見せる
- 前回比は change に渡す。trend は increase / decrease ではなく、良し悪しで選ぶ。良い変化は positive、悪い変化は negative
- ダッシュボードの最上段に 3〜4 個並べ、全体の状態を一目で伝える。強調したい 1 つだけ large にする
使わない場面
- 推移そのものを見せたいとき。Metric に Sparkline を添えるか、LineChart を使う
- 複数の数字を比べること。BarChart か Table を使う
- 目標に対する進み具合。Progress か Meter を使う
使い方
<Metric label="売上" value="1,234,567" change={{ value: "+12%", trend: "positive" }} />プロパティ
| 名前 | 型 | デフォルト | 説明 |
|---|---|---|---|
label必須 | string | なし | メトリクスのラベル |
value必須 | string | number | なし | 表示する値 |
large | boolean | false | 大きいサイズで表示するかどうか |
change | MetricChange | なし | 変化率の表示 |
型と必須かどうかはソースの型定義から自動で生成しています。表にない HTML 標準の属性（className や aria-* など）も、ルート要素にそのまま渡せます。
アクセシビリティ
- change の増減は色（positive の緑、negative の赤）だけで区別される。value に符号や向きを文字で入れる（「+12.4%」「-3.2%」、「前月比 +12.4%」）
- 減少が良い指標（解約率、エラー数）では、減っていれば trend は positive にする。符号は「-」のまま残し、色と符号が食い違っても意味が通るようにする
- label と value は別の span に出る。見出しや単位は label か value に含め、「売上 1,240 万円」と続けて読めるようにする
文言
- label は名詞で短く（「月間売上」「アクティブ会員」）。単位は value か label に入れる
- change の value には比べる基準を添える（「前月比 +12.4%」）。基準がないと増減の意味が伝わらない