# HexTileMap

> Tile map: every region is one hexagon of the same size, so small regions (Callao, Tumbes) weigh as much as large ones and nothing hides behind Loreto.

Source: https://ui.jcsoftdev.com/docs/components/hex-tile-map

Tile map: every region is one hexagon of the same size, so small regions (Callao, Tumbes)
weigh as much as large ones and nothing hides behind Loreto. Colored by value like
`ChoroplethMap`, with the same legend, tooltip, keyboard model and data table. The default
layout is Peru's 25 regions; pass `tiles` for any other territory.

## Import

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

Single-component entry points tree-shake to just this component: `@jcsoftdev/ui/charts/hex-tile-map`.

## Usage

```tsx
<HexTileMap
  title="Clientes por departamento"
  data={customers}
  valueName="Clientes"
  valueFormat="integer"
  scale="sequential"
  tileLabels="both"
  legend
  tooltip
  animate
  loading={false}
  labels={spanishLabels}
/>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `title` * | `string` |  | Accessible name of the drawing and caption of the data table. |
| `data` * | `readonly ChoroplethDatum[]` |  | One value per tile, matched by `id` (or the tile name; accents and case are ignored). |
| `tiles` | `readonly HexTile[]` | `PERU_HEX_TILES` | The tiles and their grid cells; Peru's 25 regions by default. |
| `scale` | `"sequential" \| "diverging"` | `"sequential"` |  |
| `domain` | `readonly [number, number]` |  |  |
| `center` | `number` | `0` |  |
| `colors` | `ScaleColors` |  |  |
| `ranges` | `readonly ColorRange[]` |  | Stepped (threshold) coloring; replaces the continuous scale. |
| `valueFormat` | `ValueFormat` |  |  |
| `valueName` | `string` |  | Name of the value in the tooltip and the data table, e.g. "Clientes". |
| `tileLabels` | `"code" \| "value" \| "none" \| "both"` | `"both"` | What is written on a tile where it fits: the code, the value, both or nothing. |
| `height` | `number \| "fill"` |  | Height in px, "fill" or a default that follows the grid's proportions. |
| `aspectRatio` | `number` |  |  |
| `legend` | `boolean` | `true` |  |
| `tooltip` | `boolean` | `true` |  |
| `animate` | `boolean` | `true` |  |
| `loading` | `boolean` |  |  |
| `labels` | `Partial<MapLabels>` |  |  |
| `onTileClick` | `((tile: ChoroplethRegionInfo) => void)` |  |  |
| `className` | `string` |  |  |

`*` marks a required prop.

## Storybook stories

- [Default](/storybook/?path=/story/charts-hextilemap--default)
- [Diverging](/storybook/?path=/story/charts-hextilemap--diverging)
- [Thresholds](/storybook/?path=/story/charts-hextilemap--thresholds)
- [Loading](/storybook/?path=/story/charts-hextilemap--loading)
- [Empty](/storybook/?path=/story/charts-hextilemap--empty)
- [Narrow](/storybook/?path=/story/charts-hextilemap--narrow)
- [Fill Parent](/storybook/?path=/story/charts-hextilemap--fill-parent)

## Source

`packages/ui/src/charts/hex-tile-map/hex-tile-map.tsx`