Refactor to remove revenue chartjs (https://github.com/woocommerce/woocommerce-admin/pull/800)

* Refactor to remove revenue chartjs

* Update index.js

* Remove extra line

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

@@ -1,90 +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 RevenueReportChart extends Component {
-	getCharts() {
-		return [
-			{
-				key: 'gross_revenue',
-				label: __( 'Gross Revenue', 'wc-admin' ),
-				type: 'currency',
-			},
-			{
-				key: 'refunds',
-				label: __( 'Refunds', 'wc-admin' ),
-				type: 'currency',
-			},
-			{
-				key: 'coupons',
-				label: __( 'Coupons', 'wc-admin' ),
-				type: 'currency',
-			},
-			{
-				key: 'taxes',
-				label: __( 'Taxes', 'wc-admin' ),
-				type: 'currency',
-			},
-			{
-				key: 'shipping',
-				label: __( 'Shipping', 'wc-admin' ),
-				type: 'currency',
-			},
-			{
-				key: 'net_revenue',
-				label: __( 'Net Revenue', 'wc-admin' ),
-				type: 'currency',
-			},
-		];
-	}
-
-	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="revenue"
-					query={ query }
-					selectedChart={ this.getSelectedChart() }
-				/>
-				<ReportChart
-					charts={ this.getCharts() }
-					endpoint="revenue"
-					path={ path }
-					query={ query }
-					selectedChart={ this.getSelectedChart() }
-				/>
-			</Fragment>
-		);
-	}
-}
-
-RevenueReportChart.propTypes = {
-	path: PropTypes.string.isRequired,
-	query: PropTypes.object.isRequired,
-};
-
-export default RevenueReportChart;

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

@@ -0,0 +1,38 @@
+/** @format */
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+export const charts = [
+	{
+		key: 'gross_revenue',
+		label: __( 'Gross Revenue', 'wc-admin' ),
+		type: 'currency',
+	},
+	{
+		key: 'refunds',
+		label: __( 'Refunds', 'wc-admin' ),
+		type: 'currency',
+	},
+	{
+		key: 'coupons',
+		label: __( 'Coupons', 'wc-admin' ),
+		type: 'currency',
+	},
+	{
+		key: 'taxes',
+		label: __( 'Taxes', 'wc-admin' ),
+		type: 'currency',
+	},
+	{
+		key: 'shipping',
+		label: __( 'Shipping', 'wc-admin' ),
+		type: 'currency',
+	},
+	{
+		key: 'net_revenue',
+		label: __( 'Net Revenue', 'wc-admin' ),
+		type: 'currency',
+	},
+];

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

@@ -13,7 +13,10 @@ import { ReportFilters } from '@woocommerce/components';
 /**
  * Internal dependencies
  */
-import RevenueReportChart from './chart';
+import { charts } from './config';
+import getSelectedChart from 'lib/get-selected-chart';
+import ReportChart from 'analytics/components/report-chart';
+import ReportSummary from 'analytics/components/report-summary';
 import RevenueReportTable from './table';
 
 export default class RevenueReport extends Component {
@@ -23,7 +26,19 @@ export default class RevenueReport extends Component {
 		return (
 			<Fragment>
 				<ReportFilters query={ query } path={ path } />
-				<RevenueReportChart query={ query } path={ path } />
+				<ReportSummary
+					charts={ charts }
+					endpoint="revenue"
+					query={ query }
+					selectedChart={ getSelectedChart( query.chart, charts ) }
+				/>
+				<ReportChart
+					charts={ charts }
+					endpoint="revenue"
+					path={ path }
+					query={ query }
+					selectedChart={ getSelectedChart( query.chart, charts ) }
+				/>
 				<RevenueReportTable query={ query } />
 			</Fragment>
 		);