ミニ分布バーカード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)

使い方

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

<MiniDistributionBarCard segments={segments} value="58%" />
<MiniDistributionBarCard segments={segments} selectedIndex={1} />
<MiniDistributionBarCard segments={segments} variant="compact" />

使用コンポーネント

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

関連コンポーネント

分布バー統計