@syncfusion/ej2-heatmap - npm Package Compare versions

Comparing version 17.3.27 to 17.4.39

CHANGELOG.md

@@ -1,10 +0,12 @@
-<!-- markdownlint-disable MD010 -->
+# Changelog
 
-<!-- markdownlint-disable MD030 -->
+## [Unreleased]
 
-<!-- markdownlint-disable MD004 -->
+### HeatMap
 
-# Changelog
+#### New Features
 
-## [Unreleased]
+- `#234060`, `#246529` - Provided the cell color customization support for heatmap by using the `cellRender` event .
+- Provided the legend title support to customize the legend title in heatmap.
+- Provided the support for a cell color range to customize a cell color based on the range value.
 
@@ -11,0 +13,0 @@ ## 17.3.9-beta (2019-09-20)

dist/global/index.d.ts

 /*!
 *  filename: index.d.ts
-*  version : 17.3.27
+*  version : 17.4.39
 *  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.3.26",
+  "_id": "@syncfusion/ej2-heatmap@17.2.48",
   "_inBundle": false,
-  "_integrity": "sha512-uvzZLJZN7822t/q1fuHCYSprKz+kQ2N5V8UpYjQwAqNbo/lUo6mEeFtwsjJ+qAR2BKTZCPbwyRneBkD3ddBt8A==",
+  "_integrity": "sha512-lbMYHr7TB+fbG+N9kqMnv/QytpYLSpScV66beiVDrkBTG3M/cIFntb7Lx4+NPgP03a0LNw4pAo2pe4cBZLqsyQ==",
   "_location": "/@syncfusion/ej2-heatmap",
@@ -26,4 +26,4 @@ "_phantomChildren": {},
   ],
-  "_resolved": "http://nexus.syncfusion.com/repository/ej2-hotfix/@syncfusion/ej2-heatmap/-/ej2-heatmap-17.3.26.tgz",
-  "_shasum": "6879e0b6cd83b189a505415f98a78bb270271fe6",
+  "_resolved": "http://nexus.syncfusion.com/repository/ej2-release/@syncfusion/ej2-heatmap/-/ej2-heatmap-17.2.48.tgz",
+  "_shasum": "ab3e94548fb4c2ab12f8b710883963cce592ce03",
   "_spec": "@syncfusion/ej2-heatmap@*",
@@ -36,5 +36,5 @@ "_where": "/jenkins/workspace/ation_hotfix_17.2.0.34_Vol2-DDPJ6C2YEWTWLLKKNA7AG2JBE6DYTCTNGMHGORWGAYAVCL6L7OLQ/packages/included",
   "dependencies": {
-    "@syncfusion/ej2-base": "~17.3.27",
-    "@syncfusion/ej2-data": "~17.3.27",
-    "@syncfusion/ej2-svg-base": "~17.3.27"
+    "@syncfusion/ej2-base": "~17.4.39",
+    "@syncfusion/ej2-data": "~17.4.39",
+    "@syncfusion/ej2-svg-base": "~17.4.39"
   },
@@ -73,4 +73,4 @@ "deprecated": false,
   "typings": "index.d.ts",
-  "version": "17.3.27",
+  "version": "17.4.39",
   "sideEffects": false
 }

src/heatmap/heatmap.d.ts

@@ -185,2 +185,4 @@ /**
     /** @private */
+    isColorRange: boolean;
+    /** @private */
     initialClipRect: Rect;
@@ -187,0 +189,0 @@ heatMapAxis: AxisHelper;

src/heatmap/legend/legend-model.d.ts

