From bf6a647c79d3d5a8739956a8bc5bbeeb414f02e9 Mon Sep 17 00:00:00 2001
From: Robert Elliott <robert.elliott@automattic.com>
Date: Mon, 10 Sep 2018 13:23:50 +0200
Subject: [PATCH] standard vs comparison legend layout

---
 .../client/components/chart/index.js          | 19 +++++++++++++------
 1 file changed, 13 insertions(+), 6 deletions(-)

diff --git a/plugins/woocommerce-admin/client/components/chart/index.js b/plugins/woocommerce-admin/client/components/chart/index.js
index 3df7e67cf63..137cc88d66e 100644
--- a/plugins/woocommerce-admin/client/components/chart/index.js
+++ b/plugins/woocommerce-admin/client/components/chart/index.js
@@ -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;