Improve this doc View source

pfDonutPctChart
directive in module patternfly.charts

Description

Directive 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 attribute
<ANY pf-donut-pct-chart
     config="{object}"
     data="{object}"
     [center-label="{string}"]>
   ...
</ANY>

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

Example

Source













Demo