分布バーDistributionBarExperimental
セグメントやチャネル構成を示す積み上げ割合バーです。
プレビュー
状態とバリエーション
標準表示
バー単体で構成比だけを示す、SSOT 登録済みの標準バリエーションです。
凡例付き
セグメントのラベル、割合、元の値をバーの下で確認する状態です。
自然流入46%
紹介28%
直接18%
広告8%
値の整形
割合は自動計算し、ツールチップや凡例に表示する元の値だけを整形します。
プロダクト48%
運用30.5%
サポート14.9%
予備6.5%
セグメント多め
6 区分程度の細かい構成比でも、バーと凡例を合わせて確認できます。
検索34%
SNS22%
メール16%
広告12%
提携9%
その他7%
小さいセグメント
1〜5% 程度の小さい区分も、フォーカスとツールチップで確認できる状態です。
完了92%
確認中5%
停止中2%
未割当1%
プロパティ
表は横にスクロールできます
| プロパティ | 型 | 初期値 | 説明 |
|---|---|---|---|
| segments | { label?: ReactNode; value: number; color?: ChartColor }[] | - | 積み上げ割合バーに正規化して表示するセグメントです。 |
| showLegend | boolean | false | バーの下にチャート凡例を表示します。 |
| 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) |
| totalLabel | ReactNode | "Total" | 凡例ツールチップで生のセグメント値の前に表示するラベルです。 |
使い方
import { DistributionBar } from "@gunjo/ui";
const segments = [
{ label: "自然流入", value: 46, color: "primary" },
{ label: "紹介", value: 28, color: "success" },
{ label: "直接", value: 18, color: "warning" },
{ label: "広告", value: 8, color: "info" },
];
<DistributionBar segments={segments} />
<DistributionBar segments={segments} totalLabel="合計" showLegend />
<DistributionBar segments={segments} formatValue={(value) => `${value.toLocaleString()}円`} />