Moves charts to config to delete chart.js (https://github.com/woocommerce/woocommerce-admin/pull/793)

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

@@ -1,80 +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 OrdersReportChart extends Component {
-	getCharts() {
-		return [
-			{
-				key: 'orders_count',
-				label: __( 'Orders Count', 'wc-admin' ),
-				type: 'number',
-			},
-			{
-				key: 'net_revenue',
-				label: __( 'Net Revenue', 'wc-admin' ),
-				type: 'currency',
-			},
-			{
-				key: 'avg_order_value',
-				label: __( 'Average Order Value', 'wc-admin' ),
-				type: 'currency',
-			},
-			{
-				key: 'avg_items_per_order',
-				label: __( 'Average Items Per Order', 'wc-admin' ),
-				type: 'average',
-			},
-		];
-	}
-
-	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="orders"
-					query={ query }
-					selectedChart={ this.getSelectedChart() }
-				/>
-				<ReportChart
-					charts={ this.getCharts() }
-					endpoint="orders"
-					path={ path }
-					query={ query }
-					selectedChart={ this.getSelectedChart() }
-				/>
-			</Fragment>
-		);
-	}
-}
-
-OrdersReportChart.propTypes = {
-	path: PropTypes.string.isRequired,
-	query: PropTypes.object.isRequired,
-};
-
-export default OrdersReportChart;

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

@@ -12,6 +12,29 @@ import { NAMESPACE } from 'store/constants';
 
 const { orderStatuses } = wcSettings;
 
+export const charts = [
+	{
+		key: 'orders_count',
+		label: __( 'Orders Count', 'wc-admin' ),
+		type: 'number',
+	},
+	{
+		key: 'net_revenue',
+		label: __( 'Net Revenue', 'wc-admin' ),
+		type: 'currency',
+	},
+	{
+		key: 'avg_order_value',
+		label: __( 'Average Order Value', 'wc-admin' ),
+		type: 'currency',
+	},
+	{
+		key: 'avg_items_per_order',
+		label: __( 'Average Items Per Order', 'wc-admin' ),
+		type: 'average',
+	},
+];
+
 export const filters = [
 	{
 		label: __( 'Show', 'wc-admin' ),

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

@@ -13,11 +13,22 @@ import { ReportFilters } from '@woocommerce/components';
 /**
  * Internal dependencies
  */
-import { advancedFilters, filters } from './config';
+import { advancedFilters, charts, filters } from './config';
-import OrdersReportChart from './chart';
 import OrdersReportTable from './table';
+import ReportChart from 'analytics/components/report-chart';
+import ReportSummary from 'analytics/components/report-summary';
 
 export default class OrdersReport extends Component {
+	getSelectedChart() {
+		const { query } = this.props;
+		const chart = find( charts, { key: query.chart } );
+		if ( chart ) {
+			return chart;
+		}
+
+		return charts[ 0 ];
+	}
+
 	render() {
 		const { path, query } = this.props;
 
@@ -29,7 +40,19 @@ export default class OrdersReport extends Component {
 					filters={ filters }
 					advancedFilters={ advancedFilters }
 				/>
-				<OrdersReportChart query={ query } path={ path } />
+				<ReportSummary
+					charts={ charts }
+					endpoint="orders"
+					query={ query }
+					selectedChart={ this.getSelectedChart() }
+				/>
+				<ReportChart
+					charts={ charts }
+					endpoint="orders"
+					path={ path }
+					query={ query }
+					selectedChart={ this.getSelectedChart() }
+				/>
 				<OrdersReportTable query={ query } />
 			</Fragment>
 		);