211 lines
3.3 KiB
Markdown
211 lines
3.3 KiB
Markdown
|
`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.
|
||
|
|
|
||
|
|
### `dateParser`
|
||
|
|
|
||
|
|
- Type: String
|
||
|
|
- Default: `'%Y-%m-%dT%H:%M:%S'`
|
||
|
|
|
||
|
|
Format to parse dates into d3 time format
|
||
|
|
|
||
|
|
### `height`
|
||
|
|
|
||
|
|
- Type: Number
|
||
|
|
- Default: `200`
|
||
|
|
|
||
|
|
Height of the `svg`.
|
||
|
|
|
||
|
|
### `interval`
|
||
|
|
|
||
|
|
- Type: One of: 'hour', 'day', 'week', 'month', 'quarter', 'year'
|
||
|
|
- Default: null
|
||
|
|
|
||
|
|
Interval specification (hourly, daily, weekly etc.)
|
||
|
|
|
||
|
|
### `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.
|
||
|
|
|
||
|
|
### `mode`
|
||
|
|
|
||
|
|
- Type: One of: 'item-comparison', 'time-comparison'
|
||
|
|
- Default: `'time-comparison'`
|
||
|
|
|
||
|
|
`items-comparison` (default) or `time-comparison`, this is used to generate correct
|
||
|
|
ARIA properties.
|
||
|
|
|
||
|
|
### `orderedKeys`
|
||
|
|
|
||
|
|
- Type: Array
|
||
|
|
- Default: null
|
||
|
|
|
||
|
|
The list of labels for this chart.
|
||
|
|
|
||
|
|
### `tooltipLabelFormat`
|
||
|
|
|
||
|
|
- Type: One of type: string, func
|
||
|
|
- Default: `'%B %d, %Y'`
|
||
|
|
|
||
|
|
A datetime formatting string or overriding function to format the tooltip label.
|
||
|
|
|
||
|
|
### `tooltipValueFormat`
|
||
|
|
|
||
|
|
- Type: One of type: string, func
|
||
|
|
- Default: `','`
|
||
|
|
|
||
|
|
A number formatting string or function to format the value displayed in the tooltips.
|
||
|
|
|
||
|
|
### `tooltipPosition`
|
||
|
|
|
||
|
|
- Type: One of: 'below', 'over'
|
||
|
|
- Default: `'over'`
|
||
|
|
|
||
|
|
The position where to render the tooltip can be `over` the chart or `below` the chart.
|
||
|
|
|
||
|
|
### `tooltipTitle`
|
||
|
|
|
||
|
|
- Type: String
|
||
|
|
- Default: null
|
||
|
|
|
||
|
|
A string to use as a title for the tooltip. Takes preference over `tooltipFormat`.
|
||
|
|
|
||
|
|
### `type`
|
||
|
|
|
||
|
|
- Type: One of: 'bar', 'line'
|
||
|
|
- Default: `'line'`
|
||
|
|
|
||
|
|
Chart type of either `line` or `bar`.
|
||
|
|
|
||
|
|
### `width`
|
||
|
|
|
||
|
|
- Type: Number
|
||
|
|
- Default: `600`
|
||
|
|
|
||
|
|
Width of the `svg`.
|
||
|
|
|
||
|
|
### `xFormat`
|
||
|
|
|
||
|
|
- Type: One of type: string, func
|
||
|
|
- Default: `'%Y-%m-%d'`
|
||
|
|
|
||
|
|
A datetime formatting string or function, passed to d3TimeFormat.
|
||
|
|
|
||
|
|
### `x2Format`
|
||
|
|
|
||
|
|
- Type: One of type: string, func
|
||
|
|
- Default: `''`
|
||
|
|
|
||
|
|
A datetime formatting string or function, passed to d3TimeFormat.
|
||
|
|
|
||
|
|
### `yFormat`
|
||
|
|
|
||
|
|
- Type: One of type: string, func
|
||
|
|
- Default: `'.3s'`
|
||
|
|
|
||
|
|
A number formatting string or function, 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.
|
||
|
|
|
||
|
|
### `itemsLabel`
|
||
|
|
|
||
|
|
- Type: String
|
||
|
|
- Default: null
|
||
|
|
|
||
|
|
Label to describe the legend items. It will be displayed in the legend of
|
||
|
|
comparison charts when there are many.
|
||
|
|
|
||
|
|
### `valueType`
|
||
|
|
|
||
|
|
- Type: String
|
||
|
|
- Default: null
|
||
|
|
|
||
|
|
What type of data is to be displayed? Number, Average, String?
|
||
|
|
|