Improve this doc View source

pfUtilizationBarChart
directive in module patternfly.charts

Description

Component 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 element:
<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}"]
       avaliable-tooltip-function="{function(items)}"
       used-tooltip-function="{function(items)}">
</pf-utilization-bar-chart>

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
  • .dataAvailable - Flag if there is data available - default: true
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.

avaliableTooltipFunctionfunction(items

A passed in tooltip function which can be used to overwrite the default available tooltip behavior

usedTooltipFunctionfunction(items

A passed in tooltip function which can be used to overwrite the default usedtooltip behavior

Example

Source













Demo