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

114 lines
2.6 KiB
JavaScript

/** @format */
/**
* External dependencies
*/
import classNames from 'classnames';
import { Component } from '@wordpress/element';
import PropTypes from 'prop-types';
/**
* Internal dependencies
*/
import './style.scss';
import { formatCurrency } from 'lib/currency';
import { getColor } from './utils';
/**
* A legend specifically designed for the WooCommerce admin charts.
*/
class Legend extends Component {
render() {
const {
colorScheme,
data,
handleLegendHover,
handleLegendToggle,
legendDirection,
} = this.props;
const colorParams = {
orderedKeys: data,
colorScheme,
};
const numberOfRowsVisible = data.filter( row => row.visible ).length;
return (
<ul
className={ classNames(
'woocommerce-legend',
`woocommerce-legend__direction-${ legendDirection }`,
this.props.className
) }
>
{ data.map( row => (
<li
className={ classNames( 'woocommerce-legend__item', {
'woocommerce-legend__item-checked': row.visible,
} ) }
key={ row.key }
id={ row.key }
onMouseEnter={ handleLegendHover }
onMouseLeave={ handleLegendHover }
onBlur={ handleLegendHover }
onFocus={ handleLegendHover }
>
<button
onClick={ handleLegendToggle }
id={ row.key }
disabled={ row.visible && numberOfRowsVisible <= 1 }
>
<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: getColor( row.key, colorParams ) } }
/>
<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 = {
/**
* Additional CSS classes.
*/
className: PropTypes.string,
/**
* A chromatic color function to be passed down to d3.
*/
colorScheme: PropTypes.func,
/**
* An array of `orderedKeys`.
*/
data: PropTypes.array.isRequired,
/**
* Handles `onClick` event.
*/
handleLegendToggle: PropTypes.func,
/**
* Handles `onMouseEnter`/`onMouseLeave` events.
*/
handleLegendHover: PropTypes.func,
/**
* Display legend items as a `row` or `column` inside a flex-box.
*/
legendDirection: PropTypes.oneOf( [ 'row', 'column' ] ),
};
Legend.defaultProps = {
legendDirection: 'row',
};
export default Legend;