Refactor to remove revenue chartjs (https://github.com/woocommerce/woocommerce-admin/pull/800)
* Refactor to remove revenue chartjs * Update index.js * Remove extra line
This commit is contained in:
parent
f98d0c9720
commit
e49997381b
|
@ -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;
|
|
@ -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',
|
||||
},
|
||||
];
|
|
@ -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>
|
||||
);
|
||||
|
|
Loading…
Reference in New Issue