woocommerce/plugins/woocommerce-admin/client/dashboard/store-performance/index.js

115 lines
2.7 KiB
JavaScript

/** @format */
/**
* External dependencies
*/
import { __ } from '@wordpress/i18n';
import { ToggleControl } from '@wordpress/components';
import { Component } from '@wordpress/element';
/**
* Internal dependencies
*/
import {
Card,
EllipsisMenu,
MenuItem,
MenuTitle,
SummaryList,
SummaryNumber,
} from '@woocommerce/components';
import './style.scss';
class StorePerformance extends Component {
constructor() {
super( ...arguments );
this.state = {
showCustomers: true,
showProducts: true,
showOrders: true,
};
this.toggle = this.toggle.bind( this );
}
toggle( type ) {
return () => {
this.setState( state => ( { [ type ]: ! state[ type ] } ) );
};
}
renderMenu() {
return (
<EllipsisMenu label={ __( 'Choose which analytics to display', 'wc-admin' ) }>
<MenuTitle>{ __( 'Display Stats:', 'wc-admin' ) }</MenuTitle>
<MenuItem onInvoke={ this.toggle( 'showCustomers' ) }>
<ToggleControl
label={ __( 'Show Customers', 'wc-admin' ) }
checked={ this.state.showCustomers }
onChange={ this.toggle( 'showCustomers' ) }
/>
</MenuItem>
<MenuItem onInvoke={ this.toggle( 'showProducts' ) }>
<ToggleControl
label={ __( 'Show Products', 'wc-admin' ) }
checked={ this.state.showProducts }
onChange={ this.toggle( 'showProducts' ) }
/>
</MenuItem>
<MenuItem onInvoke={ this.toggle( 'showOrders' ) }>
<ToggleControl
label={ __( 'Show Orders', 'wc-admin' ) }
checked={ this.state.showOrders }
onChange={ this.toggle( 'showOrders' ) }
/>
</MenuItem>
</EllipsisMenu>
);
}
render() {
const totalOrders = 10;
const totalProducts = 1000;
const { showCustomers, showProducts, showOrders } = this.state;
return (
<Card
title={ __( 'Store Performance', 'wc-admin' ) }
menu={ this.renderMenu() }
className="woocommerce-dashboard__store-performance"
>
<SummaryList>
{ showCustomers && (
<SummaryNumber
label={ __( 'New Customers', 'wc-admin' ) }
value={ '2' }
prevLabel={ __( 'Previous Week:', 'wc-admin' ) }
prevValue={ 3 }
delta={ -33 }
/>
) }
{ showProducts && (
<SummaryNumber
label={ __( 'Total Products', 'wc-admin' ) }
value={ totalProducts }
prevLabel={ __( 'Previous Week:', 'wc-admin' ) }
prevValue={ totalProducts }
delta={ 0 }
/>
) }
{ showOrders && (
<SummaryNumber
label={ __( 'Total Orders', 'wc-admin' ) }
value={ totalOrders }
prevLabel={ __( 'Previous Week:', 'wc-admin' ) }
prevValue={ totalOrders }
delta={ 0 }
/>
) }
</SummaryList>
</Card>
);
}
}
export default StorePerformance;