woocommerce/plugins/woocommerce-admin/client/components/chart

D3 Chart Component

A simple D3 line and bar chart component for timeseries data in React.

Usage

<D3Chart
	className="woocommerce-dashboard__*"
	data={ timeseries }
	height={ 200 }
	margin={ { bottom: 30, left: 40, right: 0, top: 20 } }
	type={ 'bar' }
	width={ 600 }
/>

Expected Data Format

This component accepts timeseries data prop in the following format (with dates following the ISO 8601 format):

[
	{
		date: 'YYYY-mm-dd', // string
		category1: value, // number
		category2: value, // number
		...
	},
	...
]

For example:

[
	{
		date: '2018-06-25',
		category1: 1234.56,
		category2: 9876,
		...
	},
	...
]

Props

Required props are marked with *.

Name	Type	Default	Description
data*	array	none	An array of data as specified above
height	number	200	Relative viewpoirt height of the svg
margin	object	{ bottom: 30, left: 40, right: 0, top: 20 }	Margins for axis and chart padding
orderedKeys	array	getOrderedKeys	Override for getOrderedKeys and used by the <Legend /> (below)
type*	string	line	Chart type of either line or bar
width	number	600	Relative viewport width of the svg

D3 Chart Legend

A legend specifically designed for the WooCommerce admin charts.

Usage

<Legend
	className={ 'woocommerce-legend' }
	data={ data }
	handleLegendHover={ this.handleLegendHover }
	handleLegendToggle={ this.handleLegendToggle }
	legendDirection={ legendDirection }
/>

Expected Data Format

This component needs to include the category keys present in the D3 Chart Component's orderedKeys, in fact, you should use the same orderedKeys for both the legend data and the chart.

The handleLegendHover could toggle the focus parameter to highlight the category that has the mouse over it.

The handleLegendToggle could toggle the visible parameter to hide/show the category that has been selected.

[
	{
		key: "Product", // string
		total: number, // number
		visible: true, // boolean
		focus: true, // boolean
	},
	...
]

For example:

[
	{
		date: 'Hoodie',
		total: 1234.56,
		visible: true,
		focus: true,
		...
	},
	...
]

Props

Required props are marked with *.

Name	Type	Default	Description
data*	array	none	An array of orderedKeys as specified above
handleLegendHover	function	none	Handles onMouseEnter/onMouseLeave events
handleLegendToggle	function	none	Handles onClick event
legendDirection	string	none	Display legend items as a row or column inside a flex-box