@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/dist/global/index.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/*!
|
|
2
2
|
* filename: index.d.ts
|
|
3
|
-
* version : 20.
|
|
3
|
+
* version : 20.4.38
|
|
4
4
|
* Copyright Syncfusion Inc. 2001 - 2020. All rights reserved.
|
|
5
5
|
* Use of this code is subject to the terms of our license.
|
|
6
6
|
* A copy of the current license can be obtained at any time by e-mailing
|
package/package.json
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
{
|
|
2
2
|
"_from": "@syncfusion/ej2-treemap@*",
|
|
3
|
-
"_id": "@syncfusion/ej2-treemap@
|
|
3
|
+
"_id": "@syncfusion/ej2-treemap@16.31.3",
|
|
4
4
|
"_inBundle": false,
|
|
5
|
-
"_integrity": "sha512-
|
|
5
|
+
"_integrity": "sha512-sNP/1Fstr9KndFdqhX+OesnOeE6tmK/TgYO1fyai8m2JOM1ePgStaxamXMboa+VUBzHIRyw3D20HKWy0offS8g==",
|
|
6
6
|
"_location": "/@syncfusion/ej2-treemap",
|
|
7
7
|
"_phantomChildren": {},
|
|
8
8
|
"_requested": {
|
|
@@ -23,8 +23,8 @@
|
|
|
23
23
|
"/@syncfusion/ej2-react-treemap",
|
|
24
24
|
"/@syncfusion/ej2-vue-treemap"
|
|
25
25
|
],
|
|
26
|
-
"_resolved": "https://nexus.syncfusion.com/repository/ej2-
|
|
27
|
-
"_shasum": "
|
|
26
|
+
"_resolved": "https://nexus.syncfusion.com/repository/ej2-release/@syncfusion/ej2-treemap/-/ej2-treemap-16.31.3.tgz",
|
|
27
|
+
"_shasum": "15fb7b198909ac84d2cd7529db328706fa588dcd",
|
|
28
28
|
"_spec": "@syncfusion/ej2-treemap@*",
|
|
29
29
|
"_where": "/jenkins/workspace/ease-automation_release_19.1.0.1/packages/included",
|
|
30
30
|
"author": {
|
|
@@ -35,12 +35,12 @@
|
|
|
35
35
|
},
|
|
36
36
|
"bundleDependencies": false,
|
|
37
37
|
"dependencies": {
|
|
38
|
-
"@syncfusion/ej2-base": "~20.
|
|
39
|
-
"@syncfusion/ej2-compression": "~20.
|
|
40
|
-
"@syncfusion/ej2-data": "~20.
|
|
41
|
-
"@syncfusion/ej2-file-utils": "~20.
|
|
42
|
-
"@syncfusion/ej2-pdf-export": "~20.
|
|
43
|
-
"@syncfusion/ej2-svg-base": "~20.
|
|
38
|
+
"@syncfusion/ej2-base": "~20.4.38",
|
|
39
|
+
"@syncfusion/ej2-compression": "~20.4.38",
|
|
40
|
+
"@syncfusion/ej2-data": "~20.4.38",
|
|
41
|
+
"@syncfusion/ej2-file-utils": "~20.4.38",
|
|
42
|
+
"@syncfusion/ej2-pdf-export": "~20.4.38",
|
|
43
|
+
"@syncfusion/ej2-svg-base": "~20.4.38"
|
|
44
44
|
},
|
|
45
45
|
"deprecated": false,
|
|
46
46
|
"description": "Essential JS 2 TreeMap Components",
|
|
@@ -52,17 +52,25 @@
|
|
|
52
52
|
"syncfusion",
|
|
53
53
|
"ej2-treemap",
|
|
54
54
|
"web-components",
|
|
55
|
+
"data-visualization",
|
|
56
|
+
"typescript",
|
|
57
|
+
"javascript",
|
|
55
58
|
"treemap",
|
|
59
|
+
"hierarchy",
|
|
60
|
+
"hierarchical-data",
|
|
61
|
+
"flat-data",
|
|
56
62
|
"layout",
|
|
57
|
-
"leaf-node",
|
|
58
63
|
"levels",
|
|
59
|
-
"
|
|
64
|
+
"leaf-node",
|
|
65
|
+
"data-labels",
|
|
66
|
+
"label-template",
|
|
67
|
+
"header-template",
|
|
68
|
+
"drill-down",
|
|
60
69
|
"color-mapping",
|
|
61
|
-
"
|
|
62
|
-
"
|
|
63
|
-
"drilldown",
|
|
70
|
+
"selection",
|
|
71
|
+
"highlight",
|
|
64
72
|
"legend",
|
|
65
|
-
"
|
|
73
|
+
"template"
|
|
66
74
|
],
|
|
67
75
|
"license": "SEE LICENSE IN license",
|
|
68
76
|
"main": "./dist/ej2-treemap.umd.min.js",
|
|
@@ -73,6 +81,6 @@
|
|
|
73
81
|
"url": "git+https://github.com/syncfusion/ej2-javascript-ui-controls.git"
|
|
74
82
|
},
|
|
75
83
|
"typings": "index.d.ts",
|
|
76
|
-
"version": "20.
|
|
84
|
+
"version": "20.4.38",
|
|
77
85
|
"sideEffects": false
|
|
78
86
|
}
|
|
@@ -52,6 +52,9 @@ export declare class TreeMapLegend {
|
|
|
52
52
|
private renderLegendTitle;
|
|
53
53
|
/**
|
|
54
54
|
* To rendered the interactive pointer
|
|
55
|
+
*
|
|
56
|
+
* @param {PointerEvent | TouchEvent} e - Specifies the pointer argument.
|
|
57
|
+
* @returns {void}
|
|
55
58
|
*/
|
|
56
59
|
renderInteractivePointer(e: PointerEvent | TouchEvent): void;
|
|
57
60
|
private drawInteractivePointer;
|
|
@@ -63,10 +66,16 @@ export declare class TreeMapLegend {
|
|
|
63
66
|
removeInteractivePointer(): void;
|
|
64
67
|
/**
|
|
65
68
|
* To change the next page
|
|
69
|
+
*
|
|
70
|
+
* @param {PointerEvent} e - Specifies the pointer event argument.
|
|
71
|
+
* @returns {void}
|
|
66
72
|
*/
|
|
67
73
|
changeNextPage(e: PointerEvent): void;
|
|
68
74
|
/**
|
|
69
75
|
* Wire events for event handler
|
|
76
|
+
*
|
|
77
|
+
* @param {Element} element - Specifies the element.
|
|
78
|
+
* @returns {void}
|
|
70
79
|
*/
|
|
71
80
|
wireEvents(element: Element): void;
|
|
72
81
|
/**
|
|
@@ -79,6 +88,8 @@ export declare class TreeMapLegend {
|
|
|
79
88
|
removeEventListener(): void;
|
|
80
89
|
/**
|
|
81
90
|
* Get module name.
|
|
91
|
+
*
|
|
92
|
+
* @returns {string} Returns the legend module name.
|
|
82
93
|
*/
|
|
83
94
|
protected getModuleName(): string;
|
|
84
95
|
/**
|
|
@@ -90,6 +101,10 @@ export declare class TreeMapLegend {
|
|
|
90
101
|
destroy(): void;
|
|
91
102
|
/**
|
|
92
103
|
* Get the gradient color for interactive legend.
|
|
104
|
+
*
|
|
105
|
+
* @param {ColorMappingModel} colorMap - Specifies the color mapping instance.
|
|
106
|
+
* @param {number} legendIndex - Specifies the index of legend.
|
|
107
|
+
* @returns {string} - Returns the legend color.
|
|
93
108
|
*/
|
|
94
109
|
legendGradientColor(colorMap: ColorMappingModel, legendIndex: number): string;
|
|
95
110
|
}
|
|
@@ -1,6 +1,3 @@
|
|
|
1
|
-
/* eslint-disable @typescript-eslint/naming-convention */
|
|
2
|
-
/* eslint-disable @typescript-eslint/dot-notation */
|
|
3
|
-
/* eslint-disable max-len */
|
|
4
1
|
import { LevelsData } from '../treemap';
|
|
5
2
|
import { findChildren, Location, Rect, Size, measureText, TextOption, PathOption, RectOption, drawSymbol, orderByArea, legendMaintain } from '../utils/helper';
|
|
6
3
|
import { Browser, isNullOrUndefined, EventHandler, extend } from '@syncfusion/ej2-base';
|
|
@@ -10,7 +7,6 @@ import { legendItemRendering, legendRendering } from '../model/constants';
|
|
|
10
7
|
* Legend module class
|
|
11
8
|
*/
|
|
12
9
|
var TreeMapLegend = /** @class */ (function () {
|
|
13
|
-
// eslint-disable-next-line @typescript-eslint/explicit-member-accessibility
|
|
14
10
|
function TreeMapLegend(treemap) {
|
|
15
11
|
this.page = 0;
|
|
16
12
|
this.legendBorderRect = new Rect(0, 0, 0, 0);
|
|
@@ -38,15 +34,12 @@ var TreeMapLegend = /** @class */ (function () {
|
|
|
38
34
|
this.heightIncrement = 0;
|
|
39
35
|
this.defsElement = this.treemap.renderer.createDefs();
|
|
40
36
|
this.treemap.svgObject.appendChild(this.defsElement);
|
|
41
|
-
var eventArgs
|
|
42
|
-
eventArgs = {
|
|
37
|
+
var eventArgs = {
|
|
43
38
|
cancel: false, name: legendRendering, treemap: this.treemap, _changePosition: this.treemap.legendSettings.position,
|
|
44
39
|
position: this.treemap.legendSettings.position
|
|
45
40
|
};
|
|
46
41
|
this.treemap.trigger(legendRendering, eventArgs, function (observedArgs) {
|
|
47
|
-
// eslint-disable-next-line no-underscore-dangle
|
|
48
42
|
if (!observedArgs.cancel && observedArgs._changePosition !== _this.treemap.legendSettings.position) {
|
|
49
|
-
// eslint-disable-next-line no-underscore-dangle
|
|
50
43
|
_this.treemap.legendSettings.position = observedArgs._changePosition;
|
|
51
44
|
}
|
|
52
45
|
_this.calculateLegendBounds();
|
|
@@ -62,12 +55,18 @@ var TreeMapLegend = /** @class */ (function () {
|
|
|
62
55
|
this.findColorMappingLegendItems(LevelsData.levelsData[0]);
|
|
63
56
|
if ((this.treemap.palette.length > 0 || !isNullOrUndefined(this.treemap.colorValuePath))
|
|
64
57
|
&& this.legendCollections.length === 0) {
|
|
65
|
-
this.findPaletteLegendItems(LevelsData.levelsData[0]
|
|
58
|
+
this.findPaletteLegendItems(LevelsData.levelsData[0]);
|
|
66
59
|
}
|
|
67
60
|
if (this.legendCollections.length > 0) {
|
|
68
|
-
|
|
69
|
-
this.legendCollections.sort(function (firstItem, nextItem) { return (firstItem.
|
|
70
|
-
|
|
61
|
+
// eslint-disable-next-line @typescript-eslint/tslint/config
|
|
62
|
+
this.legendCollections.sort(function (firstItem, nextItem) { return (firstItem.levelIndex > nextItem.levelIndex) ? 1 :
|
|
63
|
+
(firstItem.levelIndex < nextItem.levelIndex) ? -1 : 0; });
|
|
64
|
+
// eslint-disable-next-line @typescript-eslint/tslint/config
|
|
65
|
+
this.legendCollections.sort(function (firstItem, nextItem) { return (firstItem.groupIndex > nextItem.groupIndex) ? 1 :
|
|
66
|
+
(firstItem.groupIndex < nextItem.groupIndex) ? -1 : 0; });
|
|
67
|
+
// eslint-disable-next-line @typescript-eslint/tslint/config
|
|
68
|
+
this.legendCollections.sort(function (firstItem, nextItem) { return (firstItem.leafIndex > nextItem.leafIndex) ? 1 :
|
|
69
|
+
(firstItem.leafIndex < nextItem.leafIndex) ? -1 : 0; });
|
|
71
70
|
var defaultSize = 25;
|
|
72
71
|
var textPadding = 10;
|
|
73
72
|
var position = legend.position;
|
|
@@ -98,10 +97,7 @@ var TreeMapLegend = /** @class */ (function () {
|
|
|
98
97
|
var startX_1 = 0;
|
|
99
98
|
var startY_1 = 0;
|
|
100
99
|
var shapePadding = legend.shapePadding;
|
|
101
|
-
var rectWidth = void 0;
|
|
102
|
-
var rectHeight = void 0;
|
|
103
100
|
var itemTextStyle = legend.textStyle;
|
|
104
|
-
var legendLength = this.legendCollections.length;
|
|
105
101
|
itemTextStyle.size = itemTextStyle.size || treemap.themeStyle.legendFontSize;
|
|
106
102
|
itemTextStyle.fontFamily = itemTextStyle.fontFamily || treemap.themeStyle.fontFamily;
|
|
107
103
|
if (legendMode === 'Default') {
|
|
@@ -211,11 +207,11 @@ var TreeMapLegend = /** @class */ (function () {
|
|
|
211
207
|
};
|
|
212
208
|
}
|
|
213
209
|
else {
|
|
214
|
-
var
|
|
215
|
-
var
|
|
216
|
-
(legendWidth /
|
|
217
|
-
var
|
|
218
|
-
(isNullOrUndefined(legendHeight)) ? (treemap.areaRect.height /
|
|
210
|
+
var legendLength = this.legendCollections.length;
|
|
211
|
+
var rectWidth = (orientation_1 === 'Horizontal') ? (isNullOrUndefined(legendWidth)) ? (treemap.areaRect.width / legendLength) :
|
|
212
|
+
(legendWidth / legendLength) : (isNullOrUndefined(legendWidth)) ? defaultSize : legendWidth;
|
|
213
|
+
var rectHeight = (orientation_1 === 'Horizontal') ? (isNullOrUndefined(legendHeight)) ? defaultSize : legendHeight :
|
|
214
|
+
(isNullOrUndefined(legendHeight)) ? (treemap.areaRect.height / legendLength) : (legendHeight / legendLength);
|
|
219
215
|
startX_1 = 0;
|
|
220
216
|
startY_1 = legendTitleSize.height + spacing;
|
|
221
217
|
var textPadding_1 = 10;
|
|
@@ -226,15 +222,15 @@ var TreeMapLegend = /** @class */ (function () {
|
|
|
226
222
|
var maxTextHeight = 0;
|
|
227
223
|
var maxTextWidth = 0;
|
|
228
224
|
for (var i = 0; i < this.legendCollections.length; i++) {
|
|
229
|
-
startX_1 = (orientation_1 === 'Horizontal') ? (startX_1 +
|
|
230
|
-
startY_1 = (orientation_1 === 'Horizontal') ? startY_1 : (startY_1 +
|
|
225
|
+
startX_1 = (orientation_1 === 'Horizontal') ? (startX_1 + rectWidth) : startX_1;
|
|
226
|
+
startY_1 = (orientation_1 === 'Horizontal') ? startY_1 : (startY_1 + rectHeight);
|
|
231
227
|
var legendText = this.legendCollections[i]['legendName'];
|
|
232
228
|
var itemTextSize = new Size(0, 0);
|
|
233
229
|
if (labelAction === 'None') {
|
|
234
230
|
itemTextSize = measureText(legendText, itemTextStyle);
|
|
235
231
|
}
|
|
236
232
|
else if (labelAction === 'Trim') {
|
|
237
|
-
legendText = textTrim((orientation_1 === 'Horizontal' ?
|
|
233
|
+
legendText = textTrim((orientation_1 === 'Horizontal' ? rectWidth : rectHeight), legendText, itemTextStyle);
|
|
238
234
|
itemTextSize = measureText(legendText, itemTextStyle);
|
|
239
235
|
}
|
|
240
236
|
else {
|
|
@@ -244,14 +240,14 @@ var TreeMapLegend = /** @class */ (function () {
|
|
|
244
240
|
maxTextWidth = Math.max(maxTextWidth, itemTextSize.width);
|
|
245
241
|
if (itemTextSize.width > 0 && itemTextSize.height > 0) {
|
|
246
242
|
if (orientation_1 === 'Horizontal') {
|
|
247
|
-
textX = startX_1 + (
|
|
248
|
-
textY = (placement === 'After') ? (startY_1 +
|
|
243
|
+
textX = startX_1 + (rectWidth / 2);
|
|
244
|
+
textY = (placement === 'After') ? (startY_1 + rectHeight + (itemTextSize.height / 2)) + textPadding_1 :
|
|
249
245
|
(startY_1 - textPadding_1);
|
|
250
246
|
}
|
|
251
247
|
else {
|
|
252
248
|
textX = (placement === 'After') ? startX_1 - (itemTextSize.width / 2) - textPadding_1
|
|
253
|
-
: (startX_1 +
|
|
254
|
-
textY = startY_1 + (
|
|
249
|
+
: (startX_1 + rectWidth + itemTextSize.width / 2) + textPadding_1;
|
|
250
|
+
textY = startY_1 + (rectHeight / 2) + (itemTextSize.height / 4);
|
|
255
251
|
}
|
|
256
252
|
}
|
|
257
253
|
if (i === 0) {
|
|
@@ -260,15 +256,15 @@ var TreeMapLegend = /** @class */ (function () {
|
|
|
260
256
|
itemStartY = (orientation_1 === 'Horizontal') ? (placement === 'After') ? startY_1 :
|
|
261
257
|
textY - (itemTextSize.height / 2) : startY_1;
|
|
262
258
|
}
|
|
263
|
-
if (i ===
|
|
264
|
-
legendWidth = (orientation_1 === 'Horizontal') ? Math.abs((startX_1 +
|
|
265
|
-
(
|
|
266
|
-
legendHeight = (orientation_1 === 'Horizontal') ? (
|
|
267
|
-
Math.abs((startY_1 +
|
|
259
|
+
if (i === legendLength - 1) {
|
|
260
|
+
legendWidth = (orientation_1 === 'Horizontal') ? Math.abs((startX_1 + rectWidth) - itemStartX) :
|
|
261
|
+
(rectWidth + maxTextWidth + textPadding_1);
|
|
262
|
+
legendHeight = (orientation_1 === 'Horizontal') ? (rectHeight + (maxTextHeight / 2) + textPadding_1) :
|
|
263
|
+
Math.abs((startY_1 + rectHeight) - itemStartY);
|
|
268
264
|
}
|
|
269
265
|
this.legendRenderingCollections.push({
|
|
270
266
|
fill: this.legendCollections[i]['legendFill'], x: startX_1, y: startY_1,
|
|
271
|
-
width:
|
|
267
|
+
width: rectWidth, height: rectHeight, element: this.legendCollections[i]['gradientElement'],
|
|
272
268
|
text: legendText, textX: textX, textY: textY,
|
|
273
269
|
textWidth: itemTextSize.width, textHeight: itemTextSize.height,
|
|
274
270
|
data: this.legendCollections[i]['legendData']
|
|
@@ -298,7 +294,7 @@ var TreeMapLegend = /** @class */ (function () {
|
|
|
298
294
|
}
|
|
299
295
|
};
|
|
300
296
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
301
|
-
TreeMapLegend.prototype.findPaletteLegendItems = function (data
|
|
297
|
+
TreeMapLegend.prototype.findPaletteLegendItems = function (data) {
|
|
302
298
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
303
299
|
var child;
|
|
304
300
|
var legendFillColor;
|
|
@@ -375,7 +371,6 @@ var TreeMapLegend = /** @class */ (function () {
|
|
|
375
371
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
376
372
|
var currentData;
|
|
377
373
|
var legendText;
|
|
378
|
-
var itemValue;
|
|
379
374
|
var isLeafItem;
|
|
380
375
|
var colorMapProcess = false;
|
|
381
376
|
var colorMapping;
|
|
@@ -626,7 +621,6 @@ var TreeMapLegend = /** @class */ (function () {
|
|
|
626
621
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
627
622
|
var textOptions;
|
|
628
623
|
var legendRtlLocation;
|
|
629
|
-
var renderOptions;
|
|
630
624
|
var render = treemap.renderer;
|
|
631
625
|
var shapeBorder = legend.shapeBorder;
|
|
632
626
|
var eventArgs;
|
|
@@ -725,7 +719,6 @@ var TreeMapLegend = /** @class */ (function () {
|
|
|
725
719
|
var legendTitle = legend.title.text;
|
|
726
720
|
var spacing = 10;
|
|
727
721
|
var textStyle = legend.titleStyle;
|
|
728
|
-
var textOptions;
|
|
729
722
|
var title = textTrim((this.legendItemRect.width + (spacing * 2)), legendTitle, textStyle);
|
|
730
723
|
var textSize = measureText(title, textStyle);
|
|
731
724
|
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 +
|
|
@@ -753,9 +746,11 @@ var TreeMapLegend = /** @class */ (function () {
|
|
|
753
746
|
renderTextElement(textOptions, textStyle, textStyle.color || this.treemap.themeStyle.legendTitleColor, this.legendGroup);
|
|
754
747
|
}
|
|
755
748
|
};
|
|
756
|
-
// eslint-disable-next-line valid-jsdoc
|
|
757
749
|
/**
|
|
758
750
|
* To rendered the interactive pointer
|
|
751
|
+
*
|
|
752
|
+
* @param {PointerEvent | TouchEvent} e - Specifies the pointer argument.
|
|
753
|
+
* @returns {void}
|
|
759
754
|
*/
|
|
760
755
|
TreeMapLegend.prototype.renderInteractivePointer = function (e) {
|
|
761
756
|
var treemap = this.treemap;
|
|
@@ -771,7 +766,6 @@ var TreeMapLegend = /** @class */ (function () {
|
|
|
771
766
|
var currentData = void 0;
|
|
772
767
|
var legendRect = void 0;
|
|
773
768
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
774
|
-
var rect = void 0;
|
|
775
769
|
var data = void 0;
|
|
776
770
|
var fill = void 0;
|
|
777
771
|
var stroke = void 0;
|
|
@@ -783,7 +777,7 @@ var TreeMapLegend = /** @class */ (function () {
|
|
|
783
777
|
currentData = this.legendCollections[i];
|
|
784
778
|
legendElement = document.getElementById(treemap.element.id + '_Legend_Index_' + i);
|
|
785
779
|
legendRect = legendElement.getBoundingClientRect();
|
|
786
|
-
var
|
|
780
|
+
var rect = new Rect(Math.abs(legendRect.left - svgRect.left), Math.abs(legendRect.top - svgRect.top), legendRect.width, legendRect.height);
|
|
787
781
|
fill = legendElement.getAttribute('fill');
|
|
788
782
|
stroke = legend.shapeBorder.color;
|
|
789
783
|
strokeWidth = legend.shapeBorder.width;
|
|
@@ -792,7 +786,7 @@ var TreeMapLegend = /** @class */ (function () {
|
|
|
792
786
|
data = currentData['legendData'];
|
|
793
787
|
for (var j = 0; j < data.length; j++) {
|
|
794
788
|
if (data[j]['levelOrderName'] === targetItem['levelOrderName']) {
|
|
795
|
-
this.drawInteractivePointer(legend, fill, stroke, interactiveId, strokeWidth,
|
|
789
|
+
this.drawInteractivePointer(legend, fill, stroke, interactiveId, strokeWidth, rect);
|
|
796
790
|
break;
|
|
797
791
|
}
|
|
798
792
|
}
|
|
@@ -913,18 +907,22 @@ var TreeMapLegend = /** @class */ (function () {
|
|
|
913
907
|
legendElementId.parentNode.removeChild(legendElementId);
|
|
914
908
|
}
|
|
915
909
|
};
|
|
916
|
-
// eslint-disable-next-line valid-jsdoc
|
|
917
910
|
/**
|
|
918
911
|
* To change the next page
|
|
912
|
+
*
|
|
913
|
+
* @param {PointerEvent} e - Specifies the pointer event argument.
|
|
914
|
+
* @returns {void}
|
|
919
915
|
*/
|
|
920
916
|
TreeMapLegend.prototype.changeNextPage = function (e) {
|
|
921
917
|
this.currentPage = (e.target.id.indexOf('_Left_Page_') > -1) ? (this.currentPage - 1) :
|
|
922
918
|
(this.currentPage + 1);
|
|
923
919
|
this.drawLegend();
|
|
924
920
|
};
|
|
925
|
-
// eslint-disable-next-line valid-jsdoc
|
|
926
921
|
/**
|
|
927
922
|
* Wire events for event handler
|
|
923
|
+
*
|
|
924
|
+
* @param {Element} element - Specifies the element.
|
|
925
|
+
* @returns {void}
|
|
928
926
|
*/
|
|
929
927
|
TreeMapLegend.prototype.wireEvents = function (element) {
|
|
930
928
|
EventHandler.add(element, Browser.touchStartEvent, this.changeNextPage, this);
|
|
@@ -951,9 +949,10 @@ var TreeMapLegend = /** @class */ (function () {
|
|
|
951
949
|
this.treemap.off(Browser.touchMoveEvent, this.renderInteractivePointer);
|
|
952
950
|
this.treemap.off(Browser.touchEndEvent, this.mouseUpHandler);
|
|
953
951
|
};
|
|
954
|
-
// eslint-disable-next-line valid-jsdoc
|
|
955
952
|
/**
|
|
956
953
|
* Get module name.
|
|
954
|
+
*
|
|
955
|
+
* @returns {string} Returns the legend module name.
|
|
957
956
|
*/
|
|
958
957
|
TreeMapLegend.prototype.getModuleName = function () {
|
|
959
958
|
return 'treeMapLegend';
|
|
@@ -981,9 +980,12 @@ var TreeMapLegend = /** @class */ (function () {
|
|
|
981
980
|
//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.
|
|
982
981
|
//this.treemap = null;
|
|
983
982
|
};
|
|
984
|
-
// eslint-disable-next-line valid-jsdoc
|
|
985
983
|
/**
|
|
986
984
|
* Get the gradient color for interactive legend.
|
|
985
|
+
*
|
|
986
|
+
* @param {ColorMappingModel} colorMap - Specifies the color mapping instance.
|
|
987
|
+
* @param {number} legendIndex - Specifies the index of legend.
|
|
988
|
+
* @returns {string} - Returns the legend color.
|
|
987
989
|
*/
|
|
988
990
|
TreeMapLegend.prototype.legendGradientColor = function (colorMap, legendIndex) {
|
|
989
991
|
var legendFillColor;
|
|
@@ -25,7 +25,8 @@ export declare class LayoutPanel {
|
|
|
25
25
|
private getCoordinates;
|
|
26
26
|
private computeTotalArea;
|
|
27
27
|
onDemandProcess(childItems: any): void;
|
|
28
|
-
|
|
28
|
+
/** @private */
|
|
29
|
+
renderLayoutItems(): void;
|
|
29
30
|
private renderItemText;
|
|
30
31
|
private getItemColor;
|
|
31
32
|
/**
|
|
@@ -1,13 +1,12 @@
|
|
|
1
1
|
import { Rect, itemsToOrder, TextOption, measureText, textTrim, hide, wordWrap, textWrap, getTemplateFunction, convertElement, findLabelLocation, PathOption, textFormatter, colorNameToHex, convertHexToColor, colorMap, measureElement, convertToContainer, convertToRect, getShortestEdge, getArea, orderByArea, isParentItem, maintainSelection } from '../utils/helper';
|
|
2
2
|
import { isNullOrUndefined, createElement, extend } from '@syncfusion/ej2-base';
|
|
3
|
-
import {
|
|
3
|
+
import { findChildren, renderTextElement } from '../utils/helper';
|
|
4
4
|
import { itemRendering } from '../model/constants';
|
|
5
5
|
import { LevelsData } from './../treemap';
|
|
6
6
|
/**
|
|
7
7
|
* To calculate and render the shape layer
|
|
8
8
|
*/
|
|
9
9
|
var LayoutPanel = /** @class */ (function () {
|
|
10
|
-
// eslint-disable-next-line @typescript-eslint/explicit-member-accessibility
|
|
11
10
|
function LayoutPanel(treemap) {
|
|
12
11
|
this.treemap = treemap;
|
|
13
12
|
}
|
|
@@ -40,7 +39,7 @@ var LayoutPanel = /** @class */ (function () {
|
|
|
40
39
|
this.treemap.currentLevel = this.treemap.drilledItems[count]['data']['groupIndex'];
|
|
41
40
|
}
|
|
42
41
|
this.calculateLayoutItems(y || LevelsData.levelsData[0], totalRect);
|
|
43
|
-
this.renderLayoutItems(
|
|
42
|
+
this.renderLayoutItems();
|
|
44
43
|
}
|
|
45
44
|
else {
|
|
46
45
|
if (!isNullOrUndefined(this.treemap.initialDrillDown.groupIndex) &&
|
|
@@ -49,7 +48,7 @@ var LayoutPanel = /** @class */ (function () {
|
|
|
49
48
|
this.treemap.currentLevel = this.treemap.initialDrillDown.groupIndex;
|
|
50
49
|
}
|
|
51
50
|
this.calculateLayoutItems(data || LevelsData.levelsData[0], totalRect);
|
|
52
|
-
this.renderLayoutItems(
|
|
51
|
+
this.renderLayoutItems();
|
|
53
52
|
}
|
|
54
53
|
}
|
|
55
54
|
};
|
|
@@ -75,7 +74,7 @@ var LayoutPanel = /** @class */ (function () {
|
|
|
75
74
|
}
|
|
76
75
|
return drillData;
|
|
77
76
|
};
|
|
78
|
-
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
77
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/explicit-module-boundary-types
|
|
79
78
|
LayoutPanel.prototype.calculateLayoutItems = function (data, rect) {
|
|
80
79
|
this.renderItems = [];
|
|
81
80
|
this.parentData = [];
|
|
@@ -109,7 +108,8 @@ var LayoutPanel = /** @class */ (function () {
|
|
|
109
108
|
isLeafItem = (groups.length === 0 || groupIndex === groups.length);
|
|
110
109
|
gap = isLeafItem ? leafItem.gap : groups[groupIndex].groupGap;
|
|
111
110
|
headerHeight = groups.length === 0 ? 0 : groups[groupIndex] ? groups[groupIndex].showHeader ?
|
|
112
|
-
groups[groupIndex].headerHeight : 0 : groups[groupIndex - 1].showHeader ?
|
|
111
|
+
groups[groupIndex].headerHeight : 0 : groups[groupIndex - 1].showHeader ?
|
|
112
|
+
groups[groupIndex - 1].headerHeight : 0;
|
|
113
113
|
rect = children[i]['rect'];
|
|
114
114
|
rect = new Rect(rect.x + (gap / 2), rect.y + (headerHeight + (gap / 2)), rect.width - gap, Math.abs(rect.height - (gap + headerHeight)));
|
|
115
115
|
this.computeSliceAndDiceDimensional(children[i], rect);
|
|
@@ -162,8 +162,6 @@ var LayoutPanel = /** @class */ (function () {
|
|
|
162
162
|
var rect;
|
|
163
163
|
var levels = this.treemap.levels;
|
|
164
164
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
165
|
-
var groupIndex = 0;
|
|
166
|
-
var isLeafItem = false;
|
|
167
165
|
var item;
|
|
168
166
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
169
167
|
var child = findChildren(data)['values'];
|
|
@@ -183,8 +181,9 @@ var LayoutPanel = /** @class */ (function () {
|
|
|
183
181
|
rect = item['rect'];
|
|
184
182
|
padding = (item['isLeafItem'] ? leaf.padding : levels[index].groupPadding) / 2;
|
|
185
183
|
headerHeight = this.treemap.isHierarchicalData ? index === 0 && item['isLeafItem'] ? 0 : levels[index] ?
|
|
186
|
-
levels[index].showHeader ? levels[index].headerHeight : 0 : 0 :
|
|
187
|
-
levels
|
|
184
|
+
levels[index].showHeader ? levels[index].headerHeight : 0 : 0 :
|
|
185
|
+
(levels.length === 0) ? 0 : levels[index] ?
|
|
186
|
+
levels[index].showHeader ? levels[index].headerHeight : 0 : 0;
|
|
188
187
|
rect = new Rect(rect.x + padding, rect.y + (headerHeight + padding), rect.width - padding, rect.height - padding);
|
|
189
188
|
if (!item['isLeafItem'] && item['weight'] > 0) {
|
|
190
189
|
this.computeSquarifyDimensional(child[i], rect);
|
|
@@ -298,7 +297,6 @@ var LayoutPanel = /** @class */ (function () {
|
|
|
298
297
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
299
298
|
LayoutPanel.prototype.getCoordinates = function (row, rect) {
|
|
300
299
|
var container = convertToContainer(rect);
|
|
301
|
-
var headerHeight;
|
|
302
300
|
var width = container.width;
|
|
303
301
|
var height = container.height;
|
|
304
302
|
var xOffset = container.x;
|
|
@@ -319,7 +317,6 @@ var LayoutPanel = /** @class */ (function () {
|
|
|
319
317
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
320
318
|
var coordinates = [];
|
|
321
319
|
var isParent;
|
|
322
|
-
var gap;
|
|
323
320
|
var parentRect;
|
|
324
321
|
for (var i = 0; i < rowLength; i += 1) {
|
|
325
322
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
@@ -364,15 +361,14 @@ var LayoutPanel = /** @class */ (function () {
|
|
|
364
361
|
LayoutPanel.prototype.computeTotalArea = function (data, area) {
|
|
365
362
|
var dataLength = data.length;
|
|
366
363
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
367
|
-
var dataSum = 0;
|
|
368
364
|
var result = [];
|
|
369
365
|
for (var i = 0; i < dataLength; i += 1) {
|
|
370
366
|
var dataLength_1 = data.length;
|
|
371
|
-
var
|
|
367
|
+
var dataSum = 0;
|
|
372
368
|
for (var i_1 = 0; i_1 < dataLength_1; i_1 += 1) {
|
|
373
|
-
|
|
369
|
+
dataSum += data[i_1]['weight'];
|
|
374
370
|
}
|
|
375
|
-
var multiplier = area /
|
|
371
|
+
var multiplier = area / dataSum;
|
|
376
372
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
377
373
|
var datum = void 0;
|
|
378
374
|
for (var j = 0; j < dataLength_1; j++) {
|
|
@@ -383,7 +379,7 @@ var LayoutPanel = /** @class */ (function () {
|
|
|
383
379
|
}
|
|
384
380
|
return result;
|
|
385
381
|
};
|
|
386
|
-
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
382
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/explicit-module-boundary-types
|
|
387
383
|
LayoutPanel.prototype.onDemandProcess = function (childItems) {
|
|
388
384
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
389
385
|
var parentItem = {};
|
|
@@ -413,22 +409,18 @@ var LayoutPanel = /** @class */ (function () {
|
|
|
413
409
|
}
|
|
414
410
|
}
|
|
415
411
|
this.calculateLayoutItems(parentItemGroupname, totalRect);
|
|
416
|
-
this.renderLayoutItems(
|
|
412
|
+
this.renderLayoutItems();
|
|
417
413
|
};
|
|
418
|
-
|
|
419
|
-
LayoutPanel.prototype.renderLayoutItems = function (
|
|
414
|
+
/** @private */
|
|
415
|
+
LayoutPanel.prototype.renderLayoutItems = function () {
|
|
420
416
|
var _this = this;
|
|
421
|
-
var textCollection = [];
|
|
422
417
|
var position;
|
|
423
418
|
var treeMap = this.treemap;
|
|
424
|
-
var colorMapping;
|
|
425
419
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
426
420
|
var txtVisible;
|
|
427
421
|
var getItemColor;
|
|
428
422
|
var eventArgs;
|
|
429
423
|
this.renderer = treeMap.renderer;
|
|
430
|
-
var trimHeader;
|
|
431
|
-
var textLocation = new Location(0, 0);
|
|
432
424
|
var pathOptions;
|
|
433
425
|
var elementID = treeMap.element.id;
|
|
434
426
|
var index;
|
|
@@ -438,35 +430,30 @@ var LayoutPanel = /** @class */ (function () {
|
|
|
438
430
|
var format;
|
|
439
431
|
var interSectAction = this.treemap.leafItemSettings.interSectAction;
|
|
440
432
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
441
|
-
var textSize;
|
|
442
433
|
var fill;
|
|
443
434
|
var item;
|
|
444
435
|
var renderText;
|
|
445
436
|
var opacity;
|
|
446
|
-
var padding = 5;
|
|
447
437
|
var rectPath = '';
|
|
448
|
-
var isRender;
|
|
449
438
|
var secondaryEle = document.getElementById(treeMap.element.id + '_Secondary_Element');
|
|
450
439
|
var groupId;
|
|
451
|
-
var textOptions;
|
|
452
440
|
var templateEle;
|
|
453
441
|
var gap;
|
|
454
442
|
var textStyle;
|
|
455
443
|
var levels = treeMap.levels;
|
|
456
444
|
this.layoutGroup = this.renderer.createGroup({ id: elementID + '_TreeMap_' + mode + '_Layout' });
|
|
457
445
|
var itemGroup;
|
|
458
|
-
var level;
|
|
459
446
|
var template;
|
|
460
447
|
var border;
|
|
461
448
|
var templateGroup = createElement('div', {
|
|
462
449
|
id: treeMap.element.id + '_Label_Template_Group',
|
|
463
|
-
className: 'template'
|
|
464
|
-
styles: 'overflow: hidden; position: absolute;pointer-events: none;' +
|
|
465
|
-
'top:' + treeMap.areaRect.y + 'px;' +
|
|
466
|
-
'left:' + treeMap.areaRect.x + 'px;' +
|
|
467
|
-
'height:' + treeMap.areaRect.height + 'px;' +
|
|
468
|
-
'width:' + treeMap.areaRect.width + 'px;'
|
|
450
|
+
className: 'template'
|
|
469
451
|
});
|
|
452
|
+
templateGroup.style.cssText = 'overflow: hidden; position: absolute;pointer-events: none;' +
|
|
453
|
+
'top:' + treeMap.areaRect.y + 'px;' +
|
|
454
|
+
'left:' + treeMap.areaRect.x + 'px;' +
|
|
455
|
+
'height:' + treeMap.areaRect.height + 'px;' +
|
|
456
|
+
'width:' + treeMap.areaRect.width + 'px;';
|
|
470
457
|
var isLeafItem = false;
|
|
471
458
|
var leaf = treeMap.leafItemSettings;
|
|
472
459
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
@@ -500,7 +487,6 @@ var LayoutPanel = /** @class */ (function () {
|
|
|
500
487
|
rect.x = (treemapItemRect.x + treemapItemRect.width) - rect.width - Math.abs(treemapItemRect.x - rect.x);
|
|
501
488
|
rect.y = (treemapItemRect.y + treemapItemRect.height) - rect.height - Math.abs(treemapItemRect.y - rect.y);
|
|
502
489
|
}
|
|
503
|
-
colorMapping = isLeafItem ? leaf.colorMapping : levels[index].colorMapping;
|
|
504
490
|
getItemColor = this_1.getItemColor(isLeafItem, item);
|
|
505
491
|
fill = getItemColor['fill'];
|
|
506
492
|
opacity = getItemColor['opacity'];
|
|
@@ -580,15 +566,10 @@ var LayoutPanel = /** @class */ (function () {
|
|
|
580
566
|
this.treemap.svgObject.appendChild(this.layoutGroup);
|
|
581
567
|
};
|
|
582
568
|
LayoutPanel.prototype.renderItemText = function (text, parentElement, textStyle, rect, interSectAction, groupId, fill, position, connectorText) {
|
|
583
|
-
var level;
|
|
584
|
-
var headerPosition;
|
|
585
|
-
var secondaryEle = document.getElementById(this.treemap.element.id + '_Secondary_Element');
|
|
586
|
-
var leaf = this.treemap.leafItemSettings;
|
|
587
569
|
var padding = 5;
|
|
588
570
|
var textSize;
|
|
589
571
|
var textCollection = [];
|
|
590
572
|
var customText;
|
|
591
|
-
var templateEle;
|
|
592
573
|
var tspanText = [];
|
|
593
574
|
var height = 0;
|
|
594
575
|
var textName;
|
|
@@ -662,7 +643,7 @@ var LayoutPanel = /** @class */ (function () {
|
|
|
662
643
|
treemap.levels[item['groupIndex']].colorMapping;
|
|
663
644
|
if (colorMapping.length > 0) {
|
|
664
645
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
665
|
-
var option = colorMap(colorMapping, item['data'][this.treemap.equalColorValuePath], item['data'][this.treemap.rangeColorValuePath]
|
|
646
|
+
var option = colorMap(colorMapping, item['data'][this.treemap.equalColorValuePath], item['data'][this.treemap.rangeColorValuePath]);
|
|
666
647
|
itemFill = !isNullOrUndefined(option['fill']) ? option['fill'] : treemap.leafItemSettings.fill;
|
|
667
648
|
itemOpacity = option['opacity'];
|
|
668
649
|
}
|
|
@@ -699,8 +680,8 @@ var LayoutPanel = /** @class */ (function () {
|
|
|
699
680
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
700
681
|
var keys = Object.keys(item['data']);
|
|
701
682
|
for (var i = 0; i < keys.length; i++) {
|
|
702
|
-
|
|
703
|
-
template = template.replace(new
|
|
683
|
+
var regExp = RegExp;
|
|
684
|
+
template = template.replace(new regExp('{{:' + keys[i] + '}}', 'g'), item['data'][keys[i].toString()]);
|
|
704
685
|
}
|
|
705
686
|
}
|
|
706
687
|
var labelElement;
|
|
@@ -15,6 +15,7 @@ export declare class ImageExport {
|
|
|
15
15
|
/**
|
|
16
16
|
* This method is used to perform the export functionality for the rendered treemap.
|
|
17
17
|
*
|
|
18
|
+
* @param {TreeMap} treeMap - Specifies the treemap instance.
|
|
18
19
|
* @param {ExportType} type - Specifies the type of the image file.
|
|
19
20
|
* @param {string} fileName - Specifies the file name of the image file.
|
|
20
21
|
* @param {boolean} allowDownload - Specifies whether to download the file or not.
|