Enhancement/top customers (https://github.com/woocommerce/woocommerce-admin/pull/1858)

* Added a New widget on dashboard of Top Customers.

* Remove unused props and clean up.

* Format display value for orders count.

plugins/woocommerce-admin/client/dashboard/leaderboards/index.js

@@ -22,6 +22,7 @@ import withSelect from 'wc-api/with-select';
 import TopSellingCategories from './top-selling-categories';
 import TopSellingProducts from './top-selling-products';
 import TopCoupons from './top-coupons';
+import TopCustomers from "./top-customers";
 import './style.scss';
 
 class Leaderboards extends Component {
@@ -69,6 +70,10 @@ class Leaderboards extends Component {
 				key: 'top-coupons',
 				label: __( 'Top Coupons', 'woocommerce-admin' ),
 			},
+			{
+				key: 'top-customers',
+				label: __( 'Top Customers', 'woocommerce-admin' ),
+			},
 		];
 		return (
 			<EllipsisMenu
@@ -127,6 +132,9 @@ class Leaderboards extends Component {
 						{ ! hiddenLeaderboardKeys.includes( 'top-coupons' ) && (
 							<TopCoupons query={ query } totalRows={ rowsPerTable } />
 						) }
+						{ ! hiddenLeaderboardKeys.includes( 'top-customers' ) && (
+							<TopCustomers query={ query } totalRows={ rowsPerTable } />
+						) }
 					</div>
 				</div>
 			</Fragment>

plugins/woocommerce-admin/client/dashboard/leaderboards/top-customers.js

@@ -0,0 +1,111 @@
+/** @format */
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { Component } from '@wordpress/element';
+import { map } from 'lodash';
+
+/**
+ * WooCommerce dependencies
+ */
+import { formatCurrency, getCurrencyFormatDecimal } from '@woocommerce/currency';
+import { getNewPath, getPersistedQuery } from '@woocommerce/navigation';
+import { Link } from '@woocommerce/components';
+import { numberFormat } from '@woocommerce/number';
+
+/**
+ * Internal dependencies
+ */
+import Leaderboard from 'analytics/components/leaderboard';
+
+export class TopCustomers extends Component {
+    constructor( props ) {
+        super( props );
+
+        this.getRowsContent = this.getRowsContent.bind( this );
+        this.getHeadersContent = this.getHeadersContent.bind( this );
+    }
+
+    getHeadersContent() {
+        return [
+            {
+                label: __( 'Customer Name', 'woocommerce-admin' ),
+                key: 'name',
+                required: true,
+                isLeftAligned: true,
+                isSortable: false,
+            },
+            {
+                label: __( 'Orders', 'woocommerce-admin' ),
+                key: 'orders_count',
+                required: true,
+                defaultSort: true,
+                isSortable: false,
+                isNumeric: true,
+            },
+            {
+                label: __( 'Total Spend', 'woocommerce-admin' ),
+                key: 'total_spend',
+                isSortable: false,
+                isNumeric: true,
+            },
+        ];
+    }
+
+    getRowsContent( data ) {
+        const { query } = this.props;
+        const persistedQuery = getPersistedQuery( query );
+        return map( data, row => {
+            const { id, total_spend, name, orders_count } = row;
+
+            const customerUrl = getNewPath( persistedQuery, 'analytics/customers', {
+                filter: 'single_customer',
+                customers: id,
+            } );
+            const customerLink = (
+                <Link href={ customerUrl } type="wc-admin">
+                    { name }
+                </Link>
+            );
+
+            return [
+                {
+                    display: customerLink,
+                    value: name,
+                },
+                {
+                    display: numberFormat( orders_count ),
+                    value: orders_count,
+                },
+                {
+                    display: formatCurrency( total_spend ),
+                    value: getCurrencyFormatDecimal( total_spend ),
+                },
+            ];
+        } );
+    }
+
+    render() {
+        const { query, totalRows } = this.props;
+        const tableQuery = {
+            orderby: 'total_spend',
+            order: 'desc',
+            per_page: totalRows,
+            extended_info: false,
+        };
+
+        return (
+            <Leaderboard
+                endpoint="customers"
+                getHeadersContent={ this.getHeadersContent }
+                getRowsContent={ this.getRowsContent }
+                query={ query }
+                tableQuery={ tableQuery }
+                title={ __( 'Top Customers', 'woocommerce-admin' ) }
+             />
+        );
+    }
+}
+
+export default TopCustomers;