Improve this doc View source

pfDonutPctChart
directive in module patternfly.charts

Description

Component for rendering a percentage used donut/radial chart. The Used Percentage fill starts at 12 o’clock and moves clockwise. Whatever portion of the donut not Used, will be represented as Available, and rendered as a gray fill. There are three possible fill colors for Used Percentage, dependent on whether or not there are thresholds:

  • When no thresholds exist, or if the used percentage has not surpassed any thresholds, the indicator is blue.

  • When the used percentage has surpassed the warning threshold, but not the error threshold, the indicator is orange.

  • When the used percentage has surpassed the error threshold, the indicator is is red.
The directive will calculate the Available Percentage (Total - Used), and display it as a grey radial fill.



See http://c3js.org/reference.html for a full list of C3 chart options.

Usage

as element:
<pf-donut-pct-chart
       config="{object}"
       data="{object}"
       [center-label="{string}"]
       [chart-height="{int}"]
       on-threshold-change="{function (threshold)}">
</pf-donut-pct-chart>

Parameters

ParamTypeDetails
configobject

configuration properties for the donut chart:

  • .chartId - the unique id of the donut chart
  • .units - unit label for values, ex: 'MHz','GB', etc..
  • .thresholds - warning and error percentage thresholds used to determine the Usage Percentage fill color (optional)
  • .tooltipFn(d) - user defined function to customize the tool tip (optional)
  • .centerLabelFn - user defined function to customize the text of the center label (optional)
  • .onClickFn(d,i) - user defined function to handle when donut arc is clicked upon.
dataobject

the Total and Used values for the donut chart. Available is calculated as Total - Used.

  • .used - number representing the amount used
  • .total - number representing the total amount
  • .dataAvailable - Flag if there is data available - default: true
center-label
(optional)
string

specifies the contents of the donut's center label.
Values:

  • 'used' - displays the Used amount in the center label (default)
  • 'available' - displays the Available amount in the center label
  • 'percent' - displays the Usage Percent of the Total amount in the center label
  • 'none' - does not display the center label
chartHeight
(optional)
int

height of the donut chart

on-threshold-changefunction (threshold

user defined function to handle when thresolds change
'threshold' Values:

  • 'ok' - when ok threshold is set
  • 'warning' - when warning threshold is set
  • 'error' - when error threshold is set

Example

Source





Demo