Improve this doc View source

pfHeatMap
directive in module patternfly.charts

Description

Directive for rendering a heatmap chart.

Usage

as attribute
<ANY pf-heat-map
     data="{object}"
     [chart-data-available="{boolean}"]
     [height="{number}"]
     [chart-title="{string}"]
     [show-legend="{boolean}"]
     [legend-labels="{array}"]
     [max-block-size="{number}"]
     [block-padding="{number}"]
     [thresholds="{array}"]
     [heatmap-color-pattern="{array}"]
     [click-action="{function}"]>
   ...
</ANY>

Parameters

ParamTypeDetails
dataobject

data for the chart:

  • .id - the id of the measurement
  • .value - the value of the measurement
  • .tooltip - message to be displayed on hover
chartDataAvailable
(optional)
boolean

flag if the chart data is available - default: true

height
(optional)
number

height of the chart (no units) - default: 200

chartTitle
(optional)
string

title of the chart

showLegend
(optional)
boolean

flag to show the legend, defaults to true

legendLabels
(optional)
array

the labels for the legend - defaults: ['< 70%', '70-80%' ,'80-90%', '> 90%']

maxBlockSize
(optional)
number

the maximum size for blocks in the heatmap. Default: 50, Range: 5 - 50

blockPadding
(optional)
number

the padding in pixels between blocks (default: 2)

thresholds
(optional)
array

the threshold values for the heapmap - defaults: [0.7, 0.8, 0.9]

heatmapColorPattern
(optional)
array

the colors that correspond to the various threshold values (lowest to hightest value ex: <70& to >90%) - defaults: ['#d4f0fa', '#F9D67A', '#EC7A08', '#CE0000']

clickAction
(optional)
function

function(block) function to call when a block is clicked on

Example

Source













Demo