@syncfusion/ej2-heatmap - npm Package Compare versions

Comparing version 17.2.48-beta to 17.3.9-beta

CHANGELOG.md

@@ -11,2 +11,13 @@ <!-- markdownlint-disable MD010 -->
 
+### HeatMap
+
+#### New Features
+
+- Provided a minimum and maximum color display based on row and column wise
+
+#### Breaking Changes
+
+The `dataSource` property has been split into `dataSource` and `dataSourceSettings` properties.
+The `dataSource` property is used to bind data to HeatMap and the `dataSourceSettings` property is used to configure the data source using adaptor settings.
+
 ## 17.2.28-beta (2019-06-27)
@@ -13,0 +24,0 @@

dist/global/index.d.ts

 /*!
 *  filename: index.d.ts
-*  version : 17.2.48-beta
+*  version : 17.3.9-beta
 *  Copyright Syncfusion Inc. 2001 - 2019. All rights reserved.
@@ -5,0 +5,0 @@ *  Use of this code is subject to the terms of our license.

package.json

 {
   "_from": "@syncfusion/ej2-heatmap@*",
-  "_id": "@syncfusion/ej2-heatmap@17.1.1",
+  "_id": "@syncfusion/ej2-heatmap@17.2.48",
   "_inBundle": false,
-  "_integrity": "sha512-HLikPAZpXFa1QqSuv4+AgJVHdflzWLHdEAwkcHQCXb9sLis4cvsYMiwIXLmzNMKFnugp7JXOIL2fG4aSz/9mKg==",
+  "_integrity": "sha512-ZbtId1Vgf1CD3fPMUwZ+bzvzn8oA6qTSefyTCycZM/bbOmDBU1v5yN8UagwjWqlybEYQbpEXyMHEpzKHPIdAVw==",
   "_location": "/@syncfusion/ej2-heatmap",
@@ -26,6 +26,6 @@ "_phantomChildren": {},
   ],
-  "_resolved": "http://nexus.syncfusion.com/repository/ej2-production/@syncfusion/ej2-heatmap/-/ej2-heatmap-17.1.1.tgz",
-  "_shasum": "73302f058a0f610a136f7f2b5b39fa39a20955ac",
+  "_resolved": "http://nexus.syncfusion.com/repository/ej2-release/@syncfusion/ej2-heatmap/-/ej2-heatmap-17.2.48.tgz",
+  "_shasum": "488679ac1d4bb954fcf969ddae51fea55489f97d",
   "_spec": "@syncfusion/ej2-heatmap@*",
-  "_where": "/jenkins/workspace/ation_hotfix_16.4.0.42_Vol4-CJVRBFC7Z7RSISPRJNEMNQSRMCB6XTG67IJD6R2DVNXFIKQEITTQ/packages/included",
+  "_where": "/jenkins/workspace/ation_hotfix_17.2.0.34_Vol2-DDPJ6C2YEWTWLLKKNA7AG2JBE6DYTCTNGMHGORWGAYAVCL6L7OLQ/packages/included",
   "author": {
@@ -36,5 +36,5 @@ "name": "Syncfusion Inc."
   "dependencies": {
-    "@syncfusion/ej2-base": "17.2.48-beta",
-    "@syncfusion/ej2-data": "17.2.48-beta",
-    "@syncfusion/ej2-svg-base": "17.2.48-beta"
+    "@syncfusion/ej2-base": "~17.3.9-beta",
+    "@syncfusion/ej2-data": "~17.3.9-beta",
+    "@syncfusion/ej2-svg-base": "~17.3.9-beta"
   },
@@ -73,4 +73,4 @@ "deprecated": false,
   "typings": "index.d.ts",
-  "version": "17.2.48-beta",
+  "version": "17.3.9-beta",
   "sideEffects": false
 }

src/heatmap/axis/axis-helpers.js

@@ -108,3 +108,3 @@ import { Rect, measureText, TextOption, rotateTextSize, textTrim, CanvasTooltip, PathOption, textWrap } from '../utils/helper';
         var axisCollection = heatmap.axisCollections;
-        var data = this.heatMap.dataSource;
+        var data = this.heatMap.dataSourceSettings;
         var processLabels = !(data && data.isJsonData && data.adaptorType === 'Cell');
@@ -111,0 +111,0 @@ for (var i = 0, len = axisCollection.length; i < len; i++) {

src/heatmap/datasource/adaptor-model.d.ts

@@ -9,9 +9,2 @@ import { HeatMap } from '../heatmap';import { isNullOrUndefined, DateFormatOptions, Complex } from '@syncfusion/ej2-base';import { Property, ChildProperty } from '@syncfusion/ej2-base';import { AdaptorType } from '../utils/enum';import { DataUtil } from '@syncfusion/ej2-data';import { increaseDateTimeInterval } from '../utils/helper';import { AxisModel } from '../axis/axis-model';import { BubbleDataModel } from '../model/base-model';import { BubbleData } from '../model/base';import { Axis } from '../axis/axis';
     /**
-     * Property to provide Datasource.
-     * @default null
-     */
-
-    data?: Object;
-
-    /**
      * Specifies the provided datasource is an JSON data. 
@@ -25,3 +18,3 @@ * @default false
      * specifies Adaptor type
-     * @default cell
+     * @default None
      */
