Refactor to remove products chart.js (https://github.com/woocommerce/woocommerce-admin/pull/799)

* Refactor to remove products chartjs

* Delete chartjs

* Fix copy pasta error

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

@@ -1,75 +0,0 @@
-/** @format */
-/**
- * External dependencies
- */
-import { __ } from '@wordpress/i18n';
-import { Component, Fragment } from '@wordpress/element';
-import { find } from 'lodash';
-import PropTypes from 'prop-types';
-
-/**
- * Internal dependencies
- */
-import ReportChart from 'analytics/components/report-chart';
-import ReportSummary from 'analytics/components/report-summary';
-
-class ProductsReportChart extends Component {
-	getCharts() {
-		return [
-			{
-				key: 'items_sold',
-				label: __( 'Items Sold', 'wc-admin' ),
-				type: 'number',
-			},
-			{
-				key: 'gross_revenue',
-				label: __( 'Gross Revenue', 'wc-admin' ),
-				type: 'currency',
-			},
-			{
-				key: 'orders_count',
-				label: __( 'Orders Count', 'wc-admin' ),
-				type: 'number',
-			},
-		];
-	}
-
-	getSelectedChart() {
-		const { query } = this.props;
-		const charts = this.getCharts();
-		const chart = find( charts, { key: query.chart } );
-		if ( chart ) {
-			return chart;
-		}
-
-		return charts[ 0 ];
-	}
-
-	render() {
-		const { path, query } = this.props;
-		return (
-			<Fragment>
-				<ReportSummary
-					charts={ this.getCharts() }
-					endpoint="products"
-					query={ query }
-					selectedChart={ this.getSelectedChart() }
-				/>
-				<ReportChart
-					charts={ this.getCharts() }
-					endpoint="products"
-					path={ path }
-					query={ query }
-					selectedChart={ this.getSelectedChart() }
-				/>
-			</Fragment>
-		);
-	}
-}
-
-ProductsReportChart.propTypes = {
-	path: PropTypes.string.isRequired,
-	query: PropTypes.object.isRequired,
-};
-
-export default ProductsReportChart;

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

@@ -10,6 +10,24 @@ import { __ } from '@wordpress/i18n';
 import { getRequestByIdString } from 'lib/async-requests';
 import { NAMESPACE } from 'store/constants';
 
+export const charts = [
+	{
+		key: 'items_sold',
+		label: __( 'Items Sold', 'wc-admin' ),
+		type: 'number',
+	},
+	{
+		key: 'gross_revenue',
+		label: __( 'Gross Revenue', 'wc-admin' ),
+		type: 'currency',
+	},
+	{
+		key: 'orders_count',
+		label: __( 'Orders Count', 'wc-admin' ),
+		type: 'number',
+	},
+];
+
 const filterConfig = {
 	label: __( 'Show', 'wc-admin' ),
 	staticParams: [ 'chart' ],

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

@@ -13,9 +13,11 @@ import { ReportFilters } from '@woocommerce/components';
 /**
  * Internal dependencies
  */
-import { filters } from './config';
+import { charts, filters } from './config';
-import ProductsReportChart from './chart';
+import getSelectedChart from 'lib/get-selected-chart';
 import ProductsReportTable from './table';
+import ReportChart from 'analytics/components/report-chart';
+import ReportSummary from 'analytics/components/report-summary';
 
 export default class ProductsReport extends Component {
 	render() {
@@ -24,7 +26,19 @@ export default class ProductsReport extends Component {
 		return (
 			<Fragment>
 				<ReportFilters query={ query } path={ path } filters={ filters } />
-				<ProductsReportChart query={ query } path={ path } />
+				<ReportSummary
+					charts={ charts }
+					endpoint="products"
+					query={ query }
+					selectedChart={ getSelectedChart( query.chart, charts ) }
+				/>
+				<ReportChart
+					charts={ charts }
+					endpoint="products"
+					path={ path }
+					query={ query }
+					selectedChart={ getSelectedChart( query.chart, charts ) }
+				/>
 				<ProductsReportTable query={ query } />
 			</Fragment>
 		);