Steve-Dee-Designs
/
woocommerce
mirror of https://github.com/woocommerce/woocommerce.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity
woocommerce/plugins/woocommerce-admin/docs/components/packages/chart.md

3.3 KiB
Raw Blame 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.

baseValue

  • Type: Number
  • Default: 0

Base chart value. If no data value is different than the baseValue, the emptyMessage will be displayed if provided.

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

emptyMessage

  • Type: String
  • Default: null

The message to be displayed if there is no data to render. If no message is provided, nothing will be displayed.

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

  • 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.

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