Improve this doc View source

pfHeatMap
directive in module patternfly.charts

Description

Component for rendering a heatmap chart.

Usage

as element:
<pf-heat-map
       data="{object}"
       [chart-data-available="{boolean}"]
       [height="{number}"]
       [chart-title="{string}"]
       [show-legend="{boolean}"]
       [legend-labels="{array}"]
       [max-block-size="{number}"]
       [min-block-size="{number}"]
       [block-padding="{number}"]
       [thresholds="{array}"]
       [heatmap-color-pattern="{array}"]
       [click-action="{function}"]
       [range-hover-size="{number}"]
       [range-on-hover="{boolean}"]
       [range-tooltips="{array}"]>
</pf-heat-map>

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

minBlockSize
(optional)
number

the minimum size for blocks in the heatmap. Default: 2

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

rangeHoverSize
(optional)
number

the maximum size for highlighting blocks in the same range. Default: 15

rangeOnHover
(optional)
boolean

flag to highlight blocks in the same range on hover, defaults to true

rangeTooltips
(optional)
array

the tooltips for blocks in the same range - defaults: ['< 70%', '70-80%' ,'80-90%', '> 90%']

Example

Source





Demo