Sort tabular data when selecting a Summary Number (https://github.com/woocommerce/woocommerce-admin/pull/1564)

* Sort tabular data when selecting a Summary Number

* Fix 'orderby' param in orders endpoint

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

@@ -61,8 +61,15 @@ export class ReportSummary extends Component {
 
 		const renderSummaryNumbers = ( { onToggle } ) =>
 			charts.map( chart => {
-				const { key, label, type } = chart;
+				const { key, order, orderby, label, type } = chart;
-				const href = getNewPath( { chart: key } );
+				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 );
 

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

@@ -13,16 +13,22 @@ export const charts = [
 	{
 		key: 'items_sold',
 		label: __( 'Items Sold', 'wc-admin' ),
+		order: 'desc',
+		orderby: 'items_sold',
 		type: 'number',
 	},
 	{
 		key: 'net_revenue',
 		label: __( 'Net Revenue', 'wc-admin' ),
+		order: 'desc',
+		orderby: 'net_revenue',
 		type: 'currency',
 	},
 	{
 		key: 'orders_count',
 		label: __( 'Orders Count', 'wc-admin' ),
+		order: 'desc',
+		orderby: 'orders_count',
 		type: 'number',
 	},
 ];

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

@@ -13,11 +13,15 @@ export const charts = [
 	{
 		key: 'orders_count',
 		label: __( 'Discounted Orders', 'wc-admin' ),
+		order: 'desc',
+		orderby: 'orders_count',
 		type: 'number',
 	},
 	{
 		key: 'amount',
 		label: __( 'Amount', 'wc-admin' ),
+		order: 'desc',
+		orderby: 'amount',
 		type: 'currency',
 	},
 ];

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

@@ -20,6 +20,8 @@ export const charts = [
 	{
 		key: 'net_revenue',
 		label: __( 'Net Revenue', 'wc-admin' ),
+		order: 'desc',
+		orderby: 'net_total',
 		type: 'currency',
 	},
 	{
@@ -30,6 +32,8 @@ export const charts = [
 	{
 		key: 'avg_items_per_order',
 		label: __( 'Average Items Per Order', 'wc-admin' ),
+		order: 'desc',
+		orderby: 'num_items_sold',
 		type: 'average',
 	},
 ];

plugins/woocommerce-admin/client/analytics/report/orders/table.js

@@ -45,7 +45,6 @@ export default class OrdersReportTable extends Component {
 				screenReaderLabel: __( 'Order ID', 'wc-admin' ),
 				key: 'id',
 				required: true,
-				isSortable: true,
 			},
 			{
 				label: __( 'Status', 'wc-admin' ),
@@ -68,9 +67,9 @@ export default class OrdersReportTable extends Component {
 			},
 			{
 				label: __( 'Items Sold', 'wc-admin' ),
-				key: 'items_sold',
+				key: 'num_items_sold',
 				required: false,
-				isSortable: false,
+				isSortable: true,
 				isNumeric: true,
 			},
 			{
@@ -83,9 +82,9 @@ export default class OrdersReportTable extends Component {
 			{
 				label: __( 'N. Revenue', 'wc-admin' ),
 				screenReaderLabel: __( 'Net Revenue', 'wc-admin' ),
-				key: 'net_revenue',
+				key: 'net_total',
 				required: true,
-				isSortable: false,
+				isSortable: true,
 				isNumeric: true,
 			},
 		];

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

@@ -13,16 +13,22 @@ export const charts = [
 	{
 		key: 'items_sold',
 		label: __( 'Items Sold', 'wc-admin' ),
+		order: 'desc',
+		orderby: 'items_sold',
 		type: 'number',
 	},
 	{
 		key: 'net_revenue',
 		label: __( 'Net Revenue', 'wc-admin' ),
+		order: 'desc',
+		orderby: 'net_revenue',
 		type: 'currency',
 	},
 	{
 		key: 'orders_count',
 		label: __( 'Orders Count', 'wc-admin' ),
+		order: 'desc',
+		orderby: 'orders_count',
 		type: 'number',
 	},
 ];

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

@@ -8,31 +8,41 @@ export const charts = [
 	{
 		key: 'gross_revenue',
 		label: __( 'Gross Revenue', 'wc-admin' ),
+		order: 'desc',
+		orderby: 'gross_revenue',
 		type: 'currency',
 	},
 	{
 		key: 'refunds',
 		label: __( 'Refunds', 'wc-admin' ),
+		order: 'desc',
+		orderby: 'refunds',
 		type: 'currency',
 	},
 	{
 		key: 'coupons',
 		label: __( 'Coupons', 'wc-admin' ),
+		order: 'desc',
+		orderby: 'coupons',
 		type: 'currency',
 	},
 	{
 		key: 'taxes',
 		label: __( 'Taxes', 'wc-admin' ),
+		order: 'desc',
+		orderby: 'taxes',
 		type: 'currency',
 	},
 	{
 		key: 'shipping',
 		label: __( 'Shipping', 'wc-admin' ),
+		orderby: 'shipping',
 		type: 'currency',
 	},
 	{
 		key: 'net_revenue',
 		label: __( 'Net Revenue', 'wc-admin' ),
+		orderby: 'net_revenue',
 		type: 'currency',
 	},
 ];

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

@@ -15,21 +15,29 @@ export const charts = [
 	{
 		key: 'total_tax',
 		label: __( 'Total Tax', 'wc-admin' ),
+		order: 'desc',
+		orderby: 'total_tax',
 		type: 'currency',
 	},
 	{
 		key: 'order_tax',
 		label: __( 'Order Tax', 'wc-admin' ),
+		order: 'desc',
+		orderby: 'order_tax',
 		type: 'currency',
 	},
 	{
 		key: 'shipping_tax',
 		label: __( 'Shipping Tax', 'wc-admin' ),
+		order: 'desc',
+		orderby: 'shipping_tax',
 		type: 'currency',
 	},
 	{
 		key: 'orders_count',
 		label: __( 'Orders Count', 'wc-admin' ),
+		order: 'desc',
+		orderby: 'orders_count',
 		type: 'number',
 	},
 ];

plugins/woocommerce-admin/includes/data-stores/class-wc-admin-reports-orders-data-store.php

@@ -228,6 +228,8 @@ class WC_Admin_Reports_Orders_Data_Store extends WC_Admin_Reports_Data_Store imp
 		if ( 'date' === $order_by ) {
 			return 'date_created';
 		}
+
+		return $order_by;
 	}
 
 	/**

plugins/woocommerce-admin/packages/components/src/table/index.js

@@ -59,7 +59,8 @@ class TableCard extends Component {
 	}
 
 	componentDidUpdate( { query: prevQuery, headers: prevHeaders } ) {
-		const { compareBy, headers, query } = this.props;
+		const { compareBy, headers, onColumnsChange, query } = this.props;
+		const { showCols } = this.state;
 
 		if ( query.filter || prevQuery.filter ) {
 			const prevIds = prevQuery.filter ? getIdsFromQuery( prevQuery[ compareBy ] ) : [];
@@ -79,6 +80,15 @@ class TableCard extends Component {
 			} );
 			/* eslint-enable react/no-did-update-set-state */
 		}
+		if ( query.orderby !== prevQuery.orderby && ! showCols.includes( query.orderby ) ) {
+			const newShowCols = showCols.concat( query.orderby );
+			/* eslint-disable react/no-did-update-set-state */
+			this.setState( {
+				showCols: newShowCols,
+			} );
+			/* eslint-enable react/no-did-update-set-state */
+			onColumnsChange( newShowCols );
+		}
 	}
 
 	getVisibleHeaders() {