Adds UI wiring for Coupons chart and summary (https://github.com/woocommerce/woocommerce-admin/pull/724)
* Adds UI wiring for Coupons chart and summary * Update for changes in master * Update to use current method * Remove accidental paste * Fix typo * Seperate WooCommerce deps
This commit is contained in:
parent
8ddcb7ce4a
commit
f167c27b5e
|
@ -10,6 +10,54 @@ import { __ } from '@wordpress/i18n';
|
||||||
import { getRequestByIdString } from 'lib/async-requests';
|
import { getRequestByIdString } from 'lib/async-requests';
|
||||||
import { NAMESPACE } from 'store/constants';
|
import { NAMESPACE } from 'store/constants';
|
||||||
|
|
||||||
|
export const charts = [
|
||||||
|
{
|
||||||
|
key: 'avg_items_per_order',
|
||||||
|
label: __( 'Average Items Per Order', 'wc-admin' ),
|
||||||
|
type: 'number',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'avg_order_value',
|
||||||
|
label: __( 'Average Order Value', 'wc-admin' ),
|
||||||
|
type: 'currency',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'coupons',
|
||||||
|
label: __( 'Coupons', 'wc-admin' ),
|
||||||
|
type: 'number',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'net_revenue',
|
||||||
|
label: __( 'Net Revenue', 'wc-admin' ),
|
||||||
|
type: 'currency',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'num_items_sold',
|
||||||
|
label: __( 'Number of Items Sold', 'wc-admin' ),
|
||||||
|
type: 'number',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'num_new_customers',
|
||||||
|
label: __( 'Number of New Customers', 'wc-admin' ),
|
||||||
|
type: 'number',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'num_returning_customers',
|
||||||
|
label: __( 'Number of Returning Customers', 'wc-admin' ),
|
||||||
|
type: 'number',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'orders_count',
|
||||||
|
label: __( 'Orders Count', 'wc-admin' ),
|
||||||
|
type: 'number',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'products',
|
||||||
|
label: __( 'Products', 'wc-admin' ),
|
||||||
|
type: 'number',
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
export const filters = [
|
export const filters = [
|
||||||
{
|
{
|
||||||
label: __( 'Show', 'wc-admin' ),
|
label: __( 'Show', 'wc-admin' ),
|
||||||
|
@ -20,10 +68,10 @@ export const filters = [
|
||||||
{ label: __( 'All Coupons', 'wc-admin' ), value: 'all' },
|
{ label: __( 'All Coupons', 'wc-admin' ), value: 'all' },
|
||||||
{
|
{
|
||||||
label: __( 'Comparison', 'wc-admin' ),
|
label: __( 'Comparison', 'wc-admin' ),
|
||||||
value: 'compare',
|
value: 'compare-coupons',
|
||||||
settings: {
|
settings: {
|
||||||
type: 'coupons',
|
type: 'coupons',
|
||||||
param: 'coupon',
|
param: 'coupons',
|
||||||
getLabels: getRequestByIdString( NAMESPACE + 'coupons', coupon => ( {
|
getLabels: getRequestByIdString( NAMESPACE + 'coupons', coupon => ( {
|
||||||
id: coupon.id,
|
id: coupon.id,
|
||||||
label: coupon.code,
|
label: coupon.code,
|
||||||
|
|
|
@ -3,23 +3,48 @@
|
||||||
* External dependencies
|
* External dependencies
|
||||||
*/
|
*/
|
||||||
import { Component, Fragment } from '@wordpress/element';
|
import { Component, Fragment } from '@wordpress/element';
|
||||||
|
import PropTypes from 'prop-types';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* WooCommerce dependencies
|
||||||
|
*/
|
||||||
|
import { ReportFilters } from '@woocommerce/components';
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Internal dependencies
|
* Internal dependencies
|
||||||
*/
|
*/
|
||||||
import { filters } from './config';
|
import { charts, filters } from './config';
|
||||||
import CouponsReportTable from './table';
|
import CouponsReportTable from './table';
|
||||||
import { ReportFilters } from '@woocommerce/components';
|
import getSelectedChart from 'lib/get-selected-chart';
|
||||||
|
import ReportChart from 'analytics/components/report-chart';
|
||||||
|
import ReportSummary from 'analytics/components/report-summary';
|
||||||
|
|
||||||
export default class extends Component {
|
export default class CouponsReport extends Component {
|
||||||
render() {
|
render() {
|
||||||
const { query, path } = this.props;
|
const { query, path } = this.props;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Fragment>
|
<Fragment>
|
||||||
<ReportFilters query={ query } path={ path } filters={ filters } />
|
<ReportFilters query={ query } path={ path } filters={ filters } />
|
||||||
|
<ReportSummary
|
||||||
|
charts={ charts }
|
||||||
|
endpoint="orders"
|
||||||
|
query={ query }
|
||||||
|
selectedChart={ getSelectedChart( query.chart, charts ) }
|
||||||
|
/>
|
||||||
|
<ReportChart
|
||||||
|
charts={ charts }
|
||||||
|
endpoint="orders"
|
||||||
|
path={ path }
|
||||||
|
query={ query }
|
||||||
|
selectedChart={ getSelectedChart( query.chart, charts ) }
|
||||||
|
/>
|
||||||
<CouponsReportTable query={ query } />
|
<CouponsReportTable query={ query } />
|
||||||
</Fragment>
|
</Fragment>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
CouponsReport.propTypes = {
|
||||||
|
query: PropTypes.object.isRequired,
|
||||||
|
};
|
||||||
|
|
|
@ -125,6 +125,14 @@ function wc_admin_register_pages() {
|
||||||
)
|
)
|
||||||
);
|
);
|
||||||
|
|
||||||
|
wc_admin_register_page(
|
||||||
|
array(
|
||||||
|
'title' => __( 'Coupons', 'wc-admin' ),
|
||||||
|
'parent' => '/analytics/revenue',
|
||||||
|
'path' => '/analytics/coupons',
|
||||||
|
)
|
||||||
|
);
|
||||||
|
|
||||||
wc_admin_register_page(
|
wc_admin_register_page(
|
||||||
array(
|
array(
|
||||||
'title' => __( 'Categories', 'wc-admin' ),
|
'title' => __( 'Categories', 'wc-admin' ),
|
||||||
|
|
Loading…
Reference in New Issue