IsotypeRows

Live preview

Loading example…

Classic isotype rows: a name, then the same icon repeated in proportion to the value, then the value. Every row shares one icon size, so lengths are comparable; icons shrink together when the container is narrow.

Import

import { IsotypeRows } from "@jcsoftdev/ui/charts";

Single-component entry points tree-shake to just this component: @jcsoftdev/ui/charts/isotype-rows.

Usage

<IsotypeRows
  title="Servicios por barbero esta semana"
  data={servicesByBarber}
  perIcon={5}
  icon="scissors"
  colorMode="single"
  track={false}
  rowHeight={34}
  gap={0.18}
  valueFormat="integer"
  showValues
  unitLabel="servicios"
  tooltip
  animate
  loading={false}
  labels={spanishLabels}
/>

Props

Prop	Type	Default	Description
`title` *	`string`
`description`	`string`
`data` *	`readonly UnitCategory[]`		One row per entry.
`perIcon`	`number`	`1`	Value one icon stands for; the last icon of a row is cut to its remainder.
`icon`	`UnitIcon`	`"scissors"`
`colorMode`	`"category" \| "single"`	`"single"`	“single”: every row in one color (classic isotype); “category”: palette color per row.
`color`	`string`		Color in “single” mode; the brand tone by default.
`track`	`boolean`	`false`	Pads every row with empty icons up to the longest one.
`height`	`"fill"`		`"fill"` spreads the rows over the height of the parent instead of using `rowHeight`.
`rowHeight`	`number`	`34`	Height of one row in pixels; the chart height follows the number of rows.
`gap`	`number`	`0.18`	Gap between icons, as a fraction of the icon size.
`valueFormat`	`ValueFormat`	`"integer"`
`showValues`	`boolean`	`true`	Value at the end of each row.
`unitLabel`	`string`	`"units"`	What the values count, for the key and the tooltip (“servicios”).
`showKey`	`boolean`		Shows “icon = N unitLabel” under the rows. Defaults to on when `perIcon` is not 1.
`tooltip`	`boolean`	`true`
`animate`	`boolean`	`true`
`loading`	`boolean`	`false`
`labels`	`Partial<ChartLabels>`
`className`	`string`

* marks a required prop.

Storybook stories

Source

packages/ui/src/charts/isotype-rows/isotype-rows.tsx