@syncfusion/ej2-treemap 20.3.59 → 20.4.38
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/.eslintrc.json +16 -1
- package/CHANGELOG.md +0 -6
- package/README.md +53 -41
- package/dist/ej2-treemap.min.js +2 -2
- 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 +469 -193
- package/dist/es6/ej2-treemap.es2015.js.map +1 -1
- package/dist/es6/ej2-treemap.es5.js +491 -215
- 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 +25 -17
- package/src/treemap/layout/legend.d.ts +15 -0
- package/src/treemap/layout/legend.js +47 -45
- package/src/treemap/layout/render-panel.d.ts +2 -1
- package/src/treemap/layout/render-panel.js +25 -44
- package/src/treemap/model/image-export.d.ts +1 -0
- package/src/treemap/model/image-export.js +4 -2
- package/src/treemap/model/pdf-export.d.ts +1 -0
- package/src/treemap/model/pdf-export.js +5 -4
- package/src/treemap/model/print.d.ts +2 -0
- package/src/treemap/model/print.js +4 -1
- package/src/treemap/treemap-model.d.ts +19 -19
- package/src/treemap/treemap.d.ts +74 -47
- package/src/treemap/treemap.js +74 -59
- package/src/treemap/user-interaction/highlight-selection.d.ts +6 -1
- package/src/treemap/user-interaction/highlight-selection.js +22 -21
- package/src/treemap/user-interaction/tooltip.js +3 -5
- package/src/treemap/utils/helper.d.ts +281 -12
- package/src/treemap/utils/helper.js +308 -77
package/src/treemap/treemap.js
CHANGED
|
@@ -1,7 +1,3 @@
|
|
|
1
|
-
/* eslint-disable @typescript-eslint/ban-types */
|
|
2
|
-
/* eslint-disable @typescript-eslint/dot-notation */
|
|
3
|
-
/* eslint-disable brace-style */
|
|
4
|
-
/* eslint-disable max-len */
|
|
5
1
|
/**
|
|
6
2
|
* Tree Map Components
|
|
7
3
|
*/
|
|
@@ -54,10 +50,12 @@ import { PdfExport } from './model/pdf-export';
|
|
|
54
50
|
*/
|
|
55
51
|
var TreeMap = /** @class */ (function (_super) {
|
|
56
52
|
__extends(TreeMap, _super);
|
|
57
|
-
/**
|
|
53
|
+
/**
|
|
58
54
|
* Constructor for TreeMap component.
|
|
55
|
+
*
|
|
56
|
+
* @param {TreeMapModel} options - Specifies the treemap instance.
|
|
57
|
+
* @param {string | HTMLElement} element - Specifies the treemap element.
|
|
59
58
|
*/
|
|
60
|
-
// eslint-disable-next-line @typescript-eslint/explicit-member-accessibility
|
|
61
59
|
function TreeMap(options, element) {
|
|
62
60
|
var _this = _super.call(this, options, element) || this;
|
|
63
61
|
/**
|
|
@@ -191,9 +189,9 @@ var TreeMap = /** @class */ (function (_super) {
|
|
|
191
189
|
}
|
|
192
190
|
if (isNullOrUndefined(document.getElementById(this.element.id + '_Secondary_Element'))) {
|
|
193
191
|
var secondaryElement = createElement('div', {
|
|
194
|
-
id: this.element.id + '_Secondary_Element'
|
|
195
|
-
styles: 'position: absolute;z-index:1;'
|
|
192
|
+
id: this.element.id + '_Secondary_Element'
|
|
196
193
|
});
|
|
194
|
+
secondaryElement.style.cssText = 'position: absolute;z-index:1;';
|
|
197
195
|
this.element.appendChild(secondaryElement);
|
|
198
196
|
}
|
|
199
197
|
};
|
|
@@ -205,9 +203,9 @@ var TreeMap = /** @class */ (function (_super) {
|
|
|
205
203
|
}
|
|
206
204
|
};
|
|
207
205
|
/**
|
|
208
|
-
* @private
|
|
209
206
|
* Render the treemap border
|
|
210
207
|
*
|
|
208
|
+
* @private
|
|
211
209
|
* @returns {void}
|
|
212
210
|
*/
|
|
213
211
|
TreeMap.prototype.renderBorder = function () {
|
|
@@ -286,11 +284,12 @@ var TreeMap = /** @class */ (function (_super) {
|
|
|
286
284
|
var child = findChildren(this.dataSource[i])['values'];
|
|
287
285
|
if (this.isHierarchicalData && child && child.length > 0) {
|
|
288
286
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
289
|
-
child.forEach(function (currentData
|
|
287
|
+
child.forEach(function (currentData) {
|
|
290
288
|
if (currentData[path]) {
|
|
291
289
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
292
290
|
data_1[path].push({
|
|
293
|
-
groupIndex: 0, name: currentData[path],
|
|
291
|
+
groupIndex: 0, name: currentData[path],
|
|
292
|
+
levelOrderName: currentData[path].toString(),
|
|
294
293
|
data: currentData, weight: currentData[_this.weightValuePath]
|
|
295
294
|
});
|
|
296
295
|
}
|
|
@@ -351,14 +350,10 @@ var TreeMap = /** @class */ (function (_super) {
|
|
|
351
350
|
var _this = this;
|
|
352
351
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
353
352
|
var childData;
|
|
354
|
-
var levelData = [];
|
|
355
353
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
356
354
|
var newData = {};
|
|
357
355
|
var levelIndex;
|
|
358
356
|
var path = this.leafItemSettings.labelPath ? this.leafItemSettings.labelPath : this.weightValuePath;
|
|
359
|
-
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
360
|
-
var currentData = {};
|
|
361
|
-
var level;
|
|
362
357
|
var key;
|
|
363
358
|
newData = findChildren(data);
|
|
364
359
|
childData = newData ? newData['values'] : null;
|
|
@@ -366,7 +361,6 @@ var TreeMap = /** @class */ (function (_super) {
|
|
|
366
361
|
key = newData['key'];
|
|
367
362
|
for (var i = 0; i < this.levels.length; i++) {
|
|
368
363
|
if (key === this.levels[i].groupPath) {
|
|
369
|
-
level = this.levels[i];
|
|
370
364
|
levelIndex = i;
|
|
371
365
|
}
|
|
372
366
|
}
|
|
@@ -417,7 +411,8 @@ var TreeMap = /** @class */ (function (_super) {
|
|
|
417
411
|
/**
|
|
418
412
|
* This method is used to perform the print functionality in treemap.
|
|
419
413
|
*
|
|
420
|
-
* @param id - Specifies the element to print the treemap.
|
|
414
|
+
* @param {string[] | string | Element} id - Specifies the element to print the treemap.
|
|
415
|
+
* @returns {void}
|
|
421
416
|
*/
|
|
422
417
|
TreeMap.prototype.print = function (id) {
|
|
423
418
|
if (this.allowPrint && this.printModule) {
|
|
@@ -427,9 +422,11 @@ var TreeMap = /** @class */ (function (_super) {
|
|
|
427
422
|
/**
|
|
428
423
|
* This method is used to perform the export functionality for the rendered treemap.
|
|
429
424
|
*
|
|
430
|
-
* @param type - Specifies the
|
|
431
|
-
* @param fileName - Specifies file name for exporting the rendered
|
|
432
|
-
* @param orientation - Specifies the orientation of the
|
|
425
|
+
* @param {ExportType} type - Specifies the extension type of the exported document.
|
|
426
|
+
* @param {string} fileName - Specifies file name for exporting the rendered TreeMap.
|
|
427
|
+
* @param {PdfPageOrientation} orientation - Specifies the orientation of the PDF document.
|
|
428
|
+
* @param {boolean} allowDownload - Specifies whether the exported file should be downloaded or not.
|
|
429
|
+
* @returns {string} - Specifies the base64 string of the exported image which is returned when the allowDownload is set to false.
|
|
433
430
|
*/
|
|
434
431
|
TreeMap.prototype.export = function (type, fileName, orientation, allowDownload) {
|
|
435
432
|
var _this = this;
|
|
@@ -437,13 +434,13 @@ var TreeMap = /** @class */ (function (_super) {
|
|
|
437
434
|
allowDownload = true;
|
|
438
435
|
}
|
|
439
436
|
if (type === 'PDF' && this.allowPdfExport && this.pdfExportModule) {
|
|
440
|
-
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
437
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-unused-vars
|
|
441
438
|
return new Promise(function (resolve, reject) {
|
|
442
439
|
resolve(_this.pdfExportModule.export(_this, type, fileName, orientation, allowDownload));
|
|
443
440
|
});
|
|
444
441
|
}
|
|
445
442
|
else if (this.allowImageExport && (type !== 'PDF') && this.imageExportModule) {
|
|
446
|
-
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
443
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-unused-vars
|
|
447
444
|
return new Promise(function (resolve, reject) {
|
|
448
445
|
resolve(_this.imageExportModule.export(_this, type, fileName, allowDownload));
|
|
449
446
|
});
|
|
@@ -454,9 +451,7 @@ var TreeMap = /** @class */ (function (_super) {
|
|
|
454
451
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
455
452
|
this.dataSource = this.dataSource;
|
|
456
453
|
var groupPath;
|
|
457
|
-
var childGroupPath;
|
|
458
454
|
var orderNames = [];
|
|
459
|
-
var process = false;
|
|
460
455
|
for (var i = 0; i < this.levels.length + 1; i++) {
|
|
461
456
|
groupPath = this.levels[i] ? this.levels[i].groupPath : this.leafItemSettings.labelPath;
|
|
462
457
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
@@ -472,8 +467,8 @@ var TreeMap = /** @class */ (function (_super) {
|
|
|
472
467
|
var name_1 = this.dataSource[j][groupPath];
|
|
473
468
|
if (i !== 0) {
|
|
474
469
|
for (var k = 0; k <= i; k++) {
|
|
475
|
-
var
|
|
476
|
-
childName += (this.dataSource[j][
|
|
470
|
+
var childGroupPath = this.levels[k] ? this.levels[k].groupPath : groupPath;
|
|
471
|
+
childName += (this.dataSource[j][childGroupPath]) + ((k === i) ? '' : '#');
|
|
477
472
|
}
|
|
478
473
|
}
|
|
479
474
|
if (!(orderNames.length > 0 ? orderNames.indexOf(childName ?
|
|
@@ -485,7 +480,7 @@ var TreeMap = /** @class */ (function (_super) {
|
|
|
485
480
|
currentData['groupName'] = groupPath;
|
|
486
481
|
currentData['data'] = this.dataSource[j];
|
|
487
482
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
488
|
-
LevelsData.levelsData[LevelsData.levelsData.length - 1][groupPath].push(currentData);
|
|
483
|
+
LevelsData.levelsData[(LevelsData.levelsData.length - 1)][groupPath].push(currentData);
|
|
489
484
|
orderNames.push((childName) ? childName : name_1);
|
|
490
485
|
}
|
|
491
486
|
}
|
|
@@ -495,7 +490,8 @@ var TreeMap = /** @class */ (function (_super) {
|
|
|
495
490
|
/**
|
|
496
491
|
* This method orders the treemap level data.
|
|
497
492
|
*
|
|
498
|
-
* @param start - Specifies the start value of the treemap level.
|
|
493
|
+
* @param {number} start - Specifies the start value of the treemap level.
|
|
494
|
+
* @returns {void}
|
|
499
495
|
*/
|
|
500
496
|
TreeMap.prototype.reOrderLevelData = function (start) {
|
|
501
497
|
var currentName;
|
|
@@ -508,7 +504,8 @@ var TreeMap = /** @class */ (function (_super) {
|
|
|
508
504
|
for (var i = 0; i < currentData.length; i++) {
|
|
509
505
|
currentName = currentData[i]['levelOrderName'];
|
|
510
506
|
for (var j = 0; j < previousData.length; j++) {
|
|
511
|
-
previousData[j][currentPath] = isNullOrUndefined(previousData[j][currentPath]) ?
|
|
507
|
+
previousData[j][currentPath] = isNullOrUndefined(previousData[j][currentPath]) ?
|
|
508
|
+
[] : previousData[j][currentPath];
|
|
512
509
|
if (this.IsChildHierarchy(currentName.split('#'), previousData[j]['levelOrderName'].split('#'))) {
|
|
513
510
|
if (isNullOrUndefined(currentData[i]['parent'])) {
|
|
514
511
|
currentData[i]['parent'] = previousData[j];
|
|
@@ -540,17 +537,14 @@ var TreeMap = /** @class */ (function (_super) {
|
|
|
540
537
|
/**
|
|
541
538
|
* This method finds the weight value of the treemap level.
|
|
542
539
|
*
|
|
543
|
-
* @param processData - Specifies the treemap data.
|
|
544
|
-
* @param type - Specifies the type of the data.
|
|
540
|
+
* @param {any[]} processData - Specifies the treemap data.
|
|
541
|
+
* @param {string} type - Specifies the type of the data.
|
|
542
|
+
* @returns {void}
|
|
545
543
|
*/
|
|
546
544
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
547
545
|
TreeMap.prototype.findTotalWeight = function (processData, type) {
|
|
548
546
|
var _this = this;
|
|
549
|
-
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
550
547
|
var totalWeight;
|
|
551
|
-
var childData = [];
|
|
552
|
-
var levelName;
|
|
553
|
-
var start = 0;
|
|
554
548
|
var split;
|
|
555
549
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
556
550
|
var groupName;
|
|
@@ -627,8 +621,10 @@ var TreeMap = /** @class */ (function (_super) {
|
|
|
627
621
|
/**
|
|
628
622
|
* This method handles the window resize event on treemap.
|
|
629
623
|
*
|
|
630
|
-
* @param e - Specifies the pointer event.
|
|
624
|
+
* @param {Event} e - Specifies the pointer event.
|
|
625
|
+
* @returns {void}
|
|
631
626
|
*/
|
|
627
|
+
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
632
628
|
TreeMap.prototype.resizeOnTreeMap = function (e) {
|
|
633
629
|
var _this = this;
|
|
634
630
|
if (!this.isDestroyed) {
|
|
@@ -650,6 +646,7 @@ var TreeMap = /** @class */ (function (_super) {
|
|
|
650
646
|
_this.refreshing = true;
|
|
651
647
|
_this.wireEVents();
|
|
652
648
|
args_1.currentSize = _this.availableSize;
|
|
649
|
+
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
653
650
|
_this.trigger(resize, args_1, function (observedArgs) {
|
|
654
651
|
_this.render();
|
|
655
652
|
});
|
|
@@ -660,7 +657,8 @@ var TreeMap = /** @class */ (function (_super) {
|
|
|
660
657
|
/**
|
|
661
658
|
* This method handles the click event on the treemap.
|
|
662
659
|
*
|
|
663
|
-
* @param e - Specifies the mouse click event in the treemap.
|
|
660
|
+
* @param {PointerEvent} e - Specifies the mouse click event in the treemap.
|
|
661
|
+
* @returns {void}
|
|
664
662
|
*/
|
|
665
663
|
TreeMap.prototype.clickOnTreeMap = function (e) {
|
|
666
664
|
var _this = this;
|
|
@@ -703,7 +701,8 @@ var TreeMap = /** @class */ (function (_super) {
|
|
|
703
701
|
/**
|
|
704
702
|
* This method handles the double click event in the treemap.
|
|
705
703
|
*
|
|
706
|
-
* @param e - Specifies the pointer event of mouse click.
|
|
704
|
+
* @param {PointerEvent} e - Specifies the pointer event of mouse click.
|
|
705
|
+
* @returns {void}
|
|
707
706
|
*/
|
|
708
707
|
TreeMap.prototype.doubleClickOnTreeMap = function (e) {
|
|
709
708
|
var doubleClickArgs = { cancel: false, name: doubleClick, treemap: this, mouseEvent: e };
|
|
@@ -713,7 +712,8 @@ var TreeMap = /** @class */ (function (_super) {
|
|
|
713
712
|
/**
|
|
714
713
|
* This method handles the right click event in the treemap.
|
|
715
714
|
*
|
|
716
|
-
* @param e - Specifies the pointer event of mouse click.
|
|
715
|
+
* @param {PointerEvent} e - Specifies the pointer event of mouse click.
|
|
716
|
+
* @returns {void}
|
|
717
717
|
*/
|
|
718
718
|
TreeMap.prototype.rightClickOnTreeMap = function (e) {
|
|
719
719
|
var rightClickArgs = { cancel: false, name: rightClick, treemap: this, mouseEvent: e };
|
|
@@ -722,7 +722,8 @@ var TreeMap = /** @class */ (function (_super) {
|
|
|
722
722
|
/**
|
|
723
723
|
* This method handles the mouse down event in the treemap.
|
|
724
724
|
*
|
|
725
|
-
* @param e - Specifies the pointer event of mouse click.
|
|
725
|
+
* @param {PointerEvent} e - Specifies the pointer event of mouse click.
|
|
726
|
+
* @returns {void}
|
|
726
727
|
*/
|
|
727
728
|
TreeMap.prototype.mouseDownOnTreeMap = function (e) {
|
|
728
729
|
if (e.target.id.indexOf('_Item_Index') > -1) {
|
|
@@ -733,7 +734,8 @@ var TreeMap = /** @class */ (function (_super) {
|
|
|
733
734
|
/**
|
|
734
735
|
* This method handles the mouse move event in the treemap.
|
|
735
736
|
*
|
|
736
|
-
* @param e - Specifies the pointer event of mouse click.
|
|
737
|
+
* @param {PointerEvent} e - Specifies the pointer event of mouse click.
|
|
738
|
+
* @returns {void}
|
|
737
739
|
*/
|
|
738
740
|
TreeMap.prototype.mouseMoveOnTreeMap = function (e) {
|
|
739
741
|
var targetEle = e.target;
|
|
@@ -759,10 +761,11 @@ var TreeMap = /** @class */ (function (_super) {
|
|
|
759
761
|
/**
|
|
760
762
|
* This method calculates the selected treemap levels.
|
|
761
763
|
*
|
|
762
|
-
* @param labelText - Specifies the label text.
|
|
763
|
-
* @param item - Specifies the treemap item.
|
|
764
|
+
* @param {string} labelText - Specifies the label text.
|
|
765
|
+
* @param {any} item - Specifies the treemap item.
|
|
766
|
+
* @returns {any} - Returns label of the drilled level.
|
|
764
767
|
*/
|
|
765
|
-
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
768
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/explicit-module-boundary-types
|
|
766
769
|
TreeMap.prototype.calculateSelectedTextLevels = function (labelText, item) {
|
|
767
770
|
//to find the levels by clicking the particular text both for drillDownView as true / false.
|
|
768
771
|
var drillLevel;
|
|
@@ -782,13 +785,14 @@ var TreeMap = /** @class */ (function (_super) {
|
|
|
782
785
|
/**
|
|
783
786
|
* This method calculates the previous level of child items in treemap.
|
|
784
787
|
*
|
|
785
|
-
* @param
|
|
786
|
-
* @param
|
|
787
|
-
* @param
|
|
788
|
-
* @
|
|
788
|
+
* @param {any} drillLevelValues - Specifies the values of drill level.
|
|
789
|
+
* @param {any} item - Specifies the treemap item.
|
|
790
|
+
* @param {boolean} directLevel - Specifies the current level.
|
|
791
|
+
* @returns {boolean} - check whether it is previous level or not.
|
|
792
|
+
* @private
|
|
789
793
|
*/
|
|
790
|
-
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
791
|
-
TreeMap.prototype.calculatePreviousLevelChildItems = function (
|
|
794
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/explicit-module-boundary-types
|
|
795
|
+
TreeMap.prototype.calculatePreviousLevelChildItems = function (drillLevelValues, item, directLevel) {
|
|
792
796
|
//By clicking any child items drilldown to the particular level.
|
|
793
797
|
//At the time store all the previous drilled level items in drilledItems
|
|
794
798
|
// This condition satisfies while drilldown View is set as false and the text contains '[+]'
|
|
@@ -823,11 +827,12 @@ var TreeMap = /** @class */ (function (_super) {
|
|
|
823
827
|
/**
|
|
824
828
|
* This method compares the selected labels with the drill down items.
|
|
825
829
|
*
|
|
826
|
-
* @param drillLevelValues - Specifies the values of drill level.
|
|
827
|
-
* @param item - Specifies the treemap item.
|
|
828
|
-
* @param i - Specifies the treemap item.
|
|
830
|
+
* @param {any} drillLevelValues - Specifies the values of drill level.
|
|
831
|
+
* @param {any} item - Specifies the treemap item.
|
|
832
|
+
* @param {number} i - Specifies the treemap item.
|
|
833
|
+
* @returns {any} - return the new drill down object.
|
|
829
834
|
*/
|
|
830
|
-
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
835
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/explicit-module-boundary-types
|
|
831
836
|
TreeMap.prototype.compareSelectedLabelWithDrillDownItems = function (drillLevelValues, item, i) {
|
|
832
837
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
833
838
|
var drillLevelChild;
|
|
@@ -850,7 +855,8 @@ var TreeMap = /** @class */ (function (_super) {
|
|
|
850
855
|
/**
|
|
851
856
|
* This method handles mouse end event in treemap.
|
|
852
857
|
*
|
|
853
|
-
* @param e - Specifies the pointer event of mouse.
|
|
858
|
+
* @param {PointerEvent} e - Specifies the pointer event of mouse.
|
|
859
|
+
* @returns {void}
|
|
854
860
|
*/
|
|
855
861
|
TreeMap.prototype.mouseEndOnTreeMap = function (e) {
|
|
856
862
|
var _this = this;
|
|
@@ -881,7 +887,7 @@ var TreeMap = /** @class */ (function (_super) {
|
|
|
881
887
|
drillLevelValues = this.calculateSelectedTextLevels(labelText, item);
|
|
882
888
|
drillLevel = drillLevelValues['drillLevel'];
|
|
883
889
|
if (!this.drillDownView && labelText.search('[+]') !== -1) {
|
|
884
|
-
directLevel = this.calculatePreviousLevelChildItems(
|
|
890
|
+
directLevel = this.calculatePreviousLevelChildItems(drillLevelValues, item, directLevel);
|
|
885
891
|
}
|
|
886
892
|
}
|
|
887
893
|
if (this.levels.length !== 0 && !item['isLeafItem'] && findChildren(item)['values'] &&
|
|
@@ -973,7 +979,7 @@ var TreeMap = /** @class */ (function (_super) {
|
|
|
973
979
|
}
|
|
974
980
|
else {
|
|
975
981
|
_this.layout.calculateLayoutItems(newDrillItem, totalRect);
|
|
976
|
-
_this.layout.renderLayoutItems(
|
|
982
|
+
_this.layout.renderLayoutItems();
|
|
977
983
|
}
|
|
978
984
|
}
|
|
979
985
|
});
|
|
@@ -992,8 +998,10 @@ var TreeMap = /** @class */ (function (_super) {
|
|
|
992
998
|
/**
|
|
993
999
|
* This method handles mouse leave event in treemap.
|
|
994
1000
|
*
|
|
995
|
-
* @param e - Specifies the pointer event of mouse.
|
|
1001
|
+
* @param {PointerEvent} e - Specifies the pointer event of mouse.
|
|
1002
|
+
* @return {void}
|
|
996
1003
|
*/
|
|
1004
|
+
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
997
1005
|
TreeMap.prototype.mouseLeaveOnTreeMap = function (e) {
|
|
998
1006
|
if (this.treeMapTooltipModule) {
|
|
999
1007
|
this.treeMapTooltipModule.removeTooltip();
|
|
@@ -1003,12 +1011,16 @@ var TreeMap = /** @class */ (function (_super) {
|
|
|
1003
1011
|
}
|
|
1004
1012
|
removeClassNames(document.getElementsByClassName('treeMapHighLight'), 'treeMapHighLight', this);
|
|
1005
1013
|
if (this.treeMapHighlightModule) {
|
|
1006
|
-
removeShape(this.treeMapHighlightModule.shapeHighlightCollection
|
|
1014
|
+
removeShape(this.treeMapHighlightModule.shapeHighlightCollection);
|
|
1007
1015
|
this.treeMapHighlightModule.highLightId = '';
|
|
1008
1016
|
}
|
|
1009
1017
|
};
|
|
1010
1018
|
/**
|
|
1011
1019
|
* This method is used to select or remove the selection of treemap item based on the provided selection settings.
|
|
1020
|
+
*
|
|
1021
|
+
* @param {string[]} levelOrder - Specifies the order of the level.
|
|
1022
|
+
* @param {boolean} isSelected - check whether it is selected or not.
|
|
1023
|
+
* @return {void}
|
|
1012
1024
|
*/
|
|
1013
1025
|
TreeMap.prototype.selectItem = function (levelOrder, isSelected) {
|
|
1014
1026
|
if (isNullOrUndefined(isSelected)) {
|
|
@@ -1087,6 +1099,7 @@ var TreeMap = /** @class */ (function (_super) {
|
|
|
1087
1099
|
* @returns {void}
|
|
1088
1100
|
* @private
|
|
1089
1101
|
*/
|
|
1102
|
+
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
1090
1103
|
TreeMap.prototype.onPropertyChanged = function (newProp, oldProp) {
|
|
1091
1104
|
if (!this.isDestroyed) {
|
|
1092
1105
|
var render = false;
|
|
@@ -1117,6 +1130,8 @@ var TreeMap = /** @class */ (function (_super) {
|
|
|
1117
1130
|
};
|
|
1118
1131
|
/**
|
|
1119
1132
|
* Gets component name.
|
|
1133
|
+
*
|
|
1134
|
+
* @returns {string} - return the treemap instance.
|
|
1120
1135
|
*/
|
|
1121
1136
|
TreeMap.prototype.getModuleName = function () {
|
|
1122
1137
|
return 'treemap';
|
|
@@ -14,6 +14,9 @@ export declare class TreeMapHighlight {
|
|
|
14
14
|
constructor(treeMap: TreeMap);
|
|
15
15
|
/**
|
|
16
16
|
* Mouse down event in highlight
|
|
17
|
+
*
|
|
18
|
+
* @param {PointerEvent} e - Specifies the pointer argument.
|
|
19
|
+
* @returns {boolean} - return the highlight process is true or false.
|
|
17
20
|
*/
|
|
18
21
|
mouseMove(e: PointerEvent): boolean;
|
|
19
22
|
/**
|
|
@@ -57,6 +60,9 @@ export declare class TreeMapSelection {
|
|
|
57
60
|
constructor(treeMap: TreeMap);
|
|
58
61
|
/**
|
|
59
62
|
* Mouse down event in selection
|
|
63
|
+
*
|
|
64
|
+
* @param {PointerEvent} e - Specifies the pointer argument.
|
|
65
|
+
* @returns {void}
|
|
60
66
|
*/
|
|
61
67
|
mouseDown(e: PointerEvent): void;
|
|
62
68
|
/**
|
|
@@ -87,7 +93,6 @@ export declare class TreeMapSelection {
|
|
|
87
93
|
/**
|
|
88
94
|
* To destroy the selection.
|
|
89
95
|
*
|
|
90
|
-
* @param {TreeMap} treeMap - Specifies the treemap instance.
|
|
91
96
|
* @returns {void}
|
|
92
97
|
* @private
|
|
93
98
|
*/
|
|
@@ -5,7 +5,6 @@ import { findHightLightItems, removeClassNames, applyOptions, removeShape, remov
|
|
|
5
5
|
* Performing treemap highlight
|
|
6
6
|
*/
|
|
7
7
|
var TreeMapHighlight = /** @class */ (function () {
|
|
8
|
-
// eslint-disable-next-line @typescript-eslint/explicit-member-accessibility
|
|
9
8
|
function TreeMapHighlight(treeMap) {
|
|
10
9
|
this.target = 'highlight';
|
|
11
10
|
this.shapeTarget = 'highlight';
|
|
@@ -18,10 +17,11 @@ var TreeMapHighlight = /** @class */ (function () {
|
|
|
18
17
|
this.treemap = treeMap;
|
|
19
18
|
this.addEventListener();
|
|
20
19
|
}
|
|
21
|
-
/* eslint-disable max-len */
|
|
22
|
-
// eslint-disable-next-line valid-jsdoc
|
|
23
20
|
/**
|
|
24
21
|
* Mouse down event in highlight
|
|
22
|
+
*
|
|
23
|
+
* @param {PointerEvent} e - Specifies the pointer argument.
|
|
24
|
+
* @returns {boolean} - return the highlight process is true or false.
|
|
25
25
|
*/
|
|
26
26
|
TreeMapHighlight.prototype.mouseMove = function (e) {
|
|
27
27
|
var treemap = this.treemap;
|
|
@@ -54,7 +54,7 @@ var TreeMapHighlight = /** @class */ (function () {
|
|
|
54
54
|
if (this.shapeElement !== null && (selectionModule ? this.shapeElement.getAttribute('id') !== selectionModule.legendSelectId : true)) {
|
|
55
55
|
if (selectionModule ? this.shapeElement !== selectionModule.shapeElement : true) {
|
|
56
56
|
this.currentElement.push({ currentElement: this.shapeElement });
|
|
57
|
-
removeShape(this.shapeHighlightCollection
|
|
57
|
+
removeShape(this.shapeHighlightCollection);
|
|
58
58
|
this.shapeHighlightCollection.push({ legendEle: this.shapeElement, oldFill: collection[index]['legendFill'],
|
|
59
59
|
oldOpacity: collection[index]['opacity'], oldBorderColor: collection[index]['borderColor'],
|
|
60
60
|
oldBorderWidth: collection[index]['borderWidth']
|
|
@@ -74,7 +74,8 @@ var TreeMapHighlight = /** @class */ (function () {
|
|
|
74
74
|
}
|
|
75
75
|
orders = findHightLightItems(item, [], highlight.mode, treemap);
|
|
76
76
|
if (this.treemap.legendSettings.visible ? selectionModule ? this.shapeElement ? this.shapeElement.getAttribute('id') !== selectionModule.legendSelectId : true : true : true) {
|
|
77
|
-
if (this.treemap.legendSettings.visible ? selectionModule ?
|
|
77
|
+
if (this.treemap.legendSettings.visible ? selectionModule ?
|
|
78
|
+
this.shapeElement !== selectionModule.shapeElement : true : true) {
|
|
78
79
|
for (var i = 0; i < treeMapElement.childElementCount; i++) {
|
|
79
80
|
element = treeMapElement.childNodes[i];
|
|
80
81
|
process = true;
|
|
@@ -107,13 +108,14 @@ var TreeMapHighlight = /** @class */ (function () {
|
|
|
107
108
|
}
|
|
108
109
|
}
|
|
109
110
|
else if (targetId.indexOf('_Legend_Shape') > -1 || targetId.indexOf('_Legend_Index') > -1) {
|
|
110
|
-
if (this.treemap.legendSettings.visible && (selectionModule ? selectionModule.legendSelectId !== targetId : true)
|
|
111
|
+
if (this.treemap.legendSettings.visible && (selectionModule ? selectionModule.legendSelectId !== targetId : true)
|
|
112
|
+
&& (selectionModule ? selectionModule.shapeSelectId !== targetId : true)) {
|
|
111
113
|
var itemIndex = void 0;
|
|
112
114
|
var groupIndex = void 0;
|
|
113
115
|
var length_2;
|
|
114
116
|
var targetEle = document.getElementById(targetId);
|
|
115
117
|
if (this.shapeTarget === 'highlight') {
|
|
116
|
-
removeLegend(this.legendHighlightCollection
|
|
118
|
+
removeLegend(this.legendHighlightCollection);
|
|
117
119
|
}
|
|
118
120
|
this.shapeTarget = 'highlight';
|
|
119
121
|
var index = this.treemap.legendSettings.mode === 'Default' ? parseFloat(targetId.split('_Legend_Shape_Index_')[1]) : parseFloat(targetId.split('_Legend_Index_')[1]);
|
|
@@ -150,14 +152,15 @@ var TreeMapHighlight = /** @class */ (function () {
|
|
|
150
152
|
}
|
|
151
153
|
if ((this.shapeTarget === 'highlight' || this.target === 'highlight') && this.treemap.legendSettings.visible) {
|
|
152
154
|
if (selectionModule ? this.shapeElement ? this.shapeElement.getAttribute('id') !== selectionModule.legendSelectId : true : true) {
|
|
153
|
-
if (selectionModule ? this.shapeElement !== selectionModule.shapeElement : true && selectionModule ?
|
|
154
|
-
|
|
155
|
+
if (selectionModule ? this.shapeElement !== selectionModule.shapeElement : true && selectionModule ?
|
|
156
|
+
selectionModule.legendSelect : true) {
|
|
157
|
+
removeShape(this.shapeHighlightCollection);
|
|
155
158
|
this.shapeHighlightCollection = [];
|
|
156
159
|
}
|
|
157
160
|
}
|
|
158
161
|
}
|
|
159
162
|
if (this.shapeTarget === 'highlight' && this.treemap.legendSettings.visible) {
|
|
160
|
-
removeLegend(this.legendHighlightCollection
|
|
163
|
+
removeLegend(this.legendHighlightCollection);
|
|
161
164
|
}
|
|
162
165
|
this.highLightId = '';
|
|
163
166
|
processHighlight = false;
|
|
@@ -215,7 +218,6 @@ export { TreeMapHighlight };
|
|
|
215
218
|
* Performing treemap selection
|
|
216
219
|
*/
|
|
217
220
|
var TreeMapSelection = /** @class */ (function () {
|
|
218
|
-
// eslint-disable-next-line @typescript-eslint/explicit-member-accessibility
|
|
219
221
|
function TreeMapSelection(treeMap) {
|
|
220
222
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
221
223
|
this.shapeSelectionCollection = [];
|
|
@@ -226,14 +228,15 @@ var TreeMapSelection = /** @class */ (function () {
|
|
|
226
228
|
this.treemap = treeMap;
|
|
227
229
|
this.addEventListener();
|
|
228
230
|
}
|
|
229
|
-
// eslint-disable-next-line valid-jsdoc
|
|
230
231
|
/**
|
|
231
232
|
* Mouse down event in selection
|
|
233
|
+
*
|
|
234
|
+
* @param {PointerEvent} e - Specifies the pointer argument.
|
|
235
|
+
* @returns {void}
|
|
232
236
|
*/
|
|
233
237
|
TreeMapSelection.prototype.mouseDown = function (e) {
|
|
234
238
|
var targetEle = e.target;
|
|
235
239
|
var eventArgs;
|
|
236
|
-
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
237
240
|
var treemap = this.treemap;
|
|
238
241
|
treemap.levelSelection = [];
|
|
239
242
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
@@ -243,7 +246,6 @@ var TreeMapSelection = /** @class */ (function () {
|
|
|
243
246
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
244
247
|
var item;
|
|
245
248
|
var selectionElements = [];
|
|
246
|
-
var opacity;
|
|
247
249
|
var treeMapElement;
|
|
248
250
|
var element;
|
|
249
251
|
var orders;
|
|
@@ -262,7 +264,7 @@ var TreeMapSelection = /** @class */ (function () {
|
|
|
262
264
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
263
265
|
var collection = this.treemap.treeMapLegendModule.legendCollections;
|
|
264
266
|
this.shapeElement = undefined;
|
|
265
|
-
removeShape(this.shapeSelectionCollection
|
|
267
|
+
removeShape(this.shapeSelectionCollection);
|
|
266
268
|
if (highlightModule) {
|
|
267
269
|
highlightModule.shapeTarget = 'selection';
|
|
268
270
|
highlightModule.shapeHighlightCollection = [];
|
|
@@ -316,7 +318,7 @@ var TreeMapSelection = /** @class */ (function () {
|
|
|
316
318
|
}
|
|
317
319
|
}
|
|
318
320
|
else {
|
|
319
|
-
removeShape(this.shapeSelectionCollection
|
|
321
|
+
removeShape(this.shapeSelectionCollection);
|
|
320
322
|
this.shapeSelectionCollection = [];
|
|
321
323
|
this.shapeElement = undefined;
|
|
322
324
|
this.shapeSelect = true;
|
|
@@ -337,7 +339,7 @@ var TreeMapSelection = /** @class */ (function () {
|
|
|
337
339
|
this.legendSelect = false;
|
|
338
340
|
var legendIndex = parseInt(targetId[targetId.length - 1], 10);
|
|
339
341
|
var targetEle_1 = document.getElementById(targetId);
|
|
340
|
-
removeLegend(this.legendSelectionCollection
|
|
342
|
+
removeLegend(this.legendSelectionCollection);
|
|
341
343
|
if (highlightModule) {
|
|
342
344
|
highlightModule.shapeTarget = 'selection';
|
|
343
345
|
}
|
|
@@ -363,7 +365,7 @@ var TreeMapSelection = /** @class */ (function () {
|
|
|
363
365
|
}
|
|
364
366
|
}
|
|
365
367
|
else {
|
|
366
|
-
removeLegend(this.legendSelectionCollection
|
|
368
|
+
removeLegend(this.legendSelectionCollection);
|
|
367
369
|
if (highlightModule) {
|
|
368
370
|
highlightModule.shapeTarget = 'highlight';
|
|
369
371
|
}
|
|
@@ -414,7 +416,7 @@ var TreeMapSelection = /** @class */ (function () {
|
|
|
414
416
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
415
417
|
var collection = this.treemap.treeMapLegendModule.legendCollections;
|
|
416
418
|
this.shapeElement = undefined;
|
|
417
|
-
removeShape(this.shapeSelectionCollection
|
|
419
|
+
removeShape(this.shapeSelectionCollection);
|
|
418
420
|
index = getLegendIndex(length_5, items[m], this.treemap);
|
|
419
421
|
this.shapeElement = this.treemap.legendSettings.mode === 'Default' ? document.getElementById(this.treemap.element.id + '_Legend_Shape_Index_' + index) : document.getElementById(this.treemap.element.id + '_Legend_Index_' + index);
|
|
420
422
|
if (this.shapeElement !== null) {
|
|
@@ -454,7 +456,7 @@ var TreeMapSelection = /** @class */ (function () {
|
|
|
454
456
|
}
|
|
455
457
|
}
|
|
456
458
|
else {
|
|
457
|
-
removeShape(this.shapeSelectionCollection
|
|
459
|
+
removeShape(this.shapeSelectionCollection);
|
|
458
460
|
this.shapeElement = undefined;
|
|
459
461
|
this.treemap.levelSelection = [];
|
|
460
462
|
this.shapeSelect = true;
|
|
@@ -497,7 +499,6 @@ var TreeMapSelection = /** @class */ (function () {
|
|
|
497
499
|
/**
|
|
498
500
|
* To destroy the selection.
|
|
499
501
|
*
|
|
500
|
-
* @param {TreeMap} treeMap - Specifies the treemap instance.
|
|
501
502
|
* @returns {void}
|
|
502
503
|
* @private
|
|
503
504
|
*/
|
|
@@ -15,7 +15,6 @@ import { tooltipRendering } from '../model/constants';
|
|
|
15
15
|
* Render Tooltip
|
|
16
16
|
*/
|
|
17
17
|
var TreeMapTooltip = /** @class */ (function () {
|
|
18
|
-
// eslint-disable-next-line @typescript-eslint/explicit-member-accessibility
|
|
19
18
|
function TreeMapTooltip(treeMap) {
|
|
20
19
|
this.treemap = treeMap;
|
|
21
20
|
this.tooltipSettings = this.treemap.tooltipSettings;
|
|
@@ -49,14 +48,12 @@ var TreeMapTooltip = /** @class */ (function () {
|
|
|
49
48
|
var tooltipEle;
|
|
50
49
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
51
50
|
var location;
|
|
52
|
-
var toolTipHeader;
|
|
53
51
|
var toolTipData = {};
|
|
54
52
|
var tooltipContent = [];
|
|
55
53
|
var markerFill;
|
|
56
54
|
if (targetId.indexOf('_Item_Index') > -1) {
|
|
57
55
|
item = this.treemap.layout.renderItems[parseFloat(targetId.split('_Item_Index_')[1])];
|
|
58
56
|
if (!isNullOrUndefined(item)) {
|
|
59
|
-
toolTipHeader = item['name'];
|
|
60
57
|
value = item['weight'];
|
|
61
58
|
toolTipData = item['data'];
|
|
62
59
|
if (!isNullOrUndefined(item['options'])) {
|
|
@@ -76,9 +73,9 @@ var TreeMapTooltip = /** @class */ (function () {
|
|
|
76
73
|
else {
|
|
77
74
|
tooltipEle = createElement('div', {
|
|
78
75
|
id: this.treemap.element.id + '_TreeMapTooltip',
|
|
79
|
-
className: 'EJ2-TreeMap-Tooltip'
|
|
80
|
-
styles: 'position: absolute;pointer-events:none;'
|
|
76
|
+
className: 'EJ2-TreeMap-Tooltip'
|
|
81
77
|
});
|
|
78
|
+
tooltipEle.style.cssText = 'position: absolute;pointer-events:none;';
|
|
82
79
|
document.getElementById(this.treemap.element.id + '_Secondary_Element').appendChild(tooltipEle);
|
|
83
80
|
}
|
|
84
81
|
location = getMousePosition(pageX, pageY, this.treemap.svgObject);
|
|
@@ -97,6 +94,7 @@ var TreeMapTooltip = /** @class */ (function () {
|
|
|
97
94
|
treemap: this.treemap,
|
|
98
95
|
element: target, eventArgs: e
|
|
99
96
|
};
|
|
97
|
+
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
100
98
|
this.treemap.trigger(tooltipRendering, tootipArgs, function (args) {
|
|
101
99
|
_this.addTooltip(tootipArgs, markerFill, tooltipEle);
|
|
102
100
|
});
|