@syncfusion/ej2-treemap 20.3.56 → 20.4.38

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 20.3.56
+*  version : 20.4.38
 *  Copyright Syncfusion Inc. 2001 - 2020. All rights reserved.
 *  Use of this code is subject to the terms of our license.
 *  A copy of the current license can be obtained at any time by e-mailing

package/package.json

@@ -1,8 +1,8 @@
 {
   "_from": "@syncfusion/ej2-treemap@*",
-  "_id": "@syncfusion/ej2-treemap@20.3.47",
+  "_id": "@syncfusion/ej2-treemap@16.31.3",
   "_inBundle": false,
-  "_integrity": "sha512-VXZ9GMzOfevTzhitfOAxW3uX1sy3A+NNIOEMZd3fRO9S3W6U90usl9ukZfF9wBn2NCbkkVZChOU7kwakRAM2lg==",
+  "_integrity": "sha512-sNP/1Fstr9KndFdqhX+OesnOeE6tmK/TgYO1fyai8m2JOM1ePgStaxamXMboa+VUBzHIRyw3D20HKWy0offS8g==",
   "_location": "/@syncfusion/ej2-treemap",
   "_phantomChildren": {},
   "_requested": {
@@ -23,8 +23,8 @@
     "/@syncfusion/ej2-react-treemap",
     "/@syncfusion/ej2-vue-treemap"
   ],
-  "_resolved": "https://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-treemap/-/ej2-treemap-20.3.47.tgz",
-  "_shasum": "0ad1a317dbf526bb77309166228575a21aa5d829",
+  "_resolved": "https://nexus.syncfusion.com/repository/ej2-release/@syncfusion/ej2-treemap/-/ej2-treemap-16.31.3.tgz",
+  "_shasum": "15fb7b198909ac84d2cd7529db328706fa588dcd",
   "_spec": "@syncfusion/ej2-treemap@*",
   "_where": "/jenkins/workspace/ease-automation_release_19.1.0.1/packages/included",
   "author": {
@@ -35,12 +35,12 @@
   },
   "bundleDependencies": false,
   "dependencies": {
-    "@syncfusion/ej2-base": "~20.3.56",
-    "@syncfusion/ej2-compression": "~20.3.56",
-    "@syncfusion/ej2-data": "~20.3.56",
-    "@syncfusion/ej2-file-utils": "~20.3.56",
-    "@syncfusion/ej2-pdf-export": "~20.3.56",
-    "@syncfusion/ej2-svg-base": "~20.3.56"
+    "@syncfusion/ej2-base": "~20.4.38",
+    "@syncfusion/ej2-compression": "~20.4.38",
+    "@syncfusion/ej2-data": "~20.4.38",
+    "@syncfusion/ej2-file-utils": "~20.4.38",
+    "@syncfusion/ej2-pdf-export": "~20.4.38",
+    "@syncfusion/ej2-svg-base": "~20.4.38"
   },
   "deprecated": false,
   "description": "Essential JS 2 TreeMap Components",
@@ -52,17 +52,25 @@
     "syncfusion",
     "ej2-treemap",
     "web-components",
+    "data-visualization",
+    "typescript",
+    "javascript",
     "treemap",
+    "hierarchy",
+    "hierarchical-data",
+    "flat-data",
     "layout",
-    "leaf-node",
     "levels",
-    "legend",
+    "leaf-node",
+    "data-labels",
+    "label-template",
+    "header-template",
+    "drill-down",
     "color-mapping",
-    "labels",
-    "tooltip",
-    "drilldown",
+    "selection",
+    "highlight",
     "legend",
-    "label-template"
+    "template"
   ],
   "license": "SEE LICENSE IN license",
   "main": "./dist/ej2-treemap.umd.min.js",
@@ -73,6 +81,6 @@
     "url": "git+https://github.com/syncfusion/ej2-javascript-ui-controls.git"
   },
   "typings": "index.d.ts",
-  "version": "20.3.56",
+  "version": "20.4.38",
   "sideEffects": false
 }

package/src/treemap/layout/legend.d.ts

