Steve-Dee-Designs
/
woocommerce
mirror of https://github.com/woocommerce/woocommerce.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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

This commit is contained in:
Jonathan Belcher 2018-11-07 11:38:34 -05:00 committed by GitHub
parent 3cc52dab29
commit ffee7cc841
3 changed files with 49 additions and 83 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

@ -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' ),

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

@ -13,11 +13,22 @@ import { ReportFilters } from '@woocommerce/components';
/**
* Internal dependencies
*/
import { advancedFilters, filters } from './config';
import OrdersReportChart from './chart';
import { advancedFilters, charts, filters } from './config';
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>
);