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}"]
       [tooltip="{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.
  • .labelConfig - object containing properties for external label (optional) - default: undefined
    • .orientation - string with possible values: 'left', 'right' (optional) - default: 'center'
    • .title - string representing a prefix or title (optional) - default: empty string
    • .label - the wording format to display, possible values: 'used', 'available', 'percent', 'none' (optional) - default: 'used'
    • .units - unit label for values, ex: 'MHz','GB', etc.. (optional) - default: empty string
    • .labelFn - function to customize the text of the external label. This callback returns no data. Updated display data can be accessed through the passed and updated parameter 'data'. (optional) - default: undefined
dataobject

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

  • .used - number representing the amount used
  • .percent - number representing the percentage 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
tooltip
(optional)
string

specifies the value to show in the tooltip when hovering Used or Available chart segments Values:

  • 'percent' - displays the Used or Available percentage of the Total in the tooltop (default)
  • 'amount' - displays the Used or Available amount and units in the tooltip
  • 'both' - displays both the percentage and amount in the tooltip
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