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

115 lines
2.7 KiB
JavaScript
Raw Normal View History

/** @format */
/**
* External dependencies
*/
import { __ } from '@wordpress/i18n';
2018-08-01 19:07:17 +00:00
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() {
2018-08-01 19:07:17 +00:00
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 Component: Update to latest hifi design (https://github.com/woocommerce/woocommerce-admin/pull/237) * Add first pass + demo of updated SummaryNumber * Add new larger screen breakpoint * Remove the max-width from the content wrapper * Update previous label text * Fix the border colors/sizing * Create a mixin to generate the grid template pattern * Add green/red colors based on trend, with prop to reverse In some cases, a downward trend is good (ex, refunds), so we want to be able to color those green * Move selected number containers up to avoid the double-border * Document className logic, and apply 10-item layout to all cases of 10+ items * Remove layout notes * Update component docs, clean up optional displays * Update style of SummaryNumbers inside cards * Filter out any `false` or otherwise unrenderable children * Fix card borders * Update dashboard component to use new props * Check that prevValue is defined a prevValue of 0 was incorrectly outputting `0` for both label and value * Update no-change datapoint style * Update default data values Rather than hiding the prevValue/label or delta section if these are not passed through, use default N/A placeholders * Change SummaryList & SummaryNumber to a list of links Add active, hover, and focus styles * Add a short help text for screen reader users * Add href to README * Add the href prop to the readme example * Fix border colors The `nth-of-type` rules need to be on the `li` containers * Fix font-weights on value & delta * Wrap the previous label/value when the percentage wraps
2018-07-30 15:14:09 +00:00
<SummaryNumber
label={ __( 'New Customers', 'wc-admin' ) }
value={ '2' }
prevLabel={ __( 'Previous Week:', 'wc-admin' ) }
prevValue={ 3 }
delta={ -33 }
/>
) }
{ showProducts && (
SummaryNumber Component: Update to latest hifi design (https://github.com/woocommerce/woocommerce-admin/pull/237) * Add first pass + demo of updated SummaryNumber * Add new larger screen breakpoint * Remove the max-width from the content wrapper * Update previous label text * Fix the border colors/sizing * Create a mixin to generate the grid template pattern * Add green/red colors based on trend, with prop to reverse In some cases, a downward trend is good (ex, refunds), so we want to be able to color those green * Move selected number containers up to avoid the double-border * Document className logic, and apply 10-item layout to all cases of 10+ items * Remove layout notes * Update component docs, clean up optional displays * Update style of SummaryNumbers inside cards * Filter out any `false` or otherwise unrenderable children * Fix card borders * Update dashboard component to use new props * Check that prevValue is defined a prevValue of 0 was incorrectly outputting `0` for both label and value * Update no-change datapoint style * Update default data values Rather than hiding the prevValue/label or delta section if these are not passed through, use default N/A placeholders * Change SummaryList & SummaryNumber to a list of links Add active, hover, and focus styles * Add a short help text for screen reader users * Add href to README * Add the href prop to the readme example * Fix border colors The `nth-of-type` rules need to be on the `li` containers * Fix font-weights on value & delta * Wrap the previous label/value when the percentage wraps
2018-07-30 15:14:09 +00:00
<SummaryNumber
label={ __( 'Total Products', 'wc-admin' ) }
value={ totalProducts }
prevLabel={ __( 'Previous Week:', 'wc-admin' ) }
prevValue={ totalProducts }
delta={ 0 }
/>
) }
{ showOrders && (
<SummaryNumber
label={ __( 'Total Orders', 'wc-admin' ) }
SummaryNumber Component: Update to latest hifi design (https://github.com/woocommerce/woocommerce-admin/pull/237) * Add first pass + demo of updated SummaryNumber * Add new larger screen breakpoint * Remove the max-width from the content wrapper * Update previous label text * Fix the border colors/sizing * Create a mixin to generate the grid template pattern * Add green/red colors based on trend, with prop to reverse In some cases, a downward trend is good (ex, refunds), so we want to be able to color those green * Move selected number containers up to avoid the double-border * Document className logic, and apply 10-item layout to all cases of 10+ items * Remove layout notes * Update component docs, clean up optional displays * Update style of SummaryNumbers inside cards * Filter out any `false` or otherwise unrenderable children * Fix card borders * Update dashboard component to use new props * Check that prevValue is defined a prevValue of 0 was incorrectly outputting `0` for both label and value * Update no-change datapoint style * Update default data values Rather than hiding the prevValue/label or delta section if these are not passed through, use default N/A placeholders * Change SummaryList & SummaryNumber to a list of links Add active, hover, and focus styles * Add a short help text for screen reader users * Add href to README * Add the href prop to the readme example * Fix border colors The `nth-of-type` rules need to be on the `li` containers * Fix font-weights on value & delta * Wrap the previous label/value when the percentage wraps
2018-07-30 15:14:09 +00:00
value={ totalOrders }
prevLabel={ __( 'Previous Week:', 'wc-admin' ) }
prevValue={ totalOrders }
delta={ 0 }
/>
) }
</SummaryList>
</Card>
);
}
}
2018-08-01 19:07:17 +00:00
export default StorePerformance;