Skip to content

Latest commit

 

History

History
34 lines (33 loc) · 4.93 KB

README.md

File metadata and controls

34 lines (33 loc) · 4.93 KB

<Choropleth />

import { Choropleth } from 'ihme-ui'

Property Required Type(s) Defaults Description
className CommonPropTypes.className className applied to outermost div
colorAccessor string, func if string, the color property of the datum object; if function, takes in datum object and returns a color string.
colorScale true func accepts value of keyfield (str), returns stroke color for line (str)
controls bool false show zoom controls
controlsClassName CommonPropTypes.className className applied to controls container div
controlsButtonClassName CommonPropTypes.className className applied to controls buttons
controlsButtonStyle object inline styles to apply to controls buttons
controlsStyle object inline styles to apply to outermost div
data true array of object array of datum objects
focus object The datum object corresponding to the <Path /> currently focused.
focusedClassName CommonPropTypes.className className applied if <Path /> has focus.
focusedStyle CommonPropTypes.style inline styles applied to focused <Path />
If an object, spread into inline styles.
If a function, passed underlying datum corresponding to its <Path />,
and return value is spread into inline styles;
signature: (datum) => obj
geometryKeyField true string, func uniquely identifying field of geometry objects;
if a function, will be called with the geometry object as first parameter
N.B.: the resolved value of this prop should match the resolved value of props.keyField
e.g., if data objects are of the following shape: { location_id: , mean: }
and if features within topojson are of the following shape: { type: , properties: { location_id: }, arcs: }
keyField may be one of the following: 'location_id', or (datum) => datum.location_id
geometryKeyField may be one of the following: 'location_id' or (feature) => feature.properties.location_id
height number 400 pixel height of containing element
keyField true string, func unique key of datum;
if a function, will be called with the datum object as first parameter
layers true array of object [] layers of topojson to include
layer description: {Object}
- className: className applied to layer
- meshFilter: optional function to filter mesh grid, passed adjacent geometries
refer to https://github.com/mbostock/topojson/wiki/API-Reference#mesh
- name: (Required) along with layer.type, will be part of the key of the layer; therefore, ${layer.type}-${layer.name} needs to be unique
- object: (Required) name corresponding to key within topojson objects collection; if function, passed topojson.objects
- selectedClassName: className applied to selected paths
- selectedStyle: inline styles applied to selected paths
func: (feature) => style object
- style: inline styles applied to layer
func: (feature) => style object
- type: (Required) whether the layer should be a feature collection or mesh grid
one of: "feature", "mesh"
maxZoom number Infinity max allowable zoom factor; 1 === fit bounds
minZoom number 0 min allowable zoom factor; 1 === fit bounds
onClick func passed to each path;
signature: (SyntheticEvent, datum, Path) => {...}
onMouseLeave func passed to each path;
signature: (SyntheticEvent, datum, Path) => {...}
onMouseMove func passed to each path;
signature: (SyntheticEvent, datum, Path) => {...}
onMouseOver func passed to each path;
signature: (SyntheticEvent, datum, Path) => {...}
selectedLocations array of object [] array of selected location objects
style object inline styles applied outermost div
topology true object full topojson object
for more information, see the topojson wiki
valueField true string, func key of datum that holds the value to display (e.g., 'mean')
if a function, signature: (data, feature) => value
width number 600 pixel width of containing element
zoomStep number 1.1 amount to zoom in/out from zoom controls.
current zoom scale is multiplied by prop value.
e.g. 1.1 is equal to 10% steps, 2.0 is equal to 100% steps