History

Robert Elliott f0069b4d48 reformatted README		2018-07-11 17:12:37 +02:00
..
test	move dummy into fixtures subfolder	2018-07-10 17:07:34 +02:00
README.md	reformatted README	2018-07-11 17:12:37 +02:00
index.js	move dummy js and add README	2018-07-10 16:09:47 +02:00
style.scss	bar chart and example	2018-07-09 15:35:12 +02:00
utils.js	JSDocs for chart component utils	2018-07-10 16:09:58 +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
`type`*	`string`	`line`	Chart type of either `line` or `bar`
`width`	`number`	`600`	Relative viewport width of the `svg`