同心円進捗カード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 | - | リング、指標、ツールチップ、凡例の値を整形します。 |
| maxLabel | ReactNode | "Max" | ツールチップで正規化の最大値を示すラベルです。 |
| onRingSelect | (ring: ConcentricProgressRing, index: number) => void | - | リングまたは凡例行が選択されたときに呼ばれます。 |
使い方
Loading...