# ChoroplethDrilldown

> `ChoroplethMap` that opens a region into a finer map (world to country, country to departments) with a breadcrumb back up.

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

`ChoroplethMap` that opens a region into a finer map (world to country, country to
departments) with a breadcrumb back up. The map of each level only needs its own geometry, so
only levels the user opens are ever drawn. The path is announced politely to screen readers.

## Import

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

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

## Usage

```tsx
<ChoroplethDrilldown
  title="Clientes por departamento"
  map={peruMap}
  data={customers}
  valueName="Clientes"
  valueFormat="integer"
  scale="sequential"
  regionLabels="none"
  dataTable="hidden"
  legend
  tooltip
  zoomable
  wheelZoom="always"
  maxZoom={16}
  animate
  loading={false}
  labels={spanishLabels}
  height={520}
/>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `title` * | `string` |  | Accessible name; the current level is appended: "Clientes: Perú". |
| `root` * | `DrilldownLevel` |  |  |
| `resolve` * | `(region: ChoroplethRegionInfo, path: readonly DrilldownLevel[]) => DrilldownLevel \| null \| undefined` |  | Level to open when a region is clicked, given the path so far (root first), or nothing when that region has no detail (the click goes to `onRegionClick`). |
| `breadcrumbLabel` | `string` | `"Map level"` | Accessible name of the breadcrumb navigation. |
| `onNavigate` | `((path: readonly DrilldownLevel[]) => void)` |  | Called after every change of level with the new path (root first). |
| `onRegionClick` | `((region: ChoroplethRegionInfo, path: readonly DrilldownLevel[]) => void)` |  | Click on a region without detail. |
| `center` | `number` |  | Neutral value of a diverging scale. |
| `legend` | `boolean` |  |  |
| `animate` | `boolean` |  |  |
| `className` | `string` |  |  |
| `tooltip` | `boolean` |  |  |
| `height` | `number \| "fill"` |  | Height in px, "fill" or the default (half of the width, at least 220). |
| `aspectRatio` | `number` |  | Width / height ratio; sizes the drawing from the container width. |
| `valueFormat` | `ValueFormat` |  |  |
| `loading` | `boolean` |  |  |
| `labels` | `Partial<MapLabels>` |  |  |
| `scale` | `"sequential" \| "diverging"` |  | "sequential" (empty to brand) or "diverging" (low hue, neutral at `center`, brand). |
| `domain` | `readonly [number, number]` |  | Fixed [min, max] of the color scale; the data extent by default. |
| `colors` | `ScaleColors` |  |  |
| `ranges` | `readonly ColorRange[]` |  | Stepped (threshold) coloring; replaces the continuous scale. |
| `valueName` | `string` |  | Name of the value in the tooltip and the data table, e.g. "Clientes". |
| `projection` | `"equirectangular" \| "mercator" \| "equalEarth" \| "fitted"` |  | Overrides the projection of the map. |
| `regionLabels` | `"name" \| "value" \| "none"` |  | Text drawn on each region where it fits: its name or its value. |
| `dataTable` | `"hidden" \| "toggle" \| "visible"` |  | The numbers as a real table, the accessible alternative to color: "hidden" (default, for screen readers only), "visible" (replaces the map) or "toggle" (a button switches between the map and the table). |
| `zoomable` | `boolean` |  | Zoom buttons, wheel, drag and pinch. |
| `wheelZoom` | `"always" \| "modifier"` |  | "modifier": the wheel only zooms with Ctrl or Cmd held, so page scrolling is never trapped. |
| `maxZoom` | `number` |  |  |

`*` marks a required prop.

## Storybook stories

- [Default](/storybook/?path=/story/charts-choroplethmap--default)
- [Region Labels](/storybook/?path=/story/charts-choroplethmap--region-labels)
- [Diverging](/storybook/?path=/story/charts-choroplethmap--diverging)
- [Thresholds](/storybook/?path=/story/charts-choroplethmap--thresholds)
- [Missing Data](/storybook/?path=/story/charts-choroplethmap--missing-data)
- [World](/storybook/?path=/story/charts-choroplethmap--world)
- [World Mercator](/storybook/?path=/story/charts-choroplethmap--world-mercator)
- [Drilldown](/storybook/?path=/story/charts-choroplethmap--drilldown)
- [Data Table](/storybook/?path=/story/charts-choroplethmap--data-table)
- [Data Table Toggle](/storybook/?path=/story/charts-choroplethmap--data-table-toggle)
- [Data Table Narrow](/storybook/?path=/story/charts-choroplethmap--data-table-narrow)
- [Loading](/storybook/?path=/story/charts-choroplethmap--loading)
- [Empty](/storybook/?path=/story/charts-choroplethmap--empty)
- [Narrow](/storybook/?path=/story/charts-choroplethmap--narrow)
- [Fill Parent](/storybook/?path=/story/charts-choroplethmap--fill-parent)

## Source

`packages/ui/src/charts/choropleth-map/choropleth-drilldown.tsx`