woocommerce/plugins/woocommerce-admin/client/analytics/report
Joshua T Flowers ab9038d329 Update table component to use wp card (https://github.com/woocommerce/woocommerce-admin/pull/5904)
* Use wp card in table components

* Migrate report styles to report stylesheet

* Fix table scroll shadow

* Fix pagination styling

* Handle PR feedback

* Move search and action styles to table

* Add margin between table actions

* Remove vertical dividers

* Update chart table border colors (https://github.com/woocommerce/woocommerce-admin/pull/5932)
2021-01-04 15:56:57 -05:00
..
categories Add/5349 trigger ces on filtering analytics (https://github.com/woocommerce/woocommerce-admin/pull/5649) 2020-11-24 15:18:50 -08:00
coupons Add/5349 trigger ces on filtering analytics (https://github.com/woocommerce/woocommerce-admin/pull/5649) 2020-11-24 15:18:50 -08:00
customers Customers: Update column heading for date registered. (https://github.com/woocommerce/woocommerce-admin/pull/5542) 2020-11-09 13:23:22 -08:00
downloads Use client side filter on the CSV download (https://github.com/woocommerce/woocommerce-admin/pull/5787) 2020-12-14 15:08:19 +10:00
orders Add Customer Type column to the Orders report table (https://github.com/woocommerce/woocommerce-admin/pull/5820) 2020-12-04 14:19:04 +10:00
products Add/5349 trigger ces on filtering analytics (https://github.com/woocommerce/woocommerce-admin/pull/5649) 2020-11-24 15:18:50 -08:00
revenue Remove wc api 🎉 (https://github.com/woocommerce/woocommerce-admin/pull/5075) 2020-09-04 09:45:40 +12:00
stock Fix a number of crashes that occur in reports when Gutenberg is active (https://github.com/woocommerce/woocommerce-admin/pull/5409) 2020-10-17 07:47:29 +13:00
taxes Add/5349 trigger ces on filtering analytics (https://github.com/woocommerce/woocommerce-admin/pull/5649) 2020-11-24 15:18:50 -08:00
variations Add/5349 trigger ces on filtering analytics (https://github.com/woocommerce/woocommerce-admin/pull/5649) 2020-11-24 15:18:50 -08:00
README.md Navigation: Introduce wc-admin registration client side navArgs (https://github.com/woocommerce/woocommerce-admin/pull/5773) 2020-12-03 11:56:24 +13:00
get-reports.js Navigation: Introduce wc-admin registration client side navArgs (https://github.com/woocommerce/woocommerce-admin/pull/5773) 2020-12-03 11:56:24 +13:00
index.js Items dataStore: Migrate from wc-api (https://github.com/woocommerce/woocommerce-admin/pull/5009) 2020-08-21 11:37:41 +12:00
style.scss Update table component to use wp card (https://github.com/woocommerce/woocommerce-admin/pull/5904) 2021-01-04 15:56:57 -05:00

README.md

Reports

The core reports offered by WooCommerce live in this folder. The Header is added automatically by the parent Report component, each individual component should contain just the report contents.

Extending Reports

New reports can be added by third-parties without altering woocommerce-admin. First, a page will need to be registered in PHP to populate menu items.

function register_page( $report_pages ) {
	$report_pages[] = array(
		'id'     => 'extension-example',
		'title'  => __( 'Example', 'plugin-domain' ),
		'parent' => 'woocommerce-analytics',
		'path'   => '/analytics/example',
	);
	return $report_pages;
}

add_filter( 'woocommerce_analytics_report_menu_items', 'register_page' );

Each menu item is defined by an array containing id, title, parent, and path.

  • report (string): The report's id.
  • title (string): The title shown in the sidebar.
  • parent (string): The item's parent in the navigational heirarchy.
  • path (string): The report's relative path.

Next, hook into the JavaScript reports filter, woocommerce_admin_reports_list, to add a report component.

addFilter(
	'woocommerce_admin_reports_list',
	'analytics/my-report',
	( pages ) => {
		return [
			...pages,
			{
				report: 'example',
				title: 'My Example Extension',
				component: Report,
				navArgs: {
					id: 'my-example-report',
				},
			},
		];
	}
);

Each report is defined by an object containing report, title, component, and optionally navArgs.

  • report (string): The path used to show the report, ex: /analytics/example
  • title (string): The title shown in the breadcrumbs & document title.
  • component (react component): The component containing the report content- everything on the page under the breadcrumbs header.
  • navArgs (object): Arguments used for the new navigation experience, typically used to supply a matching ID for server-side registered menu items.

The component will get the following props:

  • query (object): The query string for the current view, can be used to paginate reports, or sort/filter report data.
  • path (string): The exact path for this view.
  • pathMatch (string): The route matched for this view, should always be /analytics/:report.
  • params (object): This will contain the report from the path, which should match report in the page object.