From 1ca1dba3e7e88e1e4c5c8173886c9ba5257134af Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Albert=20Juh=C3=A9=20Lluveras?= Date: Tue, 25 Dec 2018 10:28:20 +0100 Subject: [PATCH] Add Categories report filters (https://github.com/woocommerce/woocommerce-admin/pull/1167) * Add Categories report filters * Remove the option to sort categories by name, given that it's not supported by the endpoint --- .../analytics/report/categories/config.js | 38 ++++++++++++++++++- .../analytics/report/categories/table.js | 12 ++++-- .../analytics/report/products/config.js | 4 +- .../{product-cat.js => categories.js} | 2 +- .../src/search/autocompleters/index.js | 2 +- .../packages/components/src/search/index.js | 6 +-- 6 files changed, 52 insertions(+), 12 deletions(-) rename plugins/woocommerce-admin/packages/components/src/search/autocompleters/{product-cat.js => categories.js} (98%) diff --git a/plugins/woocommerce-admin/client/analytics/report/categories/config.js b/plugins/woocommerce-admin/client/analytics/report/categories/config.js index b6a57a79929..047d5c04561 100644 --- a/plugins/woocommerce-admin/client/analytics/report/categories/config.js +++ b/plugins/woocommerce-admin/client/analytics/report/categories/config.js @@ -4,6 +4,12 @@ */ import { __ } from '@wordpress/i18n'; +/** + * Internal dependencies + */ +import { getRequestByIdString } from 'lib/async-requests'; +import { NAMESPACE } from 'store/constants'; + export const charts = [ { key: 'items_sold', @@ -30,7 +36,37 @@ export const filters = [ showFilters: () => true, filters: [ { label: __( 'All Categories', 'wc-admin' ), value: 'all' }, - { label: __( 'Advanced Filters', 'wc-admin' ), value: 'advanced' }, + { + label: __( 'Comparison', 'wc-admin' ), + value: 'compare-categories', + chartMode: 'item-comparison', + settings: { + type: 'categories', + param: 'categories', + getLabels: getRequestByIdString( NAMESPACE + 'products/categories', cat => ( { + id: cat.id, + label: cat.name, + } ) ), + labels: { + helpText: __( 'Select at least two categories to compare', 'wc-admin' ), + placeholder: __( 'Search for categories to compare', 'wc-admin' ), + title: __( 'Compare Categories', 'wc-admin' ), + update: __( 'Compare', 'wc-admin' ), + }, + }, + }, + { + label: __( 'Top Categories by Items Sold', 'wc-admin' ), + value: 'top_items', + chartMode: 'item-comparison', + query: { orderby: 'items_sold', order: 'desc' }, + }, + { + label: __( 'Top Categories by Net Revenue', 'wc-admin' ), + value: 'top_revenue', + chartMode: 'item-comparison', + query: { orderby: 'net_revenue', order: 'desc' }, + }, ], }, ]; diff --git a/plugins/woocommerce-admin/client/analytics/report/categories/table.js b/plugins/woocommerce-admin/client/analytics/report/categories/table.js index 30ab59dd82c..1c79c973c44 100644 --- a/plugins/woocommerce-admin/client/analytics/report/categories/table.js +++ b/plugins/woocommerce-admin/client/analytics/report/categories/table.js @@ -34,7 +34,6 @@ class CategoriesReportTable extends Component { key: 'category', required: true, isLeftAligned: true, - isSortable: true, }, { label: __( 'Items sold', 'wc-admin' ), @@ -45,8 +44,7 @@ class CategoriesReportTable extends Component { isNumeric: true, }, { - label: __( 'G. Revenue', 'wc-admin' ), - screenReaderLabel: __( 'Gross Revenue', 'wc-admin' ), + label: __( 'Net Revenue', 'wc-admin' ), key: 'net_revenue', isSortable: true, isNumeric: true, @@ -125,15 +123,21 @@ class CategoriesReportTable extends Component { render() { const { query } = this.props; + const labels = { + helpText: __( 'Select at least two categories to compare', 'wc-admin' ), + placeholder: __( 'Search by category name', 'wc-admin' ), + }; + return ( ( { id: category.id, diff --git a/plugins/woocommerce-admin/packages/components/src/search/autocompleters/product-cat.js b/plugins/woocommerce-admin/packages/components/src/search/autocompleters/categories.js similarity index 98% rename from plugins/woocommerce-admin/packages/components/src/search/autocompleters/product-cat.js rename to plugins/woocommerce-admin/packages/components/src/search/autocompleters/categories.js index 1bcafd3ec30..75c32d26dfb 100644 --- a/plugins/woocommerce-admin/packages/components/src/search/autocompleters/product-cat.js +++ b/plugins/woocommerce-admin/packages/components/src/search/autocompleters/categories.js @@ -21,7 +21,7 @@ import { computeSuggestionMatch } from './utils'; * @type {Completer} */ export default { - name: 'product_cats', + name: 'categories', className: 'woocommerce-search__product-result', options( search ) { let payload = ''; diff --git a/plugins/woocommerce-admin/packages/components/src/search/autocompleters/index.js b/plugins/woocommerce-admin/packages/components/src/search/autocompleters/index.js index 7d4d2910d4a..20ce44c8c11 100644 --- a/plugins/woocommerce-admin/packages/components/src/search/autocompleters/index.js +++ b/plugins/woocommerce-admin/packages/components/src/search/autocompleters/index.js @@ -2,6 +2,7 @@ /** * Export all autocompleters */ +export { default as productCategory } from './categories'; export { default as countries } from './countries'; export { default as coupons } from './coupons'; export { default as customers } from './customers'; @@ -9,7 +10,6 @@ export { default as downloadIps } from './download-ips'; export { default as emails } from './emails'; export { default as orders } from './orders'; export { default as product } from './product'; -export { default as productCategory } from './product-cat'; export { default as taxes } from './taxes'; export { default as usernames } from './usernames'; export { default as variations } from './variations'; diff --git a/plugins/woocommerce-admin/packages/components/src/search/index.js b/plugins/woocommerce-admin/packages/components/src/search/index.js index ecfe34bc401..09375e3919c 100644 --- a/plugins/woocommerce-admin/packages/components/src/search/index.js +++ b/plugins/woocommerce-admin/packages/components/src/search/index.js @@ -78,6 +78,8 @@ class Search extends Component { getAutocompleter() { switch ( this.props.type ) { + case 'categories': + return productCategory; case 'countries': return countries; case 'coupons': @@ -92,8 +94,6 @@ class Search extends Component { return orders; case 'products': return product; - case 'product_cats': - return productCategory; case 'taxes': return taxes; case 'usernames': @@ -241,6 +241,7 @@ Search.propTypes = { * The object type to be used in searching. */ type: PropTypes.oneOf( [ + 'categories', 'countries', 'coupons', 'customers', @@ -248,7 +249,6 @@ Search.propTypes = { 'emails', 'orders', 'products', - 'product_cats', 'taxes', 'usernames', 'variations',