ラベル付きドーナツカードLabeledDonutCardExperimental

中央サマリーと外部ラベルで、セグメントの構成比を読み取りやすくするドーナツカードです。

プレビュー

データ

対象: Amazon

状態とバリエーション

標準表示

中央サマリーと外部ラベルを持つ、SSOT 登録済みの標準バリエーションです。

プラットフォーム別売上

ラベル付きドーナツ

選択セグメント

確認中のセグメントをリングと外部ラベル行で強調します。

プラットフォーム別売上

33%

外部ラベルなし

カード幅が狭い場合や、周辺で凡例を持つ場合は外部ラベルを省略できます。

プラットフォーム別売上

コンパクト

狭いカードグリッド向けに余白とチャートサイズを抑える、SSOT 登録済みバリエーションです。

プラットフォーム別売上

値の整形

金額や単位付きの値を、ツールチップと外部ラベル行で同じ形式に整えます。

予算配分

補足付き

グラフの読み方や比較条件をカード下部の補足で伝える状態です。

プラットフォーム別売上

セグメントの構成比を外部ラベル付きで比較します。

プロパティ

表は横にスクロールできます
プロパティ型初期値説明
segments{ label?: ReactNode; value: number; color?: ChartColor; calloutLabel?: ReactNode; comparison?: ReactNode }[]-ドーナツのセグメントと、必要に応じて外側に表示するラベルです。
variant"default" | "compact""default"カード密度を切り替える生成済みデザインバリアントです。
selectedIndexnumber-確認中のセグメントを強調します。
showCalloutsbooleantrueドーナツの横に外部ラベル行を表示します。
thicknessnumber-ドーナツリングの太さをピクセルで指定します。
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",
    },
];

export function LabeledDonutCardUsage() {
    return (
        <div className="grid gap-6">
            <LabeledDonutCard
                segments={segments}
                centerValue="105"
                centerLabel="合計"
            />
            <LabeledDonutCard segments={segments} selectedIndex={1} />
            <LabeledDonutCard segments={segments} showCallouts={false} />
            <LabeledDonutCard segments={segments} variant="compact" />
        </div>
    );
}

設計の判断

  • ドーナツも引き出しラベルも SVG を使わずに置いた。円は conic-gradient、真ん中の抜きは重ねた丸で作ります。区分の位置は角度から座標を出して、calloutLabel を円のまわりに置きます。showCallouts を false にすると引き出しを畳んで、右の一覧だけの姿になります（狭い枠に入れるとき用）。
  • 図の役割が props で変わる。onSegmentSelect を渡すと図の塊は role="button" になり、Enter と Space で選べます。渡さなければ role="img" の読み物です。押せそうな見た目なのに押せない、という状態を作らないためです。
  • 真ん中の値はカードが決めない。centerValue と centerLabel は呼ぶ側が渡します。合計を出すのか、いちばん大きい区分を出すのかは画面の意味で変わるからです。指で触ったときのツールチップは触れた位置に出し、離しても少しの間そこに残します。
    一般のカードの設計は UIXHERO の「カード」にあります。 UIXHERO: カード（Card）

使用コンポーネント

ラベル付きドーナツカードツールチップ

関連コンポーネント

ドーナツチャート円グラフ分析カードチャート凡例