# IsotypeRows

> Classic isotype rows: a name, then the same icon repeated in proportion to the value, then the value.

Source: https://ui.jcsoftdev.com/docs/components/isotype-rows

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

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

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

## Usage

```tsx
<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

- [Default](/storybook/?path=/story/charts-isotyperows--default)
- [Color Per Row](/storybook/?path=/story/charts-isotyperows--color-per-row)
- [Track to the longest row](/storybook/?path=/story/charts-isotyperows--with-track)
- [Icon per row](/storybook/?path=/story/charts-isotyperows--icon-per-row)
- [Review Ratings](/storybook/?path=/story/charts-isotyperows--review-ratings)
- [Response Times](/storybook/?path=/story/charts-isotyperows--response-times)
- [Store Locations](/storybook/?path=/story/charts-isotyperows--store-locations)
- [Loading](/storybook/?path=/story/charts-isotyperows--loading)
- [Empty](/storybook/?path=/story/charts-isotyperows--empty)
- [Narrow](/storybook/?path=/story/charts-isotyperows--narrow)

## Source

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