* Refactor to remove revenue chartjs

* Update index.js

* Remove extra line
This commit is contained in:
Jonathan Belcher 2018-11-12 11:27:19 -05:00 committed by GitHub
parent f98d0c9720
commit e49997381b
3 changed files with 55 additions and 92 deletions

View File

@ -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;

View File

@ -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',
},
];

View File

@ -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>
);