同心円進捗カードConcentricProgressCardExperimental

ストレージ、クォータ、利用率を複数リングで示す進捗カードです。

データ

対象: メディア

書類

メディア

アプリ

システム

容量

状態とバリエーション

標準表示

概要指標、選択中リング、中央の値、凡例をまとめて表示する標準の SSOT 登録済みバリエーションです。

ストレージ概要

カテゴリ別の使用量

61%

155GB

使用済み

61%

256GB

総容量

メディア

選択中

68GB

155GB使用済み容量

コンパクト

狭いカードやサイドパネルで余白とチャートサイズを抑える SSOT 登録済みバリエーションです。

リソース負荷

現在の利用率

74%ピーク

選択中リング

確認中のリングを固定し、リングや凡例行の選択を受け取る状態です。

選択中リング

確認中のカテゴリを強調します

68GBメディア

概要指標付き

リングの上に使用量、総容量、選択カテゴリなどの概要値を並べる状態です。

容量サマリー

概要値とリングを合わせて確認します

155GB

使用済み

61%

256GB

総容量

メディア

選択中

68GB

凡例なし

詳細やランキングを上位ビューで持つ場合に、チャートだけを中央に見せる状態です。

チャートのみ

詳細は親ビューで表示

155GB使用済み

プロパティ

表は横にスクロールできます

プロパティ	型	初期値	説明
rings	{ label?: ReactNode; value: number; color?: ChartColor; description?: ReactNode; detail?: ReactNode }[]	-	選択可能な同心円バンドとして表示する進捗リングです。
metrics	{ label: ReactNode; value: ReactNode; description?: ReactNode }[]	-	リング上部に表示する任意の概要指標です。
selectedIndex	number	-	確認中のリングを強調します。
max	number	-	各リングを正規化する最大値です。
variant	"default" \| "compact"	"default"	カード密度を切り替える SSOT 登録済みバリアントです。
showLegend	boolean	true	チャート横のリング詳細行を表示または非表示にします。
caption	ReactNode	-	チャートと凡例の下に表示する任意の補足です。
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)
maxLabel	ReactNode	"Max"	ツールチップで正規化の最大値を示すラベルです。
onRingSelect	(ring: ConcentricProgressRing, index: number) => void	-	リングまたは凡例行が選択されたときに呼ばれます。

使い方

import { ConcentricProgressCard } from "@gunjo/ui";

const rings = [
    { label: "書類", value: 42 },
    { label: "メディア", value: 68 },
    { label: "アプリ", value: 27 },
    { label: "システム", value: 18 },
];

const metrics = [
    { label: "使用済み", value: "155GB", description: "61%" },
    { label: "総容量", value: "256GB" },
    { label: "選択中", value: "メディア", description: "68GB" },
];

<ConcentricProgressCard rings={rings} max={256} />
<ConcentricProgressCard rings={rings} selectedIndex={1} />
<ConcentricProgressCard rings={rings} metrics={metrics} />
<ConcentricProgressCard rings={rings} showLegend={false} />
<ConcentricProgressCard rings={rings} variant="compact" />