Improve this doc View source

pfUtilizationBarChart
directive in module patternfly.charts

Description

Directive for rendering a utilization bar chart 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.

Usage

as attribute
<ANY pf-utilization-bar-chart
     chart-data="{object}"
     [chart-title="{object}"]
     [chart-footer="{object}"]
     [layout="{object}"]
     [footer-label-format="{string}"]
     [units="{object}"]
     [threshold-error="{string}"]
     [threshold-warning="{string}"]>
   ...
</ANY>

Parameters

ParamTypeDetails
chartDataobject

the data to be shown in the utilization bar chart

  • .used - number representing the amount used
  • .total - number representing the total amount
chart-title
(optional)
object

The title displayed on the left-hand side of the chart

chart-footer
(optional)
object

The label displayed on the right-hand side of the chart. If chart-footer is not specified, the automatic footer-label-format will be used.

layout
(optional)
object

Various alternative layouts the utilization bar chart may have:

  • .type - The type of layout to use. Valid values are 'regular' (default) displays the standard chart layout, and 'inline' displays a smaller, inline layout.
  • .titleLabelWidth - Width of the left-hand title label when using 'inline' layout. Example values are "120px", "20%", "10em", etc..
  • .footerLabelWidth - Width of the right-hand used label when using 'inline' layout. Example values are "120px", "20%", "10em", etc..
footer-label-format
(optional)
string

The auto-format of the label on the right side of the bar chart when chart-footer has not been specified. Values may be:

  • 'actual' - (default) displays the standard label of '(n) of (m) (units) Used'.
  • 'percent' - displays a percentage label of '(n)% Used'.
units
(optional)
object

to be displayed on the chart. Examples: "GB", "MHz", "I/Ops", etc...

threshold-error
(optional)
string

The percentage used, when reached, denotes an error. Valid values are 1-100. When the error threshold has been reached, the used donut arc will be red.

threshold-warning
(optional)
string

The percentage usage, when reached, denotes a warning. Valid values are 1-100. When the warning threshold has been reached, the used donut arc will be orange.

Example

Source













Demo