115 lines
2.6 KiB
Markdown
115 lines
2.6 KiB
Markdown
|
D3 Chart Component
|
||
|
|
===
|
||
|
|
|
||
|
|
A simple D3 line and bar chart component for timeseries data in React.
|
||
|
|
|
||
|
|
## Usage
|
||
|
|
|
||
|
|
```jsx
|
||
|
|
<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](https://en.wikipedia.org/wiki/ISO_8601)):
|
||
|
|
```
|
||
|
|
[
|
||
|
|
{
|
||
|
|
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
|
||
|
|
|
||
|
|
```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
|