@@ -1,2 +0,2 @@
-import { Property, ChildProperty, Complex, Browser, createElement, isNullOrUndefined } from '@syncfusion/ej2-base';import { LinearGradient } from '@syncfusion/ej2-svg-base';import { HeatMap } from '../heatmap';import { DrawSvgCanvas, TextOption, TextBasic, PathOption, Line, LineOption, GradientPointer } from '../utils/helper';import { Size, measureText, getTitle, getElement, CanvasTooltip, formatValue, LegendRange, ToggleVisibility, sum } from '../utils/helper';import { LegendPosition, Alignment, LabelDisplayType } from '../utils/enum';import { BorderModel, FontModel } from '../model/base-model';import { Font, LegendColorCollection, BubbleTooltipData, ColorCollection } from '../model/base';import { Rect, RectOption, Gradient, GradientColor, showTooltip, stringToNumber, CurrentLegendRect, removeElement } from '../utils/helper';import { Axis } from '../axis/axis';import { Theme } from '../model/theme';import { CurrentRect } from '../utils/helper';import { Tooltip as tool } from '@syncfusion/ej2-svg-base';import { ILegendRenderEventArgs } from '../model/interface';
+import { Property, ChildProperty, Complex, Browser, createElement, isNullOrUndefined } from '@syncfusion/ej2-base';import { LinearGradient } from '@syncfusion/ej2-svg-base';import { HeatMap } from '../heatmap';import { DrawSvgCanvas, TextOption, TextBasic, PathOption, Line, LineOption, GradientPointer, textTrim } from '../utils/helper';import { Size, measureText, getTitle, getElement, CanvasTooltip, formatValue, LegendRange, ToggleVisibility, sum} from '../utils/helper';import { LegendPosition, Alignment, LabelDisplayType } from '../utils/enum';import { BorderModel, FontModel, TitleModel } from '../model/base-model';import { Font, LegendColorCollection, BubbleTooltipData, ColorCollection, Title } from '../model/base';import { Rect, RectOption, Gradient, GradientColor, showTooltip, stringToNumber, CurrentLegendRect, removeElement } from '../utils/helper';import { Axis } from '../axis/axis';import { Theme } from '../model/theme';import { CurrentRect } from '../utils/helper';import { Tooltip as tool } from '@syncfusion/ej2-svg-base';import { ILegendRenderEventArgs } from '../model/interface';
 
@@ -21,2 +21,8 @@ /**
     /**
+     * Specifies title of Legend.
+     * @default ''
+     */
+    title?: TitleModel;
+
+    /**
      * Specifies the position of Legend to render.
@@ -23,0 +29,0 @@ * @default 'Right'

src/heatmap/legend/legend.d.ts

@@ -6,3 +6,3 @@ import { ChildProperty } from '@syncfusion/ej2-base';
 import { LegendPosition, Alignment, LabelDisplayType } from '../utils/enum';
-import { FontModel } from '../model/base-model';
+import { FontModel, TitleModel } from '../model/base-model';
 import { Rect, CurrentLegendRect } from '../utils/helper';
@@ -25,2 +25,7 @@ import { Tooltip as tool } from '@syncfusion/ej2-svg-base';
     /**
+     * Specifies title of Legend.
+     * @default ''
+     */
+    title: TitleModel;
+    /**
      * Specifies the position of Legend to render.
@@ -98,2 +103,4 @@ * @default 'Right'
     private segmentCollections;
+    private segmentCollectionsLabels;
+    private labelPosition;
     private textWrapCollections;
@@ -122,2 +129,3 @@ labelCollections: string[];
     legendLabelTooltip: CanvasTooltip[];
+    legendTitleTooltip: CanvasTooltip[];
     private numberOfRows;
@@ -155,3 +163,8 @@ private labelXCollections;
     renderLegendItems(): void;
+    private renderElements;
+    private calculateCanvasColorRange;
+    private calculateColorRange;
+    private renderTitle;
     private renderSmartLegend;
+    private colorRangeLegendPosition;
     private renderLegendLabel;
@@ -170,2 +183,3 @@ /**
     calculateLegendBounds(rect: Rect): void;
+    private calculateTitleBounds;
     private calculateListLegendBounds;
@@ -185,2 +199,6 @@ private getMaxLabelSize;
      */
+    renderLegendTitleTooltip(e: PointerEvent, pageX: number, pageY: number): void;
+    /**
+     * @private
+     */
     renderLegendLabelTooltip(e: PointerEvent, pageX: number, pageY: number): void;
@@ -187,0 +205,0 @@ private calculateListPerPage;

src/heatmap/model/base-model.d.ts

