Steve-Dee-Designs
/
woocommerce
mirror of https://github.com/woocommerce/woocommerce.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Fix empty chart and summary numbers when searching in the Categories report (https://github.com/woocommerce/woocommerce-admin/pull/1698)

This commit is contained in:
Albert Juhé Lluveras 2019-02-27 17:28:18 +01:00 committed by GitHub
parent 4e4f04b8d8
commit a8ee12e1f9
4 changed files with 45 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
plugins/woocommerce-admin/client/analytics/components/report-chart/index.js
View File

@ -183,6 +183,11 @@ ReportChart.propTypes = {
* Label describing the legend items.
*/
itemsLabel: PropTypes.string,
/**
* Allows specifying a property different from the `endpoint` that will be used
* to limit the items when there is an active search.
*/
limitProperty: PropTypes.string,
/**
* `items-comparison` (default) or `time-comparison`, this is used to generate correct
* ARIA properties.
@ -230,7 +235,8 @@ ReportChart.defaultProps = {
export default compose(
withSelect( ( select, props ) => {
const { endpoint, filters, isRequesting, query } = props;
const { endpoint, filters, isRequesting, limitProperty, query } = props;
const limitBy = limitProperty || endpoint;
const chartMode = props.mode || getChartMode( filters, query ) || 'time-comparison';
if ( isRequesting ) {
@ -239,7 +245,7 @@ export default compose(
};
}
if ( query.search && ! ( query[ endpoint ] && query[ endpoint ].length ) ) {
if ( query.search && ! ( query[ limitBy ] && query[ limitBy ].length ) ) {
return {
emptySearchResults: true,
mode: chartMode,
@ -247,15 +253,15 @@ export default compose(
}
if ( 'item-comparison' === chartMode ) {
const primaryData = getReportChartData( endpoint, 'primary', query, select );
const primaryData = getReportChartData( endpoint, 'primary', query, select, limitBy );
return {
mode: chartMode,
primaryData,
};
}
const primaryData = getReportChartData( endpoint, 'primary', query, select );
const secondaryData = getReportChartData( endpoint, 'secondary', query, select );
const primaryData = getReportChartData( endpoint, 'primary', query, select, limitBy );
const secondaryData = getReportChartData( endpoint, 'secondary', query, select, limitBy );
return {
mode: chartMode,
primaryData,

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

@ -108,6 +108,11 @@ ReportSummary.propTypes = {
* doesn't exist, an error will be shown to the user with `ReportError`.
*/
endpoint: PropTypes.string.isRequired,
/**
* Allows specifying a property different from the `endpoint` that will be used
* to limit the items when there is an active search.
*/
limitProperty: PropTypes.string,
/**
* The query string represented in object form.
*/
@ -144,19 +149,20 @@ ReportSummary.defaultProps = {
export default compose(
withSelect( ( select, props ) => {
const { endpoint, isRequesting, query } = props;
const { endpoint, isRequesting, limitProperty, query } = props;
const limitBy = limitProperty || endpoint;
if ( isRequesting ) {
return {};
}
if ( query.search && ! ( query[ endpoint ] && query[ endpoint ].length ) ) {
if ( query.search && ! ( query[ limitBy ] && query[ limitBy ].length ) ) {
return {
emptySearchResults: true,
};
}
const summaryData = getSummaryNumbers( endpoint, query, select );
const summaryData = getSummaryNumbers( endpoint, query, select, limitBy );
return {
summaryData,

2
plugins/woocommerce-admin/client/analytics/report/categories/index.js
View File

@ -55,6 +55,7 @@ export default class CategoriesReport extends Component {
charts={ charts }
endpoint="products"
isRequesting={ isRequesting }
limitProperty="categories"
query={ chartQuery }
selectedChart={ getSelectedChart( query.chart, charts ) }
/>
@ -63,6 +64,7 @@ export default class CategoriesReport extends Component {
charts={ charts }
mode={ mode }
endpoint="products"
limitProperty="categories"
path={ path }
query={ chartQuery }
isRequesting={ isRequesting }

42
plugins/woocommerce-admin/client/wc-api/reports/utils.js
View File

@ -36,10 +36,11 @@ const reportConfigs = {
taxes: taxesConfig,
};
export function getFilterQuery( endpoint, query ) {
export function getFilterQuery( endpoint, query, limitBy ) {
if ( query.search ) {
const limitProperty = limitBy || endpoint;
return {
[ endpoint ]: query[ endpoint ],
[ limitProperty ]: query[ limitProperty ],
};
}
@ -164,15 +165,16 @@ export function isReportDataEmpty( report, endpoint ) {
/**
* Constructs and returns a query associated with a Report data request.
*
* @param {String} endpoint Report API Endpoint
* @param {String} dataType 'primary' or 'secondary'.
* @param {Object} query query parameters in the url.
* @param {String} endpoint Report API Endpoint
* @param {String} dataType 'primary' or 'secondary'.
* @param {Object} query Query parameters in the url.
* @param {String} [limitBy] Property used to limit the results. It will be used in the API call to send the IDs.
* @returns {Object} data request query parameters.
*/
function getRequestQuery( endpoint, dataType, query ) {
function getRequestQuery( endpoint, dataType, query, limitBy ) {
const datesFromQuery = getCurrentDates( query );
const interval = getIntervalForQuery( query );
const filterQuery = getFilterQuery( endpoint, query );
const filterQuery = getFilterQuery( endpoint, query, limitBy );
const end = datesFromQuery[ dataType ].before;
const noIntervals = includes( noIntervalEndpoints, endpoint );
@ -192,12 +194,13 @@ function getRequestQuery( endpoint, dataType, query ) {
/**
* Returns summary number totals needed to render a report page.
*
* @param {String} endpoint Report API Endpoint
* @param {Object} query query parameters in the url
* @param {Object} select Instance of @wordpress/select
* @return {Object} Object containing summary number responses.
* @param {String} endpoint Report API Endpoint
* @param {Object} query Query parameters in the url
* @param {Object} select Instance of @wordpress/select
* @param {String} [limitBy] Property used to limit the results. It will be used in the API call to send the IDs.
* @return {Object} Object containing summary number responses.
*/
export function getSummaryNumbers( endpoint, query, select ) {
export function getSummaryNumbers( endpoint, query, select, limitBy ) {
const { getReportStats, getReportStatsError, isReportStatsRequesting } = select( 'wc-api' );
const response = {
isRequesting: false,
@ -208,7 +211,7 @@ export function getSummaryNumbers( endpoint, query, select ) {
},
};
const primaryQuery = getRequestQuery( endpoint, 'primary', query );
const primaryQuery = getRequestQuery( endpoint, 'primary', query, limitBy );
const primary = getReportStats( endpoint, primaryQuery );
if ( isReportStatsRequesting( endpoint, primaryQuery ) ) {
return { ...response, isRequesting: true };
@ -234,13 +237,14 @@ export function getSummaryNumbers( endpoint, query, select ) {
/**
* Returns all of the data needed to render a chart with summary numbers on a report page.
*
* @param {String} endpoint Report API Endpoint
* @param {String} dataType 'primary' or 'secondary'
* @param {Object} query query parameters in the url
* @param {Object} select Instance of @wordpress/select
* @param {String} endpoint Report API Endpoint
* @param {String} dataType 'primary' or 'secondary'
* @param {Object} query Query parameters in the url
* @param {Object} select Instance of @wordpress/select
* @param {String} [limitBy] Property used to limit the results. It will be used in the API call to send the IDs.
* @return {Object} Object containing API request information (response, fetching, and error details)
*/
export function getReportChartData( endpoint, dataType, query, select ) {
export function getReportChartData( endpoint, dataType, query, select, limitBy ) {
const { getReportStats, getReportStatsError, isReportStatsRequesting } = select( 'wc-api' );
const response = {
@ -253,7 +257,7 @@ export function getReportChartData( endpoint, dataType, query, select ) {
},
};
const requestQuery = getRequestQuery( endpoint, dataType, query );
const requestQuery = getRequestQuery( endpoint, dataType, query, limitBy );
const stats = getReportStats( endpoint, requestQuery );
if ( isReportStatsRequesting( endpoint, requestQuery ) ) {