woocommerce/plugins/woocommerce-admin/client/analytics/components/report-summary/index.js

235 lines
5.7 KiB
JavaScript
Raw Normal View History

/**
* External dependencies
*/
import { __ } from '@wordpress/i18n';
import { Component } from '@wordpress/element';
import { compose } from '@wordpress/compose';
import { withSelect } from '@wordpress/data';
import PropTypes from 'prop-types';
import { getNewPath } from '@woocommerce/navigation';
import {
SummaryList,
SummaryListPlaceholder,
SummaryNumber,
} from '@woocommerce/components';
import { calculateDelta, formatValue } from '@woocommerce/number';
import { getSummaryNumbers, SETTINGS_STORE_NAME } from '@woocommerce/data';
import { getDateParamsFromQuery } from '@woocommerce/date';
import { recordEvent } from '@woocommerce/tracks';
/**
* Internal dependencies
*/
import ReportError from '../report-error';
import { CurrencyContext } from '../../../lib/currency-context';
/**
* Component to render summary numbers in reports.
*/
export class ReportSummary extends Component {
formatVal( val, type ) {
const { formatAmount, getCurrencyConfig } = this.context;
return type === 'currency'
? formatAmount( val )
: formatValue( getCurrencyConfig(), type, val );
}
getValues( key, type ) {
const { emptySearchResults, summaryData } = this.props;
const { totals } = summaryData;
const primaryTotal = totals.primary ? totals.primary[ key ] : 0;
const secondaryTotal = totals.secondary ? totals.secondary[ key ] : 0;
const primaryValue = emptySearchResults ? 0 : primaryTotal;
const secondaryValue = emptySearchResults ? 0 : secondaryTotal;
return {
delta: calculateDelta( primaryValue, secondaryValue ),
prevValue: this.formatVal( secondaryValue, type ),
value: this.formatVal( primaryValue, type ),
};
}
render() {
2019-07-02 10:05:37 +00:00
const {
charts,
query,
selectedChart,
summaryData,
endpoint,
report,
wp.data Settings refactor add data store for settings using wp.data add use-select-with-refresh example replace fresh-data usage with new settings data store for settings page Add data package move to packages Fix isDirty after save Add isBusy to primary button when saving update Readme remove comment readme to use useSelect Revert "update Readme" This reverts commit 7402fd49b8f384fde5878e0bee0616f0a87bb4f6. Data Layer: Settings page to use Settings store (https://github.com/woocommerce/woocommerce-admin/pull/3430) * Data Layer: Settings store as source of truth for settings page This reverts commit 7402fd49b8f384fde5878e0bee0616f0a87bb4f6. * fixup * save on reset * non mutable constants * add set/getSettings * save using setSettings * separate HOC * cleanup * remove settingsToData * withHydration * remove withSettings HOC * renmove useSettins for now * withSettingsHydration updates * Revert "withSettingsHydration updates" This reverts commit f2adf108fbe19b574978fea5925a1a18e7ed3007. * rename withSettingsHydration * redo withSettingsHydration simplification * restore * useSettings * render using useSettings * handleInputChange working * get setIsDirty working * saving works * reset and cleanup * cleanup * use snake case on hook files * use clearIsDirty * Avoid mutation on setting update * remove @todo * persiting -> isPersisting * better reducer ternaries * add wcSettings as arg to withSettingsHydration reset package-lock Settings: split out mutable wcAdminSettings (https://github.com/woocommerce/woocommerce-admin/pull/3675) Settings: handle async settings groups (https://github.com/woocommerce/woocommerce-admin/pull/3707)
2020-03-25 03:20:17 +00:00
defaultDateRange,
2019-07-02 10:05:37 +00:00
} = this.props;
const { isError, isRequesting } = summaryData;
if ( isError ) {
return <ReportError isError />;
}
if ( isRequesting ) {
return <SummaryListPlaceholder numberOfItems={ charts.length } />;
}
wp.data Settings refactor add data store for settings using wp.data add use-select-with-refresh example replace fresh-data usage with new settings data store for settings page Add data package move to packages Fix isDirty after save Add isBusy to primary button when saving update Readme remove comment readme to use useSelect Revert "update Readme" This reverts commit 7402fd49b8f384fde5878e0bee0616f0a87bb4f6. Data Layer: Settings page to use Settings store (https://github.com/woocommerce/woocommerce-admin/pull/3430) * Data Layer: Settings store as source of truth for settings page This reverts commit 7402fd49b8f384fde5878e0bee0616f0a87bb4f6. * fixup * save on reset * non mutable constants * add set/getSettings * save using setSettings * separate HOC * cleanup * remove settingsToData * withHydration * remove withSettings HOC * renmove useSettins for now * withSettingsHydration updates * Revert "withSettingsHydration updates" This reverts commit f2adf108fbe19b574978fea5925a1a18e7ed3007. * rename withSettingsHydration * redo withSettingsHydration simplification * restore * useSettings * render using useSettings * handleInputChange working * get setIsDirty working * saving works * reset and cleanup * cleanup * use snake case on hook files * use clearIsDirty * Avoid mutation on setting update * remove @todo * persiting -> isPersisting * better reducer ternaries * add wcSettings as arg to withSettingsHydration reset package-lock Settings: split out mutable wcAdminSettings (https://github.com/woocommerce/woocommerce-admin/pull/3675) Settings: handle async settings groups (https://github.com/woocommerce/woocommerce-admin/pull/3707)
2020-03-25 03:20:17 +00:00
const { compare } = getDateParamsFromQuery( query, defaultDateRange );
const renderSummaryNumbers = ( { onToggle } ) =>
charts.map( ( chart ) => {
const { key, order, orderby, label, type } = chart;
const newPath = { chart: key };
if ( orderby ) {
newPath.orderby = orderby;
}
if ( order ) {
newPath.order = order;
}
const href = getNewPath( newPath );
const isSelected = selectedChart.key === key;
const { delta, prevValue, value } = this.getValues( key, type );
return (
<SummaryNumber
key={ key }
delta={ delta }
href={ href }
label={ label }
prevLabel={
compare === 'previous_period'
? __( 'Previous Period:', 'woocommerce-admin' )
: __( 'Previous Year:', 'woocommerce-admin' )
}
prevValue={ prevValue }
selected={ isSelected }
value={ value }
2019-07-02 10:05:37 +00:00
onLinkClickCallback={ () => {
// Wider than a certain breakpoint, there is no dropdown so avoid calling onToggle.
if ( onToggle ) {
onToggle();
}
recordEvent( 'analytics_chart_tab_click', {
report: report || endpoint,
key,
} );
2019-07-02 10:05:37 +00:00
} }
/>
);
} );
return <SummaryList>{ renderSummaryNumbers }</SummaryList>;
}
}
ReportSummary.propTypes = {
/**
* Properties of all the charts available for that report.
*/
charts: PropTypes.array.isRequired,
/**
* The endpoint to use in API calls to populate the Summary Numbers.
* For example, if `taxes` is provided, data will be fetched from the report
* `taxes` endpoint (ie: `/wc-analytics/reports/taxes/stats`). If the provided endpoint
* doesn't exist, an error will be shown to the user with `ReportError`.
*/
endpoint: PropTypes.string.isRequired,
/**
* Allows specifying properties different from the `endpoint` that will be used
* to limit the items when there is an active search.
*/
limitProperties: PropTypes.array,
/**
* The query string represented in object form.
*/
query: PropTypes.object.isRequired,
/**
* Properties of the selected chart.
*/
selectedChart: PropTypes.shape( {
/**
* Key of the selected chart.
*/
key: PropTypes.string.isRequired,
2019-05-20 01:57:06 +00:00
/**
* Chart label.
*/
label: PropTypes.string.isRequired,
/**
* Order query argument.
*/
order: PropTypes.oneOf( [ 'asc', 'desc' ] ),
/**
* Order by query argument.
*/
orderby: PropTypes.string,
/**
* Number type for formatting.
*/
type: PropTypes.oneOf( [ 'average', 'number', 'currency' ] ).isRequired,
} ).isRequired,
/**
* Data to display in the SummaryNumbers.
*/
summaryData: PropTypes.object,
2019-07-02 10:05:37 +00:00
/**
* Report name, if different than the endpoint.
*/
report: PropTypes.string,
};
ReportSummary.defaultProps = {
summaryData: {
totals: {
primary: {},
secondary: {},
},
isError: false,
},
};
ReportSummary.contextType = CurrencyContext;
export default compose(
withSelect( ( select, props ) => {
const {
charts,
endpoint,
limitProperties,
query,
filters,
advancedFilters,
} = props;
const limitBy = limitProperties || [ endpoint ];
const hasLimitByParam = limitBy.some(
( item ) => query[ item ] && query[ item ].length
);
if ( query.search && ! hasLimitByParam ) {
return {
emptySearchResults: true,
};
}
const fields = charts && charts.map( ( chart ) => chart.key );
wp.data Settings refactor add data store for settings using wp.data add use-select-with-refresh example replace fresh-data usage with new settings data store for settings page Add data package move to packages Fix isDirty after save Add isBusy to primary button when saving update Readme remove comment readme to use useSelect Revert "update Readme" This reverts commit 7402fd49b8f384fde5878e0bee0616f0a87bb4f6. Data Layer: Settings page to use Settings store (https://github.com/woocommerce/woocommerce-admin/pull/3430) * Data Layer: Settings store as source of truth for settings page This reverts commit 7402fd49b8f384fde5878e0bee0616f0a87bb4f6. * fixup * save on reset * non mutable constants * add set/getSettings * save using setSettings * separate HOC * cleanup * remove settingsToData * withHydration * remove withSettings HOC * renmove useSettins for now * withSettingsHydration updates * Revert "withSettingsHydration updates" This reverts commit f2adf108fbe19b574978fea5925a1a18e7ed3007. * rename withSettingsHydration * redo withSettingsHydration simplification * restore * useSettings * render using useSettings * handleInputChange working * get setIsDirty working * saving works * reset and cleanup * cleanup * use snake case on hook files * use clearIsDirty * Avoid mutation on setting update * remove @todo * persiting -> isPersisting * better reducer ternaries * add wcSettings as arg to withSettingsHydration reset package-lock Settings: split out mutable wcAdminSettings (https://github.com/woocommerce/woocommerce-admin/pull/3675) Settings: handle async settings groups (https://github.com/woocommerce/woocommerce-admin/pull/3707)
2020-03-25 03:20:17 +00:00
const { woocommerce_default_date_range: defaultDateRange } = select(
SETTINGS_STORE_NAME
).getSetting( 'wc_admin', 'wcAdminSettings' );
2019-03-21 03:25:05 +00:00
const summaryData = getSummaryNumbers( {
endpoint,
query,
select,
limitBy,
filters,
advancedFilters,
wp.data Settings refactor add data store for settings using wp.data add use-select-with-refresh example replace fresh-data usage with new settings data store for settings page Add data package move to packages Fix isDirty after save Add isBusy to primary button when saving update Readme remove comment readme to use useSelect Revert "update Readme" This reverts commit 7402fd49b8f384fde5878e0bee0616f0a87bb4f6. Data Layer: Settings page to use Settings store (https://github.com/woocommerce/woocommerce-admin/pull/3430) * Data Layer: Settings store as source of truth for settings page This reverts commit 7402fd49b8f384fde5878e0bee0616f0a87bb4f6. * fixup * save on reset * non mutable constants * add set/getSettings * save using setSettings * separate HOC * cleanup * remove settingsToData * withHydration * remove withSettings HOC * renmove useSettins for now * withSettingsHydration updates * Revert "withSettingsHydration updates" This reverts commit f2adf108fbe19b574978fea5925a1a18e7ed3007. * rename withSettingsHydration * redo withSettingsHydration simplification * restore * useSettings * render using useSettings * handleInputChange working * get setIsDirty working * saving works * reset and cleanup * cleanup * use snake case on hook files * use clearIsDirty * Avoid mutation on setting update * remove @todo * persiting -> isPersisting * better reducer ternaries * add wcSettings as arg to withSettingsHydration reset package-lock Settings: split out mutable wcAdminSettings (https://github.com/woocommerce/woocommerce-admin/pull/3675) Settings: handle async settings groups (https://github.com/woocommerce/woocommerce-admin/pull/3707)
2020-03-25 03:20:17 +00:00
defaultDateRange,
fields,
2019-03-21 03:25:05 +00:00
} );
return {
summaryData,
wp.data Settings refactor add data store for settings using wp.data add use-select-with-refresh example replace fresh-data usage with new settings data store for settings page Add data package move to packages Fix isDirty after save Add isBusy to primary button when saving update Readme remove comment readme to use useSelect Revert "update Readme" This reverts commit 7402fd49b8f384fde5878e0bee0616f0a87bb4f6. Data Layer: Settings page to use Settings store (https://github.com/woocommerce/woocommerce-admin/pull/3430) * Data Layer: Settings store as source of truth for settings page This reverts commit 7402fd49b8f384fde5878e0bee0616f0a87bb4f6. * fixup * save on reset * non mutable constants * add set/getSettings * save using setSettings * separate HOC * cleanup * remove settingsToData * withHydration * remove withSettings HOC * renmove useSettins for now * withSettingsHydration updates * Revert "withSettingsHydration updates" This reverts commit f2adf108fbe19b574978fea5925a1a18e7ed3007. * rename withSettingsHydration * redo withSettingsHydration simplification * restore * useSettings * render using useSettings * handleInputChange working * get setIsDirty working * saving works * reset and cleanup * cleanup * use snake case on hook files * use clearIsDirty * Avoid mutation on setting update * remove @todo * persiting -> isPersisting * better reducer ternaries * add wcSettings as arg to withSettingsHydration reset package-lock Settings: split out mutable wcAdminSettings (https://github.com/woocommerce/woocommerce-admin/pull/3675) Settings: handle async settings groups (https://github.com/woocommerce/woocommerce-admin/pull/3707)
2020-03-25 03:20:17 +00:00
defaultDateRange,
};
} )
)( ReportSummary );