ラベル付きドーナツカードLabeledDonutCardExperimental
中央サマリーと外部ラベルで、セグメントの構成比を読み取りやすくするドーナツカードです。
プレビュー
状態とバリエーション
標準表示
中央サマリーと外部ラベルを持つ、SSOT 登録済みの標準バリエーションです。
プラットフォーム別売上
ラベル付きドーナツ
105合計
選択セグメント
確認中のセグメントをリングと外部ラベル行で強調します。
プラットフォーム別売上
33%
105合計
外部ラベルなし
カード幅が狭い場合や、周辺で凡例を持つ場合は外部ラベルを省略できます。
プラットフォーム別売上
105合計
コンパクト
狭いカードグリッド向けに余白とチャートサイズを抑える、SSOT 登録済みバリエーションです。
プラットフォーム別売上
105合計
値の整形
金額や単位付きの値を、ツールチップと外部ラベル行で同じ形式に整えます。
予算配分
27.5万円予算
補足付き
グラフの読み方や比較条件をカード下部の補足で伝える状態です。
プラットフォーム別売上
105合計
セグメントの構成比を外部ラベル付きで比較します。
プロパティ
表は横にスクロールできます
| プロパティ | 型 | 初期値 | 説明 |
|---|---|---|---|
| segments | { label?: ReactNode; value: number; color?: ChartColor; calloutLabel?: ReactNode; comparison?: ReactNode }[] | - | ドーナツのセグメントと、必要に応じて外側に表示するラベルです。 |
| variant | "default" | "compact" | "default" | カード密度を切り替える生成済みデザインバリアントです。 |
| selectedIndex | number | - | 確認中のセグメントを強調します。 |
| showCallouts | boolean | true | ドーナツの横に外部ラベル行を表示します。 |
| thickness | number | - | ドーナツリングの太さをピクセルで指定します。 |
| formatValue | (value: number) => ReactNode | - | ツールチップと外部ラベル行に表示するセグメント値のフォーマット関数です。 |
| onSegmentSelect | (segment, index) => void | - | ドーナツリングまたは外部ラベル行を選択したときに呼ばれる任意のコールバックです。 |
使い方
import { LabeledDonutCard } from "@gunjo/ui";
const segments = [
{ label: "Amazon", calloutLabel: "Amazon", value: 45, comparison: "販売チャネル 1" },
{ label: "Alibaba", calloutLabel: "Alibaba", value: 35, comparison: "販売チャネル 2" },
{ label: "Tokopedia", calloutLabel: "Tokopedia", value: 25, comparison: "販売チャネル 3" },
];
<LabeledDonutCard segments={segments} centerValue="105" centerLabel="合計" />
<LabeledDonutCard segments={segments} selectedIndex={1} />
<LabeledDonutCard segments={segments} showCallouts={false} />
<LabeledDonutCard segments={segments} variant="compact" />