Improve this doc View source

pfUtilizationTrendChart
directive in module patternfly.charts

Description

Directive for rendering a utilization trend chart. The utilization trend chart combines overall data with a pfDonutPctChart and a pfSparklineChart. Add the options for the pfDonutChart via the donutConfig parameter. Add the options for the pfSparklineChart via the sparklineConfig parameter.

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

Usage

as attribute
<ANY pf-utilization-trend-chart
     config="{object}"
     donut-config="{object}"
     sparkline-config="{object}"
     chart-data="{object}"
     [donut-center-label="{string}"]
     [sparkline-chart-height="{int}"]
     [show-sparkline-x-axis="{boolean}"]
     [show-sparkline-y-axis="{boolean}"]>
   ...
</ANY>

Parameters

ParamTypeDetails
configobject

configuration settings for the utilization trend chart:

  • .title - title of the Utilization chart
  • .units - unit label for values, ex: 'MHz','GB', etc..
donutConfigobject

configuration settings for the donut pct chart, see pfDonutPctChart for specifics

sparklineConfigobject

configuration settings for the sparkline chart, see pfSparklineChart for specifics

chartDataobject

the data to be shown in the donut and sparkline charts

  • .used - number representing the amount used
  • .total - number representing the total amount
  • .xData - Array, X values for the data points, first element must be the name of the data
  • .yData - Array, Y Values for the data points, first element must be the name of the data
  • .dataAvailable - Flag if there is data available - default: true
donutCenterLabel
(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
sparklineChartHeight
(optional)
int

height of the sparkline chart

showSparklineXAxis
(optional)
boolean

override sparkline config settings for showing the X Axis

showSparklineYAxis
(optional)
boolean

override sparkline config settings for showing the Y Axis

Example

Source













Demo