リボンチャートRibbonChartExperimental
期間ごとの流量や構成量の広がりを示すリボンチャートです。
プレビュー
状態とバリエーション
フロー
量の変化を中央寄せの流れとして表示します。
1月2月3月4月5月6月
新規244
継続204
拡張160
積み上げ
合計量を読みやすい積み上げ面で表示します。
1月2月3月4月5月6月
新規244
継続204
拡張160
ラベルなし
コンパクトな領域では期間ラベルを非表示にできます。
最大値指定
複数のリボンチャートを同じスケールで比較します。
1月2月3月4月5月6月
新規244
継続204
拡張160
プロパティ
表は横にスクロールできます
| プロパティ | 型 | 初期値 | 説明 |
|---|---|---|---|
| layers | RibbonChartLayer[] | - | 幅が変化するリボンとして表示するレイヤーと値です。 |
| variant | "flow" | "stacked" | "flow" | 中央寄せのフロー表示と積み上げ表示を切り替える SSOT 登録済みバリエーションです。 |
| max | number | - | 複数チャートを同じスケールで比較するための最大合計値です。 |
| totalLabel | ReactNode | "Total" | 凡例ツールチップの説明に使う合計ラベルです。 |
| showLegend | boolean | false | レイヤー合計のチャート凡例を表示します。 |
| showLabels | boolean | true | リボン下の期間ラベルの表示を切り替えます。 |
| 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) |
使い方
import { RibbonChart } from "@gunjo/ui";
const layers = [
{
label: "新規",
color: "primary",
data: [
{ label: "1月", value: 22 },
{ label: "2月", value: 30 },
{ label: "3月", value: 36 },
{ label: "4月", value: 44 },
{ label: "5月", value: 52 },
{ label: "6月", value: 60 },
],
},
{
label: "継続",
color: "success",
data: [
{ label: "1月", value: 16 },
{ label: "2月", value: 22 },
{ label: "3月", value: 30 },
{ label: "4月", value: 38 },
{ label: "5月", value: 46 },
{ label: "6月", value: 52 },
],
},
{
label: "拡張",
color: "warning",
data: [
{ label: "1月", value: 8 },
{ label: "2月", value: 14 },
{ label: "3月", value: 22 },
{ label: "4月", value: 30 },
{ label: "5月", value: 38 },
{ label: "6月", value: 48 },
],
},
];
export function RevenueFlowVariants() {
return (
<div className="grid gap-6">
<RibbonChart layers={layers} />
<RibbonChart layers={layers} variant="flow" showLegend totalLabel="合計" />
<RibbonChart layers={layers} variant="stacked" />
</div>
);
}