updated README

plugins/woocommerce-admin/client/components/chart/README.md

@@ -6,13 +6,12 @@ A simple D3 line and bar chart component for timeseries data in React.
 ## Usage
 
 ```jsx
-<D3Chart
-	className="woocommerce-dashboard__*"
+<Chart
 	data={ timeseries }
-	height={ 200 }
-	margin={ { bottom: 30, left: 40, right: 0, top: 20 } }
+	tooltipFormat={ 'Date is %Y-%m-%d' }
 	type={ 'bar' }
-	width={ 600 }
+	xFormat={ '%d' }
+	yFormat={ '.3s' }
 />
 ```
 
@@ -21,7 +20,7 @@ This component accepts timeseries `data` prop in the following format (with date
 ```
 [
 	{
-		date: 'YYYY-mm-dd', // string
+		date: '%Y-%m-%dT%H:%M:%S', // string
 		category1: value, // number
 		category2: value, // number
 		...
@@ -33,7 +32,7 @@ For example:
 ```
 [
 	{
-		date: '2018-06-25',
+		date: '2018-06-25T00:00:00',
 		category1: 1234.56,
 		category2: 9876,
 		...
@@ -47,68 +46,9 @@ 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)
+`data`* | `array` | none | An array of data as specified above(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
-
-```jsx
-<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
+`title` | `string` | none | Chart title
+`tooltipFormat` | `string` | `%Y-%m-%d` | 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

plugins/woocommerce-admin/client/components/chart/utils.js

@@ -17,7 +17,7 @@ import { mouse as d3Mouse, select as d3Select } from 'd3-selection';
 import { line as d3Line } from 'd3-shape';
 import { utcParse as d3UTCParse } from 'd3-time-format';
 
-export const parseDate = d3UTCParse( '%Y-%m-%dT%H:%M:%SZ' );
+export const parseDate = d3UTCParse( '%Y-%m-%dT%H:%M:%S' );
 
 /**
  * Describes `getUniqueKeys`