@@ -164,2 +164,21 @@ import { Property, ChildProperty, Complex, Collection } from '@syncfusion/ej2-base';import { Alignment, TextOverflow, BorderType } from '../utils/enum';import { Theme } from './theme';
 /**
+ * Interface for a class FillColor
+ */
+export interface FillColorModel {
+
+    /**
+     * minimum fill color for cell color range
+     * @default '#eeeeee'
+     */
+    minColor?: string;
+
+    /**
+     * maximum fill color for cell color range
+     * @default '#eeeeee'
+     */
+    maxColor?: string;
+
+}
+
+/**
  * Interface for a class PaletteCollection
@@ -187,2 +206,26 @@ */
 
+    /**
+     * Palette start value
+     * @default null
+     */
+    startValue?: number;
+
+    /**
+     * Palette end value
+     * @default null
+     */
+    endValue?: number;
+
+    /**
+     * Palette minColor value
+     * @default null
+     */
+    minColor?: string;
+
+    /**
+     * Palette maxColor value
+     * @default null
+     */
+    maxColor?: string;
+
 }
@@ -204,2 +247,3 @@
      * @default 1
+     * @blazordefaultvalue 0
      */
@@ -206,0 +250,0 @@ width?: number;

src/heatmap/model/base.d.ts

@@ -133,2 +133,17 @@ import { ChildProperty } from '@syncfusion/ej2-base';
 /**
+ * class used to maintain the fill color value for cell color range
+ */
+export declare class FillColor extends ChildProperty<FillColor> {
+    /**
+     * minimum fill color for cell color range
+     * @default '#eeeeee'
+     */
+    minColor: string;
+    /**
+     * maximum fill color for cell color range
+     * @default '#eeeeee'
+     */
+    maxColor: string;
+}
+/**
  * class used to maintain palette information.
@@ -152,2 +167,22 @@ */
     label: string;
+    /**
+     * Palette start value
+     * @default null
+     */
+    startValue: number;
+    /**
+     * Palette end value
+     * @default null
+     */
+    endValue: number;
+    /**
+     * Palette minColor value
+     * @default null
+     */
+    minColor: string;
+    /**
+     * Palette maxColor value
+     * @default null
+     */
+    maxColor: string;
 }
@@ -166,2 +201,3 @@ /**
      * @default 1
+     * @blazordefaultvalue 0
      */
@@ -264,3 +300,7 @@ width: number;
     label: string;
-    constructor(value: number, color: string, label: string);
+    startValue: number;
+    endValue: number;
+    minColor: string;
+    maxColor: string;
+    constructor(value: number, color: string, label: string, startValue: number, endValue: number, minColor: string, maxColor: string);
 }
@@ -283,4 +323,8 @@ /**
     label: string;
+    startValue: number;
+    endValue: number;
+    minColor: string;
+    maxColor: string;
     isHidden: boolean;
-    constructor(value: number, color: string, label: string, isHidden: boolean);
+    constructor(value: number, color: string, label: string, startValue: number, endValue: number, minColor: string, maxColor: string, isHidden: boolean);
 }

src/heatmap/model/base.js

@@ -149,2 +149,19 @@ var __extends = (this && this.__extends) || (function () {
 /**
+ * class used to maintain the fill color value for cell color range
+ */
+var FillColor = /** @class */ (function (_super) {
+    __extends(FillColor, _super);
+    function FillColor() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    __decorate([
+        Property('#eeeeee')
+    ], FillColor.prototype, "minColor", void 0);
+    __decorate([
+        Property('#eeeeee')
+    ], FillColor.prototype, "maxColor", void 0);
+    return FillColor;
+}(ChildProperty));
+export { FillColor };
+/**
  * class used to maintain palette information.
@@ -166,2 +183,14 @@ */
     ], PaletteCollection.prototype, "label", void 0);
+    __decorate([
+        Property(null)
+    ], PaletteCollection.prototype, "startValue", void 0);
+    __decorate([
+        Property(null)
+    ], PaletteCollection.prototype, "endValue", void 0);
+    __decorate([
+        Property(null)
+    ], PaletteCollection.prototype, "minColor", void 0);
+    __decorate([
+        Property(null)
+    ], PaletteCollection.prototype, "maxColor", void 0);
     return PaletteCollection;
