ChoroplethDrilldown

Live preview

Loading example…

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

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

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

Usage

<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

Source

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