@@ -52,6 +52,9 @@ export declare class TreeMapLegend {
     private renderLegendTitle;
     /**
      * To rendered the interactive pointer
+     *
+     * @param {PointerEvent | TouchEvent} e - Specifies the pointer argument.
+     * @returns {void}
      */
     renderInteractivePointer(e: PointerEvent | TouchEvent): void;
     private drawInteractivePointer;
@@ -63,10 +66,16 @@ export declare class TreeMapLegend {
     removeInteractivePointer(): void;
     /**
      * To change the next page
+     *
+     * @param {PointerEvent} e - Specifies the pointer event argument.
+     * @returns {void}
      */
     changeNextPage(e: PointerEvent): void;
     /**
      * Wire events for event handler
+     *
+     * @param {Element} element - Specifies the element.
+     * @returns {void}
      */
     wireEvents(element: Element): void;
     /**
@@ -79,6 +88,8 @@ export declare class TreeMapLegend {
     removeEventListener(): void;
     /**
      * Get module name.
+     *
+     * @returns {string} Returns the legend module name.
      */
     protected getModuleName(): string;
     /**
@@ -90,6 +101,10 @@ export declare class TreeMapLegend {
     destroy(): void;
     /**
      * Get the gradient color for interactive legend.
+     *
+     * @param {ColorMappingModel} colorMap - Specifies the color mapping instance.
+     * @param {number} legendIndex - Specifies the index of legend.
+     * @returns {string} - Returns the legend color.
      */
     legendGradientColor(colorMap: ColorMappingModel, legendIndex: number): string;
 }

package/src/treemap/layout/legend.js

@@ -1,6 +1,3 @@
-/* eslint-disable @typescript-eslint/naming-convention */
-/* eslint-disable @typescript-eslint/dot-notation */
-/* eslint-disable max-len */
 import { LevelsData } from '../treemap';
 import { findChildren, Location, Rect, Size, measureText, TextOption, PathOption, RectOption, drawSymbol, orderByArea, legendMaintain } from '../utils/helper';
 import { Browser, isNullOrUndefined, EventHandler, extend } from '@syncfusion/ej2-base';
@@ -10,7 +7,6 @@ import { legendItemRendering, legendRendering } from '../model/constants';
  * Legend module class
  */
 var TreeMapLegend = /** @class */ (function () {
-    // eslint-disable-next-line @typescript-eslint/explicit-member-accessibility
     function TreeMapLegend(treemap) {
         this.page = 0;
         this.legendBorderRect = new Rect(0, 0, 0, 0);
@@ -38,15 +34,12 @@ var TreeMapLegend = /** @class */ (function () {
         this.heightIncrement = 0;
         this.defsElement = this.treemap.renderer.createDefs();
         this.treemap.svgObject.appendChild(this.defsElement);
-        var eventArgs;
-        eventArgs = {
+        var eventArgs = {
             cancel: false, name: legendRendering, treemap: this.treemap, _changePosition: this.treemap.legendSettings.position,
             position: this.treemap.legendSettings.position
         };
         this.treemap.trigger(legendRendering, eventArgs, function (observedArgs) {
-            // eslint-disable-next-line no-underscore-dangle
             if (!observedArgs.cancel && observedArgs._changePosition !== _this.treemap.legendSettings.position) {
-                // eslint-disable-next-line no-underscore-dangle
                 _this.treemap.legendSettings.position = observedArgs._changePosition;
             }
             _this.calculateLegendBounds();
@@ -62,9 +55,18 @@ var TreeMapLegend = /** @class */ (function () {
         this.findColorMappingLegendItems(LevelsData.levelsData[0]);
         if ((this.treemap.palette.length > 0 || !isNullOrUndefined(this.treemap.colorValuePath))
             && this.legendCollections.length === 0) {
-            this.findPaletteLegendItems(LevelsData.levelsData[0], 'Parent');
+            this.findPaletteLegendItems(LevelsData.levelsData[0]);
         }
         if (this.legendCollections.length > 0) {
+            // eslint-disable-next-line @typescript-eslint/tslint/config
+            this.legendCollections.sort(function (firstItem, nextItem) { return (firstItem.levelIndex > nextItem.levelIndex) ? 1 :
+                (firstItem.levelIndex < nextItem.levelIndex) ? -1 : 0; });
+            // eslint-disable-next-line @typescript-eslint/tslint/config
+            this.legendCollections.sort(function (firstItem, nextItem) { return (firstItem.groupIndex > nextItem.groupIndex) ? 1 :
+                (firstItem.groupIndex < nextItem.groupIndex) ? -1 : 0; });
+            // eslint-disable-next-line @typescript-eslint/tslint/config
+            this.legendCollections.sort(function (firstItem, nextItem) { return (firstItem.leafIndex > nextItem.leafIndex) ? 1 :
+                (firstItem.leafIndex < nextItem.leafIndex) ? -1 : 0; });
             var defaultSize = 25;
             var textPadding = 10;
             var position = legend.position;
@@ -95,10 +97,7 @@ var TreeMapLegend = /** @class */ (function () {
             var startX_1 = 0;
             var startY_1 = 0;
             var shapePadding = legend.shapePadding;
-            var rectWidth = void 0;
-            var rectHeight = void 0;
             var itemTextStyle = legend.textStyle;
-            var legendLength = this.legendCollections.length;
             itemTextStyle.size = itemTextStyle.size || treemap.themeStyle.legendFontSize;
             itemTextStyle.fontFamily = itemTextStyle.fontFamily || treemap.themeStyle.fontFamily;
             if (legendMode === 'Default') {
@@ -208,11 +207,11 @@ var TreeMapLegend = /** @class */ (function () {
                 };
             }
             else {
-                var legendLength_1 = this.legendCollections.length;
-                var rectWidth_1 = (orientation_1 === 'Horizontal') ? (isNullOrUndefined(legendWidth)) ? (treemap.areaRect.width / legendLength_1) :
-                    (legendWidth / legendLength_1) : (isNullOrUndefined(legendWidth)) ? defaultSize : legendWidth;
-                var rectHeight_1 = (orientation_1 === 'Horizontal') ? (isNullOrUndefined(legendHeight)) ? defaultSize : legendHeight :
-                    (isNullOrUndefined(legendHeight)) ? (treemap.areaRect.height / legendLength_1) : (legendHeight / legendLength_1);
+                var legendLength = this.legendCollections.length;
+                var rectWidth = (orientation_1 === 'Horizontal') ? (isNullOrUndefined(legendWidth)) ? (treemap.areaRect.width / legendLength) :
+                    (legendWidth / legendLength) : (isNullOrUndefined(legendWidth)) ? defaultSize : legendWidth;
+                var rectHeight = (orientation_1 === 'Horizontal') ? (isNullOrUndefined(legendHeight)) ? defaultSize : legendHeight :
+                    (isNullOrUndefined(legendHeight)) ? (treemap.areaRect.height / legendLength) : (legendHeight / legendLength);
                 startX_1 = 0;
                 startY_1 = legendTitleSize.height + spacing;
                 var textPadding_1 = 10;
@@ -223,15 +222,15 @@ var TreeMapLegend = /** @class */ (function () {
                 var maxTextHeight = 0;
                 var maxTextWidth = 0;
                 for (var i = 0; i < this.legendCollections.length; i++) {
-                    startX_1 = (orientation_1 === 'Horizontal') ? (startX_1 + rectWidth_1) : startX_1;
-                    startY_1 = (orientation_1 === 'Horizontal') ? startY_1 : (startY_1 + rectHeight_1);
+                    startX_1 = (orientation_1 === 'Horizontal') ? (startX_1 + rectWidth) : startX_1;
+                    startY_1 = (orientation_1 === 'Horizontal') ? startY_1 : (startY_1 + rectHeight);
                     var legendText = this.legendCollections[i]['legendName'];
                     var itemTextSize = new Size(0, 0);
                     if (labelAction === 'None') {
                         itemTextSize = measureText(legendText, itemTextStyle);
                     }
                     else if (labelAction === 'Trim') {
-                        legendText = textTrim((orientation_1 === 'Horizontal' ? rectWidth_1 : rectHeight_1), legendText, itemTextStyle);
+                        legendText = textTrim((orientation_1 === 'Horizontal' ? rectWidth : rectHeight), legendText, itemTextStyle);
                         itemTextSize = measureText(legendText, itemTextStyle);
                     }
                     else {
@@ -241,14 +240,14 @@ var TreeMapLegend = /** @class */ (function () {
                     maxTextWidth = Math.max(maxTextWidth, itemTextSize.width);
                     if (itemTextSize.width > 0 && itemTextSize.height > 0) {
                         if (orientation_1 === 'Horizontal') {
-                            textX = startX_1 + (rectWidth_1 / 2);
-                            textY = (placement === 'After') ? (startY_1 + rectHeight_1 + (itemTextSize.height / 2)) + textPadding_1 :
+                            textX = startX_1 + (rectWidth / 2);
+                            textY = (placement === 'After') ? (startY_1 + rectHeight + (itemTextSize.height / 2)) + textPadding_1 :
                                 (startY_1 - textPadding_1);
                         }
                         else {
                             textX = (placement === 'After') ? startX_1 - (itemTextSize.width / 2) - textPadding_1
-                                : (startX_1 + rectWidth_1 + itemTextSize.width / 2) + textPadding_1;
-                            textY = startY_1 + (rectHeight_1 / 2) + (itemTextSize.height / 4);
+                                : (startX_1 + rectWidth + itemTextSize.width / 2) + textPadding_1;
+                            textY = startY_1 + (rectHeight / 2) + (itemTextSize.height / 4);
                         }
                     }
                     if (i === 0) {
@@ -257,15 +256,15 @@ var TreeMapLegend = /** @class */ (function () {
                         itemStartY = (orientation_1 === 'Horizontal') ? (placement === 'After') ? startY_1 :
                             textY - (itemTextSize.height / 2) : startY_1;
                     }
-                    if (i === legendLength_1 - 1) {
-                        legendWidth = (orientation_1 === 'Horizontal') ? Math.abs((startX_1 + rectWidth_1) - itemStartX) :
-                            (rectWidth_1 + maxTextWidth + textPadding_1);
-                        legendHeight = (orientation_1 === 'Horizontal') ? (rectHeight_1 + (maxTextHeight / 2) + textPadding_1) :
-                            Math.abs((startY_1 + rectHeight_1) - itemStartY);
+                    if (i === legendLength - 1) {
+                        legendWidth = (orientation_1 === 'Horizontal') ? Math.abs((startX_1 + rectWidth) - itemStartX) :
+                            (rectWidth + maxTextWidth + textPadding_1);
+                        legendHeight = (orientation_1 === 'Horizontal') ? (rectHeight + (maxTextHeight / 2) + textPadding_1) :
+                            Math.abs((startY_1 + rectHeight) - itemStartY);
                     }
                     this.legendRenderingCollections.push({
                         fill: this.legendCollections[i]['legendFill'], x: startX_1, y: startY_1,
-                        width: rectWidth_1, height: rectHeight_1, element: this.legendCollections[i]['gradientElement'],
+                        width: rectWidth, height: rectHeight, element: this.legendCollections[i]['gradientElement'],
                         text: legendText, textX: textX, textY: textY,
                         textWidth: itemTextSize.width, textHeight: itemTextSize.height,
                         data: this.legendCollections[i]['legendData']
@@ -295,7 +294,7 @@ var TreeMapLegend = /** @class */ (function () {
         }
     };
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    TreeMapLegend.prototype.findPaletteLegendItems = function (data, type) {
+    TreeMapLegend.prototype.findPaletteLegendItems = function (data) {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         var child;
         var legendFillColor;
@@ -372,7 +371,6 @@ var TreeMapLegend = /** @class */ (function () {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         var currentData;
         var legendText;
-        var itemValue;
         var isLeafItem;
         var colorMapProcess = false;
         var colorMapping;
@@ -403,8 +401,8 @@ var TreeMapLegend = /** @class */ (function () {
             groupIndex = data[i]['groupIndex'];
             isLeafItem = (this.treemap.levels.length === 0 || groupIndex === this.treemap.levels.length);
             colorMapping = isLeafItem ? leaf.colorMapping : levels[groupIndex].colorMapping;
-            for (var _i = 0, colorMapping_1 = colorMapping; _i < colorMapping_1.length; _i++) {
-                var colorMap = colorMapping_1[_i];
+            for (var j = 0; j < colorMapping.length; j++) {
+                var colorMap = colorMapping[j];
                 gradientElement = null;
                 rangeValue = Number(currentData[this.treemap.rangeColorValuePath]);
                 equalValue = currentData[this.treemap.equalColorValuePath];
@@ -465,8 +463,8 @@ var TreeMapLegend = /** @class */ (function () {
                     fill = ((Object.prototype.toString.call(colorMap.color) === '[object Array]')) && isNullOrUndefined(gradientElement)
                         && isNullOrUndefined(colorMap.value) ? this.legendGradientColor(colorMap, legendIndex) : fill;
                     this.legendCollections.push({
-                        actualValue: actualValue,
-                        legendName: legendText, legendFill: fill, legendData: [],
+                        actualValue: actualValue, levelIndex: !isLeafItem ? j : -1, leafIndex: isLeafItem ? j : -1,
+                        legendName: legendText, legendFill: fill, legendData: [], groupIndex: !isLeafItem ? groupIndex : -1,
                         gradientElement: !isNullOrUndefined(gradientElement) ? gradientElement : isNullOrUndefined(colorMap.value)
                             ? this.legendLinearGradient : null, name: data[i]['name'],
                         opacity: this.treemap.legendSettings.opacity, borderColor: this.treemap.legendSettings.border.color,
@@ -623,7 +621,6 @@ var TreeMapLegend = /** @class */ (function () {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         var textOptions;
         var legendRtlLocation;
-        var renderOptions;
         var render = treemap.renderer;
         var shapeBorder = legend.shapeBorder;
         var eventArgs;
@@ -722,7 +719,6 @@ var TreeMapLegend = /** @class */ (function () {
         var legendTitle = legend.title.text;
         var spacing = 10;
         var textStyle = legend.titleStyle;
-        var textOptions;
         var title = textTrim((this.legendItemRect.width + (spacing * 2)), legendTitle, textStyle);
         var textSize = measureText(title, textStyle);
         this.legendBorderRect = new Rect((this.legendItemRect.x - spacing), (this.legendItemRect.y - spacing - textSize.height), (this.legendItemRect.width) + (spacing * 2), (this.legendItemRect.height) + (spacing * 2) + textSize.height +
@@ -750,9 +746,11 @@ var TreeMapLegend = /** @class */ (function () {
             renderTextElement(textOptions, textStyle, textStyle.color || this.treemap.themeStyle.legendTitleColor, this.legendGroup);
         }
     };
-    // eslint-disable-next-line valid-jsdoc
     /**
      * To rendered the interactive pointer
+     *
+     * @param {PointerEvent | TouchEvent} e - Specifies the pointer argument.
+     * @returns {void}
      */
     TreeMapLegend.prototype.renderInteractivePointer = function (e) {
         var treemap = this.treemap;
@@ -768,7 +766,6 @@ var TreeMapLegend = /** @class */ (function () {
             var currentData = void 0;
             var legendRect = void 0;
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            var rect = void 0;
             var data = void 0;
             var fill = void 0;
             var stroke = void 0;
@@ -780,7 +777,7 @@ var TreeMapLegend = /** @class */ (function () {
                 currentData = this.legendCollections[i];
                 legendElement = document.getElementById(treemap.element.id + '_Legend_Index_' + i);
                 legendRect = legendElement.getBoundingClientRect();
-                var rect_1 = new Rect(Math.abs(legendRect.left - svgRect.left), Math.abs(legendRect.top - svgRect.top), legendRect.width, legendRect.height);
+                var rect = new Rect(Math.abs(legendRect.left - svgRect.left), Math.abs(legendRect.top - svgRect.top), legendRect.width, legendRect.height);
                 fill = legendElement.getAttribute('fill');
                 stroke = legend.shapeBorder.color;
                 strokeWidth = legend.shapeBorder.width;
@@ -789,7 +786,7 @@ var TreeMapLegend = /** @class */ (function () {
                     data = currentData['legendData'];
                     for (var j = 0; j < data.length; j++) {
                         if (data[j]['levelOrderName'] === targetItem['levelOrderName']) {
-                            this.drawInteractivePointer(legend, fill, stroke, interactiveId, strokeWidth, rect_1);
+                            this.drawInteractivePointer(legend, fill, stroke, interactiveId, strokeWidth, rect);
                             break;
                         }
                     }
@@ -910,18 +907,22 @@ var TreeMapLegend = /** @class */ (function () {
             legendElementId.parentNode.removeChild(legendElementId);
         }
     };
-    // eslint-disable-next-line valid-jsdoc
     /**
      * To change the next page
+     *
+     * @param {PointerEvent} e - Specifies the pointer event argument.
+     * @returns {void}
      */
     TreeMapLegend.prototype.changeNextPage = function (e) {
         this.currentPage = (e.target.id.indexOf('_Left_Page_') > -1) ? (this.currentPage - 1) :
             (this.currentPage + 1);
         this.drawLegend();
     };
-    // eslint-disable-next-line valid-jsdoc
     /**
      * Wire events for event handler
+     *
+     * @param {Element} element - Specifies the element.
+     * @returns {void}
      */
     TreeMapLegend.prototype.wireEvents = function (element) {
         EventHandler.add(element, Browser.touchStartEvent, this.changeNextPage, this);
@@ -948,9 +949,10 @@ var TreeMapLegend = /** @class */ (function () {
         this.treemap.off(Browser.touchMoveEvent, this.renderInteractivePointer);
         this.treemap.off(Browser.touchEndEvent, this.mouseUpHandler);
     };
-    // eslint-disable-next-line valid-jsdoc
     /**
      * Get module name.
+     *
+     * @returns {string} Returns the legend module name.
      */
     TreeMapLegend.prototype.getModuleName = function () {
         return 'treeMapLegend';
@@ -978,9 +980,12 @@ var TreeMapLegend = /** @class */ (function () {
         //TODO: The removeInteractivePointer method (calling method) is called in a timer in the mouseUpHandler method. Because of this handling, adding the below code results in a spec failure.
         //this.treemap = null;
     };
-    // eslint-disable-next-line valid-jsdoc
     /**
      * Get the gradient color for interactive legend.
+     *
+     * @param {ColorMappingModel} colorMap - Specifies the color mapping instance.
+     * @param {number} legendIndex - Specifies the index of legend.
+     * @returns {string} - Returns the legend color.
      */
     TreeMapLegend.prototype.legendGradientColor = function (colorMap, legendIndex) {
         var legendFillColor;

package/src/treemap/layout/render-panel.d.ts

@@ -25,7 +25,8 @@ export declare class LayoutPanel {
     private getCoordinates;
     private computeTotalArea;
     onDemandProcess(childItems: any): void;
-    renderLayoutItems(renderData: any): void;
+    /** @private */
+    renderLayoutItems(): void;
     private renderItemText;
     private getItemColor;
     /**

package/src/treemap/layout/render-panel.js

@@ -1,13 +1,12 @@
 import { Rect, itemsToOrder, TextOption, measureText, textTrim, hide, wordWrap, textWrap, getTemplateFunction, convertElement, findLabelLocation, PathOption, textFormatter, colorNameToHex, convertHexToColor, colorMap, measureElement, convertToContainer, convertToRect, getShortestEdge, getArea, orderByArea, isParentItem, maintainSelection } from '../utils/helper';
 import { isNullOrUndefined, createElement, extend } from '@syncfusion/ej2-base';
-import { Location, findChildren, renderTextElement } from '../utils/helper';
+import { findChildren, renderTextElement } from '../utils/helper';
 import { itemRendering } from '../model/constants';
 import { LevelsData } from './../treemap';
 /**
  * To calculate and render the shape layer
  */
 var LayoutPanel = /** @class */ (function () {
-    // eslint-disable-next-line @typescript-eslint/explicit-member-accessibility
     function LayoutPanel(treemap) {
         this.treemap = treemap;
     }
@@ -40,7 +39,7 @@ var LayoutPanel = /** @class */ (function () {
                     this.treemap.currentLevel = this.treemap.drilledItems[count]['data']['groupIndex'];
                 }
                 this.calculateLayoutItems(y || LevelsData.levelsData[0], totalRect);
-                this.renderLayoutItems(y || LevelsData.levelsData[0]);
+                this.renderLayoutItems();
             }
             else {
                 if (!isNullOrUndefined(this.treemap.initialDrillDown.groupIndex) &&
@@ -49,7 +48,7 @@ var LayoutPanel = /** @class */ (function () {
                     this.treemap.currentLevel = this.treemap.initialDrillDown.groupIndex;
                 }
                 this.calculateLayoutItems(data || LevelsData.levelsData[0], totalRect);
-                this.renderLayoutItems(data || LevelsData.levelsData[0]);
+                this.renderLayoutItems();
             }
         }
     };
@@ -75,7 +74,7 @@ var LayoutPanel = /** @class */ (function () {
         }
         return drillData;
     };
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/explicit-module-boundary-types
     LayoutPanel.prototype.calculateLayoutItems = function (data, rect) {
         this.renderItems = [];
         this.parentData = [];
@@ -109,7 +108,8 @@ var LayoutPanel = /** @class */ (function () {
                     isLeafItem = (groups.length === 0 || groupIndex === groups.length);
                     gap = isLeafItem ? leafItem.gap : groups[groupIndex].groupGap;
                     headerHeight = groups.length === 0 ? 0 : groups[groupIndex] ? groups[groupIndex].showHeader ?
-                        groups[groupIndex].headerHeight : 0 : groups[groupIndex - 1].showHeader ? groups[groupIndex - 1].headerHeight : 0;
+                        groups[groupIndex].headerHeight : 0 : groups[groupIndex - 1].showHeader ?
+                        groups[groupIndex - 1].headerHeight : 0;
                     rect = children[i]['rect'];
                     rect = new Rect(rect.x + (gap / 2), rect.y + (headerHeight + (gap / 2)), rect.width - gap, Math.abs(rect.height - (gap + headerHeight)));
                     this.computeSliceAndDiceDimensional(children[i], rect);
@@ -162,8 +162,6 @@ var LayoutPanel = /** @class */ (function () {
         var rect;
         var levels = this.treemap.levels;
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        var groupIndex = 0;
-        var isLeafItem = false;
         var item;
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         var child = findChildren(data)['values'];
@@ -183,8 +181,9 @@ var LayoutPanel = /** @class */ (function () {
                     rect = item['rect'];
                     padding = (item['isLeafItem'] ? leaf.padding : levels[index].groupPadding) / 2;
                     headerHeight = this.treemap.isHierarchicalData ? index === 0 && item['isLeafItem'] ? 0 : levels[index] ?
-                        levels[index].showHeader ? levels[index].headerHeight : 0 : 0 : (levels.length === 0) ? 0 : levels[index] ?
-                        levels[index].showHeader ? levels[index].headerHeight : 0 : 0;
+                        levels[index].showHeader ? levels[index].headerHeight : 0 : 0 :
+                        (levels.length === 0) ? 0 : levels[index] ?
+                            levels[index].showHeader ? levels[index].headerHeight : 0 : 0;
                     rect = new Rect(rect.x + padding, rect.y + (headerHeight + padding), rect.width - padding, rect.height - padding);
                     if (!item['isLeafItem'] && item['weight'] > 0) {
                         this.computeSquarifyDimensional(child[i], rect);
@@ -298,7 +297,6 @@ var LayoutPanel = /** @class */ (function () {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     LayoutPanel.prototype.getCoordinates = function (row, rect) {
         var container = convertToContainer(rect);
-        var headerHeight;
         var width = container.width;
         var height = container.height;
         var xOffset = container.x;
@@ -319,7 +317,6 @@ var LayoutPanel = /** @class */ (function () {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         var coordinates = [];
         var isParent;
-        var gap;
         var parentRect;
         for (var i = 0; i < rowLength; i += 1) {
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -364,15 +361,14 @@ var LayoutPanel = /** @class */ (function () {
     LayoutPanel.prototype.computeTotalArea = function (data, area) {
         var dataLength = data.length;
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        var dataSum = 0;
         var result = [];
         for (var i = 0; i < dataLength; i += 1) {
             var dataLength_1 = data.length;
-            var dataSum_1 = 0;
+            var dataSum = 0;
             for (var i_1 = 0; i_1 < dataLength_1; i_1 += 1) {
-                dataSum_1 += data[i_1]['weight'];
+                dataSum += data[i_1]['weight'];
             }
-            var multiplier = area / dataSum_1;
+            var multiplier = area / dataSum;
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             var datum = void 0;
             for (var j = 0; j < dataLength_1; j++) {
@@ -383,7 +379,7 @@ var LayoutPanel = /** @class */ (function () {
         }
         return result;
     };
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/explicit-module-boundary-types
     LayoutPanel.prototype.onDemandProcess = function (childItems) {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         var parentItem = {};
@@ -413,22 +409,18 @@ var LayoutPanel = /** @class */ (function () {
             }
         }
         this.calculateLayoutItems(parentItemGroupname, totalRect);
-        this.renderLayoutItems(parentItemGroupname);
+        this.renderLayoutItems();
     };
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    LayoutPanel.prototype.renderLayoutItems = function (renderData) {
+    /** @private */
+    LayoutPanel.prototype.renderLayoutItems = function () {
         var _this = this;
-        var textCollection = [];
         var position;
         var treeMap = this.treemap;
-        var colorMapping;
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         var txtVisible;
         var getItemColor;
         var eventArgs;
         this.renderer = treeMap.renderer;
-        var trimHeader;
-        var textLocation = new Location(0, 0);
         var pathOptions;
         var elementID = treeMap.element.id;
         var index;
@@ -438,35 +430,30 @@ var LayoutPanel = /** @class */ (function () {
         var format;
         var interSectAction = this.treemap.leafItemSettings.interSectAction;
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        var textSize;
         var fill;
         var item;
         var renderText;
         var opacity;
-        var padding = 5;
         var rectPath = '';
-        var isRender;
         var secondaryEle = document.getElementById(treeMap.element.id + '_Secondary_Element');
         var groupId;
-        var textOptions;
         var templateEle;
         var gap;
         var textStyle;
         var levels = treeMap.levels;
         this.layoutGroup = this.renderer.createGroup({ id: elementID + '_TreeMap_' + mode + '_Layout' });
         var itemGroup;
-        var level;
         var template;
         var border;
         var templateGroup = createElement('div', {
             id: treeMap.element.id + '_Label_Template_Group',
-            className: 'template',
-            styles: 'overflow: hidden; position: absolute;pointer-events: none;' +
-                'top:' + treeMap.areaRect.y + 'px;' +
-                'left:' + treeMap.areaRect.x + 'px;' +
-                'height:' + treeMap.areaRect.height + 'px;' +
-                'width:' + treeMap.areaRect.width + 'px;'
+            className: 'template'
         });
+        templateGroup.style.cssText = 'overflow: hidden; position: absolute;pointer-events: none;' +
+            'top:' + treeMap.areaRect.y + 'px;' +
+            'left:' + treeMap.areaRect.x + 'px;' +
+            'height:' + treeMap.areaRect.height + 'px;' +
+            'width:' + treeMap.areaRect.width + 'px;';
         var isLeafItem = false;
         var leaf = treeMap.leafItemSettings;
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -500,7 +487,6 @@ var LayoutPanel = /** @class */ (function () {
                 rect.x = (treemapItemRect.x + treemapItemRect.width) - rect.width - Math.abs(treemapItemRect.x - rect.x);
                 rect.y = (treemapItemRect.y + treemapItemRect.height) - rect.height - Math.abs(treemapItemRect.y - rect.y);
             }
-            colorMapping = isLeafItem ? leaf.colorMapping : levels[index].colorMapping;
             getItemColor = this_1.getItemColor(isLeafItem, item);
             fill = getItemColor['fill'];
             opacity = getItemColor['opacity'];
@@ -580,15 +566,10 @@ var LayoutPanel = /** @class */ (function () {
         this.treemap.svgObject.appendChild(this.layoutGroup);
     };
     LayoutPanel.prototype.renderItemText = function (text, parentElement, textStyle, rect, interSectAction, groupId, fill, position, connectorText) {
-        var level;
-        var headerPosition;
-        var secondaryEle = document.getElementById(this.treemap.element.id + '_Secondary_Element');
-        var leaf = this.treemap.leafItemSettings;
         var padding = 5;
         var textSize;
         var textCollection = [];
         var customText;
-        var templateEle;
         var tspanText = [];
         var height = 0;
         var textName;
@@ -662,7 +643,7 @@ var LayoutPanel = /** @class */ (function () {
             treemap.levels[item['groupIndex']].colorMapping;
         if (colorMapping.length > 0) {
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            var option = colorMap(colorMapping, item['data'][this.treemap.equalColorValuePath], item['data'][this.treemap.rangeColorValuePath], item['data'][this.treemap.weightValuePath]);
+            var option = colorMap(colorMapping, item['data'][this.treemap.equalColorValuePath], item['data'][this.treemap.rangeColorValuePath]);
             itemFill = !isNullOrUndefined(option['fill']) ? option['fill'] : treemap.leafItemSettings.fill;
             itemOpacity = option['opacity'];
         }
@@ -699,8 +680,8 @@ var LayoutPanel = /** @class */ (function () {
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             var keys = Object.keys(item['data']);
             for (var i = 0; i < keys.length; i++) {
-                // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                template = template.replace(new RegExp('{{:' + keys[i] + '}}', 'g'), item['data'][keys[i].toString()]);
+                var regExp = RegExp;
+                template = template.replace(new regExp('{{:' + keys[i] + '}}', 'g'), item['data'][keys[i].toString()]);
             }
         }
         var labelElement;