@syncfusion/ej2-treemap 25.2.3 → 26.1.35
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 +3 -2
- 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 +378 -257
- package/dist/es6/ej2-treemap.es2015.js.map +1 -1
- package/dist/es6/ej2-treemap.es5.js +395 -274
- 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.js +6 -2
- package/src/treemap/layout/render-panel.js +8 -5
- package/src/treemap/model/base.js +3 -3
- package/src/treemap/model/image-export.js +5 -2
- package/src/treemap/model/interface.d.ts +20 -0
- package/src/treemap/model/interface.js +0 -1
- package/src/treemap/model/pdf-export.js +5 -2
- package/src/treemap/model/print.js +5 -2
- package/src/treemap/model/theme.js +122 -12
- package/src/treemap/treemap.js +17 -15
- package/src/treemap/user-interaction/tooltip.js +7 -1
- package/src/treemap/utils/enum.d.ts +7 -1
- package/src/treemap/utils/enum.js +0 -1
- package/CHANGELOG.md +0 -80
package/dist/global/index.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/*!
|
|
2
2
|
* filename: index.d.ts
|
|
3
|
-
* version :
|
|
3
|
+
* version : 26.1.35
|
|
4
4
|
* Copyright Syncfusion Inc. 2001 - 2023. 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.24",
|
|
4
4
|
"_inBundle": false,
|
|
5
|
-
"_integrity": "sha512-
|
|
5
|
+
"_integrity": "sha512-b/dFOdJGVefu4RMoPpY+rfnAQDaAllqX5mAkRftg/H/F4qazDrvrccaastX2enGhjyzgxSSLKEPnkcH2PUoEbQ==",
|
|
6
6
|
"_location": "/@syncfusion/ej2-treemap",
|
|
7
7
|
"_phantomChildren": {},
|
|
8
8
|
"_requested": {
|
|
@@ -23,10 +23,10 @@
|
|
|
23
23
|
"/@syncfusion/ej2-react-treemap",
|
|
24
24
|
"/@syncfusion/ej2-vue-treemap"
|
|
25
25
|
],
|
|
26
|
-
"_resolved": "https://nexus.syncfusioninternal.com/repository/ej2-
|
|
27
|
-
"_shasum": "
|
|
26
|
+
"_resolved": "https://nexus.syncfusioninternal.com/repository/ej2-release/@syncfusion/ej2-treemap/-/ej2-treemap-16.31.24.tgz",
|
|
27
|
+
"_shasum": "09d0f241172187e28742b8bf186b0671f1664d1f",
|
|
28
28
|
"_spec": "@syncfusion/ej2-treemap@*",
|
|
29
|
-
"_where": "/jenkins/workspace/elease-
|
|
29
|
+
"_where": "/jenkins/workspace/elease-automation_release_26.1.1/packages/included",
|
|
30
30
|
"author": {
|
|
31
31
|
"name": "Syncfusion Inc."
|
|
32
32
|
},
|
|
@@ -35,12 +35,12 @@
|
|
|
35
35
|
},
|
|
36
36
|
"bundleDependencies": false,
|
|
37
37
|
"dependencies": {
|
|
38
|
-
"@syncfusion/ej2-base": "~
|
|
39
|
-
"@syncfusion/ej2-compression": "~
|
|
40
|
-
"@syncfusion/ej2-data": "~
|
|
41
|
-
"@syncfusion/ej2-file-utils": "~
|
|
42
|
-
"@syncfusion/ej2-pdf-export": "~
|
|
43
|
-
"@syncfusion/ej2-svg-base": "~
|
|
38
|
+
"@syncfusion/ej2-base": "~26.1.35",
|
|
39
|
+
"@syncfusion/ej2-compression": "~26.1.35",
|
|
40
|
+
"@syncfusion/ej2-data": "~26.1.35",
|
|
41
|
+
"@syncfusion/ej2-file-utils": "~26.1.35",
|
|
42
|
+
"@syncfusion/ej2-pdf-export": "~26.1.35",
|
|
43
|
+
"@syncfusion/ej2-svg-base": "~26.1.35"
|
|
44
44
|
},
|
|
45
45
|
"deprecated": false,
|
|
46
46
|
"description": "Essential JS 2 TreeMap Components",
|
|
@@ -81,6 +81,6 @@
|
|
|
81
81
|
"url": "git+https://github.com/syncfusion/ej2-javascript-ui-controls.git"
|
|
82
82
|
},
|
|
83
83
|
"typings": "index.d.ts",
|
|
84
|
-
"version": "
|
|
84
|
+
"version": "26.1.35",
|
|
85
85
|
"sideEffects": false
|
|
86
86
|
}
|
|
@@ -60,7 +60,7 @@ var TreeMapLegend = /** @class */ (function () {
|
|
|
60
60
|
var treemap = this.treemap;
|
|
61
61
|
var legend = treemap.legendSettings;
|
|
62
62
|
this.findColorMappingLegendItems(treemap.treemapLevelData.levelsData[0]);
|
|
63
|
-
if ((this.treemap.palette.length > 0 || !isNullOrUndefined(treemap.colorValuePath))
|
|
63
|
+
if (((!isNullOrUndefined(this.treemap.palette) && this.treemap.palette.length > 0) || !isNullOrUndefined(treemap.colorValuePath))
|
|
64
64
|
&& this.legendCollections.length === 0) {
|
|
65
65
|
this.findPaletteLegendItems(treemap.treemapLevelData.levelsData[0]);
|
|
66
66
|
}
|
|
@@ -737,7 +737,11 @@ var TreeMapLegend = /** @class */ (function () {
|
|
|
737
737
|
var textSize = measureText(title, textStyle);
|
|
738
738
|
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 +
|
|
739
739
|
(legend.mode === 'Interactive' ? 0 : (this.page !== 0) ? spacing : 0));
|
|
740
|
-
var
|
|
740
|
+
var borderStyle = {
|
|
741
|
+
color: legend.border.color || this.treemap.themeStyle.legendBorderColor,
|
|
742
|
+
width: legend.border.width || this.treemap.themeStyle.legendBorderWidth
|
|
743
|
+
};
|
|
744
|
+
var renderOptions = new RectOption(treemap.element.id + '_Legend_Border', legend.background, borderStyle, 1, this.legendBorderRect, '');
|
|
741
745
|
var legendBorder = treemap.renderer.drawRectangle(renderOptions);
|
|
742
746
|
legendBorder.style.pointerEvents = 'none';
|
|
743
747
|
this.legendGroup.appendChild(legendBorder);
|
|
@@ -73,7 +73,7 @@ var LayoutPanel = /** @class */ (function () {
|
|
|
73
73
|
}
|
|
74
74
|
return drillData;
|
|
75
75
|
};
|
|
76
|
-
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
76
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
77
77
|
LayoutPanel.prototype.calculateLayoutItems = function (data, rect) {
|
|
78
78
|
this.renderItems = [];
|
|
79
79
|
this.parentData = [];
|
|
@@ -378,7 +378,7 @@ var LayoutPanel = /** @class */ (function () {
|
|
|
378
378
|
}
|
|
379
379
|
return result;
|
|
380
380
|
};
|
|
381
|
-
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
381
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
382
382
|
LayoutPanel.prototype.onDemandProcess = function (childItems) {
|
|
383
383
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
384
384
|
var parentItem = {};
|
|
@@ -518,6 +518,7 @@ var LayoutPanel = /** @class */ (function () {
|
|
|
518
518
|
textStyle = (isLeafItem ? leaf.labelStyle : levels[index].headerStyle);
|
|
519
519
|
textStyle.fontFamily = this_1.treemap.themeStyle.labelFontFamily || textStyle.fontFamily;
|
|
520
520
|
textStyle.fontWeight = textStyle.fontWeight || this_1.treemap.themeStyle.fontWeight;
|
|
521
|
+
textStyle.size = textStyle.size || this_1.treemap.themeStyle.labelFontSize;
|
|
521
522
|
border = isLeafItem ? leaf.border : levels[index].border;
|
|
522
523
|
position = !isLeafItem ? (levels[index].headerAlignment) === 'Near' ? 'TopLeft' : (levels[index].headerAlignment) === 'Center' ?
|
|
523
524
|
'TopCenter' : 'TopRight' : leaf.labelPosition;
|
|
@@ -653,14 +654,16 @@ var LayoutPanel = /** @class */ (function () {
|
|
|
653
654
|
if (colorMapping.length > 0) {
|
|
654
655
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
655
656
|
var option = colorMap(colorMapping, item['data'][treemap.equalColorValuePath], item['data'][treemap.rangeColorValuePath]);
|
|
656
|
-
|
|
657
|
-
|
|
657
|
+
if (!isNullOrUndefined(option)) {
|
|
658
|
+
itemFill = !isNullOrUndefined(option['fill']) ? option['fill'] : treemap.leafItemSettings.fill;
|
|
659
|
+
itemOpacity = option['opacity'];
|
|
660
|
+
}
|
|
658
661
|
}
|
|
659
662
|
else {
|
|
660
663
|
for (var i = 0; i < parentData.length; i++) {
|
|
661
664
|
if (parentData[i]['levelOrderName'] === item['levelOrderName'].split('#')[0]) {
|
|
662
665
|
itemFill = !isNullOrUndefined(itemFill) ? itemFill : !isNullOrUndefined(treemap.colorValuePath) ?
|
|
663
|
-
parentData[i]['data'][treemap.colorValuePath] : treemap.palette.length > 0 ?
|
|
666
|
+
parentData[i]['data'][treemap.colorValuePath] : (!isNullOrUndefined(treemap.palette) && treemap.palette.length > 0) ?
|
|
664
667
|
treemap.palette[i % treemap.palette.length] : '#808080';
|
|
665
668
|
}
|
|
666
669
|
}
|
|
@@ -228,7 +228,7 @@ var LegendSettings = /** @class */ (function (_super) {
|
|
|
228
228
|
Property(null)
|
|
229
229
|
], LegendSettings.prototype, "imageUrl", void 0);
|
|
230
230
|
__decorate([
|
|
231
|
-
Complex({ color:
|
|
231
|
+
Complex({ color: null, width: null }, Border)
|
|
232
232
|
], LegendSettings.prototype, "border", void 0);
|
|
233
233
|
__decorate([
|
|
234
234
|
Complex({ color: '#000000', width: 0 }, Border)
|
|
@@ -328,7 +328,7 @@ var LeafItemSettings = /** @class */ (function (_super) {
|
|
|
328
328
|
Property('TopLeft')
|
|
329
329
|
], LeafItemSettings.prototype, "labelPosition", void 0);
|
|
330
330
|
__decorate([
|
|
331
|
-
Complex({ color: null, size:
|
|
331
|
+
Complex({ color: null, size: null }, Font)
|
|
332
332
|
], LeafItemSettings.prototype, "labelStyle", void 0);
|
|
333
333
|
__decorate([
|
|
334
334
|
Property(null)
|
|
@@ -372,7 +372,7 @@ var TooltipSettings = /** @class */ (function (_super) {
|
|
|
372
372
|
Property(['Circle'])
|
|
373
373
|
], TooltipSettings.prototype, "markerShapes", void 0);
|
|
374
374
|
__decorate([
|
|
375
|
-
Complex({}, Border)
|
|
375
|
+
Complex({ width: null, color: null }, Border)
|
|
376
376
|
], TooltipSettings.prototype, "border", void 0);
|
|
377
377
|
__decorate([
|
|
378
378
|
Complex({ fontFamily: null, size: null, fontWeight: null }, Font)
|
|
@@ -38,10 +38,13 @@ var ImageExport = /** @class */ (function () {
|
|
|
38
38
|
var backgroundElement = exportElement.childNodes[0];
|
|
39
39
|
if (!isNullOrUndefined(backgroundElement)) {
|
|
40
40
|
var backgroundColor = backgroundElement.getAttribute('fill');
|
|
41
|
-
if ((treeMap.theme === 'Tailwind' || treeMap.theme === 'Bootstrap5' || treeMap.theme === 'Fluent' || treeMap.theme === 'Material3'
|
|
41
|
+
if ((treeMap.theme === 'Tailwind' || treeMap.theme === 'Bootstrap5' || treeMap.theme === 'Fluent' || treeMap.theme === 'Material3' || treeMap.theme === 'Fluent2')
|
|
42
|
+
&& (backgroundColor === 'rgba(255,255,255, 0.0)' || backgroundColor === 'transparent')) {
|
|
42
43
|
exportElement.childNodes[0].setAttribute('fill', 'rgba(255,255,255, 1)');
|
|
43
44
|
}
|
|
44
|
-
else if ((treeMap.theme === 'TailwindDark' || treeMap.theme === 'Bootstrap5Dark' || treeMap.theme === 'FluentDark' || treeMap.theme === 'Material3Dark'
|
|
45
|
+
else if ((treeMap.theme === 'TailwindDark' || treeMap.theme === 'Bootstrap5Dark' || treeMap.theme === 'FluentDark' || treeMap.theme === 'Material3Dark' ||
|
|
46
|
+
treeMap.theme === 'Fluent2Dark' || treeMap.theme === 'Fluent2HighContrast')
|
|
47
|
+
&& (backgroundColor === 'rgba(255,255,255, 0.0)' || backgroundColor === 'transparent')) {
|
|
45
48
|
exportElement.childNodes[0].setAttribute('fill', 'rgba(0, 0, 0, 1)');
|
|
46
49
|
}
|
|
47
50
|
}
|
|
@@ -528,4 +528,24 @@ export interface IThemeStyle {
|
|
|
528
528
|
* Defines the font family of the label contents in the treemap, supporting the theme.
|
|
529
529
|
*/
|
|
530
530
|
labelFontFamily?: string;
|
|
531
|
+
/**
|
|
532
|
+
* Defines the font size of the label contents in the treemap, supporting the theme.
|
|
533
|
+
*/
|
|
534
|
+
labelFontSize?: string;
|
|
535
|
+
/**
|
|
536
|
+
* Defines the border color of the legend in the treemap, supporting the theme.
|
|
537
|
+
*/
|
|
538
|
+
legendBorderColor?: string;
|
|
539
|
+
/**
|
|
540
|
+
* Defines the border width of the legend in the treemap, supporting the theme.
|
|
541
|
+
*/
|
|
542
|
+
legendBorderWidth?: number;
|
|
543
|
+
/**
|
|
544
|
+
* Defines the border color of the tooltip in the treemap, supporting the theme.
|
|
545
|
+
*/
|
|
546
|
+
tooltipBorderColor?: string;
|
|
547
|
+
/**
|
|
548
|
+
* Defines the border width of the tooltip in the treemap, supporting the theme.
|
|
549
|
+
*/
|
|
550
|
+
tooltipBorderWidth?: number;
|
|
531
551
|
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
|
|
@@ -40,10 +40,13 @@ var PdfExport = /** @class */ (function () {
|
|
|
40
40
|
var backgroundElement = exportElement.childNodes[0];
|
|
41
41
|
if (!isNullOrUndefined(backgroundElement)) {
|
|
42
42
|
var backgroundColor = backgroundElement.getAttribute('fill');
|
|
43
|
-
if ((treeMap.theme === 'Tailwind' || treeMap.theme === 'Bootstrap5' || treeMap.theme === 'Fluent' || treeMap.theme === 'Material3'
|
|
43
|
+
if ((treeMap.theme === 'Tailwind' || treeMap.theme === 'Bootstrap5' || treeMap.theme === 'Fluent' || treeMap.theme === 'Material3' || treeMap.theme === 'Fluent2')
|
|
44
|
+
&& (backgroundColor === 'rgba(255,255,255, 0.0)' || backgroundColor === 'transparent')) {
|
|
44
45
|
exportElement.childNodes[0].setAttribute('fill', 'rgba(255,255,255, 1)');
|
|
45
46
|
}
|
|
46
|
-
else if ((treeMap.theme === 'TailwindDark' || treeMap.theme === 'Bootstrap5Dark' || treeMap.theme === 'FluentDark' || treeMap.theme === 'Material3Dark'
|
|
47
|
+
else if ((treeMap.theme === 'TailwindDark' || treeMap.theme === 'Bootstrap5Dark' || treeMap.theme === 'FluentDark' || treeMap.theme === 'Material3Dark' ||
|
|
48
|
+
treeMap.theme === 'Fluent2Dark' || treeMap.theme === 'Fluent2HighContrast')
|
|
49
|
+
&& (backgroundColor === 'rgba(255,255,255, 0.0)' || backgroundColor === 'transparent')) {
|
|
47
50
|
exportElement.childNodes[0].setAttribute('fill', 'rgba(0, 0, 0, 1)');
|
|
48
51
|
}
|
|
49
52
|
}
|
|
@@ -67,10 +67,13 @@ var Print = /** @class */ (function () {
|
|
|
67
67
|
backgroundElement = backgroundElement.childNodes[0];
|
|
68
68
|
if (!isNullOrUndefined(backgroundElement)) {
|
|
69
69
|
var backgroundColor = backgroundElement.getAttribute('fill');
|
|
70
|
-
if ((treeMap.theme === 'Tailwind' || treeMap.theme === 'Bootstrap5' || treeMap.theme === 'Fluent' || treeMap.theme === 'Material3'
|
|
70
|
+
if ((treeMap.theme === 'Tailwind' || treeMap.theme === 'Bootstrap5' || treeMap.theme === 'Fluent' || treeMap.theme === 'Material3' || treeMap.theme === 'Fluent2')
|
|
71
|
+
&& (backgroundColor === 'rgba(255,255,255, 0.0)' || backgroundColor === 'transparent')) {
|
|
71
72
|
backgroundElement.setAttribute('fill', 'rgba(255,255,255, 1)');
|
|
72
73
|
}
|
|
73
|
-
else if ((treeMap.theme === 'TailwindDark' || treeMap.theme === 'Bootstrap5Dark' || treeMap.theme === 'FluentDark' || treeMap.theme === 'Material3Dark'
|
|
74
|
+
else if ((treeMap.theme === 'TailwindDark' || treeMap.theme === 'Bootstrap5Dark' || treeMap.theme === 'FluentDark' || treeMap.theme === 'Material3Dark' ||
|
|
75
|
+
treeMap.theme === 'Fluent2Dark' || treeMap.theme === 'Fluent2HighContrast')
|
|
76
|
+
&& (backgroundColor === 'rgba(255,255,255, 0.0)' || backgroundColor === 'transparent')) {
|
|
74
77
|
backgroundElement.setAttribute('fill', 'rgba(0, 0, 0, 1)');
|
|
75
78
|
}
|
|
76
79
|
}
|
|
@@ -54,7 +54,10 @@ export function getThemeStyle(theme) {
|
|
|
54
54
|
fontWeight: 'Normal',
|
|
55
55
|
subtitleFontSize: '14px',
|
|
56
56
|
legendFontSize: '13px',
|
|
57
|
-
fontFamily: 'Roboto, Noto, Sans-serif'
|
|
57
|
+
fontFamily: 'Roboto, Noto, Sans-serif',
|
|
58
|
+
labelFontSize: '12px',
|
|
59
|
+
legendBorderColor: '#000000',
|
|
60
|
+
legendBorderWidth: 0
|
|
58
61
|
};
|
|
59
62
|
break;
|
|
60
63
|
case 'highcontrast':
|
|
@@ -72,7 +75,10 @@ export function getThemeStyle(theme) {
|
|
|
72
75
|
fontWeight: 'Normal',
|
|
73
76
|
subtitleFontSize: '14px',
|
|
74
77
|
legendFontSize: '13px',
|
|
75
|
-
fontFamily: 'Roboto, Noto, Sans-serif'
|
|
78
|
+
fontFamily: 'Roboto, Noto, Sans-serif',
|
|
79
|
+
labelFontSize: '12px',
|
|
80
|
+
legendBorderColor: '#000000',
|
|
81
|
+
legendBorderWidth: 0
|
|
76
82
|
};
|
|
77
83
|
break;
|
|
78
84
|
case 'bootstrap4':
|
|
@@ -93,7 +99,10 @@ export function getThemeStyle(theme) {
|
|
|
93
99
|
fontWeight: 'Normal',
|
|
94
100
|
subtitleFontSize: '14px',
|
|
95
101
|
legendFontSize: '14px',
|
|
96
|
-
labelFontFamily: 'HelveticaNeue'
|
|
102
|
+
labelFontFamily: 'HelveticaNeue',
|
|
103
|
+
labelFontSize: '12px',
|
|
104
|
+
legendBorderColor: '#000000',
|
|
105
|
+
legendBorderWidth: 0
|
|
97
106
|
};
|
|
98
107
|
break;
|
|
99
108
|
case 'tailwind':
|
|
@@ -114,7 +123,10 @@ export function getThemeStyle(theme) {
|
|
|
114
123
|
fontWeight: 'Normal',
|
|
115
124
|
subtitleFontSize: '12px',
|
|
116
125
|
legendFontSize: '12px',
|
|
117
|
-
labelFontFamily: 'Inter'
|
|
126
|
+
labelFontFamily: 'Inter',
|
|
127
|
+
labelFontSize: '12px',
|
|
128
|
+
legendBorderColor: '#000000',
|
|
129
|
+
legendBorderWidth: 0
|
|
118
130
|
};
|
|
119
131
|
break;
|
|
120
132
|
case 'tailwinddark':
|
|
@@ -135,7 +147,10 @@ export function getThemeStyle(theme) {
|
|
|
135
147
|
fontSize: '14px',
|
|
136
148
|
subtitleFontSize: '12px',
|
|
137
149
|
legendFontSize: '12px',
|
|
138
|
-
labelFontFamily: 'Inter'
|
|
150
|
+
labelFontFamily: 'Inter',
|
|
151
|
+
labelFontSize: '12px',
|
|
152
|
+
legendBorderColor: '#000000',
|
|
153
|
+
legendBorderWidth: 0
|
|
139
154
|
};
|
|
140
155
|
break;
|
|
141
156
|
case 'bootstrap5':
|
|
@@ -156,7 +171,10 @@ export function getThemeStyle(theme) {
|
|
|
156
171
|
fontWeight: 'Normal',
|
|
157
172
|
subtitleFontSize: '12px',
|
|
158
173
|
legendFontSize: '12px',
|
|
159
|
-
labelFontFamily: 'Helvetica Neue'
|
|
174
|
+
labelFontFamily: 'Helvetica Neue',
|
|
175
|
+
labelFontSize: '12px',
|
|
176
|
+
legendBorderColor: '#000000',
|
|
177
|
+
legendBorderWidth: 0
|
|
160
178
|
};
|
|
161
179
|
break;
|
|
162
180
|
case 'bootstrap5dark':
|
|
@@ -177,7 +195,10 @@ export function getThemeStyle(theme) {
|
|
|
177
195
|
fontWeight: 'Normal',
|
|
178
196
|
subtitleFontSize: '12px',
|
|
179
197
|
legendFontSize: '12px',
|
|
180
|
-
labelFontFamily: 'Helvetica Neue'
|
|
198
|
+
labelFontFamily: 'Helvetica Neue',
|
|
199
|
+
labelFontSize: '12px',
|
|
200
|
+
legendBorderColor: '#000000',
|
|
201
|
+
legendBorderWidth: 0
|
|
181
202
|
};
|
|
182
203
|
break;
|
|
183
204
|
case 'fluent':
|
|
@@ -198,7 +219,10 @@ export function getThemeStyle(theme) {
|
|
|
198
219
|
fontWeight: 'Normal',
|
|
199
220
|
subtitleFontSize: '12px',
|
|
200
221
|
legendFontSize: '12px',
|
|
201
|
-
labelFontFamily: 'Segoe UI'
|
|
222
|
+
labelFontFamily: 'Segoe UI',
|
|
223
|
+
labelFontSize: '12px',
|
|
224
|
+
legendBorderColor: '#000000',
|
|
225
|
+
legendBorderWidth: 0
|
|
202
226
|
};
|
|
203
227
|
break;
|
|
204
228
|
case 'fluentdark':
|
|
@@ -219,7 +243,10 @@ export function getThemeStyle(theme) {
|
|
|
219
243
|
fontWeight: 'Normal',
|
|
220
244
|
subtitleFontSize: '12px',
|
|
221
245
|
legendFontSize: '12px',
|
|
222
|
-
labelFontFamily: 'Segoe UI'
|
|
246
|
+
labelFontFamily: 'Segoe UI',
|
|
247
|
+
labelFontSize: '12px',
|
|
248
|
+
legendBorderColor: '#000000',
|
|
249
|
+
legendBorderWidth: 0
|
|
223
250
|
};
|
|
224
251
|
break;
|
|
225
252
|
case 'material3':
|
|
@@ -240,7 +267,10 @@ export function getThemeStyle(theme) {
|
|
|
240
267
|
fontWeight: '400',
|
|
241
268
|
subtitleFontSize: '14px',
|
|
242
269
|
legendFontSize: '14px',
|
|
243
|
-
labelFontFamily: 'Roboto'
|
|
270
|
+
labelFontFamily: 'Roboto',
|
|
271
|
+
labelFontSize: '12px',
|
|
272
|
+
legendBorderColor: '#000000',
|
|
273
|
+
legendBorderWidth: 0
|
|
244
274
|
};
|
|
245
275
|
break;
|
|
246
276
|
case 'material3dark':
|
|
@@ -261,7 +291,84 @@ export function getThemeStyle(theme) {
|
|
|
261
291
|
fontWeight: '400',
|
|
262
292
|
subtitleFontSize: '14px',
|
|
263
293
|
legendFontSize: '14px',
|
|
264
|
-
labelFontFamily: 'Roboto'
|
|
294
|
+
labelFontFamily: 'Roboto',
|
|
295
|
+
labelFontSize: '12px',
|
|
296
|
+
legendBorderColor: '#000000',
|
|
297
|
+
legendBorderWidth: 0
|
|
298
|
+
};
|
|
299
|
+
break;
|
|
300
|
+
case 'fluent2':
|
|
301
|
+
style = {
|
|
302
|
+
backgroundColor: 'transparent',
|
|
303
|
+
titleFontColor: '#242424',
|
|
304
|
+
titleFontWeight: '600',
|
|
305
|
+
subTitleFontColor: '#242424',
|
|
306
|
+
tooltipFillColor: '#FFFFFF',
|
|
307
|
+
tooltipFontColor: '#242424',
|
|
308
|
+
tooltipFontSize: '12px',
|
|
309
|
+
tooltipFillOpacity: 1,
|
|
310
|
+
tooltipTextOpacity: 1,
|
|
311
|
+
legendTitleColor: '#242424',
|
|
312
|
+
legendTextColor: '#242424',
|
|
313
|
+
fontFamily: 'Segoe UI',
|
|
314
|
+
fontSize: '14px',
|
|
315
|
+
fontWeight: '400',
|
|
316
|
+
subtitleFontSize: '12px',
|
|
317
|
+
legendFontSize: '12px',
|
|
318
|
+
labelFontFamily: 'Segoe UI',
|
|
319
|
+
labelFontSize: '10px',
|
|
320
|
+
legendBorderColor: '#000000',
|
|
321
|
+
legendBorderWidth: 0
|
|
322
|
+
};
|
|
323
|
+
break;
|
|
324
|
+
case 'fluent2dark':
|
|
325
|
+
style = {
|
|
326
|
+
backgroundColor: 'transparent',
|
|
327
|
+
titleFontColor: '#FFFFFF',
|
|
328
|
+
titleFontWeight: '600',
|
|
329
|
+
subTitleFontColor: '#FFFFFF',
|
|
330
|
+
tooltipFillColor: '#292929',
|
|
331
|
+
tooltipFontColor: '#FFFFFF',
|
|
332
|
+
tooltipFontSize: '12px',
|
|
333
|
+
tooltipFillOpacity: 1,
|
|
334
|
+
tooltipTextOpacity: 1,
|
|
335
|
+
legendTitleColor: '#FFFFFF',
|
|
336
|
+
legendTextColor: '#FFFFFF',
|
|
337
|
+
fontFamily: 'Segoe UI',
|
|
338
|
+
fontSize: '14px',
|
|
339
|
+
fontWeight: '400',
|
|
340
|
+
subtitleFontSize: '12px',
|
|
341
|
+
legendFontSize: '12px',
|
|
342
|
+
labelFontFamily: 'Segoe UI',
|
|
343
|
+
labelFontSize: '10px',
|
|
344
|
+
legendBorderColor: '#000000',
|
|
345
|
+
legendBorderWidth: 0
|
|
346
|
+
};
|
|
347
|
+
break;
|
|
348
|
+
case 'fluent2highcontrast':
|
|
349
|
+
style = {
|
|
350
|
+
backgroundColor: 'transparent',
|
|
351
|
+
titleFontColor: '#FFFFFF',
|
|
352
|
+
titleFontWeight: '600',
|
|
353
|
+
subTitleFontColor: '#FFFFFF',
|
|
354
|
+
tooltipFillColor: '#000000',
|
|
355
|
+
tooltipFontColor: '#FFFFFF',
|
|
356
|
+
tooltipFontSize: '12px',
|
|
357
|
+
tooltipFillOpacity: 1,
|
|
358
|
+
tooltipTextOpacity: 1,
|
|
359
|
+
legendTitleColor: '#FFFFFF',
|
|
360
|
+
legendTextColor: '#FFFFFF',
|
|
361
|
+
fontFamily: 'Segoe UI',
|
|
362
|
+
fontSize: '14px',
|
|
363
|
+
fontWeight: '400',
|
|
364
|
+
subtitleFontSize: '12px',
|
|
365
|
+
legendFontSize: '12px',
|
|
366
|
+
labelFontFamily: 'Segoe UI',
|
|
367
|
+
labelFontSize: '10px',
|
|
368
|
+
legendBorderColor: '#FFF',
|
|
369
|
+
legendBorderWidth: 1,
|
|
370
|
+
tooltipBorderColor: '#FFF',
|
|
371
|
+
tooltipBorderWidth: 1
|
|
265
372
|
};
|
|
266
373
|
break;
|
|
267
374
|
default:
|
|
@@ -279,7 +386,10 @@ export function getThemeStyle(theme) {
|
|
|
279
386
|
fontWeight: 'Normal',
|
|
280
387
|
subtitleFontSize: '14px',
|
|
281
388
|
legendFontSize: '13px',
|
|
282
|
-
fontFamily: 'Roboto, Noto, Sans-serif'
|
|
389
|
+
fontFamily: 'Roboto, Noto, Sans-serif',
|
|
390
|
+
labelFontSize: '12px',
|
|
391
|
+
legendBorderColor: '#000000',
|
|
392
|
+
legendBorderWidth: 0
|
|
283
393
|
};
|
|
284
394
|
break;
|
|
285
395
|
}
|
package/src/treemap/treemap.js
CHANGED
|
@@ -407,19 +407,21 @@ var TreeMap = /** @class */ (function (_super) {
|
|
|
407
407
|
if (dataCount === this.treemapLevelData.hierarchyData.length - 1) {
|
|
408
408
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
409
409
|
var mainData_1 = this.treemapLevelData.hierarchyData[0][this.levels[0].groupPath];
|
|
410
|
-
|
|
411
|
-
|
|
412
|
-
|
|
413
|
-
|
|
414
|
-
|
|
415
|
-
|
|
416
|
-
|
|
410
|
+
if (!isNullOrUndefined(mainData_1)) {
|
|
411
|
+
for (var k = 0; k < this.treemapLevelData.hierarchyData.length; k++) {
|
|
412
|
+
childData = findChildren(this.treemapLevelData.hierarchyData[k])['values'];
|
|
413
|
+
if (k !== 0 && childData) {
|
|
414
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
415
|
+
childData.forEach(function (currentData) { mainData_1.push(currentData); });
|
|
416
|
+
this.treemapLevelData.hierarchyData.splice(k, 1);
|
|
417
|
+
k -= 1;
|
|
418
|
+
}
|
|
419
|
+
}
|
|
420
|
+
mainData_1 = this.treemapLevelData.hierarchyData[0][this.levels[0].groupPath];
|
|
421
|
+
for (var l = 0; l < mainData_1.length; l++) {
|
|
422
|
+
newData[this.levels[0].groupPath] = mainData_1;
|
|
423
|
+
mainData_1[l]['parent'] = newData;
|
|
417
424
|
}
|
|
418
|
-
}
|
|
419
|
-
mainData_1 = this.treemapLevelData.hierarchyData[0][this.levels[0].groupPath];
|
|
420
|
-
for (var l = 0; l < mainData_1.length; l++) {
|
|
421
|
-
newData[this.levels[0].groupPath] = mainData_1;
|
|
422
|
-
mainData_1[l]['parent'] = newData;
|
|
423
425
|
}
|
|
424
426
|
}
|
|
425
427
|
};
|
|
@@ -795,7 +797,7 @@ var TreeMap = /** @class */ (function (_super) {
|
|
|
795
797
|
* @returns {any} - Returns label of the drilled level.
|
|
796
798
|
* @private
|
|
797
799
|
*/
|
|
798
|
-
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
800
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
799
801
|
TreeMap.prototype.calculateSelectedTextLevels = function (labelText, item) {
|
|
800
802
|
//to find the levels by clicking the particular text both for drillDownView as true / false.
|
|
801
803
|
var drillLevel;
|
|
@@ -821,7 +823,7 @@ var TreeMap = /** @class */ (function (_super) {
|
|
|
821
823
|
* @returns {boolean} - check whether it is previous level or not.
|
|
822
824
|
* @private
|
|
823
825
|
*/
|
|
824
|
-
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
826
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
825
827
|
TreeMap.prototype.calculatePreviousLevelChildItems = function (drillLevelValues, item, directLevel) {
|
|
826
828
|
//By clicking any child items drilldown to the particular level.
|
|
827
829
|
//At the time store all the previous drilled level items in drilledItems
|
|
@@ -863,7 +865,7 @@ var TreeMap = /** @class */ (function (_super) {
|
|
|
863
865
|
* @returns {any} - return the new drill down object.
|
|
864
866
|
* @private
|
|
865
867
|
*/
|
|
866
|
-
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
868
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
867
869
|
TreeMap.prototype.compareSelectedLabelWithDrillDownItems = function (drillLevelValues, item, i) {
|
|
868
870
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
869
871
|
var drillLevelChild;
|
|
@@ -90,10 +90,14 @@ var TreeMapTooltip = /** @class */ (function () {
|
|
|
90
90
|
|| this.tooltipSettings.textStyle.color;
|
|
91
91
|
this.tooltipSettings.textStyle.opacity = this.treemap.themeStyle.tooltipTextOpacity
|
|
92
92
|
|| this.tooltipSettings.textStyle.opacity;
|
|
93
|
+
var border = {
|
|
94
|
+
width: this.tooltipSettings.border.width || this.treemap.themeStyle.tooltipBorderWidth || 0,
|
|
95
|
+
color: this.tooltipSettings.border.color || this.treemap.themeStyle.tooltipBorderColor || 'transparent'
|
|
96
|
+
};
|
|
93
97
|
tootipArgs = {
|
|
94
98
|
cancel: false, name: tooltipRendering, item: item,
|
|
95
99
|
options: {
|
|
96
|
-
location: location, text: tooltipContent, data: toolTipData,
|
|
100
|
+
location: location, text: tooltipContent, data: toolTipData, border: border,
|
|
97
101
|
textStyle: this.tooltipSettings.textStyle, template: this.tooltipSettings.template
|
|
98
102
|
},
|
|
99
103
|
treemap: this.treemap,
|
|
@@ -127,6 +131,7 @@ var TreeMapTooltip = /** @class */ (function () {
|
|
|
127
131
|
}
|
|
128
132
|
if (!cancel) {
|
|
129
133
|
this.svgTooltip = new Tooltip({
|
|
134
|
+
theme: this.treemap.theme,
|
|
130
135
|
enable: true,
|
|
131
136
|
header: '',
|
|
132
137
|
data: args['data'],
|
|
@@ -139,6 +144,7 @@ var TreeMapTooltip = /** @class */ (function () {
|
|
|
139
144
|
areaBounds: this.treemap.areaRect,
|
|
140
145
|
textStyle: args['textStyle'],
|
|
141
146
|
fill: this.treemap.tooltipSettings.fill ? this.treemap.tooltipSettings.fill : this.treemap.themeStyle.tooltipFillColor,
|
|
147
|
+
border: args['border'],
|
|
142
148
|
enableShadow: true
|
|
143
149
|
});
|
|
144
150
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
@@ -205,7 +205,13 @@ export declare type TreeMapTheme =
|
|
|
205
205
|
/** Render a treemap with Material3 theme. */
|
|
206
206
|
'Material3' |
|
|
207
207
|
/** Render a treemap with Material3Dark theme. */
|
|
208
|
-
'Material3Dark'
|
|
208
|
+
'Material3Dark' |
|
|
209
|
+
/** Render a treemap with Fluent2 theme. */
|
|
210
|
+
'Fluent2' |
|
|
211
|
+
/** Render a treemap with Fluent2 dark theme. */
|
|
212
|
+
'Fluent2Dark' |
|
|
213
|
+
/** Render a treemap with Fluent2 high contrast theme. */
|
|
214
|
+
'Fluent2HighContrast';
|
|
209
215
|
/**
|
|
210
216
|
* Defines the rendering directions to render the treemap items in the treemap.
|
|
211
217
|
*/
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
|
package/CHANGELOG.md
DELETED
|
@@ -1,80 +0,0 @@
|
|
|
1
|
-
<!-- markdownlint-disable MD010 -->
|
|
2
|
-
|
|
3
|
-
<!-- markdownlint-disable MD030 -->
|
|
4
|
-
|
|
5
|
-
<!-- markdownlint-disable MD004 -->
|
|
6
|
-
|
|
7
|
-
# Changelog
|
|
8
|
-
|
|
9
|
-
## [Unreleased]
|
|
10
|
-
|
|
11
|
-
## 18.2.44 (2020-07-07)
|
|
12
|
-
|
|
13
|
-
### TreeMap
|
|
14
|
-
|
|
15
|
-
#### New Features
|
|
16
|
-
|
|
17
|
-
- `#280380` - `isResized` argument is exposed in the `loaded` event arguments for indicating that the component is resized.
|
|
18
|
-
|
|
19
|
-
#### Bug Fixes
|
|
20
|
-
|
|
21
|
-
- `#280380` - Color of the treemap item will be maintained when the fill color of the selection settings is not provided.
|
|
22
|
-
|
|
23
|
-
## 17.1.48 (2019-05-21)
|
|
24
|
-
|
|
25
|
-
### TreeMap
|
|
26
|
-
|
|
27
|
-
#### Bug Fixes
|
|
28
|
-
|
|
29
|
-
- `#I235721` - The issue with color value in individual nodes of levels in treemap has been resolved.
|
|
30
|
-
|
|
31
|
-
## 17.1.44 (2019-05-07)
|
|
32
|
-
|
|
33
|
-
### TreeMap
|
|
34
|
-
|
|
35
|
-
#### Bug Fixes
|
|
36
|
-
|
|
37
|
-
- `#I234615` - The issue with value from the "fill" property is not applied when we have both the "fill" and "colorValuePath" APIs has been fixed.
|
|
38
|
-
|
|
39
|
-
## 17.1.42 (2019-04-23)
|
|
40
|
-
|
|
41
|
-
### TreeMap
|
|
42
|
-
|
|
43
|
-
#### Bug Fixes
|
|
44
|
-
|
|
45
|
-
- `#I233284` – The issue of breaking the treemap, if data contains the "_" character in its value has been fixed.
|
|
46
|
-
|
|
47
|
-
## 17.1.32-beta (2019-03-13)
|
|
48
|
-
|
|
49
|
-
### TreeMap
|
|
50
|
-
|
|
51
|
-
#### New Features
|
|
52
|
-
|
|
53
|
-
- The right-to-left (RTL) rendering support has been provided.
|
|
54
|
-
- Load on-demand option has been provided to load and render the child items dynamically.
|
|
55
|
-
- Responsive support has been provided to the TreeMap legend.
|
|
56
|
-
- The 'doubleClick', 'rightClick', and 'legendRendering' events have been provided in TreeMap.
|
|
57
|
-
|
|
58
|
-
## 16.4.40-beta (2018-12-10)
|
|
59
|
-
|
|
60
|
-
### TreeMap
|
|
61
|
-
|
|
62
|
-
#### New Features
|
|
63
|
-
|
|
64
|
-
- Support has been added for desaturation color mapping.
|
|
65
|
-
- Support has been added to hide specific legend items and bind legend text from data source.
|
|
66
|
-
- Support has been added for highlighting or selecting the legend items along with shapes.
|
|
67
|
-
- Support has been added to bind colors for the items from the data source.
|
|
68
|
-
|
|
69
|
-
## 16.2.41 (2018-06-25)
|
|
70
|
-
|
|
71
|
-
### TreeMap
|
|
72
|
-
|
|
73
|
-
The TreeMap is used to displayed the hierarchical or multi-level data to visualize the nested rectangles.
|
|
74
|
-
|
|
75
|
-
- **Layout Mode** - TreeMap supports different type of layouts like Squarified, SliceAndDiceHorizontal, SliceAndDiceVertical and SliceAndDiceAuto.
|
|
76
|
-
- **Legend** - TreeMap supports legend feature with different mode. Default and Interactive.
|
|
77
|
-
- **LabelTemplate** - Leaf item labels can be customized by the label template.
|
|
78
|
-
- **ColorMapping** - TreeMap supports the color mapping feature. It used to customize the leaf item fill colors based on range or values.
|
|
79
|
-
- **User-Interactions** - TreeMap supports the Drilldown, Tooltip, Highlight and Selection user interaction features.
|
|
80
|
-
- **Print and Export** - TreeMap supports printing and exporting as different file types.
|