woocommerce/plugins/woocommerce-admin/client/components/chart/legend.js

77 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
className="woocommerce-legend__item"
key={ row.key }
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={ { backgroundColor: 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.func,
handleLegendHover: PropTypes.func,
legendDirection: PropTypes.oneOf( [ 'row', 'column' ] ),
};
Legend.defaultProps = {
legendDirection: 'row',
};
export default Legend;