分析カードAnalyticsCardExperimental
チャート、差分、補足情報を載せるメトリックカードです。
プレビュー
状態とバリエーション
上昇傾向
売上や達成率など、増加が良い意味になる指標に positive variant を組み合わせます。
売上
直近12か月
128,430円
注意が必要な上昇
解約率やエラー率など、上昇が悪化を示す指標に riskIncrease variant を組み合わせます。
解約リスク
現在のコホート
8.6%
横ばいと補足情報
大きな変化がない指標に flatWithFooter variant と footer の補足情報を組み合わせます。
アクティブユーザー
日次平均
24,180
5分前に更新
プロパティ
表は横にスクロールできます
| プロパティ | 型 | 初期値 | 説明 |
|---|---|---|---|
| title | ReactNode | - | カードヘッダーに表示するタイトルです。 |
| description | ReactNode | - | タイトル下に表示する任意の補足情報です。 |
| value | ReactNode | - | カードの主指標として、チャートや内容の上に表示する値です。 |
| delta | ReactNode | - | 主指標に添える任意の変化量です。 |
| deltaDescription | ReactNode | - | 変化量が何と比較した値かを説明するツールチップ内容です。 |
| variant | "default" | "positive" | "riskIncrease" | "flatWithFooter" | "default" | SSOT に登録されたカード状態の見た目を切り替えます。 |
| trend | "up" | "down" | "flat" | "flat" | 変化量のアイコンと意味上のトーンを切り替えます。 |
| action | ReactNode | - | カードヘッダー右側に表示する任意の操作です。 |
| footer | ReactNode | - | 更新時刻、出典、補助ステータスなどを表示する任意のフッターです。 |
| children | ReactNode | - | CardContent に表示するチャート、分布、リストなどの任意の内容です。 |
使い方
Loading...