woocommerce/plugins/woocommerce-admin/docs/components/packages/chart.md

179 lines
3.0 KiB
Markdown
Raw Normal View History

`Chart` (component)
===================
A chart container using d3, to display timeseries data with an interactive legend.
Props
-----
### `allowedIntervals`
- Type: Array
- Default: null
Allowed intervals to show in a dropdown.
### `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
### `itemsLabel`
- Type: String
- Default: null
Label describing the legend items.
### `mode`
- Type: One of: 'item-comparison', 'time-comparison'
- Default: `'time-comparison'`
`item-comparison` (default) or `time-comparison`, this is used to generate correct
ARIA properties.
### `path`
- Type: String
- Default: null
Current path
### `query`
- Type: Object
- Default: null
The query string represented in object form
### `interactiveLegend`
- Type: Boolean
- Default: `true`
Whether the legend items can be activated/deactivated.
### `interval`
- Type: One of: 'hour', 'day', 'week', 'month', 'quarter', 'year'
- Default: `'day'`
Interval specification (hourly, daily, weekly etc).
### `intervalData`
- Type: Object
- Default: null
Information about the currently selected interval, and set of allowed intervals for the chart. See `getIntervalsForQuery`.
### `isRequesting`
- Type: Boolean
- Default: `false`
Render a chart placeholder to signify an in-flight data request.
### `legendPosition`
- Type: One of: 'bottom', 'side', 'top'
- Default: null
Position the legend must be displayed in. If it's not defined, it's calculated
depending on the viewport width and the mode.
### `showHeaderControls`
- Type: Boolean
- Default: `true`
Wether header UI controls must be displayed.
### `title`
- Type: String
- Default: null
A title describing this chart.
### `tooltipLabelFormat`
2018-10-10 03:58:34 +00:00
- Type: One of type: string, func
- Default: `'%B %d, %Y'`
2018-10-10 03:58:34 +00:00
A datetime formatting string or overriding function to format the tooltip label.
2018-10-10 03:58:34 +00:00
### `tooltipValueFormat`
- Type: One of type: string, func
- Default: `','`
A number formatting string or function to format the value displayed in the tooltips.
### `tooltipTitle`
- Type: String
- Default: null
A string to use as a title for the tooltip. Takes preference over `tooltipLabelFormat`.
### `type`
- Type: One of: 'bar', 'line'
- Default: `'line'`
Chart type of either `line` or `bar`.
### `valueType`
- Type: String
- Default: null
What type of data is to be displayed? Number, Average, String?
### `xFormat`
- Type: String
- Default: `'%d'`
A datetime formatting string, passed to d3TimeFormat.
### `x2Format`
- Type: String
- Default: `'%b %Y'`
A datetime formatting string, passed to d3TimeFormat.
### `yFormat`
- Type: String
- Default: `'$.3s'`
A number formatting string, passed to d3Format.
`ChartPlaceholder` (component)
==============================
`ChartPlaceholder` displays a large loading indiciator for use in place of a `Chart` while data is loading.
Props
-----
### `height`
- Type: Number
- Default: `0`