Adds UI wiring for Catgories chart and summary (https://github.com/woocommerce/woocommerce-admin/pull/725)

* Adds UI wiring for Catgories chart and summary

* Use new format for charts

* Use swagger api

* Get rid of store references

* Final touch ups

* Seperate out WooCommerce dep

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

@@ -0,0 +1,41 @@
+/** @format */
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+export const charts = [
+	{
+		key: 'orders_count',
+		label: __( 'Orders Count', 'wc-admin' ),
+		type: 'number',
+	},
+	{
+		key: 'gross_revenue',
+		label: __( 'Gross Revenue', 'wc-admin' ),
+		type: 'currency',
+	},
+	{
+		key: 'items_sold',
+		label: __( 'Items Sold', 'wc-admin' ),
+		type: 'number',
+	},
+	{
+		key: 'products_count',
+		label: __( 'Number of Products', 'wc-admin' ),
+		type: 'number',
+	},
+];
+
+export const filters = [
+	{
+		label: __( 'Show', 'wc-admin' ),
+		staticParams: [ 'chart' ],
+		param: 'filter',
+		showFilters: () => true,
+		filters: [
+			{ label: __( 'All Categories', 'wc-admin' ), value: 'all' },
+			{ label: __( 'Advanced Filters', 'wc-admin' ), value: 'advanced' },
+		],
+	},
+];

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

@@ -0,0 +1,48 @@
+/** @format */
+/**
+ * External dependencies
+ */
+import { Component, Fragment } from '@wordpress/element';
+import PropTypes from 'prop-types';
+
+/**
+ * WooCommerce dependencies
+ */
+import { ReportFilters } from '@woocommerce/components';
+
+/**
+ * Internal dependencies
+ */
+import { charts, filters } from './config';
+import getSelectedChart from 'lib/get-selected-chart';
+import ReportChart from 'analytics/components/report-chart';
+import ReportSummary from 'analytics/components/report-summary';
+
+export default class CategoriesReport extends Component {
+	render() {
+		const { query, path } = this.props;
+
+		return (
+			<Fragment>
+				<ReportFilters query={ query } path={ path } filters={ filters } />
+				<ReportSummary
+					charts={ charts }
+					endpoint="categories"
+					query={ query }
+					selectedChart={ getSelectedChart( query.chart, charts ) }
+				/>
+				<ReportChart
+					charts={ charts }
+					endpoint="categories"
+					path={ path }
+					query={ query }
+					selectedChart={ getSelectedChart( query.chart, charts ) }
+				/>
+			</Fragment>
+		);
+	}
+}
+
+CategoriesReport.propTypes = {
+	query: PropTypes.object.isRequired,
+};

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

@@ -21,6 +21,7 @@ import Header from 'header';
 import OrdersReport from './orders';
 import ProductsReport from './products';
 import RevenueReport from './revenue';
+import CategoriesReport from './categories';
 import CouponsReport from './coupons';
 import TaxesReport from './taxes';
 
@@ -43,6 +44,11 @@ const getReports = () => {
 			title: __( 'Orders', 'wc-admin' ),
 			component: OrdersReport,
 		},
+		{
+			report: 'categories',
+			title: __( 'Categories', 'wc-admin' ),
+			component: CategoriesReport,
+		},
 		{
 			report: 'coupons',
 			title: __( 'Coupons', 'wc-admin' ),

plugins/woocommerce-admin/client/store/reports/stats/resolvers.js

@@ -28,7 +28,7 @@ export default {
 		let apiPath = endpoint + stringifyQuery( query );
 
 		// TODO: Remove once swagger endpoints are phased out.
-		const swaggerEndpoints = [ 'coupons', 'taxes' ];
+		const swaggerEndpoints = [ 'categories', 'coupons', 'taxes' ];
 		if ( swaggerEndpoints.indexOf( endpoint ) >= 0 ) {
 			apiPath = SWAGGERNAMESPACE + 'reports/' + endpoint + '/stats' + stringifyQuery( query );
 			try {

plugins/woocommerce-admin/client/store/reports/utils.js

@@ -15,12 +15,14 @@ import { flattenFilters, getActiveFiltersFromQuery, getUrlKey } from '@woocommer
  * Internal dependencies
  */
 import { MAX_PER_PAGE } from 'store/constants';
+import * as categoriesConfig from 'analytics/report/categories/config';
 import * as couponsConfig from 'analytics/report/coupons/config';
 import * as ordersConfig from 'analytics/report/orders/config';
 import * as productsConfig from 'analytics/report/products/config';
 import * as taxesConfig from 'analytics/report/taxes/config';
 
 const reportConfigs = {
+	categories: categoriesConfig,
 	coupons: couponsConfig,
 	orders: ordersConfig,
 	products: productsConfig,

plugins/woocommerce-admin/lib/admin.php

@@ -125,6 +125,14 @@ function wc_admin_register_pages() {
 		)
 	);
 
+	wc_admin_register_page(
+		array(
+			'title'  => __( 'Categories', 'wc-admin' ),
+			'parent' => '/analytics/revenue',
+			'path'   => '/analytics/categories',
+		)
+	);
+
 	if ( defined( 'WP_DEBUG' ) && WP_DEBUG && defined( 'SCRIPT_DEBUG' ) && SCRIPT_DEBUG ) {
 		wc_admin_register_page(
 			array(