# DrilldownHeatmap

> Heatmap you can dive into: click (or press Enter on) a cell to open the matrix behind it.

Source: https://ui.jcsoftdev.com/docs/components/drilldown-heatmap

Heatmap you can dive into: click (or press Enter on) a cell to open the
matrix behind it. The breadcrumb above climbs back to any earlier level.

## Import

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

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

## Usage

```tsx
<DrilldownHeatmap
  title="Ocupación de sillas por hora y día"
  rows={days}
  columns={hours}
  values={occupancy}
  scale="sequential"
  valueFormat={percent}
  domain={[0, 100]}
  cellLabels={false}
  gap={3}
  radius={4}
  legend
  tooltip
  animate
  loading={false}
  labels={spanishLabels}
/>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `title` * | `string` |  | Accessible name when a level has no `title`. |
| `root` * | `HeatmapLevel` |  |  |
| `breadcrumbLabel` | `string` | `"Path"` | Accessible name of the breadcrumb landmark. |
| `onLevelChange` | `((path: readonly HeatmapLevel[]) => void)` |  |  |
| `center` | `number` |  | Neutral value of a diverging scale. |
| `legend` | `boolean` |  | Color key (gradient bar or range swatches). |
| `animate` | `boolean` |  |  |
| `className` | `string` |  |  |
| `tooltip` | `boolean` |  |  |
| `height` | `number \| "fill"` |  | Height of the drawing in px or "fill"; 34 px per row plus the column header by default. |
| `aspectRatio` | `number` |  | Width / height ratio; sizes the drawing from the container width. |
| `loading` | `boolean` |  |  |
| `labels` | `Partial<HeatmapLabels>` |  |  |
| `radius` | `number` |  |  |
| `renderer` | `"canvas" \| "svg"` |  | "canvas" paints the cells on a canvas, for matrices with tens of thousands of cells. Labels, tooltip, focus ring and keyboard stay SVG/HTML. |
| `scale` | `"sequential" \| "diverging"` |  | "sequential" (empty to brand) or "diverging" (low hue, neutral at `center`, brand). |
| `colors` | `ScaleColors` |  | Override the scale colors (CSS colors or tokens). |
| `ranges` | `readonly ColorRange[]` |  | Stepped coloring by ranges or thresholds; replaces the continuous scale. |
| `shape` | `"rect" \| "hex"` |  | "hex" draws a honeycomb: pointy-top hexagons with odd rows shifted half a cell. |
| `cellLabels` | `boolean` |  | Values inside the cells (only where they fit). |
| `gap` | `number` |  | Gap between cells in pixels. |

`*` marks a required prop.

## Storybook stories

- [Default](/storybook/?path=/story/charts-heatmapchart--default)
- [Cell Labels](/storybook/?path=/story/charts-heatmapchart--cell-labels)
- [Diverging](/storybook/?path=/story/charts-heatmapchart--diverging)
- [Ranges](/storybook/?path=/story/charts-heatmapchart--ranges)
- [Missing Data](/storybook/?path=/story/charts-heatmapchart--missing-data)
- [Calendar](/storybook/?path=/story/charts-heatmapchart--calendar)
- [Calendar Ranges](/storybook/?path=/story/charts-heatmapchart--calendar-ranges)
- [Rounded](/storybook/?path=/story/charts-heatmapchart--rounded)
- [Honeycomb](/storybook/?path=/story/charts-heatmapchart--honeycomb)
- [Continuous Datetime](/storybook/?path=/story/charts-heatmapchart--continuous-datetime)
- [Canvas Dense](/storybook/?path=/story/charts-heatmapchart--canvas-dense)
- [Drilldown](/storybook/?path=/story/charts-heatmapchart--drilldown)
- [Narrow Drilldown](/storybook/?path=/story/charts-heatmapchart--narrow-drilldown)
- [Loading](/storybook/?path=/story/charts-heatmapchart--loading)
- [Empty](/storybook/?path=/story/charts-heatmapchart--empty)
- [Narrow](/storybook/?path=/story/charts-heatmapchart--narrow)
- [Narrow Calendar](/storybook/?path=/story/charts-heatmapchart--narrow-calendar)

## Source

`packages/ui/src/charts/heatmap-chart/drilldown-heatmap.tsx`