Map Chart

Карта мира: хороплет и точки, зум и панорамирование. Pro · Графики и аналитика › Карты и матрицы

Установка

npx valyro-cli@latest login
npx valyro-cli@latest add map-chart

npm install valyro-ui-pro

import 'valyro-ui-pro/styles.css';
import { MapChart } from 'valyro-ui-pro';

Пропсы

Prop	Type	Default
`data`	`MapChartDatum[]`	`[]`	One value per country; countries without one are drawn as "no data".
`markers`	`MapChartMarker[]`	`[]`	Points placed by longitude/latitude over the countries.
`color`	`string`	`'var(--ui-chart-1)'`	High end of the color scale; any CSS color. Default `--ui-chart-1`.
`lowColor`	`string`		Low end of the color scale. Default: a faint tint of `color`.
`scale`	`'linear' \| 'log' \| 'sqrt' \| 'quantize'`	`'linear'`	`linear` blends continuously; `log` and `sqrt` spread skewed data (populations, traffic) across the ramp; `quantize` splits the domain into `steps` equal classes. Default `linear`.
`steps`	`number`	`5`	Classes of the `quantize` scale. Default 5.
`domain`	`[min: number, max: number]`		Values mapped to the ends of the scale. Default: the data's minimum and maximum.
`valueFormatter`	`ValueFormatter`		Formats values in the tooltip, legend and data table; locale number formatting when omitted.
`markerColor`	`string`	`'var(--ui-chart-3)'`	Default `--ui-chart-3`.
`height`	`number`		Plot height in px. Default: the world's aspect ratio at the current width.
`zoomable`	`boolean`	`true`	Zoom with ⌘/Ctrl + scroll, pinch, double-click, the +/− buttons and keys; drag to pan. Default true.
`maxZoom`	`number`	`8`	Default 8.
`showLegend`	`boolean`	`true`	Color scale under the map (class ranges or a gradient with ticks) plus the "No data" swatch.
`onCountryClick`	`(country: MapChartCountry) => void`		Click or Enter on a country.
`onMarkerClick`	`(marker: MapChartMarker) => void`		Click or Enter on a marker.
`locale`	`string`		BCP 47 locale for country names and numbers. Default: the `ThemeProvider` locale, then the browser's.
`labels`	`Partial<MapChartLabels>`		Overrides for the built-in English text; keys left out keep their defaults.
`ariaLabel` *	`string`		Accessible name of the map (also the caption of its sr-only data tables).

Map Chart

Установка

Пропсы

Похожие компоненты