Donut Chart
全体に占める割合を輪の弧で見せるグラフ。値が変わると弧が滑って伸び縮みし、触れた弧の名前・値・割合を真ん中に出す。
インポート
import { DonutChart } from '@caroainc/ui-components/client'個別サブパス（バンドルサイズを抑えたい場合）:
import { DonutChart } from '@caroainc/ui-components/donut-chart'券種・支払い方法など、全体の内訳を見せるときに使います。項目は5つ前後までにします（多いときはBar List）。
基本的な使い方
何も選んでいないときは、真ん中に合計を出します。弧か凡例に触れる（矢印キーで選ぶ）と、その弧が太くなり、真ん中が名前・値・割合に替わります。値が変わると、弧は新しい長さへ滑って伸び縮みします。
Loading...
<DonutChart
aria-label="券種ごとの販売枚数"
data={kinds}
getKey={(kind) => kind.name}
getValue={(kind) => kind.sold}
getLabel={(kind) => kind.name}
formatValue={(value) => `${value}枚`}
totalLabel="販売枚数"
/>色と大きさ
項目の色は黒・青・橙…の順に割り当てます。getColorで項目ごとに選べます。輪の大きさはsize（sm・default・lg）で選びます。凡例は輪の右に並び、幅が狭いと下へ回ります。showLegend={false}で消せます。
Props
| Prop | Type | Default | Description |
|---|---|---|---|
data | T[] | - | 輪に並べる項目（必須）。12時の位置から時計回り |
getKey | (datum: T) => string | - | 項目を見分ける値（必須） |
getValue | (datum: T) => number | - | 弧の長さにする値（必須） |
getLabel | (datum: T) => ReactNode | - | 凡例と真ん中に出す名前（必須） |
getColor | (datum: T, index: number) => ChartColor | undefined | - | 項目の色 |
formatValue | (value: number) => string | 3桁区切り | 値の書き方 |
totalLabel | ReactNode | '合計' | 何も選んでいないとき、真ん中の合計の上に出す名前 |
showLegend | boolean | true | 凡例を出す |
size | 'sm' | 'default' | 'lg' | 'default' | 輪の大きさ |
aria-label | string | - | グラフの名前（読み上げ用） |