76 lines
2.1 KiB
JavaScript
76 lines
2.1 KiB
JavaScript
|
/** @format */
|
||
|
|
/**
|
||
|
|
* External dependencies
|
||
|
|
*/
|
||
|
|
import classNames from 'classnames';
|
||
|
|
import { Component } from '@wordpress/element';
|
||
|
|
import PropTypes from 'prop-types';
|
||
|
|
import { scaleOrdinal as d3ScaleOrdinal } from 'd3-scale';
|
||
|
|
import { interpolateViridis as d3InterpolateViridis } from 'd3-scale-chromatic';
|
||
|
|
import { range as d3Range } from 'd3-array';
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Internal dependencies
|
||
|
|
*/
|
||
|
|
import './style.scss';
|
||
|
|
import { formatCurrency } from 'lib/currency';
|
||
|
|
|
||
|
|
class Legend extends Component {
|
||
|
|
render() {
|
||
|
|
const { data, handleLegendHover, handleLegendToggle, legendDirection } = this.props;
|
||
|
|
const d3Color = d3ScaleOrdinal().range( d3Range( 0, 1.1, 100 / ( data.length - 1 ) / 100 ) );
|
||
|
|
return (
|
||
|
|
<ul
|
||
|
|
className={ classNames(
|
||
|
|
'woocommerce-legend',
|
||
|
|
`woocommerce-legend__direction-${ legendDirection }`,
|
||
|
|
this.props.className
|
||
|
|
) }
|
||
|
|
>
|
||
|
|
{ data.map( ( row, i ) => (
|
||
|
|
<li
|
||
|
|
class="woocommerce-legend__item"
|
||
|
|
id={ row.key }
|
||
|
|
onMouseEnter={ handleLegendHover }
|
||
|
|
onMouseLeave={ handleLegendHover }
|
||
|
|
onBlur={ handleLegendHover }
|
||
|
|
onFocus={ handleLegendHover }
|
||
|
|
>
|
||
|
|
<button onClick={ handleLegendToggle } id={ row.key }>
|
||
|
|
<div className="woocommerce-legend__item-container" id={ row.key }>
|
||
|
|
<span
|
||
|
|
className={ classNames( 'woocommerce-legend__item-checkmark', {
|
||
|
|
'woocommerce-legend__item-checkmark-checked': row.visible,
|
||
|
|
} ) }
|
||
|
|
id={ row.key }
|
||
|
|
style={ { 'background-color': d3InterpolateViridis( d3Color( i ) ) } }
|
||
|
|
/>
|
||
|
|
<span className="woocommerce-legend__item-title" id={ row.key }>
|
||
|
|
{ row.key }
|
||
|
|
</span>
|
||
|
|
<span className="woocommerce-legend__item-total" id={ row.key }>
|
||
|
|
{ formatCurrency( row.total ) }
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
</button>
|
||
|
|
</li>
|
||
|
|
) ) }
|
||
|
|
</ul>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
Legend.propTypes = {
|
||
|
|
className: PropTypes.string,
|
||
|
|
data: PropTypes.array.isRequired,
|
||
|
|
handleLegendToggle: PropTypes.function,
|
||
|
|
handleLegendHover: PropTypes.function,
|
||
|
|
legendDirection: PropTypes.oneOf( [ 'row', 'column' ] ),
|
||
|
|
};
|
||
|
|
|
||
|
|
Legend.defaultProps = {
|
||
|
|
legendDirection: 'row',
|
||
|
|
};
|
||
|
|
|
||
|
|
export default Legend;
|