# PictogramChart

> Isotype pictogram: every icon stands for `perUnit` of something (clients, services, bottles) and the last icon of a category is cut to its remainder.

Source: https://ui.jcsoftdev.com/docs/components/pictogram-chart

Isotype pictogram: every icon stands for `perUnit` of something (clients,
services, bottles) and the last icon of a category is cut to its remainder.
Icons grow to the largest size that fits the box, up to `unitSize`.

## Import

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

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

## Usage

```tsx
<PictogramChart
  title="Clientes atendidos hoy"
  data={visitsBySegment}
  perUnit={1}
  icon="person"
  layout="grid"
  unitSize={28}
  gap={0.25}
  height={200}
  unitLabel="clientes"
  valueFormat="integer"
  legend
  tooltip
  animate
  loading={false}
  labels={spanishLabels}
/>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `title` * | `string` |  |  |
| `description` | `string` |  |  |
| `data` * | `readonly UnitCategory[]` |  |  |
| `perUnit` | `number` | `1` | Value one icon stands for. The last icon of a category is clipped to its remainder. |
| `icon` | `UnitIcon` | `"person"` | Built-in icon name, a 24 x 24 path, or a `UnitShape`. |
| `layout` | `"grid" \| "rows"` | `"grid"` | "grid": categories flow one after the other; "rows": each category starts a new row. |
| `columns` | `number` |  | Fixed number of columns; by default the largest icons that fit the box decide. |
| `total` | `number` |  | Capacity drawn as empty icons after the data (grid layout), e.g. 120 seats a day. |
| `unitSize` | `number` | `32` | Largest icon side in pixels. |
| `gap` | `number` | `0.25` | Gap between icons, as a fraction of the icon size. |
| `height` | `number \| "fill"` | `200` |  |
| `aspectRatio` | `number` |  | Width / height ratio; sizes the drawing from the container width when `height` is not "fill". |
| `valueFormat` | `ValueFormat` | `"integer"` |  |
| `unitLabel` | `string` | `"units"` | What the values count, for the key and the tooltip ("clientes"). |
| `showKey` | `boolean` |  | Shows "icon = N unitLabel" under the chart. Defaults to on when `perUnit` is not 1. |
| `legend` | `boolean \| "top" \| "bottom"` | `true` |  |
| `tooltip` | `boolean` | `true` |  |
| `animate` | `boolean` | `true` |  |
| `loading` | `boolean` | `false` |  |
| `initialHidden` | `readonly string[]` |  |  |
| `labels` | `Partial<ChartLabels>` |  |  |
| `className` | `string` |  |  |

`*` marks a required prop.

## Storybook stories

- [Default](/storybook/?path=/story/charts-pictogramchart--default)
- [Partial units (1 icon = 5)](/storybook/?path=/story/charts-pictogramchart--partial-units)
- [Rows layout, icon per category](/storybook/?path=/story/charts-pictogramchart--rows)
- [Capacity (empty units)](/storybook/?path=/story/charts-pictogramchart--capacity)
- [Custom SVG shape](/storybook/?path=/story/charts-pictogramchart--custom-shape)
- [Silhouettes](/storybook/?path=/story/charts-pictogramchart--silhouettes)
- [Mixed Silhouettes](/storybook/?path=/story/charts-pictogramchart--mixed-silhouettes)
- [Loading](/storybook/?path=/story/charts-pictogramchart--loading)
- [Empty](/storybook/?path=/story/charts-pictogramchart--empty)
- [Narrow](/storybook/?path=/story/charts-pictogramchart--narrow)

## Source

`packages/ui/src/charts/pictogram-chart/pictogram-chart.tsx`