4象限マトリクスQuadrantMatrixExperimental

項目を x/y の位置で配置してランキングできる4象限マトリクスです。

プレビュー

データ

対象: 有効化

状態とバリエーション

標準表示

横にランキングを置いた標準表示です。

影響度到達範囲
  1. 活性化高い効果88
  2. 拡張拡大候補76
  3. 継続適合度が高い64
  4. リスク確認が必要52

選択項目

確認中の項目を強調します。

影響度到達範囲
  1. 活性化高い効果88
  2. 拡張拡大候補76
  3. 継続適合度が高い64
  4. リスク確認が必要52

下部ランキング

狭い領域向けにランキングを下へ移動します。

  1. 活性化高い効果88
  2. 拡張拡大候補76
  3. 継続適合度が高い64

コンパクト

ランキング数を絞ったコンパクト表示です。

  1. 活性化高い効果88
  2. 拡張拡大候補76
  3. 継続適合度が高い64

プロパティ

表は横にスクロールできます
プロパティ型初期値説明
itemsQuadrantMatrixItem[]-パーセントの x/y 座標に配置し、値でランキングする項目です。
xAxisLabelReactNode-横軸のラベルを表示します。
yAxisLabelReactNode-縦軸のラベルを表示します。
quadrantLabelsQuadrantMatrixLabels-左上、右上、左下、右下の象限ラベルを指定します。
variant"default" | "compact""default"マトリクスの高さと点サイズを切り替える SSOT 登録済みバリエーションです。
rankingPlacement"side" | "bottom""side"ランキングを横または下に配置します。
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 items = [
    { id: "activation", label: "活性化", description: "高い効果", value: 88, x: 72, y: 34 },
    { id: "expansion", label: "拡張", description: "拡大候補", value: 76, x: 58, y: 24 },
    { id: "retention", label: "継続", description: "適合度が高い", value: 64, x: 42, y: 44 },
    { id: "risk", label: "リスク", description: "確認が必要", value: 52, x: 30, y: 72 },
];

const quadrantLabels = {
    topLeft: "戦略",
    topRight: "拡大",
    bottomLeft: "見直し",
    bottomRight: "効率",
};

<QuadrantMatrix
    items={items}
    xAxisLabel="到達範囲"
    yAxisLabel="影響度"
    quadrantLabels={quadrantLabels}
/>
<QuadrantMatrix items={items} selectedId="activation" showRanking />
<QuadrantMatrix items={items} rankingPlacement="bottom" />

使用コンポーネント

4象限マトリクスチャート凡例ツールチップ

関連コンポーネント

レーダーチャート分析カード