import { ChoroplethLegend } from 'ihme-ui'
| Property | Required | Type(s) | Defaults | Description |
|---|---|---|---|---|
axisTickFormat |
func | numberFormat | format of axis ticks | |
axisTranslate |
object | { x: 0, y: 20 } |
shift axis in the x or y directions; use to put padding between the color gradient rect and the axis | |
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 | color scale for density plot; should accept datum[valueField] and return color string |
|
colorSteps |
array | defaultColorSteps | color steps, e.g. ['#fff', '#ccc', '#000', ...] | |
data |
true | array | array of datum objects | |
domain |
true | array | [min, max] for xScale; xScale positions density plot and provides axis | |
focus |
object | The datum object corresponding to the <Shape /> currently focused. |
||
focusedClassName |
CommonPropTypes.className | className applied if <Shape /> has focus. |
||
focusedStyle |
CommonPropTypes.style | Inline styles applied to focused <Shape />.If an object, spread into inline styles. If a function, passed underlying datum corresponding to its <Shape />,and return value is spread into inline styles; signature: (datum) => obj |
||
height |
number | height of outermost svg | ||
keyField |
string, func | uniquely identifying property of datum or function that accepts datum and returns unique value; if not provided, density plot shapes are keyed as ${xValue}:${yValue}:${index} |
||
margins |
object | { top: 50, right: 100, bottom: 50, left: 100 } |
margins to subtract from width and height | |
onClick |
func | onClick callback for density plot circles; signature: (SyntheticEvent, data, instance) => {...} |
||
onMouseLeave |
func | onMouseLeave callback for density plot circles; signature: (SyntheticEvent, data, instance) => {...} |
||
onMouseMove |
func | onMouseMove callback for density plot circles; signature: (SyntheticEvent, data, instance) => {...} |
||
onMouseOver |
func | onMouseOver callback for density plot circles; signature: (SyntheticEvent, data, instance) => {...} |
||
onSliderMove |
func | Callback to attach to slider handles; passed the range extent as a decimal representing percent of the range, e.g, [0.2, 0.5]. signature: ([min, max]) => {...} |
||
rangeExtent |
true | array | [min, max] for slider in data space; if isEqual(rangeExtent, domain), slider handles will be positioned at start and end of legend,which makes props.domain a good initial value |
|
selectedLocations |
array of object | array of selected datum objects | ||
sliderHandleFormat |
func | numberFormat | formatter for handle labels | |
unit |
string | unit of data; axis label | ||
valueField |
true | string, func | property of data objects used to position and fill density plot circles; if a function, signature: (datum) => {...} |
|
width |
number | width of outermost svg, in pixels | ||
x1 |
number | 0 | x-axis coord (as percentage) of the start of the gradient (e.g., 0) | |
x2 |
number | 100 | x-axis coord (as percentage) of the end of the gradient (e.g., 100) | |
xScale |
func | scaleLinear() | scale for positioning density plot along its x-axis; must expose domain and range methods |
|
zoom |
number | 1 | float value used for implementing "zooming"; any element that needs to become larger in "presentation mode" should respond to this scale factor. Guide zoom: 0 -> smallest possible zoom: 0.5 -> half of normal size zoom: 1 -> normal size () zoom: 2 -> twice normal size |