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

237 lines
6.6 KiB
JavaScript
Raw Normal View History

/** @format */
/**
* External dependencies
*/
import { __, sprintf } from '@wordpress/i18n';
2018-08-01 19:07:17 +00:00
import { ToggleControl } from '@wordpress/components';
import { Component, Fragment } from '@wordpress/element';
import { compose } from '@wordpress/compose';
import { withDispatch } from '@wordpress/data';
import moment from 'moment';
import { find } from 'lodash';
2019-01-18 13:52:10 +00:00
/**
* WooCommerce dependencies
*/
import { getCurrentDates, appendTimestamp, getDateParamsFromQuery } from '@woocommerce/date';
import { getNewPath, getPersistedQuery } from '@woocommerce/navigation';
import { calculateDelta, formatValue } from '@woocommerce/number';
import { formatCurrency } from '@woocommerce/currency';
2019-01-18 13:52:10 +00:00
/**
* Internal dependencies
*/
import {
Card,
EllipsisMenu,
MenuItem,
MenuTitle,
SectionHeader,
SummaryList,
SummaryListPlaceholder,
SummaryNumber,
} from '@woocommerce/components';
import withSelect from 'wc-api/with-select';
import './style.scss';
class StorePerformance extends Component {
constructor( props ) {
super( props );
this.state = {
userPrefs: props.userPrefs || [],
};
this.toggle = this.toggle.bind( this );
}
toggle( statKey ) {
return () => {
this.setState( state => {
const prefs = [ ...state.userPrefs ];
let newPrefs = [];
if ( ! prefs.includes( statKey ) ) {
prefs.push( statKey );
newPrefs = prefs;
} else {
newPrefs = prefs.filter( pref => pref !== statKey );
}
this.props.updateCurrentUserData( {
dashboard_performance_indicators: newPrefs,
} );
return {
userPrefs: newPrefs,
};
} );
};
}
renderMenu() {
const { indicators } = this.props;
return (
<EllipsisMenu label={ __( 'Choose which analytics to display', 'wc-admin' ) }>
<MenuTitle>{ __( 'Display Stats:', 'wc-admin' ) }</MenuTitle>
{ indicators.map( ( indicator, i ) => {
const checked = ! this.state.userPrefs.includes( indicator.stat );
return (
<MenuItem onInvoke={ this.toggle( indicator.stat ) } key={ i }>
<ToggleControl
label={ sprintf( __( 'Show %s', 'wc-admin' ), indicator.label ) }
checked={ checked }
onChange={ this.toggle( indicator.stat ) }
/>
</MenuItem>
);
} ) }
</EllipsisMenu>
);
}
renderList() {
const {
query,
primaryRequesting,
secondaryRequesting,
primaryError,
secondaryError,
primaryData,
secondaryData,
userIndicators,
} = this.props;
if ( primaryRequesting || secondaryRequesting ) {
return <SummaryListPlaceholder numberOfItems={ userIndicators.length } />;
}
if ( primaryError || secondaryError ) {
return null;
}
const persistedQuery = getPersistedQuery( query );
const { compare } = getDateParamsFromQuery( query );
const prevLabel =
'previous_period' === compare
? __( 'Previous Period:', 'wc-admin' )
: __( 'Previous Year:', 'wc-admin' );
return (
<SummaryList>
{ () =>
userIndicators.map( ( indicator, i ) => {
const primaryItem = find( primaryData.data, data => data.stat === indicator.stat );
const secondaryItem = find( secondaryData.data, data => data.stat === indicator.stat );
if ( ! primaryItem || ! secondaryItem ) {
return null;
}
const href =
( primaryItem._links &&
primaryItem._links.report[ 0 ] &&
primaryItem._links.report[ 0 ].href ) ||
'';
const reportUrl =
( href && getNewPath( persistedQuery, href, { chart: primaryItem.chart } ) ) || '';
const isCurrency = 'currency' === primaryItem.format;
const delta = calculateDelta( primaryItem.value, secondaryItem.value );
const primaryValue = isCurrency
? formatCurrency( primaryItem.value )
: formatValue( primaryItem.format, primaryItem.value );
const secondaryValue = isCurrency
? formatCurrency( secondaryItem.value )
: formatValue( secondaryItem.format, secondaryItem.value );
return (
<SummaryNumber
key={ i }
href={ reportUrl }
label={ indicator.label }
value={ primaryValue }
prevLabel={ prevLabel }
prevValue={ secondaryValue }
delta={ delta }
/>
);
} )
}
</SummaryList>
);
}
render() {
return (
<Fragment>
<SectionHeader title={ __( 'Store Performance', 'wc-admin' ) } menu={ this.renderMenu() } />
<Card className="woocommerce-dashboard__store-performance">{ this.renderList() }</Card>
</Fragment>
);
}
}
export default compose(
withSelect( ( select, props ) => {
const { query } = props;
const {
getCurrentUserData,
getReportItems,
getReportItemsError,
isReportItemsRequesting,
} = select( 'wc-api' );
const userData = getCurrentUserData();
2019-01-18 17:10:25 +00:00
let userPrefs = userData.dashboard_performance_indicators;
// Set default values for user preferences if none is set.
// These columns are HIDDEN by default.
if ( ! userPrefs ) {
2019-01-18 20:11:38 +00:00
userPrefs = [ 'taxes/order_tax', 'taxes/shipping_tax', 'downloads/download_count' ];
2019-01-18 17:10:25 +00:00
}
const datesFromQuery = getCurrentDates( query );
const endPrimary = datesFromQuery.primary.before;
const endSecondary = datesFromQuery.secondary.before;
const indicators = wcSettings.dataEndpoints.performanceIndicators;
const userIndicators = indicators.filter( indicator => ! userPrefs.includes( indicator.stat ) );
const statKeys = userIndicators.map( indicator => indicator.stat ).join( ',' );
const primaryQuery = {
after: appendTimestamp( datesFromQuery.primary.after, 'start' ),
before: appendTimestamp( endPrimary, endPrimary.isSame( moment(), 'day' ) ? 'now' : 'end' ),
stats: statKeys,
};
const secondaryQuery = {
after: appendTimestamp( datesFromQuery.secondary.after, 'start' ),
before: appendTimestamp(
endSecondary,
endSecondary.isSame( moment(), 'day' ) ? 'now' : 'end'
),
stats: statKeys,
};
const primaryData = getReportItems( 'performance-indicators', primaryQuery );
const primaryError = getReportItemsError( 'performance-indicators', primaryQuery ) || null;
const primaryRequesting = isReportItemsRequesting( 'performance-indicators', primaryQuery );
const secondaryData = getReportItems( 'performance-indicators', secondaryQuery );
const secondaryError = getReportItemsError( 'performance-indicators', secondaryQuery ) || null;
const secondaryRequesting = isReportItemsRequesting( 'performance-indicators', secondaryQuery );
return {
userPrefs,
userIndicators,
indicators,
primaryData,
primaryError,
primaryRequesting,
secondaryData,
secondaryError,
secondaryRequesting,
};
} ),
withDispatch( dispatch => {
const { updateCurrentUserData } = dispatch( 'wc-api' );
return {
updateCurrentUserData,
};
} )
)( StorePerformance );