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

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' },
+			},
 		],
 	},
 ];

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 (
 			<ReportTable
-				compareBy="product_cats"
+				compareBy="categories"
 				endpoint="categories"
 				getHeadersContent={ this.getHeadersContent }
 				getRowsContent={ this.getRowsContent }
 				getSummary={ this.getSummary }
 				itemIdField="category_id"
 				query={ query }
+				labels={ labels }
 				tableQuery={ {
 					orderby: query.orderby || 'items_sold',
 					order: query.order || 'desc',

plugins/woocommerce-admin/client/analytics/report/products/config.js

@@ -81,10 +81,10 @@ const filterConfig = {
 		},
 		{
 			label: __( 'Product Category Comparison', 'wc-admin' ),
-			value: 'compare-product_cats',
+			value: 'compare-categories',
 			chartMode: 'item-comparison',
 			settings: {
-				type: 'product_cats',
+				type: 'categories',
 				param: 'categories',
 				getLabels: getRequestByIdString( NAMESPACE + 'products/categories', category => ( {
 					id: category.id,

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 = '';

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';

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',