Bar List

Ranked list where each row's background bar shows its share of the max (top pages, referrers, countries).

Import

import { BarList } from '@marbleui/ui'

Props

<BarList>

Prop	Type	Default
data *required	`BarListItem[]`	`—`
className	`string`	`—`
color	`string`	`'var(--chart-1)'`
sort	`boolean`	`true`
valueFormat	`(n: number) => string`	`(n) => n.toLocaleString()`

Usage notes

A ranked list where each row shows a name, a value and a tinted bar sized against the largest value: top pages, referrers, countries. To compare several series per category use BarChart with layout="horizontal".

<BarList
  color="var(--chart-3)"
  valueFormat={(n) => `${n}%`}
  data={[
    { name: 'United States', value: 41, href: '/reports/geo/us' },
    { name: 'Germany', value: 14, href: '/reports/geo/de' },
    { name: 'Japan', value: 7, href: '/reports/geo/jp' },
  ]}
/>

Rows are sorted highest first; sort={false} keeps your order. Names are used as React keys, so keep them unique.
It renders a plain list: screen readers read each name and value as text and the bars are hidden, so there is no summary or table. It takes no label, so put a heading or column captions above it.
href turns a name into a link and icon renders before it. color tints the bars (default --chart-1).
The value column is narrow and fixed (3.5rem), so keep formatted values short, like “4.8K”.

Example source · show

import { BarList } from './bar-list'

const pages = [
  { name: '/pricing', value: 4820 },
  { name: '/docs/getting-started', value: 3210 },
  { name: '/', value: 9640 },
  { name: '/blog/tokens', value: 1180 },
  { name: '/changelog', value: 760 },
]

export const styles = {
  'Top pages': () => (
    <div className="w-96">
      <div className="mb-2 flex justify-between text-xs font-medium text-fg-muted"><span>Page</span><span>Visits</span></div>
      <BarList data={pages} />
    </div>
  ),
  Countries: () => (
    <BarList
      className="w-96"
      color="var(--chart-3)"
      valueFormat={(n) => `${n}%`}
      data={[{ name: '🇺🇸 United States', value: 41 }, { name: '🇩🇪 Germany', value: 14 }, { name: '🇳🇱 Netherlands', value: 9 }, { name: '🇯🇵 Japan', value: 7 }]}
    />
  ),
}

Source: packages/ui/src/bar-list/bar-list.tsx

Catalog