@syncfusion/ej2-treemap 27.2.2 → 28.1.39

package/src/treemap/utils/helper.js

@@ -585,10 +585,12 @@ export function colorMap(colorMapping, equalValue, value) {
     for (var i = 0; i < colorMapping.length; i++) {
         var isEqualColor = false;
         var dataValue = value;
+        var colorMappingValue = colorMapping[i].value ? colorMapping[i].value.toString() :
+            colorMapping[i].value;
         if (!isNullOrUndefined(colorMapping[i].from) && !isNullOrUndefined(colorMapping[i].to)
             && !isNullOrUndefined(colorMapping[i].value)) {
             if ((value >= colorMapping[i].from && colorMapping[i].to >= value) &&
-                (colorMapping[i].value === equalValue)) {
+                (colorMappingValue === equalValue)) {
                 isEqualColor = true;
                 if (Object.prototype.toString.call(colorMapping[i].color) === '[object Array]') {
                     fill = !isEqualColor ? colorCollections(colorMapping[i], dataValue) : colorMapping[i].color[0];
@@ -601,8 +603,8 @@ export function colorMap(colorMapping, equalValue, value) {
         else if ((!isNullOrUndefined(colorMapping[i].from) && !isNullOrUndefined(colorMapping[i].to))
             || !isNullOrUndefined((colorMapping[i].value))) {
             if ((value >= colorMapping[i].from && colorMapping[i].to >= value)
-                || (colorMapping[i].value === equalValue)) {
-                if (colorMapping[i].value === equalValue) {
+                || (colorMappingValue === equalValue)) {
+                if (colorMappingValue === equalValue) {
                     isEqualColor = true;
                 }
                 if (Object.prototype.toString.call(colorMapping[i].color) === '[object Array]') {
@@ -614,7 +616,7 @@ export function colorMap(colorMapping, equalValue, value) {
             }
         }
         if (((value >= colorMapping[i].from && value <= colorMapping[i].to)
-            || (colorMapping[i].value === equalValue))
+            || (colorMappingValue === equalValue))
             && !isNullOrUndefined(colorMapping[i].minOpacity) && !isNullOrUndefined(colorMapping[i].maxOpacity)
             && fill) {
             opacity = deSaturationColor(colorMapping[i], value);
@@ -889,7 +891,8 @@ export function maintainSelection(treemap, element, className) {
     var elementId = treemap.levelSelection;
     if (elementId) {
         for (var index = 0; index < elementId.length; index++) {
-            if (element.getAttribute('id') === elementId[index]) {
+            if (element.getAttribute('id') === elementId[index] ||
+                element.children[0].id === elementId[index]) {
                 if (element.childElementCount > 0) {
                     element.children[0].setAttribute('class', className);
                     applyOptions(element.childNodes[0], {
@@ -914,13 +917,25 @@ export function legendMaintain(treemap, legendGroup) {
     var elementId = treemap.legendId;
     if (elementId) {
         for (var i = 0; i < elementId.length; i++) {
-            for (var j = 0; j < legendGroup.childElementCount; j++) {
-                if (legendGroup.childNodes[j]['id'] === elementId[i]) {
-                    var treemapSVGRectElement = legendGroup.childNodes[j];
-                    treemapSVGRectElement.setAttribute('fill', treemap.selectionSettings.fill);
-                    treemapSVGRectElement.setAttribute('stroke', treemap.selectionSettings.border.color);
-                    treemapSVGRectElement.setAttribute('stroke-width', (treemap.selectionSettings.border.width).toString());
-                    treemapSVGRectElement.setAttribute('opacity', treemap.selectionSettings.opacity);
+            if (treemap.legendSettings.mode === 'Interactive') {
+                for (var j = 0; j < legendGroup.childElementCount; j++) {
+                    if (legendGroup.childNodes[j]['id'] === elementId[i] ||
+                        parseFloat(legendGroup.childNodes[j]['id'].split('Index_')[1]) === parseFloat(elementId[i].split('Index_')[1])) {
+                        var treemapSVGRectElement = legendGroup.childNodes[j];
+                        treemapSVGRectElement.setAttribute('fill', treemap.selectionSettings.fill);
+                        treemapSVGRectElement.setAttribute('stroke', treemap.selectionSettings.border.color);
+                        treemapSVGRectElement.setAttribute('stroke-width', (treemap.selectionSettings.border.width).toString());
+                        treemapSVGRectElement.setAttribute('opacity', treemap.selectionSettings.opacity);
+                    }
+                }
+            }
+            else {
+                var legendItem = document.getElementById(elementId[i]);
+                if (!isNullOrUndefined(legendItem)) {
+                    legendItem.setAttribute('fill', treemap.selectionSettings.fill);
+                    legendItem.setAttribute('stroke', treemap.selectionSettings.border.color);
+                    legendItem.setAttribute('stroke-width', (treemap.selectionSettings.border.width).toString());
+                    legendItem.setAttribute('opacity', treemap.selectionSettings.opacity);
                 }
             }
         }
@@ -956,6 +971,9 @@ export function applyOptions(element, options) {
     if (!isNullOrUndefined(options['fill'])) {
         element.setAttribute('fill', options['fill']);
     }
+    else {
+        element.setAttribute('fill', 'black');
+    }
     element.setAttribute('stroke', options['border']['color']);
     element.setAttribute('stroke-width', options['border']['width']);
 }
@@ -1207,17 +1225,35 @@ export function removeShape(collection) {
 /**
  *
  * @param {any[]} collection - Specifies the legend collection.
+ * @param {TreeMap} treeMap - Specifies the treemap instance.
  * @returns {void}
  * @private
  */
-export function removeLegend(collection) {
+export function removeLegend(collection, treeMap) {
     if (collection.length > 0) {
         for (var j = 0; j < collection.length; j++) {
             var item = collection[j];
-            setColor(item['legendEle'], item['oldFill'], item['oldOpacity'], item['oldBorderColor'], item['oldBorderWidth']);
-            var dataCount = item['ShapeCollection']['Elements'].length;
+            var legendIndex = parseFloat(item['legendEle'].id.split('_Index_')[1]);
+            var isText = item['legendEle'].id.indexOf('Text') > -1;
+            var shapeId = isText ? item['legendEle'].id.replace('_Text', '') : item['legendEle'].id;
+            var legendShape = treeMap.legendSettings.mode === 'Interactive'
+                ? document.getElementById(shapeId)
+                : document.getElementById(treeMap.element.id + '_Legend_Shape_Index_' + legendIndex);
+            var legendText = treeMap.legendSettings.mode === 'Interactive'
+                ? document.getElementById(shapeId + '_Text')
+                : document.getElementById(treeMap.element.id + '_Legend_Text_Index_' + legendIndex);
+            if (!isNullOrUndefined(legendShape)) {
+                setColor(legendShape, item['oldFill'], item['oldOpacity'], item['oldBorderColor'], item['oldBorderWidth']);
+            }
+            if (!isNullOrUndefined(legendText)) {
+                setColor(legendText, treeMap.legendSettings.textStyle.color, item['oldOpacity'], item['oldBorderColor'], item['oldBorderWidth']);
+            }
+            var dataCount = !isNullOrUndefined(item['ShapeCollection']) ? item['ShapeCollection']['Elements'].length : 0;
             for (var k = 0; k < dataCount; k++) {
-                setColor(item['ShapeCollection']['Elements'][k], item['shapeOldFill'], item['shapeOldOpacity'], item['shapeOldBorderColor'], item['shapeOldBorderWidth']);
+                var shapeElement = document.getElementById(item['ShapeCollection']['Elements'][k].id);
+                if (!isNullOrUndefined(shapeElement)) {
+                    setColor(shapeElement, item['shapeOldFill'], item['shapeOldOpacity'], item['shapeOldBorderColor'], item['shapeOldBorderWidth']);
+                }
             }
         }
     }
@@ -1245,7 +1281,7 @@ export function setColor(element, fill, opacity, borderColor, borderWidth) {
  * @returns {void}
  */
 export function removeSelectionWithHighlight(collection, element, treemap) {
-    removeShape(collection);
+    removeLegend(collection, treemap);
     element = [];
     removeClassNames(document.getElementsByClassName('treeMapHighLight'), 'treeMapHighLight', treemap);
 }
@@ -1258,10 +1294,24 @@ export function removeSelectionWithHighlight(collection, element, treemap) {
  */
 export function getLegendIndex(length, item, treemap) {
     var index;
+    var valuePath = treemap.rangeColorValuePath;
     for (var i = 0; i < length; i++) {
         var dataLength = treemap.treeMapLegendModule.legendCollections[i]['legendData'].length;
-        for (var j = 0; j < dataLength; j++) {
-            if (treemap.treeMapLegendModule.legendCollections[i]['legendData'][j]['levelOrderName'] === item['levelOrderName']) {
+        if (dataLength > 0) {
+            for (var j = 0; j < dataLength; j++) {
+                if ((!isNullOrUndefined(valuePath) && valuePath !== '' && treemap.leafItemSettings.colorMapping.length > 0 ?
+                    (treemap.treeMapLegendModule.legendCollections[i]['legendData'][j]['data'][valuePath] === item['data'][valuePath])
+                    : treemap.treeMapLegendModule.legendCollections[i]['legendData'][j]['levelOrderName'] === item['levelOrderName']
+                        || item['levelOrderName'].indexOf(treemap.treeMapLegendModule.legendCollections[i]['legendName']) > -1)) {
+                    index = i;
+                    break;
+                }
+            }
+        }
+        else if (treemap.palette && treemap.palette.length > 0) {
+            if ((treemap.treeMapLegendModule.legendCollections[i]['levelOrderName'] === item['levelOrderName'] ||
+                (item['levelOrderName'].indexOf(treemap.treeMapLegendModule.legendCollections[i]['levelOrderName'])) > -1)
+                && treemap.treeMapLegendModule.legendCollections[i]['legendName'] === item['name']) {
                 index = i;
                 break;
             }