standard vs comparison legend layout

This commit is contained in:
Robert Elliott 2018-09-10 13:23:50 +02:00
parent cbce093df1
commit bf6a647c79
1 changed files with 13 additions and 6 deletions

View File

@ -129,8 +129,10 @@ class Chart extends Component {
render() {
const { orderedKeys, visibleData, width } = this.state;
const legendDirection = orderedKeys.length <= 2 && width > WIDE_BREAKPOINT ? 'row' : 'column';
const chartDirection = orderedKeys.length > 2 && width > WIDE_BREAKPOINT ? 'row' : 'column';
const legendDirection =
this.props.layout === 'standard' && width > WIDE_BREAKPOINT ? 'row' : 'column';
const chartDirection =
this.props.layout === 'comparison' && width > WIDE_BREAKPOINT ? 'row' : 'column';
const legend = (
<Legend
className={ 'woocommerce-chart__legend' }
@ -185,10 +187,6 @@ Chart.propTypes = {
* An array of data.
*/
data: PropTypes.array.isRequired,
/**
* A title describing this chart.
*/
title: PropTypes.string,
/**
* A datetime formatting string to format the title of the toolip, passed to d3TimeFormat.
*/
@ -209,6 +207,14 @@ Chart.propTypes = {
* A number formatting string, passed to d3Format.
*/
yFormat: PropTypes.string,
/**
* `standard` (default) legend layout in the header or `comparison` moves legend layout to the left
*/
layout: PropTypes.oneOf( [ 'standard', 'comparison' ] ),
/**
* A title describing this chart.
*/
title: PropTypes.string,
};
Chart.defaultProps = {
@ -217,6 +223,7 @@ Chart.defaultProps = {
xFormat: '%d',
x2Format: '%b %Y',
yFormat: '$.3s',
layout: 'standard',
};
export default Chart;