diff --git a/plugins/woocommerce-admin/client/analytics/report/categories/index.js b/plugins/woocommerce-admin/client/analytics/report/categories/index.js index 907039ecc6d..8921a31c373 100644 --- a/plugins/woocommerce-admin/client/analytics/report/categories/index.js +++ b/plugins/woocommerce-admin/client/analytics/report/categories/index.js @@ -14,6 +14,7 @@ import { ReportFilters } from '@woocommerce/components'; * Internal dependencies */ import { charts, filters } from './config'; +import CategoriesReportTable from './table'; import getSelectedChart from 'lib/get-selected-chart'; import ReportChart from 'analytics/components/report-chart'; import ReportSummary from 'analytics/components/report-summary'; @@ -38,6 +39,7 @@ export default class CategoriesReport extends Component { query={ query } selectedChart={ getSelectedChart( query.chart, charts ) } /> + ); } diff --git a/plugins/woocommerce-admin/client/analytics/report/categories/table.js b/plugins/woocommerce-admin/client/analytics/report/categories/table.js new file mode 100644 index 00000000000..91421dd69f3 --- /dev/null +++ b/plugins/woocommerce-admin/client/analytics/report/categories/table.js @@ -0,0 +1,141 @@ +/** @format */ +/** + * External dependencies + */ +import { __, _n } from '@wordpress/i18n'; +import { Component } from '@wordpress/element'; +import { map } from 'lodash'; + +/** + * WooCommerce dependencies + */ +import { Link } from '@woocommerce/components'; +import { formatCurrency, getCurrencyFormatDecimal } from '@woocommerce/currency'; + +/** + * Internal dependencies + */ +import ReportTable from 'analytics/components/report-table'; +import { numberFormat } from 'lib/number'; + +export default class CategoriesReportTable extends Component { + getHeadersContent() { + return [ + { + label: __( 'Category', 'wc-admin' ), + key: 'category', + required: true, + isLeftAligned: true, + isSortable: true, + }, + { + label: __( 'Items sold', 'wc-admin' ), + key: 'items_sold', + required: true, + defaultSort: true, + isSortable: true, + isNumeric: true, + }, + { + label: __( 'G. Revenue', 'wc-admin' ), + key: 'gross_revenue', + isSortable: true, + isNumeric: true, + }, + { + label: __( 'Products', 'wc-admin' ), + key: 'products_count', + isSortable: true, + isNumeric: true, + }, + { + label: __( 'Orders', 'wc-admin' ), + key: 'orders_count', + isSortable: true, + isNumeric: true, + }, + ]; + } + + getRowsContent( categories ) { + return map( categories, category => { + const { category_id, items_sold, gross_revenue, products_count, orders_count } = category; + + // @TODO it should link to the Products report filtered by category + const productsLink = ( + + { numberFormat( products_count ) } + + ); + + return [ + // @TODO it should be the category name, not the category ID + { + display: category_id, + value: category_id, + }, + { + display: numberFormat( items_sold ), + value: items_sold, + }, + { + display: formatCurrency( gross_revenue ), + value: getCurrencyFormatDecimal( gross_revenue ), + }, + { + display: productsLink, + value: products_count, + }, + { + display: numberFormat( orders_count ), + value: orders_count, + }, + ]; + } ); + } + + getSummary( totals ) { + if ( ! totals ) { + return []; + } + return [ + { + label: _n( 'category', 'categories', totals.categories_count, 'wc-admin' ), + value: numberFormat( totals.categories_count ), + }, + { + label: _n( 'item sold', 'items sold', totals.items_sold, 'wc-admin' ), + value: numberFormat( totals.items_sold ), + }, + { + label: __( 'gross revenue', 'wc-admin' ), + value: formatCurrency( totals.gross_revenue ), + }, + { + label: _n( 'orders', 'orders', totals.orders_count, 'wc-admin' ), + value: numberFormat( totals.orders_count ), + }, + ]; + } + + render() { + const { query } = this.props; + + return ( + + ); + } +}