統計StatisticExperimental
指標名、主値、増減、補足をまとめて表示する統計コンポーネントです。
プレビュー
月間売上
¥4,523,189
+20.1%前月比
状態とバリエーション
比較なし
現在値や計測時点だけを示す場合は増減値を省略し、補足に時点を入れます。
今月の利用量
82%
2026年5月26日 10:00 時点
改善としての減少
エラー率やコストなど、下がることが良い指標は矢印の向きと意味色を分けます。
エラー率
1.8%
-0.4pt前週比
悪化としての増加
アラートや失敗数など、増えることが悪い指標は上向き矢印でも悪い変化として表示します。
アラート
18件
+6件前日比
横ばい
変化がない場合は中立の表示にして、強すぎない見え方にします。
処理待ち
24件
変化なし
複数指標
ダッシュボードでは同じ幅のグリッドに並べ、矢印の向きと意味色を指標ごとに合わせます。
売上
¥4,523,189
+20.1%前月比
エラー率
1.8%
-0.4pt前週比
処理待ち
24件
変化なし
プロパティ
表は横にスクロールできます
| プロパティ | 型 | 初期値 | 説明 |
|---|---|---|---|
| label | ReactNode | - | 指標名です。 |
| value | ReactNode | - | 大きく表示する主値です。 |
| change | ReactNode | - | 増減や比較値です。 |
| trend | "up" | "down" | "flat" | "flat" | 増減アイコンの向きです。 |
| tone | "positive" | "negative" | "neutral" | - | 増減表示の意味色です。未指定時は変化の向きから推定します。 |
| hint | ReactNode | - | 比較対象や計測時点などの補足です。 |
| className | string | - | 外側に追加するクラスです。 |
使い方
Loading...