Fix charts redirecting to previous path when changing interval value (https://github.com/woocommerce/woocommerce-admin/pull/731)

* Fix charts redirecting to previous path when changing interval value

* Fix chart being reset when changing interval

* Fix chart being reset when changing filters

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

@@ -29,7 +29,7 @@ import ReportError from 'analytics/components/report-error';
 
 class ReportChart extends Component {
 	render() {
-		const { primaryData, secondaryData, selectedChart, query } = this.props;
+		const { path, primaryData, secondaryData, selectedChart, query } = this.props;
 
 		if ( primaryData.isError || secondaryData.isError ) {
 			return <ReportError isError />;
@@ -75,8 +75,11 @@ class ReportChart extends Component {
 				},
 			};
 		} );
+
 		return (
 			<Chart
+				path={ path }
+				query={ query }
 				data={ chartData }
 				title={ selectedChart.label }
 				interval={ currentInterval }
@@ -94,10 +97,11 @@ class ReportChart extends Component {
 }
 
 ReportChart.propTypes = {
+	path: PropTypes.string.isRequired,
 	primaryData: PropTypes.object.isRequired,
+	query: PropTypes.object.isRequired,
 	secondaryData: PropTypes.object.isRequired,
 	selectedChart: PropTypes.object.isRequired,
-	query: PropTypes.object.isRequired,
 };
 
 export default compose(

plugins/woocommerce-admin/client/analytics/report/orders/chart.js

@@ -51,7 +51,7 @@ class OrdersReportChart extends Component {
 	}
 
 	render() {
-		const { query } = this.props;
+		const { path, query } = this.props;
 		return (
 			<Fragment>
 				<ReportSummary
@@ -63,6 +63,7 @@ class OrdersReportChart extends Component {
 				<ReportChart
 					charts={ this.getCharts() }
 					endpoint="orders"
+					path={ path }
 					query={ query }
 					selectedChart={ this.getSelectedChart() }
 				/>
@@ -72,6 +73,7 @@ class OrdersReportChart extends Component {
 }
 
 OrdersReportChart.propTypes = {
+	path: PropTypes.string.isRequired,
 	query: PropTypes.object.isRequired,
 };
 

plugins/woocommerce-admin/client/analytics/report/orders/config.js

@@ -15,7 +15,7 @@ const { orderStatuses } = wcSettings;
 export const filters = [
 	{
 		label: __( 'Show', 'wc-admin' ),
-		staticParams: [],
+		staticParams: [ 'chart' ],
 		param: 'filter',
 		showFilters: () => true,
 		filters: [

plugins/woocommerce-admin/client/analytics/report/orders/index.js

@@ -29,7 +29,7 @@ export default class OrdersReport extends Component {
 					filters={ filters }
 					advancedFilters={ advancedFilters }
 				/>
-				<OrdersReportChart query={ query } />
+				<OrdersReportChart query={ query } path={ path } />
 				<OrdersReportTable query={ query } />
 			</Fragment>
 		);

plugins/woocommerce-admin/client/analytics/report/products/chart.js

@@ -46,7 +46,7 @@ class ProductsReportChart extends Component {
 	}
 
 	render() {
-		const { query } = this.props;
+		const { path, query } = this.props;
 		return (
 			<Fragment>
 				<ReportSummary
@@ -58,6 +58,7 @@ class ProductsReportChart extends Component {
 				<ReportChart
 					charts={ this.getCharts() }
 					endpoint="products"
+					path={ path }
 					query={ query }
 					selectedChart={ this.getSelectedChart() }
 				/>
@@ -67,6 +68,7 @@ class ProductsReportChart extends Component {
 }
 
 ProductsReportChart.propTypes = {
+	path: PropTypes.string.isRequired,
 	query: PropTypes.object.isRequired,
 };
 

plugins/woocommerce-admin/client/analytics/report/products/config.js

@@ -12,7 +12,7 @@ import { NAMESPACE } from 'store/constants';
 
 const filterConfig = {
 	label: __( 'Show', 'wc-admin' ),
-	staticParams: [],
+	staticParams: [ 'chart' ],
 	param: 'filter',
 	showFilters: () => true,
 	filters: [

plugins/woocommerce-admin/client/analytics/report/products/index.js

@@ -24,7 +24,7 @@ export default class ProductsReport extends Component {
 		return (
 			<Fragment>
 				<ReportFilters query={ query } path={ path } filters={ filters } />
-				<ProductsReportChart query={ query } />
+				<ProductsReportChart query={ query } path={ path } />
 				<ProductsReportTable query={ query } />
 			</Fragment>
 		);

plugins/woocommerce-admin/client/analytics/report/revenue/chart.js

@@ -61,7 +61,7 @@ class RevenueReportChart extends Component {
 	}
 
 	render() {
-		const { query } = this.props;
+		const { path, query } = this.props;
 		return (
 			<Fragment>
 				<ReportSummary
@@ -73,6 +73,7 @@ class RevenueReportChart extends Component {
 				<ReportChart
 					charts={ this.getCharts() }
 					endpoint="revenue"
+					path={ path }
 					query={ query }
 					selectedChart={ this.getSelectedChart() }
 				/>
@@ -82,6 +83,7 @@ class RevenueReportChart extends Component {
 }
 
 RevenueReportChart.propTypes = {
+	path: PropTypes.string.isRequired,
 	query: PropTypes.object.isRequired,
 };
 

plugins/woocommerce-admin/client/analytics/report/revenue/index.js

@@ -23,7 +23,7 @@ export default class RevenueReport extends Component {
 		return (
 			<Fragment>
 				<ReportFilters query={ query } path={ path } />
-				<RevenueReportChart query={ query } />
+				<RevenueReportChart query={ query } path={ path } />
 				<RevenueReportTable query={ query } />
 			</Fragment>
 		);

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

@@ -73,6 +73,7 @@ class Chart extends Component {
 		this.handleLegendHover = this.handleLegendHover.bind( this );
 		this.updateDimensions = this.updateDimensions.bind( this );
 		this.getVisibleData = this.getVisibleData.bind( this );
+		this.setInterval = this.setInterval.bind( this );
 	}
 
 	componentDidUpdate( prevProps ) {
@@ -152,7 +153,8 @@ class Chart extends Component {
 	}
 
 	setInterval( interval ) {
-		updateQueryString( { interval } );
+		const { path, query } = this.props;
+		updateQueryString( { interval }, path, query );
 	}
 
 	renderIntervalSelector() {
@@ -312,10 +314,18 @@ Chart.propTypes = {
 	 * Format to parse dates into d3 time format
 	 */
 	dateParser: PropTypes.string.isRequired,
+	/**
+	 * Current path
+	 */
+	path: PropTypes.string,
 	/**
 	 * Date format of the point labels (might be used in tooltips and ARIA properties).
 	 */
 	pointLabelFormat: PropTypes.string,
+	/**
+	 * The query string represented in object form
+	 */
+	query: PropTypes.object,
 	/**
 	 * A datetime formatting string to format the date displayed as the title of the toolip
 	 * if `tooltipTitle` is missing, passed to d3TimeFormat.