Merge pull request woocommerce/woocommerce-admin#1567 from woocommerce/fix/1450

update chart type query string key to chartType

plugins/woocommerce-admin/client/analytics/components/report-chart/index.js

@@ -125,7 +125,7 @@ export class ReportChart extends Component {
 				tooltipLabelFormat={ formats.tooltipLabelFormat }
 				tooltipTitle={ ( 'time-comparison' === mode && selectedChart.label ) || null }
 				tooltipValueFormat={ getTooltipValueFormat( selectedChart.type ) }
-				type={ getChartTypeForQuery( query ) }
+				chartType={ getChartTypeForQuery( query ) }
 				valueType={ selectedChart.type }
 				xFormat={ formats.xFormat }
 				x2Format={ formats.x2Format }

plugins/woocommerce-admin/client/dashboard/dashboard-charts/index.js

@@ -78,11 +78,11 @@ class DashboardCharts extends Component {
 		};
 	}
 
-	handleTypeToggle( type ) {
+	handleTypeToggle( chartType ) {
 		return () => {
-			this.setState( { chartType: type } );
+			this.setState( { chartType } );
 			const userDataFields = {
-				[ 'dashboard_chart_type' ]: type,
+				[ 'dashboard_chart_type' ]: chartType,
 			};
 			this.props.updateCurrentUserData( userDataFields );
 		};
@@ -146,7 +146,7 @@ class DashboardCharts extends Component {
 	render() {
 		const { path } = this.props;
 		const { chartType, hiddenChartKeys, interval } = this.state;
-		const query = { ...this.props.query, type: chartType, interval };
+		const query = { ...this.props.query, chartType, interval };
 		return (
 			<Fragment>
 				<div className="woocommerce-dashboard__dashboard-charts">
@@ -163,24 +163,25 @@ class DashboardCharts extends Component {
 						>
 							<IconButton
 								className={ classNames( 'woocommerce-chart__type-button', {
-									'woocommerce-chart__type-button-selected': ! query.type || query.type === 'line',
+									'woocommerce-chart__type-button-selected':
+										! query.chartType || query.chartType === 'line',
 								} ) }
 								icon={ <Gridicon icon="line-graph" /> }
 								title={ __( 'Line chart', 'wc-admin' ) }
-								aria-checked={ query.type === 'line' }
+								aria-checked={ query.chartType === 'line' }
 								role="menuitemradio"
-								tabIndex={ query.type === 'line' ? 0 : -1 }
+								tabIndex={ query.chartType === 'line' ? 0 : -1 }
 								onClick={ this.handleTypeToggle( 'line' ) }
 							/>
 							<IconButton
 								className={ classNames( 'woocommerce-chart__type-button', {
-									'woocommerce-chart__type-button-selected': query.type === 'bar',
+									'woocommerce-chart__type-button-selected': query.chartType === 'bar',
 								} ) }
 								icon={ <Gridicon icon="stats-alt" /> }
 								title={ __( 'Bar chart', 'wc-admin' ) }
-								aria-checked={ query.type === 'bar' }
+								aria-checked={ query.chartType === 'bar' }
 								role="menuitemradio"
-								tabIndex={ query.type === 'bar' ? 0 : -1 }
+								tabIndex={ query.chartType === 'bar' ? 0 : -1 }
 								onClick={ this.handleTypeToggle( 'bar' ) }
 							/>
 						</NavigableMenu>

plugins/woocommerce-admin/packages/components/CHANGELOG.md

@@ -2,6 +2,7 @@
 - Chart component: new props `emptyMessage` and `baseValue`. When an empty message is provided, it will be displayed on top of the chart if there are no values different than `baseValue`.
 - Chart component: remove d3-array dependency.
 - Chart component: fix display when there is no data.
+- Chart component: change chart type query parameter to `chartType`.
 - Improves display of charts where all values are 0.
 - Fix X-axis labels in hourly bar charts.
 - New `<Search>` prop named `showClearButton`, that will display a 'Clear' button when the search box contains one or more tags.

plugins/woocommerce-admin/packages/components/src/chart/d3chart/chart.js

@@ -52,14 +52,14 @@ class D3Chart extends Component {
 	}
 
 	getScaleParams( uniqueDates ) {
-		const { data, height, margin, orderedKeys, type } = this.props;
+		const { data, height, margin, orderedKeys, chartType } = this.props;
 
 		const adjHeight = height - margin.top - margin.bottom;
 		const adjWidth = this.getWidth() - margin.left - margin.right;
 		const yMax = getYMax( data );
 		const yScale = getYScale( adjHeight, yMax );
 
-		if ( type === 'line' ) {
+		if ( chartType === 'line' ) {
 			return {
 				xScale: getXLineScale( uniqueDates, adjWidth ),
 				yMax,
@@ -79,14 +79,14 @@ class D3Chart extends Component {
 	}
 
 	getParams( uniqueDates ) {
-		const { colorScheme, data, interval, mode, orderedKeys, type } = this.props;
+		const { colorScheme, data, interval, mode, orderedKeys, chartType } = this.props;
 		const newOrderedKeys = orderedKeys || getOrderedKeys( data );
 
 		return {
 			colorScheme,
 			interval,
 			mode,
-			type,
+			chartType,
 			uniqueDates,
 			visibleKeys: newOrderedKeys.filter( key => key.visible ),
 		};
@@ -108,7 +108,7 @@ class D3Chart extends Component {
 	}
 
 	drawChart( node ) {
-		const { data, dateParser, margin, type } = this.props;
+		const { data, dateParser, margin, chartType } = this.props;
 		const uniqueDates = getUniqueDates( data, dateParser );
 		const formats = this.getFormatParams();
 		const params = this.getParams( uniqueDates );
@@ -122,13 +122,13 @@ class D3Chart extends Component {
 		this.createTooltip( g.node(), params.visibleKeys );
 
 		drawAxis( g, params, scales, formats, margin );
-		type === 'line' && drawLines( g, data, params, scales, formats, this.tooltip );
-		type === 'bar' && drawBars( g, data, params, scales, formats, this.tooltip );
+		chartType === 'line' && drawLines( g, data, params, scales, formats, this.tooltip );
+		chartType === 'bar' && drawBars( g, data, params, scales, formats, this.tooltip );
 	}
 
 	shouldBeCompact() {
-		const {	data, margin, type, width } = this.props;
-		if ( type !== 'bar' ) {
+		const {	data, margin, chartType, width } = this.props;
+		if ( chartType !== 'bar' ) {
 			return false;
 		}
 		const widthWithoutMargins = width - margin.left - margin.right;
@@ -139,8 +139,8 @@ class D3Chart extends Component {
 	}
 
 	getWidth() {
-		const {	data, margin, type, width } = this.props;
-		if ( type !== 'bar' ) {
+		const {	data, margin, chartType, width } = this.props;
+		if ( chartType !== 'bar' ) {
 			return width;
 		}
 		const columnsPerDate = data && data.length ? Object.keys( data[ 0 ] ).length - 1 : 0;
@@ -160,7 +160,7 @@ class D3Chart extends Component {
 	}
 
 	render() {
-		const { className, data, height, orderedKeys, type } = this.props;
+		const { className, data, height, orderedKeys, chartType } = this.props;
 		const computedWidth = this.getWidth();
 		return (
 			<div
@@ -176,7 +176,7 @@ class D3Chart extends Component {
 					height={ height }
 					orderedKeys={ orderedKeys }
 					tooltip={ this.tooltip }
-					type={ type }
+					chartType={ chartType }
 					width={ computedWidth }
 				/>
 			</div>
@@ -256,7 +256,7 @@ D3Chart.propTypes = {
 	/**
 	 * Chart type of either `line` or `bar`.
 	 */
-	type: PropTypes.oneOf( [ 'bar', 'line' ] ),
+	chartType: PropTypes.oneOf( [ 'bar', 'line' ] ),
 	/**
 	 * Width of the `svg`.
 	 */
@@ -290,7 +290,7 @@ D3Chart.defaultProps = {
 	tooltipPosition: 'over',
 	tooltipLabelFormat: '%B %d, %Y',
 	tooltipValueFormat: ',',
-	type: 'line',
+	chartType: 'line',
 	width: 600,
 	xFormat: '%Y-%m-%d',
 	x2Format: '',

plugins/woocommerce-admin/packages/components/src/chart/d3chart/d3base/index.js

@@ -38,7 +38,7 @@ export default class D3Base extends Component {
 			! isEqual( this.props.orderedKeys, nextProps.orderedKeys ) ||
 			this.props.drawChart !== nextProps.drawChart ||
 			this.props.height !== nextProps.height ||
-			this.props.type !== nextProps.type ||
+			this.props.chartType !== nextProps.chartType ||
 			this.props.width !== nextProps.width
 		);
 	}
@@ -105,5 +105,5 @@ D3Base.propTypes = {
 	data: PropTypes.array,
 	orderedKeys: PropTypes.array, // required to detect changes in data
 	tooltip: PropTypes.object,
-	type: PropTypes.string,
+	chartType: PropTypes.string,
 };

plugins/woocommerce-admin/packages/components/src/chart/d3chart/style.scss

@@ -158,12 +158,12 @@
 
 	.focus-grid {
 		line {
-			stroke: rgba( 0, 0, 0, 0.1 );
+			stroke: rgba(0, 0, 0, 0.1);
 			stroke-width: 1px;
 		}
 	}
 
 	.barfocus {
-		fill: rgba( 0, 0, 0, 0.1 );
+		fill: rgba(0, 0, 0, 0.1);
 	}
 }

plugins/woocommerce-admin/packages/components/src/chart/d3chart/utils/axis.js

@@ -198,7 +198,7 @@ const removeDuplicateDates = ( d, i, ticks, formatter ) => {
 const drawXAxis = ( node, params, scales, formats ) => {
 	const height = scales.yScale.range()[ 0 ];
 	let ticks = getXTicks( params.uniqueDates, scales.xScale.range()[ 1 ], params.mode, params.interval );
-	if ( params.type === 'line' ) {
+	if ( params.chartType === 'line' ) {
 		ticks = ticks.map( d => moment( d ).toDate() );
 	}
 

plugins/woocommerce-admin/packages/components/src/chart/index.js

@@ -143,10 +143,10 @@ class Chart extends Component {
 		window.removeEventListener( 'resize', this.updateDimensions );
 	}
 
-	handleTypeToggle( type ) {
-		if ( this.props.type !== type ) {
+	handleTypeToggle( chartType ) {
+		if ( this.props.chartType !== chartType ) {
 			const { path, query } = this.props;
-			updateQueryString( { type }, path, query );
+			updateQueryString( { chartType }, path, query );
 		}
 	}
 
@@ -279,7 +279,7 @@ class Chart extends Component {
 			tooltipLabelFormat,
 			tooltipValueFormat,
 			tooltipTitle,
-			type,
+			chartType,
 			valueType,
 			xFormat,
 			x2Format,
@@ -335,24 +335,24 @@ class Chart extends Component {
 						>
 							<IconButton
 								className={ classNames( 'woocommerce-chart__type-button', {
-									'woocommerce-chart__type-button-selected': type === 'line',
+									'woocommerce-chart__type-button-selected': chartType === 'line',
 								} ) }
 								icon={ <Gridicon icon="line-graph" /> }
 								title={ __( 'Line chart', 'wc-admin' ) }
-								aria-checked={ type === 'line' }
+								aria-checked={ chartType === 'line' }
 								role="menuitemradio"
-								tabIndex={ type === 'line' ? 0 : -1 }
+								tabIndex={ chartType === 'line' ? 0 : -1 }
 								onClick={ partial( this.handleTypeToggle, 'line' ) }
 							/>
 							<IconButton
 								className={ classNames( 'woocommerce-chart__type-button', {
-									'woocommerce-chart__type-button-selected': type === 'bar',
+									'woocommerce-chart__type-button-selected': chartType === 'bar',
 								} ) }
 								icon={ <Gridicon icon="stats-alt" /> }
 								title={ __( 'Bar chart', 'wc-admin' ) }
-								aria-checked={ type === 'bar' }
+								aria-checked={ chartType === 'bar' }
 								role="menuitemradio"
-								tabIndex={ type === 'bar' ? 0 : -1 }
+								tabIndex={ chartType === 'bar' ? 0 : -1 }
 								onClick={ partial( this.handleTypeToggle, 'bar' ) }
 							/>
 						</NavigableMenu>
@@ -392,7 +392,7 @@ class Chart extends Component {
 									tooltipValueFormat={ tooltipValueFormat }
 									tooltipPosition={ isViewportLarge ? 'over' : 'below' }
 									tooltipTitle={ tooltipTitle }
-									type={ type }
+									chartType={ chartType }
 									width={ chartDirection === 'row' ? width - 320 : width }
 									xFormat={ xFormat }
 									x2Format={ x2Format }
@@ -420,6 +420,10 @@ Chart.propTypes = {
 	 * `emptyMessage` will be displayed if provided.
 	 */
 	baseValue: PropTypes.number,
+	/**
+	 * Chart type of either `line` or `bar`.
+	 */
+	chartType: PropTypes.oneOf( [ 'bar', 'line' ] ),
 	/**
 	 * An array of data.
 	 */
@@ -491,10 +495,6 @@ Chart.propTypes = {
 	 * A string to use as a title for the tooltip. Takes preference over `tooltipLabelFormat`.
 	 */
 	tooltipTitle: PropTypes.string,
-	/**
-	 * Chart type of either `line` or `bar`.
-	 */
-	type: PropTypes.oneOf( [ 'bar', 'line' ] ),
 	/**
 	 * What type of data is to be displayed? Number, Average, String?
 	 */
@@ -515,6 +515,7 @@ Chart.propTypes = {
 
 Chart.defaultProps = {
 	baseValue: 0,
+	chartType: 'line',
 	data: [],
 	dateParser: '%Y-%m-%dT%H:%M:%S',
 	interactiveLegend: true,
@@ -524,7 +525,6 @@ Chart.defaultProps = {
 	showHeaderControls: true,
 	tooltipLabelFormat: '%B %d, %Y',
 	tooltipValueFormat: ',',
-	type: 'line',
 	xFormat: '%d',
 	x2Format: '%b %Y',
 	yFormat: '$.3s',

plugins/woocommerce-admin/packages/date/src/index.js

@@ -425,9 +425,9 @@ export function getIntervalForQuery( query ) {
  * @param  {Object} query Current query
  * @return {String} Current chart type.
  */
-export function getChartTypeForQuery( { type } ) {
-	if ( [ 'line', 'bar' ].includes( type ) ) {
-		return type;
+export function getChartTypeForQuery( { chartType } ) {
+	if ( [ 'line', 'bar' ].includes( chartType ) ) {
+		return chartType;
 	}
 	return 'line';
 }

plugins/woocommerce-admin/packages/date/test/index.js

@@ -697,7 +697,7 @@ describe( 'getPreviousDate', () => {
 describe( 'getChartTypeForQuery', () => {
 	it( 'should return allowed type', () => {
 		const query = {
-			type: 'bar',
+			chartType: 'bar',
 		};
 		expect( getChartTypeForQuery( query ) ).toBe( 'bar' );
 	} );
@@ -708,7 +708,7 @@ describe( 'getChartTypeForQuery', () => {
 
 	it( 'should return line for not allowed type', () => {
 		const query = {
-			type: 'burrito',
+			chartType: 'burrito',
 		};
 		expect( getChartTypeForQuery( query ) ).toBe( 'line' );
 	} );