分析カードAnalyticsCardExperimental

チャート、差分、補足情報を載せるメトリックカードです。

プレビュー

データ

状態とバリエーション

上昇傾向

売上や達成率など、増加が良い意味になる指標に positive variant を組み合わせます。

売上

直近12か月

128,430円

注意が必要な上昇

解約率やエラー率など、上昇が悪化を示す指標に riskIncrease variant を組み合わせます。

解約リスク

現在のコホート

8.6%

横ばいと補足情報

大きな変化がない指標に flatWithFooter variant と footer の補足情報を組み合わせます。

アクティブユーザー

日次平均

24,180
5分前に更新

プロパティ

表は横にスクロールできます
プロパティ型初期値説明
titleReactNode-カードヘッダーに表示するタイトルです。
descriptionReactNode-タイトル下に表示する任意の補足情報です。
valueReactNode-カードの主指標として、チャートや内容の上に表示する値です。
deltaReactNode-主指標に添える任意の変化量です。
deltaDescriptionReactNode-変化量が何と比較した値かを説明するツールチップ内容です。
variant"default" | "positive" | "riskIncrease" | "flatWithFooter""default"SSOT に登録されたカード状態の見た目を切り替えます。
trend"up" | "down" | "flat""flat"変化量のアイコンと意味上のトーンを切り替えます。
actionReactNode-カードヘッダー右側に表示する任意の操作です。
footerReactNode-更新時刻、出典、補助ステータスなどを表示する任意のフッターです。
childrenReactNode-CardContent に表示するチャート、分布、リストなどの任意の内容です。

使い方

import { AnalyticsCard, SparklineChart } from "@gunjo/ui";

const data = [24, 28, 22, 36, 32, 44, 39, 52, 48, 57, 51, 64];

export function AnalyticsCardUsage() {
    return (
        <AnalyticsCard
            title="売上"
            value="128,430円"
            delta="+12.4%"
            deltaDescription="前期間と比較しています。"
            variant="positive"
            trend="up"
        >
            <SparklineChart data={data} variant="area" />
        </AnalyticsCard>
    );
}

設計の判断

  • 見出しの高さを呼ぶ側が決める。titleAs の既定は h3 で、KPI を横に並べる行がページの h1 の直下に来るときは h2 に上げられます（#181）。カードの中の見出しを固定にすると、ページ全体の見出しの並びが崩れます。
  • 読ませる順を「値・増減・補足」に固定した。資料は「情報の優先順位を決める」を判断の核に挙げています。この部品はタイトルと説明を上、大きな値を中、増減をその右、footer を下に置き、この並びを差し替えられなくしました。KPI を4枚横に並べたときに、カードごとに読む順が変わらないようにするためです。
  • 理由があるときだけ増減が押せるようになる。deltaDescription を渡すと、増減の表示が本物の button になってツールチップで内訳を出します。渡さなければただの文字のままです。資料の「カードのアクションは最大2つ」を守るため、増減を常にボタンにはしていません。
    一般のカードの設計は UIXHERO の「カード」にあります。 UIXHERO: カード（Card）

使用コンポーネント

AnalyticsCardSparklineChartCardTooltip

関連コンポーネント

StatisticBarChartDonutChartGaugeChart