@syncfusion/ej2-treemap 26.2.10 → 27.1.50

package/dist/es6/ej2-treemap.es2015.js

@@ -417,7 +417,7 @@ __decorate([
     Complex({ width: null, color: null }, Border)
 ], TooltipSettings.prototype, "border", void 0);
 __decorate([
-    Complex({ fontFamily: null, size: null, fontWeight: null }, Font)
+    Complex({ fontFamily: null, size: null, fontWeight: null, opacity: null }, Font)
 ], TooltipSettings.prototype, "textStyle", void 0);
 /**
  * Sets and gets the options for customizing the selection of the leaf items in treemap.
@@ -2707,48 +2707,46 @@ function getThemeStyle(theme) {
             break;
         case 'bootstrap5':
             style = {
-                backgroundColor: 'rgba(255,255,255, 0.0)',
+                backgroundColor: 'transparent',
                 titleFontColor: '#212529',
-                titleFontWeight: 'Normal',
+                titleFontWeight: '400',
                 subTitleFontColor: '#212529',
-                tooltipFillColor: '#212529',
-                tooltipFontColor: '#F9FAFB',
-                tooltipFontSize: '13px',
-                tooltipFillOpacity: 1,
-                tooltipTextOpacity: 1,
+                tooltipFillColor: '#000000',
+                tooltipFontColor: '#FFFFFF',
+                tooltipFontSize: '12px',
+                tooltipFillOpacity: 0.9,
                 legendTitleColor: '#212529',
                 legendTextColor: '#212529',
-                fontFamily: 'Helvetica Neue',
+                fontFamily: 'Segoe UI',
                 fontSize: '14px',
-                fontWeight: 'Normal',
+                fontWeight: '400',
                 subtitleFontSize: '12px',
-                legendFontSize: '12px',
-                labelFontFamily: 'Helvetica Neue',
-                labelFontSize: '12px',
+                legendFontSize: '10px',
+                labelFontFamily: 'Segoe UI',
+                labelFontSize: '10px',
                 legendBorderColor: '#000000',
                 legendBorderWidth: 0
             };
             break;
         case 'bootstrap5dark':
             style = {
-                backgroundColor: 'rgba(255,255,255, 0.0)',
-                titleFontColor: '#FFFFFF',
-                titleFontWeight: 'Normal',
-                subTitleFontColor: '#FFFFFF',
-                tooltipFillColor: '#E9ECEF',
+                backgroundColor: 'transparent',
+                titleFontColor: '#DEE2E6',
+                titleFontWeight: '400',
+                subTitleFontColor: '#DEE2E6',
+                tooltipFillColor: '#FFFFFF',
                 tooltipFontColor: '#212529',
-                tooltipFontSize: '13px',
-                tooltipFillOpacity: 1,
-                tooltipTextOpacity: 1,
-                legendTitleColor: '#FFFFFF',
-                legendTextColor: '#FFFFFF',
-                fontFamily: 'Helvetica Neue',
+                tooltipFontSize: '12px',
+                tooltipFillOpacity: 0.9,
+                legendTitleColor: '#DEE2E6',
+                legendTextColor: '#DEE2E6',
+                fontFamily: 'Segoe UI',
                 fontSize: '14px',
-                fontWeight: 'Normal',
+                fontWeight: '400',
                 subtitleFontSize: '12px',
-                legendFontSize: '12px',
-                labelFontFamily: 'Helvetica Neue',
-                labelFontSize: '12px',
+                legendFontSize: '10px',
+                labelFontFamily: 'Segoe UI',
+                labelFontSize: '10px',
                 legendBorderColor: '#000000',
                 legendBorderWidth: 0
             };
@@ -3014,7 +3012,8 @@ class Print {
                 backgroundElement = backgroundElement.childNodes[0];
                 if (!isNullOrUndefined(backgroundElement)) {
                     const backgroundColor = backgroundElement.getAttribute('fill');
-                    if ((treeMap.theme === 'Tailwind' || treeMap.theme === 'Bootstrap5' || treeMap.theme === 'Fluent' || treeMap.theme === 'Material3' || treeMap.theme === 'Fluent2')
+                    if ((treeMap.theme === 'Tailwind' || treeMap.theme === 'Bootstrap5' || treeMap.theme === 'Fluent' || treeMap.theme === 'Material3' ||
+                        treeMap.theme === 'Fluent2')
                         && (backgroundColor === 'rgba(255,255,255, 0.0)' || backgroundColor === 'transparent')) {
                         backgroundElement.setAttribute('fill', 'rgba(255,255,255, 1)');
                     }
@@ -3086,7 +3085,8 @@ class ImageExport {
             const backgroundElement = exportElement.childNodes[0];
             if (!isNullOrUndefined(backgroundElement)) {
                 const backgroundColor = backgroundElement.getAttribute('fill');
-                if ((treeMap.theme === 'Tailwind' || treeMap.theme === 'Bootstrap5' || treeMap.theme === 'Fluent' || treeMap.theme === 'Material3' || treeMap.theme === 'Fluent2')
+                if ((treeMap.theme === 'Tailwind' || treeMap.theme === 'Bootstrap5' || treeMap.theme === 'Fluent' || treeMap.theme === 'Material3' ||
+                    treeMap.theme === 'Fluent2')
                     && (backgroundColor === 'rgba(255,255,255, 0.0)' || backgroundColor === 'transparent')) {
                     exportElement.childNodes[0].setAttribute('fill', 'rgba(255,255,255, 1)');
                 }
@@ -3187,7 +3187,8 @@ class PdfExport {
             const backgroundElement = exportElement.childNodes[0];
             if (!isNullOrUndefined(backgroundElement)) {
                 const backgroundColor = backgroundElement.getAttribute('fill');
-                if ((treeMap.theme === 'Tailwind' || treeMap.theme === 'Bootstrap5' || treeMap.theme === 'Fluent' || treeMap.theme === 'Material3' || treeMap.theme === 'Fluent2')
+                if ((treeMap.theme === 'Tailwind' || treeMap.theme === 'Bootstrap5' || treeMap.theme === 'Fluent' || treeMap.theme === 'Material3' ||
+                    treeMap.theme === 'Fluent2')
                     && (backgroundColor === 'rgba(255,255,255, 0.0)' || backgroundColor === 'transparent')) {
                     exportElement.childNodes[0].setAttribute('fill', 'rgba(255,255,255, 1)');
                 }
@@ -4673,7 +4674,7 @@ class TreeMapLegend {
                 (treemap.availableSize.height / 100) * parseFloat(legend.height) : parseFloat(legend.height) : null;
             titleTextStyle.fontFamily = titleTextStyle.fontFamily || treemap.themeStyle.fontFamily;
             titleTextStyle.fontWeight = titleTextStyle.fontWeight || treemap.themeStyle.titleFontWeight;
-            titleTextStyle.size = titleTextStyle.size || treemap.themeStyle.legendFontSize;
+            titleTextStyle.size = titleTextStyle.size || treemap.themeStyle.subtitleFontSize;
             const legendTitleSize = measureText(legendTitle, titleTextStyle);
             let startX = 0;
             let startY = 0;
@@ -5069,7 +5070,9 @@ class TreeMapLegend {
                         outfill = ((Object.prototype.toString.call(colorMap.color) === '[object Array]'))
                             ? colorMap.color[0] : colorMap.color;
                         labelLegend = !isNullOrUndefined(colorMap.label) ? colorMap.label : 'Others';
-                        if (isNullOrUndefined(this.outOfRangeLegend)) {
+                        isDuplicate = this.treemap.legendSettings.removeDuplicateLegend ?
+                            this.removeDuplicates(this.legendCollections, labelLegend) : false;
+                        if (isNullOrUndefined(this.outOfRangeLegend) && !isDuplicate) {
                             this.legendCollections.push({
                                 actualValue: labelLegend, legendData: [],
                                 legendName: labelLegend, legendFill: outfill
@@ -5079,7 +5082,7 @@ class TreeMapLegend {
                             legendIndex++;
                         }
                         // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                        this.legendCollections[otherIndex - 1]['legendData'].push(data[i]);
+                        this.legendCollections[this.legendCollections.length - 1]['legendData'].push(data[i]);
                     }
                 }
             }
@@ -5305,7 +5308,7 @@ class TreeMapLegend {
         const 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 +
             (legend.mode === 'Interactive' ? 0 : (this.page !== 0) ? spacing : 0));
-        let borderStyle = {
+        const borderStyle = {
             color: legend.border.color || this.treemap.themeStyle.legendBorderColor,
             width: legend.border.width || this.treemap.themeStyle.legendBorderWidth
         };
@@ -6222,11 +6225,10 @@ class TreeMapTooltip {
                 this.tooltipSettings.textStyle.fontFamily = this.tooltipSettings.textStyle.fontFamily || this.treemap.themeStyle.fontFamily;
                 this.tooltipSettings.textStyle.fontStyle = !isNullOrUndefined(this.tooltipSettings.textStyle.fontStyle) ? this.tooltipSettings.textStyle.fontStyle : 'Normal';
                 this.tooltipSettings.textStyle.fontWeight = this.tooltipSettings.textStyle.fontWeight || this.treemap.themeStyle.fontWeight;
-                this.tooltipSettings.textStyle.color = this.treemap.themeStyle.tooltipFontColor
-                    || this.tooltipSettings.textStyle.color;
-                this.tooltipSettings.textStyle.opacity = this.treemap.themeStyle.tooltipTextOpacity
-                    || this.tooltipSettings.textStyle.opacity;
-                let border = {
+                this.tooltipSettings.textStyle.color = this.tooltipSettings.textStyle.color || this.treemap.themeStyle.tooltipFontColor;
+                // eslint-disable-next-line max-len
+                this.tooltipSettings.textStyle.opacity = this.tooltipSettings.textStyle.opacity || this.treemap.themeStyle.tooltipTextOpacity;
+                const border = {
                     width: this.tooltipSettings.border.width || this.treemap.themeStyle.tooltipBorderWidth || 0,
                     color: this.tooltipSettings.border.color || this.treemap.themeStyle.tooltipBorderColor || 'transparent'
                 };