@@ -28,0 +21,0 @@ adaptorType?: AdaptorType;

src/heatmap/datasource/adaptor.d.ts

@@ -14,7 +14,2 @@ /**
     /**
-     * Property to provide Datasource.
-     * @default null
-     */
-    data: Object;
-    /**
      * Specifies the provided datasource is an JSON data.
@@ -26,3 +21,3 @@ * @default false
      * specifies Adaptor type
-     * @default cell
+     * @default None
      */
@@ -72,3 +67,3 @@ adaptorType: AdaptorType;
      */
-    constructDatasource(adaptData: DataModel): void;
+    constructDatasource(dataSource: object, dataSourceSettings: DataModel): void;
     /**
@@ -75,0 +70,0 @@ * Method to construct Axis Collection.

src/heatmap/datasource/adaptor.js

@@ -34,9 +34,6 @@ var __extends = (this && this.__extends) || (function () {
     __decorate([
-        Property(null)
-    ], Data.prototype, "data", void 0);
-    __decorate([
         Property(false)
     ], Data.prototype, "isJsonData", void 0);
     __decorate([
-        Property('cell')
+        Property('None')
     ], Data.prototype, "adaptorType", void 0);
@@ -81,4 +78,4 @@ __decorate([
      */
-    Adaptor.prototype.constructDatasource = function (adaptData) {
-        if (adaptData.adaptorType === 'Cell') {
+    Adaptor.prototype.constructDatasource = function (dataSource, dataSourceSettings) {
+        if (dataSourceSettings.adaptorType === 'Cell') {
             var xAxis = this.heatMap.xAxis;
@@ -94,21 +91,21 @@ var yAxis = this.heatMap.yAxis;
                     (isNullOrUndefined(yAxis.minimum) || isNullOrUndefined(yAxis.maximum)))) {
-                this.getMinMaxValue(adaptData, xAxis, yAxis);
+                this.getMinMaxValue(dataSource, dataSourceSettings, xAxis, yAxis);
             }
             this.heatMap.isCellData = true;
         }
-        if (adaptData && adaptData.data === undefined) {
-            this.heatMap.completeAdaptDataSource = adaptData;
+        if (dataSourceSettings.adaptorType === 'None') {
+            this.heatMap.completeAdaptDataSource = dataSource;
         }
-        else if (!adaptData.isJsonData && adaptData.adaptorType === 'Table' || adaptData.data === null) {
-            this.heatMap.completeAdaptDataSource = adaptData.data;
+        else if (!dataSourceSettings.isJsonData && dataSourceSettings.adaptorType === 'Table') {
+            this.heatMap.completeAdaptDataSource = dataSource;
         }
-        else if (adaptData.isJsonData && adaptData.adaptorType === 'Table') {
-            this.heatMap.completeAdaptDataSource = this.processJsonTableData(adaptData);
+        else if (dataSourceSettings.isJsonData && dataSourceSettings.adaptorType === 'Table') {
+            this.heatMap.completeAdaptDataSource = this.processJsonTableData(dataSource, dataSourceSettings);
         }
-        else if (adaptData.isJsonData && adaptData.adaptorType === 'Cell') {
-            this.heatMap.completeAdaptDataSource = this.processJsonCellData(adaptData);
+        else if (dataSourceSettings.isJsonData && dataSourceSettings.adaptorType === 'Cell') {
+            this.heatMap.completeAdaptDataSource = this.processJsonCellData(dataSource, dataSourceSettings);
         }
-        else if (!adaptData.isJsonData && adaptData.adaptorType === 'Cell') {
+        else if (!dataSourceSettings.isJsonData && dataSourceSettings.adaptorType === 'Cell') {
             this.constructAdaptiveAxis();
-            this.heatMap.completeAdaptDataSource = this.processCellData(adaptData);
+            this.heatMap.completeAdaptDataSource = this.processCellData(dataSource);
             this.heatMap.isCellData = true;
@@ -179,4 +176,4 @@ }
      */
-    Adaptor.prototype.getMinMaxValue = function (adapData, xAxis, yAxis) {
-        var data = adapData.data;
+    Adaptor.prototype.getMinMaxValue = function (dataSource, adapData, xAxis, yAxis) {
+        var data = dataSource;
         var label = Object.keys(data[0]);
@@ -221,5 +218,5 @@ if (data.length > 0) {
      */
-    Adaptor.prototype.processCellData = function (adaptordata) {
+    Adaptor.prototype.processCellData = function (dataSource) {
         // tslint:disable-next-line:no-any 
-        var tempDataCollection = adaptordata.data;
+        var tempDataCollection = dataSource;
         var xLabels = this.reconstructedXAxis;
@@ -229,4 +226,4 @@ var yLabels = this.reconstructedYAxis;
         var currentDataYIndex = 0;
-        if (tempDataCollection.length) {
-            this.reconstructData = [];
+        this.reconstructData = [];
+        if (tempDataCollection && tempDataCollection.length) {
             for (var xindex = 0; xindex < tempDataCollection.length; xindex++) {
@@ -266,5 +263,5 @@ if (this.heatMap.xAxis.valueType === 'Category') {
      */
-    Adaptor.prototype.processJsonCellData = function (adaptordata) {
+    Adaptor.prototype.processJsonCellData = function (dataSource, adaptordata) {
         // tslint:disable-next-line:no-any 
-        var tempDataCollection = adaptordata.data;
+        var tempDataCollection = dataSource;
         var xAxisLabels = this.heatMap.xAxis.labels ? this.heatMap.xAxis.labels : [];
@@ -274,3 +271,3 @@ var yAxisLabels = this.heatMap.yAxis.labels ? this.heatMap.yAxis.labels : [];
         if (xAxisLabels.length === 0 || yAxisLabels.length === 0) {
-            this.generateAxisLabels(adaptordata);
+            this.generateAxisLabels(dataSource, adaptordata);
         }
@@ -316,5 +313,5 @@ var xLabels = (this.heatMap.xAxis.valueType === 'Category') ? (xAxisLabels.length > 0 ?
      */
-    Adaptor.prototype.generateAxisLabels = function (adaptordata) {
+    Adaptor.prototype.generateAxisLabels = function (dataSource, adaptordata) {
         // tslint:disable-next-line:no-any 
-        var tempDataCollection = adaptordata.data;
+        var tempDataCollection = dataSource;
         var xLabels = this.heatMap.xAxis.labels ? this.heatMap.xAxis.labels : [];
@@ -394,5 +391,5 @@ var yLabels = this.heatMap.yAxis.labels ? this.heatMap.yAxis.labels : [];
      */
-    Adaptor.prototype.processJsonTableData = function (adaptordata) {
+    Adaptor.prototype.processJsonTableData = function (dataSource, adaptordata) {
         // tslint:disable-next-line:no-any 
-        var tempDataCollection = adaptordata.data;
+        var tempDataCollection = dataSource;
         var currentDataXIndex = 0;
@@ -399,0 +396,0 @@ var currentDataYIndex = 0;

src/heatmap/datasource/twodimensional.js

@@ -32,3 +32,8 @@ import { extend, isNullOrUndefined } from '@syncfusion/ej2-base';
         this.heatMap.maxColorValue = null;
-        for (var z = axis[1].valueType === 'Category' ? axis[1].min : 0; z < yLength; z++) {
+        this.heatMap.dataMax = [];
+        this.heatMap.dataMin = [];
+        if (this.heatMap.paletteSettings.colorGradientMode === 'Column' && xLength < yLength) {
+            xLength = yLength;
+        }
+        for (var z = axis[1].valueType === 'Category' ? axis[1].min : 0; z < (this.heatMap.paletteSettings.colorGradientMode === 'Column' ? xLength : yLength); z++) {
             var tempIndex = axis[0].valueType === 'Category' ? axis[0].min : 0;
@@ -42,6 +47,23 @@ this.completeDataSource.push([]);
             }
-            tempVariable = extend([], this.completeDataSource[cloneDataIndex], null, true);
+            if (this.heatMap.paletteSettings.colorGradientMode === 'Column' && this.heatMap.paletteSettings.type === 'Gradient') {
+                tempVariable = extend([], tempCloneData[cloneDataIndex], null, true);
+                for (var i = 0; i < tempVariable.length; i++) {
+                    if (typeof (tempVariable[i]) === 'object' && (tempVariable[i]) !== null || undefined || '') {
+                        tempVariable[i] = tempVariable[i][0];
+                    }
+                }
+            }
+            else {
+                tempVariable = extend([], this.completeDataSource[cloneDataIndex], null, true);
+            }
             var minMaxVal = this.getMinMaxValue(minVal, maxVal, tempVariable);
-            minVal = minMaxVal[0];
-            maxVal = minMaxVal[1];
+            if ((this.heatMap.paletteSettings.colorGradientMode === 'Column' ||
+                this.heatMap.paletteSettings.colorGradientMode === 'Row') && this.heatMap.paletteSettings.type === 'Gradient') {
+                this.heatMap.dataMax[z] = minMaxVal[1];
+                this.heatMap.dataMin[z] = minMaxVal[0];
+            }
+            else {
+                minVal = minMaxVal[0];
+                maxVal = minMaxVal[1];
+            }
             if (this.heatMap.xAxis.isInversed) {
@@ -55,2 +77,12 @@ this.completeDataSource[cloneDataIndex] = this.completeDataSource[cloneDataIndex].reverse();
         }
+        if (this.heatMap.paletteSettings.colorGradientMode === 'Row' && !this.heatMap.yAxis.isInversed &&
+            this.heatMap.paletteSettings.type === 'Gradient') {
+            this.heatMap.dataMax = this.heatMap.dataMax.reverse();
+            this.heatMap.dataMin = this.heatMap.dataMin.reverse();
+        }
+        if (this.heatMap.paletteSettings.colorGradientMode === 'Column' && this.heatMap.xAxis.isInversed &&
+            this.heatMap.paletteSettings.type === 'Gradient') {
+            this.heatMap.dataMax = this.heatMap.dataMax.reverse();
+            this.heatMap.dataMin = this.heatMap.dataMin.reverse();
+        }
         if (!this.heatMap.yAxis.isInversed) {
@@ -134,2 +166,5 @@ this.completeDataSource.reverse();
         if (this.heatMap.bubbleSizeWithColor) {
+            if (this.heatMap.paletteSettings.colorGradientMode !== 'Table' && this.heatMap.paletteSettings.type === 'Gradient') {
+                this.tempSizeArray = tempVariable;
+            }
             minMaxValue.push(this.getMinValue(minVal, this.tempSizeArray));
@@ -157,2 +192,6 @@ minMaxValue.push(this.getMaxValue(maxVal, this.tempSizeArray));
         }
+        else if ((this.heatMap.paletteSettings.colorGradientMode === 'Row' ||
+            this.heatMap.paletteSettings.colorGradientMode === 'Column') && this.heatMap.paletteSettings.type === 'Gradient') {
+            minVal = this.performSort(tempVariable);
+        }
         return !isNullOrUndefined(minVal) ? parseFloat(minVal.toString()) : minVal;
@@ -171,2 +210,6 @@ };
         }
+        else if ((this.heatMap.paletteSettings.colorGradientMode === 'Row' ||
+            this.heatMap.paletteSettings.colorGradientMode === 'Column') && this.heatMap.paletteSettings.type === 'Gradient') {
+            maxVal = Math.max.apply(Math, tempVariable);
+        }
         return !isNullOrUndefined(maxVal) ? parseFloat(maxVal.toString()) : maxVal;
@@ -173,0 +216,0 @@ };

src/heatmap/heatmap-model.d.ts

@@ -1,2 +0,2 @@
-import { Component, Property, NotifyPropertyChanges, Internationalization, Complex, isNullOrUndefined } from '@syncfusion/ej2-base';import { ModuleDeclaration, EmitType, remove, Event, EventHandler, Touch } from '@syncfusion/ej2-base';import { INotifyPropertyChanged, setCulture, Browser, isBlazor } from '@syncfusion/ej2-base';import { SvgRenderer, CanvasRenderer } from '@syncfusion/ej2-svg-base';import { Size, stringToNumber, RectOption, Rect, TextBasic, measureText, CurrentRect, LegendRange, ToggleVisibility } from './utils/helper';import { DrawSvgCanvas, TextOption, titlePositionX, getTitle, showTooltip, getElement, SelectedCellDetails } from './utils/helper';import { removeElement, CanvasTooltip, getTooltipText } from './utils/helper';import { FontModel, MarginModel, TitleModel } from './model/base-model';import { Margin, Title, ColorCollection, LegendColorCollection } from './model/base';import { Theme, getThemeColor } from './model/theme';import { IThemeStyle, ILoadedEventArgs, ICellClickEventArgs, ITooltipEventArgs, IResizeEventArgs } from './model/interface';import { ICellEventArgs, ISelectedEventArgs } from './model/interface';import { DrawType, HeatMapTheme } from './utils/enum';import { Axis } from './axis/axis';import { AxisModel } from './axis/axis-model';import { AxisHelper } from './axis/axis-helpers';import { Series, CellSettings } from './series/series';import { CellSettingsModel } from './series/series-model';import { PaletteSettingsModel } from './utils/colorMapping-model';import { PaletteSettings, CellColor } from './utils/colorMapping';import { TooltipSettings } from './utils/tooltip';import { TooltipSettingsModel } from './utils/tooltip-model';import { TwoDimensional } from './datasource/twodimensional';import { Tooltip } from './utils/tooltip';import { LegendSettingsModel } from '../heatmap/legend/legend-model';import { LegendSettings, Legend } from '../heatmap/legend/legend';import { Adaptor } from './datasource/adaptor';import { DataModel } from './datasource/adaptor-model';import { ILegendRenderEventArgs } from './model/interface';
+import { Component, Property, NotifyPropertyChanges, Internationalization, Complex, isNullOrUndefined } from '@syncfusion/ej2-base';import { ModuleDeclaration, EmitType, remove, Event, EventHandler, Touch } from '@syncfusion/ej2-base';import { INotifyPropertyChanged, setCulture, Browser, isBlazor } from '@syncfusion/ej2-base';import { SvgRenderer, CanvasRenderer } from '@syncfusion/ej2-svg-base';import { Size, stringToNumber, RectOption, Rect, TextBasic, measureText, CurrentRect, LegendRange, ToggleVisibility } from './utils/helper';import { DrawSvgCanvas, TextOption, titlePositionX, getTitle, showTooltip, getElement, SelectedCellDetails } from './utils/helper';import { removeElement, CanvasTooltip, getTooltipText } from './utils/helper';import { FontModel, MarginModel, TitleModel } from './model/base-model';import { Margin, Title, ColorCollection, LegendColorCollection } from './model/base';import { Theme, getThemeColor } from './model/theme';import { IThemeStyle, ILoadedEventArgs, ICellClickEventArgs, ITooltipEventArgs, IResizeEventArgs } from './model/interface';import { ICellEventArgs, ISelectedEventArgs } from './model/interface';import { DrawType, HeatMapTheme, ColorGradientMode } from './utils/enum';import { Axis } from './axis/axis';import { AxisModel } from './axis/axis-model';import { AxisHelper } from './axis/axis-helpers';import { Series, CellSettings } from './series/series';import { CellSettingsModel } from './series/series-model';import { PaletteSettingsModel } from './utils/colorMapping-model';import { PaletteSettings, CellColor } from './utils/colorMapping';import { TooltipSettings } from './utils/tooltip';import { TooltipSettingsModel } from './utils/tooltip-model';import { TwoDimensional } from './datasource/twodimensional';import { Tooltip } from './utils/tooltip';import { LegendSettingsModel } from '../heatmap/legend/legend-model';import { LegendSettings, Legend } from '../heatmap/legend/legend';import { Adaptor, Data } from './datasource/adaptor';import { DataModel } from './datasource/adaptor-model';import { ILegendRenderEventArgs } from './model/interface';
 import {ComponentModel} from '@syncfusion/ej2-base';
@@ -83,5 +83,10 @@
 
-    dataSource?: Object | DataModel;
+    dataSource?: Object ;
 
     /**
+     * Specifies the datasource settings for heat map.
+     */
+    dataSourceSettings?: DataModel;
+
+    /**
      *  Specifies the theme for heatmap.
@@ -88,0 +93,0 @@ * @default 'Material'

src/heatmap/heatmap.d.ts

@@ -16,3 +16,3 @@ /**
 import { ICellEventArgs, ISelectedEventArgs } from './model/interface';
-import { DrawType, HeatMapTheme } from './utils/enum';
+import { DrawType, HeatMapTheme, ColorGradientMode } from './utils/enum';
 import { Axis } from './axis/axis';
@@ -93,4 +93,8 @@ import { AxisModel } from './axis/axis-model';
      */
-    dataSource: Object | DataModel;
+    dataSource: Object;
     /**
+     * Specifies the datasource settings for heat map.
+     */
+    dataSourceSettings: DataModel;
+    /**
      *  Specifies the theme for heatmap.
@@ -167,2 +171,4 @@ * @default 'Material'
     /** @private */
+    colorGradientMode: ColorGradientMode;
+    /** @private */
     renderer: SvgRenderer;
@@ -217,2 +223,6 @@ /** @private */
     /** @private */
+    dataMin: number[];
+    /** @private */
+    dataMax: number[];
+    /** @private */
     dataSourceMaxValue: number;
@@ -359,3 +369,7 @@ /** @private */
     getPersistData(): string;
+    /**
+     * @private
+     */
     onPropertyChanged(newProp: HeatMapModel, oldProp: HeatMapModel): void;
+    private paletteCellSelectionUpdation;
     /**
@@ -362,0 +376,0 @@ * create svg or canvas element

src/heatmap/series/series.js

@@ -107,2 +107,10 @@ var __extends = (this && this.__extends) || (function () {
         for (var x = 0; x < (heatMap.xLength * heatMap.yLength); x++) {
+            if (heatMap.paletteSettings.colorGradientMode === 'Column' && this.heatMap.paletteSettings.type === 'Gradient') {
+                this.heatMap.dataSourceMinValue = this.heatMap.dataMin[dataYIndex];
+                this.heatMap.dataSourceMaxValue = this.heatMap.dataMax[dataYIndex];
+            }
+            else if (heatMap.paletteSettings.colorGradientMode === 'Row' && this.heatMap.paletteSettings.type === 'Gradient') {
+                this.heatMap.dataSourceMinValue = this.heatMap.dataMin[dataXIndex];
+                this.heatMap.dataSourceMaxValue = this.heatMap.dataMax[dataXIndex];
+            }
             this.setTextAndColor(dataXIndex, dataYIndex);
@@ -139,2 +147,6 @@ var rectPosition = new CurrentRect(0, 0, 0, 0, 0, '', 0, 0, 0, 0, true, '', '', true);
                     && this.text.toString() !== '') { // Bubble by same color and different size Series
+                    if (this.heatMap.paletteSettings.colorGradientMode !== 'Table' && this.heatMap.paletteSettings.type === 'Gradient') {
+                        this.heatMap.minColorValue = this.heatMap.dataSourceMinValue;
+                        this.heatMap.maxColorValue = this.heatMap.dataSourceMaxValue;
+                    }
                     var tempCircleRadius = this.getRadiusBypercentage(parseFloat(this.text.toString()), heatMap.dataSourceMinValue, heatMap.dataSourceMaxValue, circleRadius);
@@ -265,3 +277,3 @@ this.renderBubbleCell(rectPosition, tempBorder, x, this.color, borderColor, tempCircleRadius);
         this.bubbleColorValue = [];
-        var adaptData = this.heatMap.dataSource;
+        var adaptData = this.heatMap.dataSourceSettings;
         // tslint:disable-next-line:no-any
@@ -276,7 +288,7 @@ var clonedDataSource = this.heatMap.clonedDataSource;
                 : this.heatMap.isColorValueExist ? this.heatMap.emptyPointColor : this.cellColor.getColorByValue(this.text);
-            var tempBubbleCollection = new BubbleTooltipData(adaptData.isJsonData && adaptData.adaptorType === 'Cell' ? this.heatMap.dataSource.bubbleDataMapping.size : null, this.text, 'Size');
+            var tempBubbleCollection = new BubbleTooltipData(adaptData.isJsonData && adaptData.adaptorType === 'Cell' ? adaptData.bubbleDataMapping.size : null, this.text, 'Size');
             this.bubbleColorValue.push(tempBubbleCollection);
             this.bubbleColorValue.push({
                 mappingName: adaptData.isJsonData && adaptData.adaptorType === 'Cell' ?
-                    this.heatMap.dataSource.bubbleDataMapping.color : null,
+                    adaptData.bubbleDataMapping.color : null,
                 bubbleData: !isNullOrUndefined(clonedDataSource[dataXIndex][dataYIndex][1]) &&
@@ -299,4 +311,3 @@ clonedDataSource[dataXIndex][dataYIndex][1].toString() !== '' ? clonedDataSource[dataXIndex][dataYIndex][1] : '',
             this.containerRectObject = this.heatMap.renderer.createGroup({
-                id: this.heatMap.element.id + '_Container_RectGroup',
-                x: this.heatMap.initialClipRect.x, y: this.heatMap.initialClipRect.y, transform: 'translate( 0, 0)'
+                id: this.heatMap.element.id + '_Container_RectGroup'
             });
@@ -303,0 +314,0 @@ if (this.heatMap.cellSettings.showLabel &&

src/heatmap/utils/colorMapping-model.d.ts

@@ -1,2 +0,2 @@
-import { Property, extend, ChildProperty, Collection, isNullOrUndefined } from '@syncfusion/ej2-base';import { HeatMap } from '../heatmap';import { PaletteType } from '../utils/enum';import { ColorCollection, LegendColorCollection, PaletteCollection } from '../model/base';import { PaletteCollectionModel } from '../model/base-model';import { PaletterColor, LegendRange } from './helper';
+import { Property, extend, ChildProperty, Collection, isNullOrUndefined } from '@syncfusion/ej2-base';import { HeatMap } from '../heatmap';import { PaletteType, ColorGradientMode} from '../utils/enum';import { ColorCollection, LegendColorCollection, PaletteCollection } from '../model/base';import { PaletteCollectionModel } from '../model/base-model';import { PaletterColor, LegendRange } from './helper';
 
@@ -28,2 +28,8 @@ /**
 
+    /**
+     * Specifies the colorGradientMode in Heatmap.
+     * @default 'Table'
+     */
+    colorGradientMode?: ColorGradientMode;
+
 }
@@ -30,0 +36,0 @@

src/heatmap/utils/colorMapping.d.ts

 import { ChildProperty } from '@syncfusion/ej2-base';
 import { HeatMap } from '../heatmap';
-import { PaletteType } from '../utils/enum';
+import { PaletteType, ColorGradientMode } from '../utils/enum';
 import { ColorCollection } from '../model/base';
@@ -27,2 +27,7 @@ import { PaletteCollectionModel } from '../model/base-model';
     emptyPointColor: string;
+    /**
+     * Specifies the colorGradientMode in Heatmap.
+     * @default 'Table'
+     */
+    colorGradientMode: ColorGradientMode;
 }
@@ -29,0 +34,0 @@ /**

src/heatmap/utils/colorMapping.js

@@ -40,2 +40,5 @@ var __extends = (this && this.__extends) || (function () {
     ], PaletteSettings.prototype, "emptyPointColor", void 0);
+    __decorate([
+        Property('Table')
+    ], PaletteSettings.prototype, "colorGradientMode", void 0);
     return PaletteSettings;
@@ -268,2 +271,5 @@ }(ChildProperty));
             else {
+                if (this.heatMap.paletteSettings.colorGradientMode !== 'Table') {
+                    this.getColorCollection();
+                }
                 if (text < this.heatMap.colorCollection[0].value) {
@@ -270,0 +276,0 @@ color = this.heatMap.colorCollection[0].color;

src/heatmap/utils/enum.d.ts

@@ -137,6 +137,8 @@ /**
 export declare type AdaptorType = 
-/** Define the data soruce type is cell */
+/** Defines the data source type is cell */
 'Cell' | 
-/** Define the data soruce type is table */
-'Table';
+/** Defines the data source type is table */
+'Table' | 
+/** Defines no adaptor type is used for data source */
+'None';
 /**
@@ -222,1 +224,14 @@ * specify the rendering mode
 'Brace';
+/**
+ * Specifies the type of label display for smart legend.
+ * * Table:  Calculated Minimum and Maximum for Overall dataSource.
+ * * Row: Calculated Minimum and Maximum for Every Row.
+ * * Column : Calculated Minimum and Maximum for Every Column.
+ */
+export declare type ColorGradientMode = 
+/**  Calculate minimum and maximum for overall datasource */
+'Table' | 
+/** Calculate minimum and maximum for each row */
+'Row' | 
+/** Calculate minimum and maximum for each column */
+'Column';

src/heatmap/utils/helper.js

@@ -55,5 +55,5 @@ var __extends = (this && this.__extends) || (function () {
         this['font-size'] = fontModel.size;
-        this['font-style'] = fontModel.fontStyle;
+        this['font-style'] = fontModel.fontStyle.toLowerCase();
         this['font-family'] = fontModel.fontFamily;
-        this['font-weight'] = fontModel.fontWeight;
+        this['font-weight'] = fontModel.fontWeight.toLowerCase();
         this.fill = fontColor ? fontColor : '';
@@ -249,7 +249,7 @@ }
         this.y = y ? y : 0;
-        this['text-anchor'] = anchor ? anchor : '';
+        this['text-anchor'] = anchor ? anchor : 'start';
         this.text = text ? text : '';
         this.transform = transform ? transform : '';
         this.labelRotation = labelRotation;
-        this['dominant-baseline'] = baseLine ? baseLine : '';
+        this['dominant-baseline'] = baseLine ? baseLine : 'auto';
         this.baseline = baseLine ? baseLine : '';
@@ -362,5 +362,5 @@ this.dy = dy ? dy : '';
         'font-size': font.size,
-        'font-style': font.fontStyle,
+        'font-style': font.fontStyle.toLowerCase(),
         'font-family': font.fontFamily,
-        'font-weight': font.fontWeight,
+        'font-weight': font.fontWeight.toLowerCase(),
         'transform': 'rotate(' + angle + ', 0, 0)',
@@ -387,2 +387,3 @@ 'text-anchor': 'middle'
         if (!this.heatMap.enableCanvasRendering) {
+            delete properties.d;
             parentElement.appendChild(this.heatMap.renderer.drawRectangle(properties));
@@ -397,2 +398,3 @@ }
         if (!this.heatMap.enableCanvasRendering) {
+            delete properties.d;
             parentElement.appendChild(this.heatMap.renderer.drawCircle(properties));
@@ -407,2 +409,4 @@ }
         if (!this.heatMap.enableCanvasRendering) {
+            delete properties.x;
+            delete properties.y;
             parentElement.appendChild(this.heatMap.renderer.drawPath(properties));
@@ -417,3 +421,7 @@ }
         if (!this.heatMap.enableCanvasRendering) {
+            delete properties.labelRotation;
+            delete properties.baseline;
+            delete properties.text;
             parentElement.appendChild(this.heatMap.renderer.createText(properties, text));
+            properties.text = text;
         }
@@ -439,3 +447,3 @@ else {
             'font-family': font.fontFamily,
-            'font-weight': font.fontWeight,
+            'font-weight': font.fontWeight.toLowerCase(),
             'text-anchor': options['text-anchor'],
@@ -475,2 +483,3 @@ 'transform': options.transform,
         if (!this.heatMap.enableCanvasRendering) {
+            delete properties.d;
             parentElement.appendChild(this.heatMap.renderer.drawLine(properties));
@@ -477,0 +486,0 @@ }

src/heatmap/utils/tooltip.js

@@ -139,5 +139,5 @@ /**
                 size: this.heatMap.tooltipSettings.textStyle.size,
-                fontWeight: this.heatMap.tooltipSettings.textStyle.fontWeight,
+                fontWeight: this.heatMap.tooltipSettings.textStyle.fontWeight.toLowerCase(),
                 color: this.heatMap.tooltipSettings.textStyle.color,
-                fontStyle: this.heatMap.tooltipSettings.textStyle.fontStyle,
+                fontStyle: this.heatMap.tooltipSettings.textStyle.fontStyle.toLowerCase(),
                 fontFamily: this.heatMap.tooltipSettings.textStyle.fontFamily
@@ -177,3 +177,3 @@ },
         var heatMap = this.heatMap;
-        var adaptData = this.heatMap.dataSource;
+        var adaptData = this.heatMap.dataSourceSettings;
         if (heatMap.bubbleSizeWithColor) {
@@ -183,5 +183,5 @@ var xAxis = heatMap.xAxis.title && heatMap.xAxis.title.text !== '' ? heatMap.xAxis.title.text : 'X-Axis';
             var value1 = adaptData.isJsonData && adaptData.adaptorType === 'Cell' ?
-                heatMap.dataSource.bubbleDataMapping.size : 'Value 1';
+                adaptData.bubbleDataMapping.size : 'Value 1';
             var value2 = adaptData.isJsonData && adaptData.adaptorType === 'Cell' ?
-                heatMap.dataSource.bubbleDataMapping.color : 'Value 2';
+                adaptData.bubbleDataMapping.color : 'Value 2';
             value = hetmapSeries.getFormatedText(currentRect.value[0].bubbleData, this.heatMap.cellSettings.format);
@@ -188,0 +188,0 @@ content = [xAxis + ' : ' + hetmapSeries.hoverXAxisLabel + '<br/>'

No alert changes

Improved metrics

Total package byte prevSize

3824146

increased by1.63%

Lines of code

26659

increased by1.37%

Dependency changes

• + Added@syncfusion/ej2-base@17.3.27(transitive)

• + Added@syncfusion/ej2-data@17.3.30(transitive)

• + Added@syncfusion/ej2-icons@17.3.27(transitive)

• + Added@syncfusion/ej2-svg-base@17.3.27(transitive)

• - Removed@syncfusion/ej2-base@17.2.48-beta(transitive)

• - Removed@syncfusion/ej2-data@17.2.48-beta(transitive)

• - Removed@syncfusion/ej2-icons@17.2.48-beta(transitive)

• - Removed@syncfusion/ej2-svg-base@17.2.48-beta(transitive)

• Updated@syncfusion/ej2-base@~17.3.9-beta

• Updated@syncfusion/ej2-data@~17.3.9-beta

• Updated@syncfusion/ej2-svg-base@~17.3.9-beta