Add dashboard chart interval preferences (https://github.com/woocommerce/woocommerce-admin/pull/1230)

* Add user interval preferences for dashboard charts

* Add interval selector styling

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

@@ -9,13 +9,14 @@ import { compose } from '@wordpress/compose';
 import Gridicon from 'gridicons';
 import { isEqual, xor } from 'lodash';
 import PropTypes from 'prop-types';
-import { ToggleControl, IconButton, NavigableMenu } from '@wordpress/components';
+import { ToggleControl, IconButton, NavigableMenu, SelectControl } from '@wordpress/components';
 import { withDispatch } from '@wordpress/data';
 
 /**
  * WooCommerce dependencies
  */
 import { EllipsisMenu, MenuItem, SectionHeader } from '@woocommerce/components';
+import { getAllowedIntervalsForQuery } from '@woocommerce/date';
 
 /**
  * Internal dependencies
@@ -31,7 +32,7 @@ class DashboardCharts extends Component {
 		this.state = {
 			chartType: props.userPrefChartType || 'line',
 			hiddenChartKeys: props.userPrefCharts || [],
-			query: props.query,
+			interval: props.userPrefIntervals || 'day',
 		};
 
 		this.toggle = this.toggle.bind( this );
@@ -40,8 +41,9 @@ class DashboardCharts extends Component {
 	componentDidUpdate( {
 		userPrefCharts: prevUserPrefCharts,
 		userPrefChartType: prevUserPrefChartType,
+		userPrefChartInterval: prevUserPrefChartInterval,
 	} ) {
-		const { userPrefCharts, userPrefChartType } = this.props;
+		const { userPrefCharts, userPrefChartInterval, userPrefChartType } = this.props;
 		if ( userPrefCharts && ! isEqual( userPrefCharts, prevUserPrefCharts ) ) {
 			/* eslint-disable react/no-did-update-set-state */
 			this.setState( {
@@ -56,6 +58,13 @@ class DashboardCharts extends Component {
 			} );
 			/* eslint-enable react/no-did-update-set-state */
 		}
+		if ( userPrefChartInterval !== prevUserPrefChartInterval ) {
+			/* eslint-disable react/no-did-update-set-state */
+			this.setState( {
+				interval: userPrefChartInterval,
+			} );
+			/* eslint-enable react/no-did-update-set-state */
+		}
 	}
 
 	toggle( key ) {
@@ -97,14 +106,56 @@ class DashboardCharts extends Component {
 		);
 	}
 
+	renderIntervalSelector() {
+		const allowedIntervals = getAllowedIntervalsForQuery( this.props.query );
+		if ( ! allowedIntervals || allowedIntervals.length < 1 ) {
+			return null;
+		}
+
+		const intervalLabels = {
+			hour: __( 'By hour', 'wc-admin' ),
+			day: __( 'By day', 'wc-admin' ),
+			week: __( 'By week', 'wc-admin' ),
+			month: __( 'By month', 'wc-admin' ),
+			quarter: __( 'By quarter', 'wc-admin' ),
+			year: __( 'By year', 'wc-admin' ),
+		};
+
+		return (
+			<SelectControl
+				className="woocommerce-chart__interval-select"
+				value={ this.state.interval }
+				options={ allowedIntervals.map( allowedInterval => ( {
+					value: allowedInterval,
+					label: intervalLabels[ allowedInterval ],
+				} ) ) }
+				onChange={ this.setInterval }
+			/>
+		);
+	}
+
+	setInterval = interval => {
+		this.setState( { interval }, () => {
+			const userDataFields = {
+				[ 'dashboard_chart_interval' ]: this.state.interval,
+			};
+			this.props.updateCurrentUserData( userDataFields );
+		} );
+	};
+
 	render() {
 		const { path } = this.props;
-		const { chartType, hiddenChartKeys } = this.state;
-		const query = { ...this.props.query, type: chartType };
+		const { chartType, hiddenChartKeys, interval } = this.state;
+		const query = { ...this.props.query, type: chartType, interval };
 		return (
 			<Fragment>
 				<div className="woocommerce-dashboard__dashboard-charts">
-					<SectionHeader title={ __( 'Charts', 'wc-admin' ) } menu={ this.renderMenu() }>
+					<SectionHeader
+						title={ __( 'Charts', 'wc-admin' ) }
+						menu={ this.renderMenu() }
+						className={ 'has-interval-select' }
+					>
+						{ this.renderIntervalSelector() }
 						<NavigableMenu
 							className="woocommerce-chart__types"
 							orientation="horizontal"
@@ -167,6 +218,7 @@ export default compose(
 		return {
 			userPrefCharts: userData.dashboard_charts,
 			userPrefChartType: userData.dashboard_chart_type,
+			userPrefChartInterval: userData.dashboard_chart_interval,
 		};
 	} ),
 	withDispatch( dispatch => {

plugins/woocommerce-admin/client/wc-api/user/operations.js

@@ -42,6 +42,7 @@ function updateCurrentUserData( resourceNames, data, fetch ) {
 		'variations_report_columns',
 		'dashboard_charts',
 		'dashboard_chart_type',
+		'dashboard_chart_interval',
 		'dashboard_leaderboards',
 		'dashboard_leaderboard_rows',
 	];

plugins/woocommerce-admin/lib/admin.php

@@ -401,6 +401,7 @@ function wc_admin_get_user_data_fields() {
 		'variations_report_columns',
 		'dashboard_charts',
 		'dashboard_chart_type',
+		'dashboard_chart_interval',
 		'dashboard_leaderboards',
 		'dashboard_leaderboard_rows',
 	);

plugins/woocommerce-admin/packages/components/src/section-header/style.scss

@@ -21,6 +21,19 @@
 		height: 1px;
 		margin: 0 10px;
 	}
+
+	@include breakpoint( '<782px' ) {
+		&.has-interval-select {
+			position: relative;
+			padding-bottom: 30px;
+			.woocommerce-chart__interval-select {
+				position: absolute;
+				left: 0;
+				bottom: 0;
+				padding-left: 6px;
+			}
+		}
+	}
 }
 
 .woocommerce-section-header__actions,
@@ -31,6 +44,18 @@
 	display: flex;
 	flex-grow: 1;
 	justify-content: flex-end;
+	align-items: center;
+
+	.components-base-control {
+		padding-top: 0;
+		min-height: 34px;
+	}
+	.components-base-control__field {
+		margin-bottom: 0;
+		select {
+			background: transparent;
+		}
+	}
 }
 
 .woocommerce-ellipsis-menu__toggle {
@@ -48,7 +73,7 @@
 	// EllipsisMenu is 24px, so to match we add 6px padding around the
 	// heading text, which we know is 18px from line-height.
 	padding: 3px 0;
-	@include font-size( 15 );
+	@include font-size( 18 );
 	line-height: 2.2;
 	font-weight: 600;
 }