History

Albert Juhé Lluveras a18a9cd89a Update tooltip title and labels in standard graphs (https://github.com/woocommerce/woocommerce-admin/pull/458 ) * Allow adding a label for each specific point in a chart * Update test fixtures * Update README with new data format * Simplify getPreviousDate function code * Update tooltip dates format * Add new prop to charts 'tooltipTitle' to override the date tooltip title * Fix totals not being calculated in charts legend * Fix JS error when hiding lines in chart * Fix a couple of issues with chart README * Add quotes around prop names * Remove unused variable * Remove colon after tooltip label		2018-09-20 16:28:22 +02:00
..
d3-base	line and bar icon buttons	2018-09-11 13:10:36 +02:00
test	Update tooltip title and labels in standard graphs (https://github.com/woocommerce/woocommerce-admin/pull/458 )	2018-09-20 16:28:22 +02:00
README.md	Update tooltip title and labels in standard graphs (https://github.com/woocommerce/woocommerce-admin/pull/458 )	2018-09-20 16:28:22 +02:00
charts.js	Update tooltip title and labels in standard graphs (https://github.com/woocommerce/woocommerce-admin/pull/458 )	2018-09-20 16:28:22 +02:00
example-hour.js	exmple-hour update	2018-09-06 11:40:29 +02:00
example.js	add smallcolorscale fractions for chromatic scaled colors	2018-09-10 15:59:14 +02:00
index.js	Update tooltip title and labels in standard graphs (https://github.com/woocommerce/woocommerce-admin/pull/458 )	2018-09-20 16:28:22 +02:00
legend.js	Chart Legend: Update checkbox styles to outline when unchecked (https://github.com/woocommerce/woocommerce-admin/pull/426 )	2018-09-19 16:41:13 +02:00
placeholder.js	Add loading indicators, error state, and EmptyContent to the revenue report. (#347 , woocommerce/woocommerce-admin#348 )	2018-09-05 12:45:49 -04:00
style.scss	Increase contrast of the tooltip title color (https://github.com/woocommerce/woocommerce-admin/pull/460 )	2018-09-20 16:21:21 +02:00
utils.js	Update tooltip title and labels in standard graphs (https://github.com/woocommerce/woocommerce-admin/pull/458 )	2018-09-20 16:28:22 +02:00

README.md

D3 Chart Component

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

Usage

<Chart
	data={ timeseries }
	dateParser={ '%Y-%m-%d' }
	tooltipFormat={ 'Date is %Y-%m-%d' }
	type={ 'bar' }
	xFormat={ '%d' }
	yFormat={ '.3s' }
/>

Expected Data Format

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

[
	{
		date: '%Y-%m-%d', // string in `dateParser` format (see below)
		category1: { label: 'label', value: value }, // string (optional), number
		category2: { label: 'label', value: value }, // string (optional), number
		...
	},
	...
]

For example:

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

Props

Required props are marked with *.

Name	Type	Default	Description
`data`*	`array`	none	An array of data as specified above
`dateParser`	`string`	`%Y-%m-%dT%H:%M:%S`	Format to parse datetimes in the data
`type`*	`string`	`line`	Chart type of either `line` or `bar`
`title`	`string`	none	Chart title
`tooltipFormat`	`string`	`%B %d, %Y`	Title and format of the tooltip title date if `tooltipTitle` is missing
`tooltipTitle`	`string`	``	Title and format of the tooltip title
`xFormat`	`string`	`%Y-%m-%d`	d3TimeFormat of the x-axis values
`yFormat`	`string`	`.3s`	d3Format of the y-axis values