Bar List
項目を横の帯の長さで並べる一覧。値が変わると帯が伸び縮みし、順位が入れ替わった行は新しい位置へ滑って移る。
インポート
import { BarList } from '@caroainc/ui-components/client'個別サブパス（バンドルサイズを抑えたい場合）:
import { BarList } from '@caroainc/ui-components/bar-list'公演ごとの売上・よく見られたページなど、項目の順位を見せるときに使います。帯の長さは一番大きい値に対する比です。
基本的な使い方
既定では値の大きい順に並べます。値が変わって順位が入れ替わると、行は新しい位置へ滑って移ります。
Loading...
<BarList
data={shows}
getKey={(show) => show.title}
getValue={(show) => show.sales}
getLabel={(show) => show.title}
formatValue={(value) => `${value.toLocaleString()}円`}
/>使い分け
- 渡した順のまま並べたいときは
sort="none" - 帯の色は
color、項目ごとの色はgetColorで選びます（既定は薄い黒） - 日付のように順番に意味がある並びはBar Chartを使います
Props
| Prop | Type | Default | Description |
|---|---|---|---|
data | T[] | - | 並べる項目（必須） |
getKey | (datum: T) => string | - | 項目を見分ける値（必須）。順位が入れ替わっても同じ値の行はその行のまま移る |
getValue | (datum: T) => number | - | 帯の長さにする値（必須） |
getLabel | (datum: T) => ReactNode | - | 帯の中に出す名前（必須） |
formatValue | (value: number) => string | 3桁区切り | 右に出す値の書き方 |
color | ChartColor | 'base' | 帯の色 |
getColor | (datum: T, index: number) => ChartColor | undefined | - | 項目ごとの帯の色 |
sort | 'descending' | 'none' | 'descending' | 並べ方 |