History

Kelly Dwan dec97d178e Components: Export reusable components to a separate file + global (https://github.com/woocommerce/woocommerce-admin/pull/297 ) * Importing all components from a root components file * Update Ratings component to avoid circular dependencies, fix tests * Export components on `wc.components`, use this for importing * Move react-dates initialize to the components file * Push query changes to history Fixes an issues where native a links do not update the query in `history` * Update test config for new @woocommerce/components path * Update chart components import * Merge simple/complex & alphabetize by first exported name * Add a readme with info about how to call these components		2018-08-20 17:18:13 -04:00
..
d3-base	rebase with master after some afk	2018-08-13 12:24:10 +02:00
test	rescale based on selections	2018-08-13 12:24:10 +02:00
README.md	init for legends PR	2018-07-25 17:04:03 +02:00
charts.js	fix some testy black hole color scale oddities	2018-08-13 12:24:11 +02:00
example.js	Components: Export reusable components to a separate file + global (https://github.com/woocommerce/woocommerce-admin/pull/297 )	2018-08-20 17:18:13 -04:00
index.js	add title	2018-08-13 13:09:44 +02:00
legend.js	fix some testy black hole color scale oddities	2018-08-13 12:24:11 +02:00
style.scss	Merge pull request woocommerce/woocommerce-admin#291 from woocommerce/add/chart-title	2018-08-15 09:24:30 +02:00
utils.js	fix some testy black hole color scale oddities	2018-08-13 12:24:11 +02:00

README.md

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