Ej1 api migration in React Heatmap chart component

27 Jan 20232 minutes to read

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

``
`
`
| Property: width

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

``
`
`
| Property: height

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

``
`
`
| 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*

``
`
`

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*

``
`
`

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*

``
`
`

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*

``
`
`

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*

``
`
`

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*

``
`
`

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*

``
`
`

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.</b>| **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

``
`
`

actionComplete = function(args) {}|**Property:** *cellClick*

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

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