@syncfusion/ej2-treemap 21.2.3 → 22.1.34

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

@@ -1,4 +1,4 @@
-import { Ajax, Browser, ChildProperty, Collection, Complex, Component, Event, EventHandler, Internationalization, NotifyPropertyChanges, Property, SanitizeHtmlHelper, compile, createElement, extend, isNullOrUndefined, merge, print, remove } from '@syncfusion/ej2-base';
+import { Browser, ChildProperty, Collection, Complex, Component, Event, EventHandler, Fetch, Internationalization, NotifyPropertyChanges, Property, SanitizeHtmlHelper, compile, createElement, extend, isNullOrUndefined, merge, print, remove } from '@syncfusion/ej2-base';
 import { SvgRenderer, Tooltip } from '@syncfusion/ej2-svg-base';
 import { DataManager, Query } from '@syncfusion/ej2-data';
 import { PdfBitmap, PdfDocument, PdfPageOrientation } from '@syncfusion/ej2-pdf-export';
@@ -173,7 +173,7 @@ __decorate$1([
     Property(defaultFont)
 ], Font.prototype, "fontFamily", void 0);
 __decorate$1([
-    Property('Normal')
+    Property('')
 ], Font.prototype, "fontWeight", void 0);
 __decorate$1([
     Property('Normal')
@@ -198,7 +198,7 @@ __decorate$1([
 class SubTitleSettings extends CommonTitleSettings {
 }
 __decorate$1([
-    Complex({ fontFamily: null }, Font)
+    Complex({ fontFamily: null, fontWeight: null }, Font)
 ], SubTitleSettings.prototype, "textStyle", void 0);
 __decorate$1([
     Property('Center')
@@ -209,7 +209,7 @@ __decorate$1([
 class TitleSettings extends CommonTitleSettings {
 }
 __decorate$1([
-    Complex({ fontFamily: null }, Font)
+    Complex({ fontFamily: null, fontWeight: null }, Font)
 ], TitleSettings.prototype, "textStyle", void 0);
 __decorate$1([
     Property('Center')
@@ -270,7 +270,7 @@ __decorate$1([
     Property('')
 ], LegendSettings.prototype, "height", void 0);
 __decorate$1([
-    Complex({ fontFamily: null }, Font)
+    Complex({ size: '12px', fontFamily: null, fontWeight: null }, Font)
 ], LegendSettings.prototype, "textStyle", void 0);
 __decorate$1([
     Property(null)
@@ -420,7 +420,7 @@ __decorate$1([
     Complex({}, Border)
 ], TooltipSettings.prototype, "border", void 0);
 __decorate$1([
-    Complex({ fontFamily: defaultFont, size: '13px' }, Font)
+    Complex({ fontFamily: defaultFont, size: null, fontWeight: null }, Font)
 ], TooltipSettings.prototype, "textStyle", void 0);
 /**
  * Sets and gets the options for customizing the selection of the leaf items in treemap.
@@ -915,9 +915,12 @@ function findHightLightItems(data, items, mode, treeMap) {
 function getTemplateFunction(template) {
     let templateFn = null;
     try {
-        if (document.querySelectorAll(template).length) {
+        if (typeof template !== 'function' && document.querySelectorAll(template).length) {
             templateFn = compile(document.querySelector(template).innerHTML.trim());
         }
+        else {
+            templateFn = compile(template);
+        }
     }
     catch (e) {
         templateFn = compile(template);
@@ -2330,6 +2333,7 @@ class LayoutPanel {
                     treeMap.enableRtl ? renderText + ' [-]' : '[-] ' + renderText : renderText;
             textStyle = (isLeafItem ? leaf.labelStyle : levels[index].headerStyle);
             textStyle.fontFamily = this.treemap.themeStyle.labelFontFamily || textStyle.fontFamily;
+            textStyle.fontWeight = textStyle.fontWeight || this.treemap.themeStyle.fontWeight;
             border = isLeafItem ? leaf.border : levels[index].border;
             position = !isLeafItem ? (levels[index].headerAlignment) === 'Near' ? 'TopLeft' : (levels[index].headerAlignment) === 'Center' ?
                 'TopCenter' : 'TopRight' : leaf.labelPosition;
@@ -2485,7 +2489,7 @@ class LayoutPanel {
     secondaryEle, groupId, rect, position, template, item, isLeafItem) {
         const templateId = isLeafItem ? groupId + '_LabelTemplate' : groupId + '_HeaderTemplate';
         const baseTemplateId = isLeafItem ? '_LabelTemplate' : '_HeaderTemplate';
-        if (isNullOrUndefined(template['prototype'])) {
+        if (isNullOrUndefined(template['prototype']) && typeof template === 'string') {
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             const keys = Object.keys(item['data']);
             for (let i = 0; i < keys.length; i++) {
@@ -2585,12 +2589,15 @@ function getThemeStyle(theme) {
             style = {
                 backgroundColor: color,
                 titleFontColor: '#FFFFFF',
+                titleFontWeight: 'Normal',
                 subTitleFontColor: '#FFFFFF',
                 tooltipFillColor: '#363F4C',
                 tooltipFontColor: '#ffffff',
+                tooltipFontSize: '13px',
                 legendTitleColor: '#DADADA',
                 legendTextColor: '#DADADA',
                 fontSize: '15px',
+                fontWeight: 'Normal',
                 subtitleFontSize: '14px',
                 legendFontSize: '13px',
                 fontFamily: 'Roboto, Noto, Sans-serif'
@@ -2600,12 +2607,15 @@ function getThemeStyle(theme) {
             style = {
                 backgroundColor: '#000000',
                 titleFontColor: '#FFFFFF',
+                titleFontWeight: 'Normal',
                 subTitleFontColor: '#FFFFFF',
                 tooltipFillColor: '#363F4C',
                 tooltipFontColor: '#ffffff',
+                tooltipFontSize: '13px',
                 legendTitleColor: '#FFFFFF',
                 legendTextColor: '#FFFFFF',
                 fontSize: '15px',
+                fontWeight: 'Normal',
                 subtitleFontSize: '14px',
                 legendFontSize: '13px',
                 fontFamily: 'Roboto, Noto, Sans-serif'
@@ -2615,15 +2625,18 @@ function getThemeStyle(theme) {
             style = {
                 backgroundColor: '#FFFFFF',
                 titleFontColor: '#212529',
+                titleFontWeight: 'Normal',
                 subTitleFontColor: '#212529',
                 tooltipFillColor: '#000000',
                 tooltipFontColor: '#FFFFFF',
+                tooltipFontSize: '13px',
                 tooltipFillOpacity: 1,
                 tooltipTextOpacity: 0.9,
                 legendTitleColor: '#212529',
                 legendTextColor: '#212529',
                 fontFamily: 'HelveticaNeue-Medium',
                 fontSize: '16px',
+                fontWeight: 'Normal',
                 subtitleFontSize: '14px',
                 legendFontSize: '14px',
                 labelFontFamily: 'HelveticaNeue'
@@ -2633,15 +2646,18 @@ function getThemeStyle(theme) {
             style = {
                 backgroundColor: 'transparent',
                 titleFontColor: '#374151',
+                titleFontWeight: 'Normal',
                 subTitleFontColor: '#374151',
                 tooltipFillColor: '#111827',
                 tooltipFontColor: '#F9FAFB',
+                tooltipFontSize: '13px',
                 tooltipFillOpacity: 1,
                 tooltipTextOpacity: 1,
                 legendTitleColor: '#374151',
                 legendTextColor: '#374151',
                 fontFamily: 'Inter',
                 fontSize: '14px',
+                fontWeight: 'Normal',
                 subtitleFontSize: '12px',
                 legendFontSize: '12px',
                 labelFontFamily: 'Inter'
@@ -2651,14 +2667,17 @@ function getThemeStyle(theme) {
             style = {
                 backgroundColor: 'transparent',
                 titleFontColor: '#D1D5DB',
+                titleFontWeight: 'Normal',
                 subTitleFontColor: '#D1D5DB',
                 tooltipFillColor: '#F9FAFB',
                 tooltipFontColor: '#1F2937',
+                tooltipFontSize: '13px',
                 tooltipFillOpacity: 1,
                 tooltipTextOpacity: 1,
                 legendTitleColor: '#D1D5DB',
                 legendTextColor: '#D1D5DB',
                 fontFamily: 'Inter',
+                fontWeight: 'Normal',
                 fontSize: '14px',
                 subtitleFontSize: '12px',
                 legendFontSize: '12px',
@@ -2669,15 +2688,18 @@ function getThemeStyle(theme) {
             style = {
                 backgroundColor: 'rgba(255,255,255, 0.0)',
                 titleFontColor: '#212529',
+                titleFontWeight: 'Normal',
                 subTitleFontColor: '#212529',
                 tooltipFillColor: '#212529',
                 tooltipFontColor: '#F9FAFB',
+                tooltipFontSize: '13px',
                 tooltipFillOpacity: 1,
                 tooltipTextOpacity: 1,
                 legendTitleColor: '#212529',
                 legendTextColor: '#212529',
                 fontFamily: 'Helvetica Neue',
                 fontSize: '14px',
+                fontWeight: 'Normal',
                 subtitleFontSize: '12px',
                 legendFontSize: '12px',
                 labelFontFamily: 'Helvetica Neue'
@@ -2687,15 +2709,18 @@ function getThemeStyle(theme) {
             style = {
                 backgroundColor: 'rgba(255,255,255, 0.0)',
                 titleFontColor: '#FFFFFF',
+                titleFontWeight: 'Normal',
                 subTitleFontColor: '#FFFFFF',
                 tooltipFillColor: '#E9ECEF',
                 tooltipFontColor: '#212529',
+                tooltipFontSize: '13px',
                 tooltipFillOpacity: 1,
                 tooltipTextOpacity: 1,
                 legendTitleColor: '#FFFFFF',
                 legendTextColor: '#FFFFFF',
                 fontFamily: 'Helvetica Neue',
                 fontSize: '14px',
+                fontWeight: 'Normal',
                 subtitleFontSize: '12px',
                 legendFontSize: '12px',
                 labelFontFamily: 'Helvetica Neue'
@@ -2705,15 +2730,18 @@ function getThemeStyle(theme) {
             style = {
                 backgroundColor: 'rgba(255,255,255, 0.0)',
                 titleFontColor: '#201F1E',
+                titleFontWeight: 'Normal',
                 subTitleFontColor: '#201F1E',
                 tooltipFillColor: '#FFFFFF',
                 tooltipFontColor: '#323130',
+                tooltipFontSize: '13px',
                 tooltipFillOpacity: 1,
                 tooltipTextOpacity: 1,
                 legendTitleColor: '#201F1E',
                 legendTextColor: '#201F1E',
                 fontFamily: 'Segoe UI',
                 fontSize: '14px',
+                fontWeight: 'Normal',
                 subtitleFontSize: '12px',
                 legendFontSize: '12px',
                 labelFontFamily: 'Segoe UI'
@@ -2723,30 +2751,78 @@ function getThemeStyle(theme) {
             style = {
                 backgroundColor: 'rgba(255,255,255, 0.0)',
                 titleFontColor: '#F3F2F1',
+                titleFontWeight: 'Normal',
                 subTitleFontColor: '#F3F2F1',
                 tooltipFillColor: '#252423',
                 tooltipFontColor: '#F3F2F1',
+                tooltipFontSize: '13px',
                 tooltipFillOpacity: 1,
                 tooltipTextOpacity: 1,
                 legendTitleColor: '#F3F2F1',
                 legendTextColor: '#F3F2F1',
                 fontFamily: 'Segoe UI',
                 fontSize: '14px',
+                fontWeight: 'Normal',
                 subtitleFontSize: '12px',
                 legendFontSize: '12px',
                 labelFontFamily: 'Segoe UI'
             };
             break;
+        case 'material3':
+            style = {
+                backgroundColor: 'transparent',
+                titleFontColor: '#1C1B1F',
+                titleFontWeight: '500',
+                subTitleFontColor: '#1C1B1F',
+                tooltipFillColor: '#313033',
+                tooltipFontColor: '#F4EFF4',
+                tooltipFontSize: '14px',
+                tooltipFillOpacity: 1,
+                tooltipTextOpacity: 1,
+                legendTitleColor: '#1C1B1F',
+                legendTextColor: '#49454E',
+                fontFamily: 'Roboto',
+                fontSize: '16px',
+                fontWeight: '400',
+                subtitleFontSize: '14px',
+                legendFontSize: '14px',
+                labelFontFamily: 'Roboto'
+            };
+            break;
+        case 'material3dark':
+            style = {
+                backgroundColor: 'transparent',
+                titleFontColor: '#E6E1E5',
+                titleFontWeight: '500',
+                subTitleFontColor: '#E6E1E5',
+                tooltipFillColor: '#E6E1E5',
+                tooltipFontColor: '#313033',
+                tooltipFontSize: '14px',
+                tooltipFillOpacity: 1,
+                tooltipTextOpacity: 1,
+                legendTitleColor: '#E6E1E5',
+                legendTextColor: '#CAC4D0',
+                fontFamily: 'Roboto',
+                fontSize: '16px',
+                fontWeight: '400',
+                subtitleFontSize: '14px',
+                legendFontSize: '14px',
+                labelFontFamily: 'Roboto'
+            };
+            break;
         default:
             style = {
                 backgroundColor: '#FFFFFF',
                 titleFontColor: '#424242',
+                titleFontWeight: 'Normal',
                 subTitleFontColor: '#424242',
                 tooltipFillColor: '#363F4C',
                 tooltipFontColor: '#ffffff',
+                tooltipFontSize: '13px',
                 legendTitleColor: '#353535',
                 legendTextColor: '#353535',
                 fontSize: '15px',
+                fontWeight: 'Normal',
                 subtitleFontSize: '14px',
                 legendFontSize: '13px',
                 fontFamily: 'Roboto, Noto, Sans-serif'
@@ -2815,7 +2891,19 @@ class Print {
             }
         }
         else {
-            div.appendChild(treeMap.element.cloneNode(true));
+            const exportElement = treeMap.element.cloneNode(true);
+            let backgroundElement = exportElement.childNodes[1];
+            if (!isNullOrUndefined(backgroundElement)) {
+                backgroundElement = backgroundElement.childNodes[0];
+                const backgroundColor = backgroundElement.getAttribute('fill');
+                if ((treeMap.theme === 'Tailwind' || treeMap.theme === 'Bootstrap5' || treeMap.theme === 'Fluent' || treeMap.theme === 'Material3') && (backgroundColor === 'rgba(255,255,255, 0.0)' || backgroundColor === 'transparent')) {
+                    exportElement.childNodes[1].childNodes[0].setAttribute('fill', 'rgba(255,255,255, 1)');
+                }
+                else if ((treeMap.theme === 'TailwindDark' || treeMap.theme === 'Bootstrap5Dark' || treeMap.theme === 'FluentDark' || treeMap.theme === 'Material3Dark') && (backgroundColor === 'rgba(255,255,255, 0.0)' || backgroundColor === 'transparent')) {
+                    exportElement.childNodes[1].childNodes[0].setAttribute('fill', 'rgba(0, 0, 0, 1)');
+                }
+            }
+            div.appendChild(exportElement);
         }
         return div;
     }
@@ -2872,12 +2960,23 @@ class ImageExport {
                     'width': treeMap.availableSize.width.toString()
                 }
             });
+            const exportElement = treeMap.svgObject.cloneNode(true);
+            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') && (backgroundColor === 'rgba(255,255,255, 0.0)' || backgroundColor === 'transparent')) {
+                    exportElement.childNodes[0].setAttribute('fill', 'rgba(255,255,255, 1)');
+                }
+                else if ((treeMap.theme === 'TailwindDark' || treeMap.theme === 'Bootstrap5Dark' || treeMap.theme === 'FluentDark' || treeMap.theme === 'Material3Dark') && (backgroundColor === 'rgba(255,255,255, 0.0)' || backgroundColor === 'transparent')) {
+                    exportElement.childNodes[0].setAttribute('fill', 'rgba(0, 0, 0, 1)');
+                }
+            }
             const isDownload = !(Browser.userAgent.toString().indexOf('HeadlessChrome') > -1);
             const svgData = '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">' +
-                treeMap.svgObject.outerHTML +
+                exportElement.outerHTML +
                 '</svg>';
             const url = window.URL.createObjectURL(new Blob(type === 'SVG' ? [svgData] :
-                [(new XMLSerializer()).serializeToString(treeMap.svgObject)], { type: 'image/svg+xml' }));
+                [(new XMLSerializer()).serializeToString(exportElement)], { type: 'image/svg+xml' }));
             if (type === 'SVG') {
                 if (allowDownload) {
                     triggerDownload(fileName, type, url, isDownload);
@@ -2963,10 +3062,12 @@ class PdfExport {
             const backgroundElement = exportElement.childNodes[0];
             if (!isNullOrUndefined(backgroundElement)) {
                 const backgroundColor = backgroundElement.getAttribute('fill');
-                if ((treeMap.theme === 'Tailwind' || treeMap.theme === 'TailwindDark' || treeMap.theme === 'Bootstrap5' || treeMap.theme === 'Bootstrap5Dark'
-                    || treeMap.theme === 'Fluent' || treeMap.theme === 'FluentDark') && (backgroundColor === 'rgba(255,255,255, 0.0)' || backgroundColor === 'transparent')) {
+                if ((treeMap.theme === 'Tailwind' || treeMap.theme === 'Bootstrap5' || treeMap.theme === 'Fluent' || treeMap.theme === 'Material3') && (backgroundColor === 'rgba(255,255,255, 0.0)' || backgroundColor === 'transparent')) {
                     exportElement.childNodes[0].setAttribute('fill', 'rgba(255,255,255, 1)');
                 }
+                else if ((treeMap.theme === 'TailwindDark' || treeMap.theme === 'Bootstrap5Dark' || treeMap.theme === 'FluentDark' || treeMap.theme === 'Material3Dark') && (backgroundColor === 'rgba(255,255,255, 0.0)' || backgroundColor === 'transparent')) {
+                    exportElement.childNodes[0].setAttribute('fill', 'rgba(0, 0, 0, 1)');
+                }
             }
             const url = window.URL.createObjectURL(new Blob([(new XMLSerializer()).serializeToString(exportElement)], { type: 'image/svg+xml' }));
             const image = new Image();
@@ -3079,7 +3180,7 @@ let TreeMap = class TreeMap extends Component {
     processDataManager() {
         let dataModule;
         let queryModule;
-        let ajaxModule;
+        let fetchApiModule;
         let localAjax;
         if (this.dataSource instanceof DataManager) {
             dataModule = this.dataSource;
@@ -3094,12 +3195,12 @@ let TreeMap = class TreeMap extends Component {
         }
         else if (this.dataSource instanceof TreeMapAjax) {
             localAjax = this.dataSource;
-            ajaxModule = new Ajax(localAjax.dataOptions, localAjax.type, localAjax.async, localAjax.contentType);
-            ajaxModule.onSuccess = (args) => {
-                this.dataSource = JSON.parse('[' + args + ']')[0];
+            fetchApiModule = new Fetch(localAjax.dataOptions, localAjax.type, localAjax.contentType);
+            fetchApiModule.onSuccess = (args) => {
+                this.dataSource = args;
                 this.renderTreeMapElements();
             };
-            ajaxModule.send(localAjax.sendData);
+            fetchApiModule.send(localAjax.sendData);
         }
         else {
             this.renderTreeMapElements();
@@ -3201,6 +3302,7 @@ let TreeMap = class TreeMap extends Component {
         const titlePadding = 10;
         const width = (this.availableSize.width - this.margin.right - this.margin.left);
         style.fontFamily = style.fontFamily || this.themeStyle.fontFamily;
+        style.fontWeight = style.fontWeight || this.themeStyle.titleFontWeight;
         style.size = style.size || (type === 'title' ? this.themeStyle.fontSize : this.themeStyle.subtitleFontSize);
         if (title.text) {
             if (isNullOrUndefined(groupEle)) {
@@ -3618,6 +3720,7 @@ let TreeMap = class TreeMap extends Component {
                     // eslint-disable-next-line @typescript-eslint/no-unused-vars
                     this.trigger(resize, args, (observedArgs) => {
                         this.render();
+                        this.refreshing = false;
                     });
                 }, 500);
             }
@@ -4400,6 +4503,7 @@ class TreeMapLegend {
             let legendHeight = (legend.height.length > 1) ? (legend.height.indexOf('%') > -1) ?
                 (treemap.availableSize.height / 100) * parseFloat(legend.height) : parseFloat(legend.height) : null;
             titleTextStyle.fontFamily = treemap.themeStyle.fontFamily || titleTextStyle.fontFamily;
+            titleTextStyle.fontWeight = titleTextStyle.fontWeight || treemap.themeStyle.titleFontWeight;
             titleTextStyle.size = treemap.themeStyle.legendFontSize || titleTextStyle.size;
             const legendTitleSize = measureText(legendTitle, titleTextStyle);
             let startX = 0;
@@ -4408,6 +4512,7 @@ class TreeMapLegend {
             const itemTextStyle = legend.textStyle;
             itemTextStyle.size = itemTextStyle.size || treemap.themeStyle.legendFontSize;
             itemTextStyle.fontFamily = itemTextStyle.fontFamily || treemap.themeStyle.fontFamily;
+            itemTextStyle.fontWeight = itemTextStyle.fontWeight || treemap.themeStyle.fontWeight;
             if (legendMode === 'Default') {
                 legendWidth = (isNullOrUndefined(legendWidth)) ? treemap.areaRect.width : legendWidth;
                 legendHeight = (isNullOrUndefined(legendHeight)) ? treemap.areaRect.height : legendHeight;
@@ -5922,7 +6027,10 @@ class TreeMapTooltip {
                 }
                 location = getMousePosition(pageX, pageY, this.treemap.svgObject);
                 location.y = (this.tooltipSettings.template) ? location.y + 10 : location.y;
+                this.tooltipSettings.textStyle.size = this.tooltipSettings.textStyle.size || this.treemap.themeStyle.tooltipFontSize;
                 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