ミニ分布バーカードMiniDistributionBarCardExperimental

カテゴリ構成や利用率を、密集したティックバーでコンパクトに示すカードです。

プレビュー

データ

対象: アクセサリ

状態とバリエーション

標準表示

商品カテゴリの分布を標準カードで示します。

商品カテゴリ

ミニ分布

+3.2%
58%
アクセサリ · 58%

選択中セグメント

確認中のセグメントを強調します。

商品カテゴリ

26%
デバイス · 26%

コンパクト

密度の高いダッシュボード向けの登録済みバリエーションです。

商品カテゴリ

ティック多め

より細かいティック分割を確認します。

商品カテゴリ

プロパティ

表は横にスクロールできます
プロパティ型初期値説明
segmentsMiniDistributionBarCardSegment[]-ティックと概要行で表示する分布セグメントです。
variant"default" | "compact""default"カード密度を切り替える SSOT 登録済みバリエーションです。
tickCountnumber32分布を表現するコンパクトなティック数です。
formatValue(value: number) => ReactNode-ツールチップと凡例行に表示するセグメント値を整形します。 関数propのため Client Component からのみ渡すこと（Server Component から渡すと next build が落ちる）。RSC 安全な整形には valueFormat を使う。
valueFormat"number" | "compact" | "integer" | Intl.NumberFormatOptions-シリアライズ可能な数値フォーマット＝formatValue の RSC 安全な代替。formatValue 指定時は無視。en-US ロケール固定。(#338)

使い方

import { MiniDistributionBarCard } from "@gunjo/ui";

const segments = [
    { label: "アクセサリ", value: 58, detail: "45 件" },
    { label: "デバイス", value: 26, detail: "53 件" },
    { label: "サービス", value: 16, detail: "61 件" },
];

export function ProductCategoryDistributionVariants() {
    return (
        <div className="grid gap-6">
            <MiniDistributionBarCard segments={segments} value="58%" />
            <MiniDistributionBarCard segments={segments} selectedIndex={1} />
            <MiniDistributionBarCard segments={segments} variant="compact" />
        </div>
    );
}

設計の判断

  • 帯を32個の目盛りに割った。1本の連続した帯ではなく、既定で32個（tickCount）の四角に分け、各区分の取り分だけ色を塗ります。割り当ては端数の大きい区分から1つずつ足す形なので、塗った数の合計は必ず tickCount に一致します。1%未満の区分が消えてしまわないための形です。
  • 目盛りの1つずつが押せるボタンになっている。それぞれに「区分名: NN%」という読み上げ名を付け、下の一覧の行と同じ onSegmentSelect を呼びます。資料の「カードのアクションは最大2つ」に対して、GUNJO はここを「複数のアクション」ではなく「同じ1つの選択に対する複数の入口」と見なしました。カードの外枠は押せません。
  • 分母はデータから作り、max で上書きできる。既定の分母は区分の合計です。分母を固定したい（未回答のぶんを空けておきたい）ときだけ max を渡します。負の値と数値でない値は0として扱い、帯が壊れないようにしています。
    一般のカードの設計は UIXHERO の「カード」にあります。

使用コンポーネント

ミニ分布バーカードチャート凡例ツールチップ

関連コンポーネント

分布バー統計

いつ・なぜ使うか（UIXHERO）

「いつ・なぜ使うか」の判断は、姉妹サイト UIXHERO の記事で解説しています。

UIXHERO: カード（Card）近い記事