README.md

Legend

---

<Legend />

import { Legend } from 'ihme-ui'

Property	Required	Type(s)	Defaults	Description
className		CommonPropTypes.className		className applied to outermost, wrapping <div>
items		array of object	[]	legend items
ItemComponent		func	LegendItem	component (must be passable to React.createElement) to render for each item; passed props className, item, labelKey, LabelComponent, onClear, onClick, onMouseLeave, onMouseMove, onMouseOver, shapeColorKey, shapeTypeKey, style defaults to LegendItem
itemClassName		CommonPropTypes.className		classname applied to ItemComponent
itemStyle		CommonPropTypes.style		inline styles applied to ItemComponent if passed an object, will be applied directly inline to the <li> if passed a function, will be called with the current item obj
LabelComponent		func		custom component to render for each label, passed current item; must be passable to React.createElement
labelKey		CommonPropTypes.dataAccessor.isRequired		path to label in item objects (e.g., 'name', 'properties.label') or a function to resolve the label signature: function (item) {...}
listClassName		CommonPropTypes.className		className applied to <ul>, which wraps legend items
listStyle		CommonPropTypes.style		inline styles applied to <ul>, which wraps legend items if a function, passed items as argument. Signature: (items): {} => { ... }.
onClear		func		callback when 'clear' icon is clicked; signature: (SyntheticEvent, item, instance) => {}
onClick		func		callback when legend item is clicked; signature: (SyntheticEvent, item, instance) => {}
onMouseLeave		func	CommonDefaultProps.noop	onMouseLeave callback registered on each item. signature: (SyntheticEvent, item, instance) => {...}
onMouseMove		func	CommonDefaultProps.noop	onMouseMove callback registered on each item. signature: (SyntheticEvent, item, instance) => {...}
onMouseOver		func	CommonDefaultProps.noop	onMouseOver callback registered on each item. signature: (SyntheticEvent, item, instance) => {...}
shapeColorKey		CommonPropTypes.dataAccessor.isRequired		path to shape color in item objects (e.g., 'color', 'properties.color') or a function to resolve the color signature: (item) => {...}
shapeTypeKey		CommonPropTypes.dataAccessor.isRequired		path to shape type in item objects (e.g., 'type', 'properties.type') or a function to resolve the type if a function: signature: (item) => {...} must be one of supported shape types
style		CommonPropTypes.style		inline styles applied to outermost, wrapper <div> if a function, passed items as argument. Signature: (items): {} => { ... }.
title		string		title for the legend
TitleComponent		func	LegendTitle	component (must be passable to React.createElement) to render for the title; passed props className, items, style, title defaults to LegendTitle
titleClassName		CommonPropTypes.className		className applied to title component
titleStyles		CommonPropTypes.style		inline styles applied to title component if a function, passed items as argument. Signature: (items): {} => { ... }.

---

<LegendItem />

import { LegendItem } from 'ihme-ui';

Default ItemComponent used by <Legend />.

Property	Required	Type(s)	Defaults	Description
className		CommonPropTypes.className		classname(s) to apply to li
item	true	object		legend item to render
LabelComponent		func		custom component to render for each label, passed current item; must be passable to React.createElement
labelKey		CommonPropTypes.dataAccessor.isRequired		path to label in item objects (e.g., 'name', 'properties.label') or a function to resolve the label signature: function (item) {...}
onClear		func		callback when 'clear' icon is clicked; signature: (SyntheticEvent, item, instance) => {}
onClick		func		callback when legend item is clicked; signature: (SyntheticEvent, item, instance) => {}
onMouseLeave		func	CommonDefaultProps.noop	onMouseLeave callback signature: (SyntheticEvent, item, instance) => {...}
onMouseMove		func	CommonDefaultProps.noop	onMouseMove callback signature: (SyntheticEvent, item, instance) => {...}
onMouseOver		func	CommonDefaultProps.noop	onMouseOver callback signature: (SyntheticEvent, item, instance) => {...}
shapeColorKey		CommonPropTypes.dataAccessor.isRequired		path to shape color in item objects (e.g., 'color', 'properties.color') or a function to resolve the color signature: (item) => {...}
shapeTypeKey		CommonPropTypes.dataAccessor.isRequired		path to shape type in item objects (e.g., 'type', 'properties.type') or a function to resolve the type if a function: signature: (item) => {...} must be one of supported shape types
style		CommonPropTypes.style		inline-styles to be applied to individual legend item if a function, passed item as argument. Signature: (item): {} => { ... }.

---

<LegendTitle />

import { LegendTitle } from 'ihme-ui';

Default TitleComponent used by <Legend />.

Property	Required	Type(s)	Defaults	Description
className		CommonPropTypes.className		classname applied to <h3>
items	true	array of object		legend items
style		CommonPropTypes.style		inline styles applied to title component if a function, passed items as argument. Signature: (items): {} => { ... }.
title		string		title for the legend