@syncfusion/ej2-treemap 20.2.45 → 20.3.47
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +0 -6
- package/dist/ej2-treemap.min.js +10 -0
- package/dist/ej2-treemap.umd.min.js +2 -2
- package/dist/ej2-treemap.umd.min.js.map +1 -1
- package/dist/es6/ej2-treemap.es2015.js +85 -56
- package/dist/es6/ej2-treemap.es2015.js.map +1 -1
- package/dist/es6/ej2-treemap.es5.js +85 -59
- package/dist/es6/ej2-treemap.es5.js.map +1 -1
- package/dist/global/ej2-treemap.min.js +2 -2
- package/dist/global/ej2-treemap.min.js.map +1 -1
- package/dist/global/index.d.ts +1 -1
- package/package.json +12 -12
- package/src/treemap/layout/legend.d.ts +1 -2
- package/src/treemap/layout/legend.js +15 -5
- package/src/treemap/layout/render-panel.d.ts +6 -0
- package/src/treemap/layout/render-panel.js +14 -0
- package/src/treemap/model/image-export.d.ts +2 -4
- package/src/treemap/model/image-export.js +6 -11
- package/src/treemap/model/pdf-export.d.ts +3 -5
- package/src/treemap/model/pdf-export.js +9 -14
- package/src/treemap/model/print.d.ts +4 -7
- package/src/treemap/model/print.js +12 -19
- package/src/treemap/treemap.js +12 -3
- package/src/treemap/user-interaction/highlight-selection.d.ts +2 -3
- package/src/treemap/user-interaction/highlight-selection.js +11 -3
- package/src/treemap/user-interaction/tooltip.d.ts +1 -2
- package/src/treemap/user-interaction/tooltip.js +7 -5
|
@@ -2118,6 +2118,7 @@ class LayoutPanel {
|
|
|
2118
2118
|
}
|
|
2119
2119
|
}
|
|
2120
2120
|
itemGroup.setAttribute('aria-label', item['name']);
|
|
2121
|
+
itemGroup.setAttribute('role', '');
|
|
2121
2122
|
itemGroup.setAttribute('tabindex', (this.treemap.tabIndex + i + 2).toString());
|
|
2122
2123
|
maintainSelection(this.treemap, itemGroup, 'treeMapSelection');
|
|
2123
2124
|
this.layoutGroup.appendChild(itemGroup);
|
|
@@ -2282,6 +2283,19 @@ class LayoutPanel {
|
|
|
2282
2283
|
}
|
|
2283
2284
|
return textValue;
|
|
2284
2285
|
}
|
|
2286
|
+
/**
|
|
2287
|
+
*
|
|
2288
|
+
* @returns {void}
|
|
2289
|
+
* @private
|
|
2290
|
+
*/
|
|
2291
|
+
destroy() {
|
|
2292
|
+
this.treemap = null;
|
|
2293
|
+
this.currentRect = null;
|
|
2294
|
+
this.layoutGroup = null;
|
|
2295
|
+
this.renderer = null;
|
|
2296
|
+
this.renderItems = [];
|
|
2297
|
+
this.parentData = [];
|
|
2298
|
+
}
|
|
2285
2299
|
}
|
|
2286
2300
|
|
|
2287
2301
|
/**
|
|
@@ -2513,7 +2527,6 @@ class Print {
|
|
|
2513
2527
|
*/
|
|
2514
2528
|
// eslint-disable-next-line @typescript-eslint/explicit-member-accessibility
|
|
2515
2529
|
constructor(control) {
|
|
2516
|
-
this.control = control;
|
|
2517
2530
|
}
|
|
2518
2531
|
/**
|
|
2519
2532
|
* This method is used to perform the print functionality in treemap.
|
|
@@ -2522,16 +2535,16 @@ class Print {
|
|
|
2522
2535
|
* @returns {void}
|
|
2523
2536
|
* @private
|
|
2524
2537
|
*/
|
|
2525
|
-
print(elements) {
|
|
2526
|
-
|
|
2527
|
-
|
|
2528
|
-
|
|
2538
|
+
print(treeMap, elements) {
|
|
2539
|
+
let printWindow = window.open('', 'print', 'height=' + window.outerHeight + ',width=' + window.outerWidth + ',tabbar=no');
|
|
2540
|
+
printWindow.moveTo(0, 0);
|
|
2541
|
+
printWindow.resizeTo(screen.availWidth, screen.availHeight);
|
|
2529
2542
|
const argsData = {
|
|
2530
|
-
cancel: false, htmlContent: this.getHTMLContent(elements), name: beforePrint
|
|
2543
|
+
cancel: false, htmlContent: this.getHTMLContent(treeMap, elements), name: beforePrint
|
|
2531
2544
|
};
|
|
2532
|
-
|
|
2545
|
+
treeMap.trigger(beforePrint, argsData, () => {
|
|
2533
2546
|
if (!argsData.cancel) {
|
|
2534
|
-
print(argsData.htmlContent,
|
|
2547
|
+
print(argsData.htmlContent, printWindow);
|
|
2535
2548
|
}
|
|
2536
2549
|
});
|
|
2537
2550
|
}
|
|
@@ -2542,7 +2555,7 @@ class Print {
|
|
|
2542
2555
|
* @returns {Element} - Returns the element
|
|
2543
2556
|
* @private
|
|
2544
2557
|
*/
|
|
2545
|
-
getHTMLContent(elements) {
|
|
2558
|
+
getHTMLContent(treeMap, elements) {
|
|
2546
2559
|
const div = createElement('div');
|
|
2547
2560
|
if (elements) {
|
|
2548
2561
|
if (elements instanceof Array) {
|
|
@@ -2558,7 +2571,7 @@ class Print {
|
|
|
2558
2571
|
}
|
|
2559
2572
|
}
|
|
2560
2573
|
else {
|
|
2561
|
-
div.appendChild(
|
|
2574
|
+
div.appendChild(treeMap.element.cloneNode(true));
|
|
2562
2575
|
}
|
|
2563
2576
|
return div;
|
|
2564
2577
|
}
|
|
@@ -2572,17 +2585,12 @@ class Print {
|
|
|
2572
2585
|
return 'Print';
|
|
2573
2586
|
}
|
|
2574
2587
|
/**
|
|
2575
|
-
* To destroy the
|
|
2588
|
+
* To destroy the Print module.
|
|
2576
2589
|
*
|
|
2577
|
-
* @param {TreeMap} treemap - Specifies the treemap instance
|
|
2578
2590
|
* @returns {void}
|
|
2579
2591
|
* @private
|
|
2580
2592
|
*/
|
|
2581
|
-
destroy(
|
|
2582
|
-
/**
|
|
2583
|
-
* Destroy method performed here
|
|
2584
|
-
*/
|
|
2585
|
-
}
|
|
2593
|
+
destroy() { }
|
|
2586
2594
|
}
|
|
2587
2595
|
|
|
2588
2596
|
/**
|
|
@@ -2598,7 +2606,6 @@ class ImageExport {
|
|
|
2598
2606
|
*/
|
|
2599
2607
|
// eslint-disable-next-line @typescript-eslint/explicit-member-accessibility
|
|
2600
2608
|
constructor(control) {
|
|
2601
|
-
this.control = control;
|
|
2602
2609
|
}
|
|
2603
2610
|
/**
|
|
2604
2611
|
* This method is used to perform the export functionality for the rendered treemap.
|
|
@@ -2609,22 +2616,22 @@ class ImageExport {
|
|
|
2609
2616
|
* @returns {Promise} - Returns the promise string.
|
|
2610
2617
|
* @private
|
|
2611
2618
|
*/
|
|
2612
|
-
export(type, fileName, allowDownload) {
|
|
2619
|
+
export(treeMap, type, fileName, allowDownload) {
|
|
2613
2620
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
2614
2621
|
const promise = new Promise((resolve, reject) => {
|
|
2615
2622
|
const element = createElement('canvas', {
|
|
2616
2623
|
id: 'ej2-canvas',
|
|
2617
2624
|
attrs: {
|
|
2618
|
-
'height':
|
|
2619
|
-
'width':
|
|
2625
|
+
'height': treeMap.availableSize.height.toString(),
|
|
2626
|
+
'width': treeMap.availableSize.width.toString()
|
|
2620
2627
|
}
|
|
2621
2628
|
});
|
|
2622
2629
|
const isDownload = !(Browser.userAgent.toString().indexOf('HeadlessChrome') > -1);
|
|
2623
2630
|
const svgData = '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">' +
|
|
2624
|
-
|
|
2631
|
+
treeMap.svgObject.outerHTML +
|
|
2625
2632
|
'</svg>';
|
|
2626
2633
|
const url = window.URL.createObjectURL(new Blob(type === 'SVG' ? [svgData] :
|
|
2627
|
-
[(new XMLSerializer()).serializeToString(
|
|
2634
|
+
[(new XMLSerializer()).serializeToString(treeMap.svgObject)], { type: 'image/svg+xml' }));
|
|
2628
2635
|
if (type === 'SVG') {
|
|
2629
2636
|
if (allowDownload) {
|
|
2630
2637
|
triggerDownload(fileName, type, url, isDownload);
|
|
@@ -2663,13 +2670,10 @@ class ImageExport {
|
|
|
2663
2670
|
/**
|
|
2664
2671
|
* To destroy the ImageExport.
|
|
2665
2672
|
*
|
|
2666
|
-
* @param {TreeMap} treemap - Specifies the instance of the treemap.
|
|
2667
2673
|
* @returns {void}
|
|
2668
2674
|
* @private
|
|
2669
2675
|
*/
|
|
2670
|
-
destroy(
|
|
2671
|
-
// Destroy method performed here
|
|
2672
|
-
}
|
|
2676
|
+
destroy() { }
|
|
2673
2677
|
}
|
|
2674
2678
|
|
|
2675
2679
|
/**
|
|
@@ -2685,7 +2689,6 @@ class PdfExport {
|
|
|
2685
2689
|
*/
|
|
2686
2690
|
// eslint-disable-next-line @typescript-eslint/explicit-member-accessibility
|
|
2687
2691
|
constructor(control) {
|
|
2688
|
-
this.control = control;
|
|
2689
2692
|
}
|
|
2690
2693
|
/**
|
|
2691
2694
|
* This method is used to perform the export functionality for the rendered treemap.
|
|
@@ -2697,24 +2700,24 @@ class PdfExport {
|
|
|
2697
2700
|
* @returns {Promise} - Returns the string.
|
|
2698
2701
|
* @private
|
|
2699
2702
|
*/
|
|
2700
|
-
export(type, fileName, orientation, allowDownload) {
|
|
2703
|
+
export(treeMap, type, fileName, orientation, allowDownload) {
|
|
2701
2704
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
2702
2705
|
const promise = new Promise((resolve, reject) => {
|
|
2703
2706
|
const element = createElement('canvas', {
|
|
2704
2707
|
id: 'ej2-canvas',
|
|
2705
2708
|
attrs: {
|
|
2706
|
-
'width':
|
|
2707
|
-
'height':
|
|
2709
|
+
'width': treeMap.availableSize.width.toString(),
|
|
2710
|
+
'height': treeMap.availableSize.height.toString()
|
|
2708
2711
|
}
|
|
2709
2712
|
});
|
|
2710
2713
|
const isDownload = !(Browser.userAgent.toString().indexOf('HeadlessChrome') > -1);
|
|
2711
2714
|
orientation = isNullOrUndefined(orientation) ? PdfPageOrientation.Landscape : orientation;
|
|
2712
|
-
const exportElement =
|
|
2715
|
+
const exportElement = treeMap.svgObject.cloneNode(true);
|
|
2713
2716
|
const backgroundElement = exportElement.childNodes[0];
|
|
2714
2717
|
if (!isNullOrUndefined(backgroundElement)) {
|
|
2715
2718
|
const backgroundColor = backgroundElement.getAttribute('fill');
|
|
2716
|
-
if ((
|
|
2717
|
-
||
|
|
2719
|
+
if ((treeMap.theme === 'Tailwind' || treeMap.theme === 'TailwindDark' || treeMap.theme === 'Bootstrap5' || treeMap.theme === 'Bootstrap5Dark'
|
|
2720
|
+
|| treeMap.theme === 'Fluent' || treeMap.theme === 'FluentDark') && (backgroundColor === 'rgba(255,255,255, 0.0)' || backgroundColor === 'transparent')) {
|
|
2718
2721
|
exportElement.childNodes[0].setAttribute('fill', 'rgba(255,255,255, 1)');
|
|
2719
2722
|
}
|
|
2720
2723
|
}
|
|
@@ -2728,7 +2731,7 @@ class PdfExport {
|
|
|
2728
2731
|
let imageString = element.toDataURL('image/jpeg').replace('image/jpeg', 'image/octet-stream');
|
|
2729
2732
|
document.pageSettings.orientation = orientation;
|
|
2730
2733
|
imageString = imageString.slice(imageString.indexOf(',') + 1);
|
|
2731
|
-
document.pages.add().graphics.drawImage(new PdfBitmap(imageString), 0, 0, (
|
|
2734
|
+
document.pages.add().graphics.drawImage(new PdfBitmap(imageString), 0, 0, (treeMap.availableSize.width - 60), treeMap.availableSize.height);
|
|
2732
2735
|
if (allowDownload) {
|
|
2733
2736
|
document.save(fileName + '.pdf');
|
|
2734
2737
|
document.destroy();
|
|
@@ -2746,15 +2749,12 @@ class PdfExport {
|
|
|
2746
2749
|
return 'PdfExport';
|
|
2747
2750
|
}
|
|
2748
2751
|
/**
|
|
2749
|
-
* To destroy the
|
|
2752
|
+
* To destroy the PdfExport.
|
|
2750
2753
|
*
|
|
2751
|
-
* @param {TreeMap} treemap - Specifies the treemap instance.
|
|
2752
2754
|
* @returns {void}
|
|
2753
2755
|
* @private
|
|
2754
2756
|
*/
|
|
2755
|
-
destroy(
|
|
2756
|
-
// Destroy method performed here
|
|
2757
|
-
}
|
|
2757
|
+
destroy() { }
|
|
2758
2758
|
}
|
|
2759
2759
|
|
|
2760
2760
|
/* eslint-disable @typescript-eslint/ban-types */
|
|
@@ -2879,6 +2879,12 @@ let TreeMap = class TreeMap extends Component {
|
|
|
2879
2879
|
remove(this.svgObject);
|
|
2880
2880
|
}
|
|
2881
2881
|
}
|
|
2882
|
+
if (isNullOrUndefined(this.renderer)) {
|
|
2883
|
+
this.renderer = new SvgRenderer(this.element.id);
|
|
2884
|
+
}
|
|
2885
|
+
if (isNullOrUndefined(this.layout)) {
|
|
2886
|
+
this.layout = new LayoutPanel(this);
|
|
2887
|
+
}
|
|
2882
2888
|
this.clearTemplate();
|
|
2883
2889
|
const containerWidth = this.element.clientWidth;
|
|
2884
2890
|
const containerHeight = this.element.clientHeight;
|
|
@@ -2961,6 +2967,7 @@ let TreeMap = class TreeMap extends Component {
|
|
|
2961
2967
|
const titleBounds = new Rect(location.x, location.y, elementSize.width, elementSize.height);
|
|
2962
2968
|
const element = renderTextElement(options, style, style.color || (type === 'title' ? this.themeStyle.titleFontColor : this.themeStyle.subTitleFontColor), groupEle);
|
|
2963
2969
|
element.setAttribute('aria-label', title.description || title.text);
|
|
2970
|
+
element.setAttribute('role', '');
|
|
2964
2971
|
element.setAttribute('tabindex', (this.tabIndex + (type === 'title' ? 1 : 2)).toString());
|
|
2965
2972
|
if ((type === 'title' && !title.subtitleSettings.text) || (type === 'subtitle')) {
|
|
2966
2973
|
height = (this.availableSize.height - titleBounds.y - titlePadding - this.margin.bottom);
|
|
@@ -3133,7 +3140,7 @@ let TreeMap = class TreeMap extends Component {
|
|
|
3133
3140
|
*/
|
|
3134
3141
|
print(id) {
|
|
3135
3142
|
if (this.allowPrint && this.printModule) {
|
|
3136
|
-
this.printModule.print(id);
|
|
3143
|
+
this.printModule.print(this, id);
|
|
3137
3144
|
}
|
|
3138
3145
|
}
|
|
3139
3146
|
/**
|
|
@@ -3150,13 +3157,13 @@ let TreeMap = class TreeMap extends Component {
|
|
|
3150
3157
|
if (type === 'PDF' && this.allowPdfExport && this.pdfExportModule) {
|
|
3151
3158
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
3152
3159
|
return new Promise((resolve, reject) => {
|
|
3153
|
-
resolve(this.pdfExportModule.export(type, fileName, orientation, allowDownload));
|
|
3160
|
+
resolve(this.pdfExportModule.export(this, type, fileName, orientation, allowDownload));
|
|
3154
3161
|
});
|
|
3155
3162
|
}
|
|
3156
3163
|
else if (this.allowImageExport && (type !== 'PDF') && this.imageExportModule) {
|
|
3157
3164
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
3158
3165
|
return new Promise((resolve, reject) => {
|
|
3159
|
-
resolve(this.imageExportModule.export(type, fileName, allowDownload));
|
|
3166
|
+
resolve(this.imageExportModule.export(this, type, fileName, allowDownload));
|
|
3160
3167
|
});
|
|
3161
3168
|
}
|
|
3162
3169
|
return null;
|
|
@@ -3322,6 +3329,7 @@ let TreeMap = class TreeMap extends Component {
|
|
|
3322
3329
|
*/
|
|
3323
3330
|
addTabIndex() {
|
|
3324
3331
|
this.element.setAttribute('aria-label', this.description || 'TreeMap Element');
|
|
3332
|
+
this.element.setAttribute('role', '');
|
|
3325
3333
|
this.element.setAttribute('tabindex', this.tabIndex.toString());
|
|
3326
3334
|
}
|
|
3327
3335
|
/**
|
|
@@ -3816,6 +3824,7 @@ let TreeMap = class TreeMap extends Component {
|
|
|
3816
3824
|
*/
|
|
3817
3825
|
destroy() {
|
|
3818
3826
|
this.unWireEVents();
|
|
3827
|
+
removeElement('treeMapMeasureText');
|
|
3819
3828
|
this.drilledItems = [];
|
|
3820
3829
|
this.levelSelection = [];
|
|
3821
3830
|
this.legendId = [];
|
|
@@ -4949,15 +4958,25 @@ class TreeMapLegend {
|
|
|
4949
4958
|
/**
|
|
4950
4959
|
* To destroy the legend.
|
|
4951
4960
|
*
|
|
4952
|
-
* @param {TreeMap} treemap - Specifies treemap instance
|
|
4953
4961
|
* @returns {void}
|
|
4954
4962
|
* @private
|
|
4955
4963
|
*/
|
|
4956
|
-
destroy(
|
|
4957
|
-
|
|
4958
|
-
|
|
4959
|
-
|
|
4964
|
+
destroy() {
|
|
4965
|
+
this.legendRenderingCollections = [];
|
|
4966
|
+
this.legendCollections = [];
|
|
4967
|
+
this.outOfRangeLegend = null;
|
|
4968
|
+
this.totalPages = [];
|
|
4969
|
+
this.translate = null;
|
|
4970
|
+
this.legendBorderRect = null;
|
|
4971
|
+
this.legendGroup = null;
|
|
4972
|
+
this.legendNames = [];
|
|
4973
|
+
this.defsElement = null;
|
|
4974
|
+
this.legendLinearGradient = null;
|
|
4975
|
+
this.legendInteractiveGradient = [];
|
|
4976
|
+
this.legendItemRect = null;
|
|
4960
4977
|
this.removeEventListener();
|
|
4978
|
+
//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.
|
|
4979
|
+
//this.treemap = null;
|
|
4961
4980
|
}
|
|
4962
4981
|
// eslint-disable-next-line valid-jsdoc
|
|
4963
4982
|
/**
|
|
@@ -5192,12 +5211,16 @@ class TreeMapHighlight {
|
|
|
5192
5211
|
/**
|
|
5193
5212
|
* To destroy the hightlight.
|
|
5194
5213
|
*
|
|
5195
|
-
* @param {TreeMap} treeMap - Specifies the instance of the treemap.
|
|
5196
5214
|
* @returns {void}
|
|
5197
5215
|
* @private
|
|
5198
5216
|
*/
|
|
5199
|
-
destroy(
|
|
5217
|
+
destroy() {
|
|
5218
|
+
this.shapeElement = null;
|
|
5219
|
+
this.shapeHighlightCollection = [];
|
|
5220
|
+
this.legendHighlightCollection = [];
|
|
5221
|
+
this.currentElement = [];
|
|
5200
5222
|
this.removeEventListener();
|
|
5223
|
+
this.treemap = null;
|
|
5201
5224
|
}
|
|
5202
5225
|
}
|
|
5203
5226
|
/**
|
|
@@ -5489,8 +5512,12 @@ class TreeMapSelection {
|
|
|
5489
5512
|
* @returns {void}
|
|
5490
5513
|
* @private
|
|
5491
5514
|
*/
|
|
5492
|
-
destroy(
|
|
5515
|
+
destroy() {
|
|
5516
|
+
this.shapeElement = null;
|
|
5517
|
+
this.shapeSelectionCollection = [];
|
|
5518
|
+
this.legendSelectionCollection = [];
|
|
5493
5519
|
this.removeEventListener();
|
|
5520
|
+
this.treemap = null;
|
|
5494
5521
|
}
|
|
5495
5522
|
}
|
|
5496
5523
|
|
|
@@ -5684,15 +5711,17 @@ class TreeMapTooltip {
|
|
|
5684
5711
|
/**
|
|
5685
5712
|
* To destroy the tooltip.
|
|
5686
5713
|
*
|
|
5687
|
-
* @param {TreeMap} treeMap - Specifies the instance of the treemap
|
|
5688
5714
|
* @returns {void}
|
|
5689
5715
|
* @private
|
|
5690
5716
|
*/
|
|
5691
|
-
destroy(
|
|
5692
|
-
|
|
5693
|
-
|
|
5694
|
-
|
|
5717
|
+
destroy() {
|
|
5718
|
+
if (!isNullOrUndefined(this.svgTooltip)) {
|
|
5719
|
+
this.svgTooltip.destroy();
|
|
5720
|
+
}
|
|
5721
|
+
this.svgTooltip = null;
|
|
5722
|
+
this.tooltipSettings = null;
|
|
5695
5723
|
this.removeEventListener();
|
|
5724
|
+
this.treemap = null;
|
|
5696
5725
|
}
|
|
5697
5726
|
}
|
|
5698
5727
|
|