@@ -257,6 +286,10 @@ }(ChildProperty));
 var ColorCollection = /** @class */ (function () {
-    function ColorCollection(value, color, label) {
+    function ColorCollection(value, color, label, startValue, endValue, minColor, maxColor) {
         this.value = value;
         this.color = color;
         this.label = label;
+        this.startValue = startValue;
+        this.endValue = endValue;
+        this.minColor = minColor;
+        this.maxColor = maxColor;
     }
@@ -282,6 +315,10 @@ return ColorCollection;
 var LegendColorCollection = /** @class */ (function () {
-    function LegendColorCollection(value, color, label, isHidden) {
+    function LegendColorCollection(value, color, label, startValue, endValue, minColor, maxColor, isHidden) {
         this.value = value;
         this.color = color;
         this.label = label;
+        this.startValue = startValue;
+        this.endValue = endValue;
+        this.minColor = minColor;
+        this.maxColor = maxColor;
         this.isHidden = isHidden;
@@ -288,0 +325,0 @@ }

src/heatmap/model/interface.d.ts

@@ -87,2 +87,4 @@ import { HeatMap, SelectedCellDetails } from '..';
     displayText: string;
+    /** Defines cell color of a particular cell */
+    cellColor: string;
 }
@@ -89,0 +91,0 @@ export interface ISelectedEventArgs extends IHeatMapEventArgs {

src/heatmap/model/theme.d.ts

@@ -10,2 +10,4 @@ import { IFontMapping, IThemeStyle } from './interface';
     /** @private */
+    let titleFont: IFontMapping;
+    /** @private */
     let axisTitleFont: IFontMapping;
@@ -12,0 +14,0 @@ /** @private */

src/heatmap/model/theme.js

@@ -15,2 +15,11 @@ /**
     /** @private */
+    Theme.titleFont = {
+        size: '13px',
+        fontWeight: 'Normal',
+        color: null,
+        fontStyle: 'Normal',
+        fontFamily: 'Segoe UI',
+        textOverflow: 'None',
+    };
+    /** @private */
     Theme.axisTitleFont = {
@@ -17,0 +26,0 @@ size: '12px',

src/heatmap/series/series.js

@@ -118,6 +118,2 @@ var __extends = (this && this.__extends) || (function () {
             borderColor = tempBorder.color;
-            if ((heatMap.renderingMode === 'Canvas' && parseFloat(tempBorder.width.toString()) === 0) || (!borderColor &&
-                cellSetting.tileType === 'Bubble' && cellSetting.bubbleType === 'Sector')) {
-                borderColor = this.color;
-            }
             if (this.heatMap.bubbleSizeWithColor) {
@@ -131,7 +127,14 @@ this.updateRectDetails(rectPosition, tempX, tempY, tempWidth, tempHeight, extend('', this.bubbleColorValue, null, true), x, dataYIndex, dataXIndex);
                 displayText = this.getFormatedText(this.text, cellSetting.format);
-                rectPosition.displayText = displayText;
-                if (!isNullOrUndefined(this.heatMap.cellRender)) {
-                    displayText = this.cellRendering(rectPosition, displayText);
-                }
             }
+            else {
+                displayText = '';
+            }
+            rectPosition.displayText = displayText;
+            if (!isNullOrUndefined(this.heatMap.cellRender)) {
+                displayText = this.cellRendering(rectPosition, displayText);
+            }
+            if ((heatMap.renderingMode === 'Canvas' && parseFloat(tempBorder.width.toString()) === 0) || (!borderColor &&
+                cellSetting.tileType === 'Bubble' && cellSetting.bubbleType === 'Sector')) {
+                borderColor = this.color;
+            }
             if (cellSetting.tileType === 'Rect') { // Rectangle/Tile Series
@@ -214,3 +217,4 @@ this.renderTileCell(rectPosition, tempBorder, x, this.color, borderColor);
             var maxValue = void 0;
-            minValue = (i === 0) ? this.heatMap.dataSourceMinValue : this.heatMap.toggleValue[i].value;
+            minValue = (i === 0) && !this.heatMap.isColorRange ? this.heatMap.dataSourceMinValue : this.heatMap.isColorRange ?
+                this.heatMap.toggleValue[i].startValue : this.heatMap.toggleValue[i].value;
             if (this.heatMap.cellSettings.tileType === 'Bubble' && this.heatMap.cellSettings.bubbleType === 'SizeAndColor') {
@@ -221,4 +225,5 @@ maxValue = (i === this.heatMap.toggleValue.length - 1) ? this.heatMap.maxColorValue :
             else {
-                maxValue = (i === this.heatMap.toggleValue.length - 1) ? this.heatMap.dataSourceMaxValue :
-                    this.heatMap.toggleValue[i + 1].value - 0.01;
+                maxValue = (i === this.heatMap.toggleValue.length - 1 && !this.heatMap.isColorRange) ?
+                    this.heatMap.dataSourceMaxValue : this.heatMap.isColorRange ?
+                    this.heatMap.toggleValue[i].endValue : this.heatMap.toggleValue[i + 1].value - 0.01;
             }
@@ -244,2 +249,7 @@ // tslint:disable-next-line:no-any
             }
+            else if (this.heatMap.isColorRange &&
+                maxValue >= this.heatMap.toggleValue[i].endValue && i === this.heatMap.toggleValue.length - 1) {
+                isValueInRange = true;
+                break;
+            }
         }
@@ -268,5 +278,7 @@ return isValueInRange;
             xValue: xAxis.labelValue[rectPosition.xIndex],
-            yValue: yLabelValue[rectPosition.yIndex]
+            yValue: yLabelValue[rectPosition.yIndex],
+            cellColor: this.color
         };
         this.heatMap.trigger('cellRender', argData);
+        this.color = argData.cellColor;
         return argData.displayText;
@@ -273,0 +285,0 @@ };

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, ColorGradientMode} 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, Complex } from '@syncfusion/ej2-base';import { HeatMap } from '../heatmap';import { PaletteType, ColorGradientMode} from '../utils/enum';import { ColorCollection, LegendColorCollection, PaletteCollection, FillColor } from '../model/base';import { PaletteCollectionModel, FillColorModel } from '../model/base-model';import { PaletterColor, LegendRange } from './helper';
 
@@ -34,2 +34,8 @@ /**
 
+    /**
+     * Options to set fill colors.
+     */
+
+    fillColor?: FillColorModel;
+
 }
@@ -36,0 +42,0 @@

src/heatmap/utils/colorMapping.d.ts

@@ -5,3 +5,3 @@ import { ChildProperty } from '@syncfusion/ej2-base';
 import { ColorCollection } from '../model/base';
-import { PaletteCollectionModel } from '../model/base-model';
+import { PaletteCollectionModel, FillColorModel } from '../model/base-model';
 /**
@@ -33,2 +33,6 @@ * Configures the color property in Heatmap.
     colorGradientMode: ColorGradientMode;
+    /**
+     * Options to set fill colors.
+     */
+    fillColor: FillColorModel;
 }
@@ -35,0 +39,0 @@ /**

src/heatmap/utils/colorMapping.js

@@ -20,4 +20,4 @@ var __extends = (this && this.__extends) || (function () {
 };
-import { Property, extend, ChildProperty, Collection, isNullOrUndefined } from '@syncfusion/ej2-base';
-import { ColorCollection, LegendColorCollection, PaletteCollection } from '../model/base';
+import { Property, extend, ChildProperty, Collection, isNullOrUndefined, Complex } from '@syncfusion/ej2-base';
+import { ColorCollection, LegendColorCollection, PaletteCollection, FillColor } from '../model/base';
 import { PaletterColor } from './helper';
@@ -44,2 +44,5 @@ /**
     ], PaletteSettings.prototype, "colorGradientMode", void 0);
+    __decorate([
+        Complex({}, FillColor)
+    ], PaletteSettings.prototype, "fillColor", void 0);
     return PaletteSettings;
@@ -70,21 +73,56 @@ }(ChildProperty));
     CellColor.prototype.convertToRGB = function (value, colorMapping) {
-        var previousOffset = colorMapping[0].value;
+        var previousOffset = this.heatMap.isColorRange ? colorMapping[0].startValue : colorMapping[0].value;
         var nextOffset = 0;
-        for (var i = 1; i < colorMapping.length; i++) {
-            var offset = Number(colorMapping[i].value);
-            if (value <= offset) {
-                nextOffset = offset;
-                break;
+        var i = 0;
+        var previousColor;
+        var nextColor;
+        if (this.heatMap.isColorRange && this.heatMap.paletteSettings.type === 'Gradient') {
+            for (i = 0; i < colorMapping.length; i++) {
+                var offset = Number(colorMapping[i].endValue);
+                if (value <= offset && value >= Number(colorMapping[i].startValue)) {
+                    nextOffset = offset;
+                    previousColor = this.heatMap.colorCollection[i].minColor;
+                    nextColor = this.heatMap.colorCollection[i].maxColor;
+                    break;
+                }
+                else if (colorMapping[0].startValue !== this.heatMap.dataSourceMinValue && value < colorMapping[0].startValue) {
+                    nextOffset = colorMapping[0].startValue;
+                    previousOffset = this.heatMap.dataSourceMinValue;
+                    previousColor = this.heatMap.paletteSettings.fillColor.minColor;
+                    nextColor = this.heatMap.paletteSettings.fillColor.maxColor;
+                    break;
+                }
+                else if (value > offset && value <= (i === (colorMapping.length - 1) ? this.heatMap.dataSourceMaxValue :
+                    colorMapping[i + 1].startValue)) {
+                    nextOffset = (i === (colorMapping.length - 1)) ? this.heatMap.dataSourceMaxValue : colorMapping[i + 1].startValue;
+                    previousOffset = offset;
+                    previousColor = this.heatMap.paletteSettings.fillColor.minColor;
+                    nextColor = this.heatMap.paletteSettings.fillColor.maxColor;
+                    break;
+                }
+                else {
+                    nextOffset = offset;
+                    previousOffset = offset;
+                }
             }
-            else {
-                nextOffset = offset;
-                previousOffset = offset;
+        }
+        else {
+            for (i = 1; i < colorMapping.length; i++) {
+                var offset = Number(colorMapping[i].value);
+                if (value <= offset) {
+                    nextOffset = offset;
+                    previousColor = this.getEqualColor(colorMapping, previousOffset);
+                    nextColor = this.getEqualColor(colorMapping, nextOffset);
+                    break;
+                }
+                else {
+                    nextOffset = offset;
+                    previousOffset = offset;
+                }
             }
         }
         var percent = 0;
-        var full = nextOffset - previousOffset;
+        var full = (nextOffset) - previousOffset;
         percent = (value - previousOffset) / full;
         percent = isNaN(percent) ? 0 : percent;
-        var previousColor = this.getEqualColor(colorMapping, previousOffset);
-        var nextColor = this.getEqualColor(colorMapping, nextOffset);
         return this.getPercentageColor(percent, previousColor, nextColor);
@@ -172,2 +210,11 @@ };
         var range;
+        for (var j = 0; j < this.heatMap.paletteSettings.palette.length; j++) {
+            if (this.heatMap.paletteSettings.palette[j].startValue === null || this.heatMap.paletteSettings.palette[j].endValue === null) {
+                this.heatMap.isColorRange = false;
+                break;
+            }
+            else {
+                this.heatMap.isColorRange = true;
+            }
+        }
         var minValue = heatMap.bubbleSizeWithColor ? heatMap.minColorValue : heatMap.dataSourceMinValue;
@@ -188,4 +235,4 @@ var maxValue = heatMap.bubbleSizeWithColor ? heatMap.maxColorValue : heatMap.dataSourceMaxValue;
                 for (var index = 0; index < tempcolorMapping.offsets.length; index++) {
-                    heatMap.colorCollection.push(new ColorCollection(Math.round(((minValue) + (index * range)) * 100) / 100, tempcolorMapping.offsets[index].color, tempcolorMapping.offsets[index].label));
-                    heatMap.legendColorCollection.push(new LegendColorCollection(Math.round(((minValue) + (index * range)) * 100) / 100, tempcolorMapping.offsets[index].color, tempcolorMapping.offsets[index].label, false));
+                    heatMap.colorCollection.push(new ColorCollection((Math.round(((minValue) + (index * range)) * 100) / 100), tempcolorMapping.offsets[index].color, tempcolorMapping.offsets[index].label, tempcolorMapping.offsets[index].startValue, tempcolorMapping.offsets[index].endValue, tempcolorMapping.offsets[index].minColor, tempcolorMapping.offsets[index].maxColor));
+                    heatMap.legendColorCollection.push(new LegendColorCollection(Math.round(((minValue) + (index * range)) * 100) / 100, tempcolorMapping.offsets[index].color, tempcolorMapping.offsets[index].label, tempcolorMapping.offsets[index].startValue, tempcolorMapping.offsets[index].endValue, tempcolorMapping.offsets[index].minColor, tempcolorMapping.offsets[index].maxColor, false));
                 }
@@ -198,3 +245,5 @@ }
         }
-        this.updateLegendColorCollection(minValue, maxValue, tempcolorMapping);
+        if (!this.heatMap.isColorRange) {
+            this.updateLegendColorCollection(minValue, maxValue, tempcolorMapping);
+        }
     };
@@ -210,6 +259,6 @@ /**
         if (Math.round(minValue * 100) / 100 < this.heatMap.legendColorCollection[0].value) {
-            this.heatMap.legendColorCollection.unshift(new LegendColorCollection(Math.round(minValue * 100) / 100, this.heatMap.legendColorCollection[0].color, this.heatMap.legendColorCollection[0].label, true));
+            this.heatMap.legendColorCollection.unshift(new LegendColorCollection(Math.round(minValue * 100) / 100, this.heatMap.legendColorCollection[0].color, this.heatMap.legendColorCollection[0].label, this.heatMap.legendColorCollection[0].startValue, this.heatMap.legendColorCollection[0].endValue, this.heatMap.legendColorCollection[0].minColor, this.heatMap.legendColorCollection[0].maxColor, true));
         }
         if (Math.round(maxValue * 100) / 100 > this.heatMap.legendColorCollection[this.heatMap.legendColorCollection.length - 1].value) {
-            this.heatMap.legendColorCollection.push(new LegendColorCollection(Math.round(maxValue * 100) / 100, this.heatMap.legendColorCollection[this.heatMap.legendColorCollection.length - 1].color, this.heatMap.legendColorCollection[this.heatMap.legendColorCollection.length - 1].label, true));
+            this.heatMap.legendColorCollection.push(new LegendColorCollection(Math.round(maxValue * 100) / 100, this.heatMap.legendColorCollection[this.heatMap.legendColorCollection.length - 1].color, this.heatMap.legendColorCollection[this.heatMap.legendColorCollection.length - 1].label, this.heatMap.legendColorCollection[this.heatMap.legendColorCollection.length - 1].startValue, this.heatMap.legendColorCollection[this.heatMap.legendColorCollection.length - 1].endValue, this.heatMap.legendColorCollection[this.heatMap.legendColorCollection.length - 1].minColor, this.heatMap.legendColorCollection[this.heatMap.legendColorCollection.length - 1].maxColor, true));
         }
@@ -223,3 +272,3 @@ };
         var returnCollection = new PaletterColor();
-        var key = 'value';
+        var key = this.heatMap.isColorRange ? 'to' : 'value';
         var label = 'label';
@@ -258,19 +307,36 @@ returnCollection.isCompact = true;
                 (this.heatMap.cellSettings.bubbleType === 'Size' || this.heatMap.cellSettings.bubbleType === 'Sector')) {
-                color = this.heatMap.colorCollection[0].color;
+                color = this.heatMap.isColorRange ? this.heatMap.colorCollection[0].minColor : this.heatMap.colorCollection[0].color;
             }
             else if (this.heatMap.paletteSettings.type === 'Fixed') {
                 for (var y = 0; y < this.heatMap.colorCollection.length; y++) {
-                    compareValue = this.heatMap.colorCollection[y + 1] ? this.heatMap.colorCollection[y + 1].value :
-                        this.heatMap.colorCollection[y].value;
+                    compareValue = this.heatMap.isColorRange ? this.heatMap.paletteSettings.palette[y].startValue :
+                        this.heatMap.colorCollection[y + 1] ? this.heatMap.colorCollection[y + 1].value :
+                            this.heatMap.colorCollection[y].value;
                     var singleValue = this.heatMap.dataSourceMinValue === this.heatMap.dataSourceMaxValue;
-                    if ((text <= compareValue && y === 0 && singleValue) || text < compareValue ||
-                        (text >= compareValue && y === this.heatMap.colorCollection.length - 1)) {
+                    if (this.heatMap.isColorRange) {
                         var legendRange = void 0;
-                        if (this.heatMap.legendVisibilityByCellType) {
-                            legendRange = this.heatMap.legendModule.legendRange;
+                        if ((text <= this.heatMap.colorCollection[y].endValue && text >= this.heatMap.colorCollection[y].startValue)) {
+                            if (this.heatMap.legendVisibilityByCellType) {
+                                legendRange = this.heatMap.legendModule.legendRange;
+                            }
+                            color = (this.heatMap.legendVisibilityByCellType && legendRange[y] && !legendRange[y].visible) ?
+                                this.heatMap.themeStyle.toggledColor : this.heatMap.colorCollection[y].minColor;
+                            break;
                         }
-                        color = (this.heatMap.legendVisibilityByCellType && legendRange[y] && !legendRange[y].visible) ?
-                            this.heatMap.themeStyle.toggledColor : this.heatMap.colorCollection[y].color;
-                        break;
+                        else {
+                            color = this.heatMap.paletteSettings.fillColor.minColor;
+                        }
                     }
+                    else {
+                        if ((text <= compareValue && singleValue && y === 0) || text < compareValue ||
+                            (text >= compareValue && y === this.heatMap.colorCollection.length - 1)) {
+                            var legendRange = void 0;
+                            if (this.heatMap.legendVisibilityByCellType) {
+                                legendRange = this.heatMap.legendModule.legendRange;
+                            }
+                            color = (this.heatMap.legendVisibilityByCellType && legendRange[y] && !legendRange[y].visible) ?
+                                this.heatMap.themeStyle.toggledColor : this.heatMap.colorCollection[y].color;
+                            break;
+                        }
+                    }
                 }
@@ -282,6 +348,7 @@ }
                 }
-                if (text < this.heatMap.colorCollection[0].value) {
+                if (text < this.heatMap.colorCollection[0].value && !this.heatMap.isColorRange) {
                     color = this.heatMap.colorCollection[0].color;
                 }
-                else if (text > this.heatMap.colorCollection[this.heatMap.colorCollection.length - 1].value) {
+                else if (text > this.heatMap.colorCollection[this.heatMap.colorCollection.length - 1].value &&
+                    !this.heatMap.isColorRange) {
                     color = this.heatMap.colorCollection[this.heatMap.colorCollection.length - 1].color;
@@ -288,0 +355,0 @@ }

src/heatmap/utils/helper.d.ts

@@ -330,3 +330,5 @@ import { CanvasRenderer } from '@syncfusion/ej2-svg-base';
     value: number;
-    constructor(visible: boolean, value: number);
+    startValue: number;
+    endValue: number;
+    constructor(visible: boolean, value: number, startValue: number, endValue: number);
 }
@@ -333,0 +335,0 @@ /** @private */

src/heatmap/utils/helper.js

@@ -876,5 +876,7 @@ var __extends = (this && this.__extends) || (function () {
 var ToggleVisibility = /** @class */ (function () {
-    function ToggleVisibility(visible, value) {
+    function ToggleVisibility(visible, value, startValue, endValue) {
         this.visible = visible;
         this.value = value;
+        this.startValue = startValue;
+        this.endValue = endValue;
     }
@@ -881,0 +883,0 @@ return ToggleVisibility;

No alert changes

Improved metrics

Total package byte prevSize

4136735

increased by8.17%

Lines of code

28253

increased by5.98%

Dependency changes

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

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

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

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

• - Removed@syncfusion/ej2-base@17.3.27(transitive)

• - Removed@syncfusion/ej2-data@17.3.30(transitive)

• - Removed@syncfusion/ej2-icons@17.3.27(transitive)

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

• Updated@syncfusion/ej2-base@~17.4.39

• Updated@syncfusion/ej2-data@~17.4.39

• Updated@syncfusion/ej2-svg-base@~17.4.39