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. 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

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

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

Usage

<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
• Diverging
• Thresholds
• Loading
• Empty
• Narrow
• Fill Parent

Source

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