168 lines
2.2 KiB
Markdown
168 lines
2.2 KiB
Markdown
`Chart` (component)
|
||
===================
|
||
|
||
A chart container using d3, to display timeseries data with an interactive legend.
|
||
|
||
Props
|
||
-----
|
||
|
||
### `data`
|
||
|
||
- Type: Array
|
||
- Default: `[]`
|
||
|
||
An array of data.
|
||
|
||
### `title`
|
||
|
||
- Type: String
|
||
- Default: null
|
||
|
||
A title describing this chart.
|
||
|
||
`D3Chart` (component)
|
||
=====================
|
||
|
||
A simple D3 line and bar chart component for timeseries data in React.
|
||
|
||
Props
|
||
-----
|
||
|
||
### `className`
|
||
|
||
- Type: String
|
||
- Default: null
|
||
|
||
Additional CSS classes.
|
||
|
||
### `colorScheme`
|
||
|
||
- Type: Function
|
||
- Default: null
|
||
|
||
A chromatic color function to be passed down to d3.
|
||
|
||
### `data`
|
||
|
||
- Type: Array
|
||
- Default: `[]`
|
||
|
||
An array of data.
|
||
|
||
### `height`
|
||
|
||
- Type: Number
|
||
- Default: `200`
|
||
|
||
Relative viewpoirt height of the `svg`.
|
||
|
||
### `legend`
|
||
|
||
- Type: Array
|
||
- Default: null
|
||
|
||
@todo Remove – not used?
|
||
|
||
### `margin`
|
||
|
||
- Type: Object
|
||
- bottom: Number
|
||
- left: Number
|
||
- right: Number
|
||
- top: Number
|
||
- Default: `{
|
||
bottom: 30,
|
||
left: 40,
|
||
right: 0,
|
||
top: 20,
|
||
}`
|
||
|
||
Margins for axis and chart padding.
|
||
|
||
### `orderedKeys`
|
||
|
||
- Type: Array
|
||
- Default: null
|
||
|
||
The list of labels for this chart.
|
||
|
||
### `type`
|
||
|
||
- Type: One of: 'bar', 'line'
|
||
- Default: `'line'`
|
||
|
||
Chart type of either `line` or `bar`.
|
||
|
||
### `width`
|
||
|
||
- Type: Number
|
||
- Default: `600`
|
||
|
||
Relative viewport width of the `svg`.
|
||
|
||
### `xFormat`
|
||
|
||
- Type: String
|
||
- Default: `'%Y-%m-%d'`
|
||
|
||
A datetime formatting string, passed to d3TimeFormat.
|
||
|
||
### `yFormat`
|
||
|
||
- Type: String
|
||
- Default: `',.0f'`
|
||
|
||
A number formatting string, passed to d3Format.
|
||
|
||
`Legend` (component)
|
||
====================
|
||
|
||
A legend specifically designed for the WooCommerce admin charts.
|
||
|
||
Props
|
||
-----
|
||
|
||
### `className`
|
||
|
||
- Type: String
|
||
- Default: null
|
||
|
||
Additional CSS classes.
|
||
|
||
### `colorScheme`
|
||
|
||
- Type: Function
|
||
- Default: null
|
||
|
||
A chromatic color function to be passed down to d3.
|
||
|
||
### `data`
|
||
|
||
- **Required**
|
||
- Type: Array
|
||
- Default: null
|
||
|
||
An array of `orderedKeys`.
|
||
|
||
### `handleLegendToggle`
|
||
|
||
- Type: Function
|
||
- Default: null
|
||
|
||
Handles `onClick` event.
|
||
|
||
### `handleLegendHover`
|
||
|
||
- Type: Function
|
||
- Default: null
|
||
|
||
Handles `onMouseEnter`/`onMouseLeave` events.
|
||
|
||
### `legendDirection`
|
||
|
||
- Type: One of: 'row', 'column'
|
||
- Default: `'row'`
|
||
|
||
Display legend items as a `row` or `column` inside a flex-box.
|
||
|