Search results

Migration from Essential JS 1

This article describes the API migration process of heat map component from Essential JS 1 to Essential JS 2.

Members

Behavior API in Essential JS 1 API in Essential JS 2
Specifies the width of the heat map Property: width

<EJ.HeatMap id="HeatMap" width="810px">
</EJ.HeatMap>
Property: width

<HeatMapComponent id='heatmap-container' width={'300px'}>`
Specifies the height of the heat map Property: height

<EJ.HeatMap id="HeatMap" height="810px">
</EJ.HeatMap>
Property: height

<HeatMapComponent id='heatmap-container' height={'300px'}>
</HeatMapComponent>
Enables or disables tooltip of heat map Property: showtooltip

<EJ.HeatMap id="HeatMap" showTooltip="true">
</EJ.HeatMap>
Property: showTooltip

<HeatMapComponent id='heatmap-container' showTooltip = { true }>
</HeatMapComponent>
Defines the tooltip that should be shown when the mouse hovers over cells. Property: toolTipSettings.templateId

<EJ.HeatMap id="HeatMap" toolTipSettings={toolTipSettings}>
</EJ.HeatMap>

toolTipSettings = {templateId:“mouseovertoolTipId”}
Property: tooltipRender

<HeatMapComponent id='heatmap-container' tooltipRender={tooltipTemplate}>
</HeatMapComponent>

private tooltipTemplate(args: ITooltipEventArgs): void { };
Specifies the source data of the heat map. Property: itemsSource

<EJ.HeatMap id="HeatMap" itemsSource={itemsSource}>
</EJ.HeatMap>

itemsSource = []
Property: dataSource

<HeatMapComponent id='heatmap-container' dataSource={dataSource}>
</HeatMapComponent>

dataSource = []
Specifies whether the cell content can be visible or not. Property: heatmapCell.showContent

<EJ.HeatMap id="HeatMap" heatmapCell={heatmapCell}>
</EJ.HeatMap>

heatmapCell = { showContent: “Hidden” }
Property: cellSettings.showLabel

<HeatMapComponent id='heatmap-container' cellSettings={cellSettings}>
</HeatMapComponent>

cellSettings = {showLabel: false}
Specifies the color of the heat map column data. Property: colorMappingCollection.color

<EJ.HeatMap id="HeatMap" colorMappingCollection="colorMappingCollection">
</EJ.HeatMap>

colorMappingCollection = [ { color: “#8ec8f8” } ];
Property: paletteSettings.palette.color

<HeatMapComponent id='heatmap-container' paletteSettings={paletteSettings}>
</HeatMapComponent>

paletteSettings = {palette: [{ color: ‘#C06C84’},]}
Specifies the color values of the heat map column data. Property: colorMappingCollection.value

<EJ.HeatMap id="HeatMap" colorMappingCollection="colorMappingCollection">
</EJ.HeatMap>

colorMappingCollection = [ { value: 50 } ];
Property: paletteSettings.palette.value

<HeatMapComponent id='heatmap-container' paletteSettings={paletteSettings}>
</HeatMapComponent>

paletteSettings = {palette: [{ value: 50},]}
Specifies the label text of the heat map color. Property: colorMappingCollection.label.text

<EJ.HeatMap id="HeatMap" colorMappingCollection="colorMappingCollection">
</EJ.HeatMap>

colorMappingCollection = [ { label:{ text: “Moderate” } } ];
Property: paletteSettings.palette.label

<HeatMapComponent id='heatmap-container' paletteSettings={paletteSettings}>
</HeatMapComponent>

paletteSettings = {palette: [{ label:‘Low’ },{ label:‘Moderate’ }]}
Specifies the style of the heat map color label. Property: colorMappingCollection.label.bold Property: colorMappingCollection.label.italic

<EJ.HeatMap id="HeatMap" colorMappingCollection="colorMappingCollection">
</EJ.HeatMap>

colorMappingCollection = [ { label:{ bold: true } } ];
colorMappingCollection = [ { label:{ italic: true } } ];
Property: legendSettings.textStyle.fontStyle

<HeatMapComponent id='heatmap-container' legendSettings={legendSettings}>
</HeatMapComponent>

legendSettings = {textStyle: { fontStyle:‘bold’ }}
Specifies the font size of the heat map label. Property: colorMappingCollection.label.fontSize

<EJ.HeatMap id="HeatMap" colorMappingCollection="colorMappingCollection">
</EJ.HeatMap>

colorMappingCollection = [ { label:{ fontSize: 18 } } ];
Property: legendSettings.textStyle.size

<HeatMapComponent id='heatmap-container' legendSettings={legendSettings}>
</HeatMapComponent>

legendSettings = {textStyle: { size: 18 }}
Specifies the font family of the heat map label. Property: colorMappingCollection.label.fontFamily

<EJ.HeatMap id="HeatMap" colorMappingCollection="colorMappingCollection">
</EJ.HeatMap>

colorMappingCollection = [ { label:{ fontFamily: “Arial” } } ];
Property: legendSettings.textStyle.fontFamily

<HeatMapComponent id='heatmap-container' legendSettings={legendSettings}>
</HeatMapComponent>

legendSettings = {textStyle: { fontFamily: ‘Arial’ }}
Specifies the font color of the heat map label. Property: colorMappingCollection.label.fontColor

<EJ.HeatMap id="HeatMap" colorMappingCollection="colorMappingCollection">
</EJ.HeatMap>

colorMappingCollection = [ { label:{ fontColor: “red” } } ];
Property: legendSettings.textStyle.fontFamily

<HeatMapComponent id='heatmap-container' legendSettings={legendSettings}>
</HeatMapComponent>

legendSettings = {textStyle: { color: ‘red’ }}
Specifies the mapping name of the column. Property: itemsMapping.column.propertyName

<EJ.HeatMap itemsMapping={itemsMapping}>
</EJ.HeatMap>

itemsMapping = {column: { “propertyName”: “ProductName” }}
Property: dataSource.yDataMapping

<HeatMapComponent id='heatmap-container' dataSource={dataSource}>
</HeatMapComponent>

dataSource = {data: heatmapData,yDataMapping: ‘columnid’}
Specifies the mapping name of the row. Property: itemsMapping.row.propertyName

<EJ.HeatMap itemsMapping={itemsMapping}>
</EJ.HeatMap>

itemsMapping = {row: { “displayName”: “Product Name” }}
Property: dataSource.xDataMapping

<HeatMapComponent id='heatmap-container' dataSource={dataSource}>
</HeatMapComponent>

dataSource = {data: heatmapData,xDataMapping: ‘rowid’}
Specifies the mapping name of the row. Property: itemsMapping.value.displayName

<EJ.HeatMap itemsMapping={itemsMapping}>
</EJ.HeatMap>

itemsMapping = {value: { “displayName”: “Product Name” }}
Property: dataSource.valueMapping

<HeatMapComponent id='heatmap-container' dataSource={dataSource}>
</HeatMapComponent>

dataSource = {data: heatmapData,valueMapping: ‘value’}

Events

Behavior API in Essential JS 1 API in Essential JS 2
Triggered when the cell get clicked. Property: cellSelected

<EJ.HeatMap actionComplete="actionComplete">
</EJ.HeatMap>

actionComplete = function(args) {}
Property: cellClick

<HeatMapComponent id='heatmap-container' cellClick={this.cellClick.bind(this)}>
</HeatMapComponent>

public cellClick(args: ICellClickEventArgs): void {}
Contents
Contents