@syncfusion/ej2-vue-treemap 20.4.48 → 21.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/dist/ej2-vue-treemap.umd.min.js +2 -2
- package/dist/ej2-vue-treemap.umd.min.js.map +1 -1
- package/dist/es6/ej2-vue-treemap.es2015.js +130 -252
- package/dist/es6/ej2-vue-treemap.es2015.js.map +1 -1
- package/dist/es6/ej2-vue-treemap.es5.js +152 -303
- package/dist/es6/ej2-vue-treemap.es5.js.map +1 -1
- package/dist/global/ej2-vue-treemap.min.js +2 -2
- package/package.json +9 -9
- package/src/treemap/colormapping.directive.d.ts +2 -12
- package/src/treemap/colormapping.directive.js +22 -71
- package/src/treemap/levels.directive.d.ts +3 -13
- package/src/treemap/levels.directive.js +23 -72
- package/src/treemap/treemap.component.d.ts +4 -38
- package/src/treemap/treemap.component.js +96 -158
|
@@ -1,186 +1,124 @@
|
|
|
1
|
-
|
|
2
|
-
var extendStatics = function (d, b) {
|
|
3
|
-
extendStatics = Object.setPrototypeOf ||
|
|
4
|
-
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
|
|
5
|
-
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
|
|
6
|
-
return extendStatics(d, b);
|
|
7
|
-
};
|
|
8
|
-
return function (d, b) {
|
|
9
|
-
extendStatics(d, b);
|
|
10
|
-
function __() { this.constructor = d; }
|
|
11
|
-
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
|
|
12
|
-
};
|
|
13
|
-
})();
|
|
14
|
-
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
|
|
15
|
-
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
|
16
|
-
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
|
17
|
-
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
|
18
|
-
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
19
|
-
};
|
|
20
|
-
import { ComponentBase, EJComponentDecorator, getProps, gh, isExecute } from '@syncfusion/ej2-vue-base';
|
|
1
|
+
import { ComponentBase, gh, getProps, isExecute, vueDefineComponent } from '@syncfusion/ej2-vue-base';
|
|
21
2
|
import { isNullOrUndefined, getValue } from '@syncfusion/ej2-base';
|
|
22
3
|
import { TreeMap } from '@syncfusion/ej2-treemap';
|
|
23
4
|
import { ColorMappingsDirective, ColorMappingDirective, ColorMappingsPlugin, ColorMappingPlugin } from './colormapping.directive';
|
|
24
5
|
import { LevelsDirective, LevelDirective, LevelsPlugin, LevelPlugin } from './levels.directive';
|
|
25
|
-
import { Options } from 'vue-class-component';
|
|
26
6
|
export var properties = ['isLazyUpdate', 'plugins', 'allowImageExport', 'allowPdfExport', 'allowPrint', 'background', 'border', 'breadcrumbConnector', 'colorValuePath', 'dataSource', 'description', 'drillDownView', 'enableBreadcrumb', 'enableDrillDown', 'enablePersistence', 'enableRtl', 'equalColorValuePath', 'format', 'height', 'highlightSettings', 'initialDrillDown', 'layoutType', 'leafItemSettings', 'legendSettings', 'levels', 'locale', 'margin', 'palette', 'query', 'rangeColorValuePath', 'renderDirection', 'selectionSettings', 'tabIndex', 'theme', 'titleSettings', 'tooltipSettings', 'useGroupingSeparator', 'weightValuePath', 'width', 'beforePrint', 'click', 'doubleClick', 'drillEnd', 'drillStart', 'itemClick', 'itemHighlight', 'itemMove', 'itemRendering', 'itemSelected', 'legendItemRendering', 'legendRendering', 'load', 'loaded', 'mouseMove', 'resize', 'rightClick', 'tooltipRendering'];
|
|
27
7
|
export var modelProps = [];
|
|
28
8
|
export var testProp = getProps({ props: properties });
|
|
29
|
-
export var props = testProp[0];
|
|
30
|
-
export var watch = testProp[1];
|
|
31
|
-
export var emitProbs = Object.keys(watch);
|
|
9
|
+
export var props = testProp[0], watch = testProp[1], emitProbs = Object.keys(watch);
|
|
32
10
|
emitProbs.push('modelchanged', 'update:modelValue');
|
|
33
11
|
for (var _i = 0, modelProps_1 = modelProps; _i < modelProps_1.length; _i++) {
|
|
34
12
|
var props_1 = modelProps_1[_i];
|
|
35
13
|
emitProbs.push('update:' + props_1);
|
|
36
14
|
}
|
|
37
15
|
/**
|
|
38
|
-
* Represents
|
|
16
|
+
* Represents the Vue TreeMap component. It is used to visualize both hierarchical and flat data.
|
|
39
17
|
* ```vue
|
|
40
18
|
* <ejs-treemap></ejs-treemap>
|
|
41
19
|
* ```
|
|
42
20
|
*/
|
|
43
|
-
var TreeMapComponent =
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
21
|
+
export var TreeMapComponent = vueDefineComponent({
|
|
22
|
+
name: 'TreeMapComponent',
|
|
23
|
+
mixins: [ComponentBase],
|
|
24
|
+
props: props,
|
|
25
|
+
watch: watch,
|
|
26
|
+
emits: emitProbs,
|
|
27
|
+
provide: function () { return { custom: this.custom }; },
|
|
28
|
+
data: function () {
|
|
29
|
+
return {
|
|
30
|
+
ej2Instances: new TreeMap({}),
|
|
31
|
+
propKeys: properties,
|
|
32
|
+
models: modelProps,
|
|
33
|
+
hasChildDirective: true,
|
|
34
|
+
hasInjectedModules: true,
|
|
35
|
+
tagMapper: { "e-levels": { "e-level": { "e-colorMappings": "e-colorMapping" } } },
|
|
36
|
+
tagNameMapper: { "e-colorMappings": "e-colorMapping" },
|
|
37
|
+
isVue3: !isExecute,
|
|
38
|
+
templateCollection: {},
|
|
39
|
+
};
|
|
40
|
+
},
|
|
41
|
+
created: function () {
|
|
42
|
+
this.bindProperties();
|
|
43
|
+
this.ej2Instances._setProperties = this.ej2Instances.setProperties;
|
|
44
|
+
this.ej2Instances.setProperties = this.setProperties;
|
|
45
|
+
this.ej2Instances.clearTemplate = this.clearTemplate;
|
|
46
|
+
this.updated = this.updated;
|
|
47
|
+
},
|
|
48
|
+
render: function (createElement) {
|
|
49
|
+
var h = !isExecute ? gh : createElement;
|
|
50
|
+
var slots = null;
|
|
51
|
+
if (!isNullOrUndefined(this.$slots.default)) {
|
|
52
|
+
slots = !isExecute ? this.$slots.default() : this.$slots.default;
|
|
65
53
|
}
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
54
|
+
return h('div', slots);
|
|
55
|
+
},
|
|
56
|
+
methods: {
|
|
57
|
+
clearTemplate: function (templateNames) {
|
|
58
|
+
if (!templateNames) {
|
|
59
|
+
templateNames = Object.keys(this.templateCollection || {});
|
|
60
|
+
}
|
|
61
|
+
if (templateNames.length && this.templateCollection) {
|
|
62
|
+
for (var _i = 0, templateNames_1 = templateNames; _i < templateNames_1.length; _i++) {
|
|
63
|
+
var tempName = templateNames_1[_i];
|
|
64
|
+
var elementCollection = this.templateCollection[tempName];
|
|
65
|
+
if (elementCollection && elementCollection.length) {
|
|
66
|
+
for (var _a = 0, elementCollection_1 = elementCollection; _a < elementCollection_1.length; _a++) {
|
|
67
|
+
var ele = elementCollection_1[_a];
|
|
68
|
+
var destroy = getValue('__vue__.$destroy', ele);
|
|
69
|
+
if (destroy) {
|
|
70
|
+
ele.__vue__.$destroy();
|
|
71
|
+
}
|
|
72
|
+
if (ele.innerHTML) {
|
|
73
|
+
ele.innerHTML = '';
|
|
74
|
+
}
|
|
79
75
|
}
|
|
76
|
+
delete this.templateCollection[tempName];
|
|
80
77
|
}
|
|
81
|
-
delete this.templateCollection[tempName];
|
|
82
78
|
}
|
|
83
79
|
}
|
|
84
|
-
}
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
80
|
+
},
|
|
81
|
+
setProperties: function (prop, muteOnChange) {
|
|
82
|
+
var _this = this;
|
|
83
|
+
if (this.isVue3) {
|
|
84
|
+
this.models = !this.models ? this.ej2Instances.referModels : this.models;
|
|
85
|
+
}
|
|
86
|
+
if (this.ej2Instances && this.ej2Instances._setProperties) {
|
|
87
|
+
this.ej2Instances._setProperties(prop, muteOnChange);
|
|
88
|
+
}
|
|
89
|
+
if (prop && this.models && this.models.length) {
|
|
90
|
+
Object.keys(prop).map(function (key) {
|
|
91
|
+
_this.models.map(function (model) {
|
|
92
|
+
if ((key === model) && !(/datasource/i.test(key))) {
|
|
93
|
+
if (_this.isVue3) {
|
|
94
|
+
_this.ej2Instances.vueInstance.$emit('update:' + key, prop[key]);
|
|
95
|
+
}
|
|
96
|
+
else {
|
|
97
|
+
_this.$emit('update:' + key, prop[key]);
|
|
98
|
+
_this.$emit('modelchanged', prop[key]);
|
|
99
|
+
}
|
|
104
100
|
}
|
|
105
|
-
}
|
|
101
|
+
});
|
|
106
102
|
});
|
|
107
|
-
});
|
|
108
|
-
}
|
|
109
|
-
};
|
|
110
|
-
TreeMapComponent.prototype.render = function (createElement) {
|
|
111
|
-
var h = !isExecute ? gh : createElement;
|
|
112
|
-
var slots = null;
|
|
113
|
-
if (!isNullOrUndefined(this.$slots.default)) {
|
|
114
|
-
slots = !isExecute ? this.$slots.default() : this.$slots.default;
|
|
115
|
-
}
|
|
116
|
-
return h('div', slots);
|
|
117
|
-
};
|
|
118
|
-
TreeMapComponent.prototype.custom = function () {
|
|
119
|
-
this.updated();
|
|
120
|
-
};
|
|
121
|
-
TreeMapComponent.prototype.calculateSelectedTextLevels = function (labelText, item) {
|
|
122
|
-
return this.ej2Instances.calculateSelectedTextLevels(labelText, item);
|
|
123
|
-
};
|
|
124
|
-
TreeMapComponent.prototype.clickOnTreeMap = function (e) {
|
|
125
|
-
return this.ej2Instances.clickOnTreeMap(e);
|
|
126
|
-
};
|
|
127
|
-
TreeMapComponent.prototype.compareSelectedLabelWithDrillDownItems = function (drillLevelValues, item, i) {
|
|
128
|
-
return this.ej2Instances.compareSelectedLabelWithDrillDownItems(drillLevelValues, item, i);
|
|
129
|
-
};
|
|
130
|
-
TreeMapComponent.prototype.doubleClickOnTreeMap = function (e) {
|
|
131
|
-
return this.ej2Instances.doubleClickOnTreeMap(e);
|
|
132
|
-
};
|
|
133
|
-
TreeMapComponent.prototype.export = function (type, fileName, orientation, allowDownload) {
|
|
134
|
-
return this.ej2Instances.export(type, fileName, orientation, allowDownload);
|
|
135
|
-
};
|
|
136
|
-
TreeMapComponent.prototype.findTotalWeight = function (processData, type) {
|
|
137
|
-
return this.ej2Instances.findTotalWeight(processData, type);
|
|
138
|
-
};
|
|
139
|
-
TreeMapComponent.prototype.mouseDownOnTreeMap = function (e) {
|
|
140
|
-
return this.ej2Instances.mouseDownOnTreeMap(e);
|
|
141
|
-
};
|
|
142
|
-
TreeMapComponent.prototype.mouseEndOnTreeMap = function (e) {
|
|
143
|
-
return this.ej2Instances.mouseEndOnTreeMap(e);
|
|
144
|
-
};
|
|
145
|
-
TreeMapComponent.prototype.mouseLeaveOnTreeMap = function (e) {
|
|
146
|
-
return this.ej2Instances.mouseLeaveOnTreeMap(e);
|
|
147
|
-
};
|
|
148
|
-
TreeMapComponent.prototype.mouseMoveOnTreeMap = function (e) {
|
|
149
|
-
return this.ej2Instances.mouseMoveOnTreeMap(e);
|
|
150
|
-
};
|
|
151
|
-
TreeMapComponent.prototype.print = function (id) {
|
|
152
|
-
return this.ej2Instances.print(id);
|
|
153
|
-
};
|
|
154
|
-
TreeMapComponent.prototype.reOrderLevelData = function (start) {
|
|
155
|
-
return this.ej2Instances.reOrderLevelData(start);
|
|
156
|
-
};
|
|
157
|
-
TreeMapComponent.prototype.resizeOnTreeMap = function (e) {
|
|
158
|
-
return this.ej2Instances.resizeOnTreeMap(e);
|
|
159
|
-
};
|
|
160
|
-
TreeMapComponent.prototype.rightClickOnTreeMap = function (e) {
|
|
161
|
-
return this.ej2Instances.rightClickOnTreeMap(e);
|
|
162
|
-
};
|
|
163
|
-
TreeMapComponent.prototype.selectItem = function (levelOrder, isSelected) {
|
|
164
|
-
return this.ej2Instances.selectItem(levelOrder, isSelected);
|
|
165
|
-
};
|
|
166
|
-
TreeMapComponent = __decorate([
|
|
167
|
-
EJComponentDecorator({
|
|
168
|
-
props: properties
|
|
169
|
-
}, isExecute)
|
|
170
|
-
,Options({
|
|
171
|
-
props: props,
|
|
172
|
-
watch: watch,
|
|
173
|
-
emits: emitProbs,
|
|
174
|
-
provide: function provide() {
|
|
175
|
-
return {
|
|
176
|
-
custom: this.custom
|
|
177
|
-
};
|
|
178
103
|
}
|
|
179
|
-
}
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
}
|
|
183
|
-
|
|
104
|
+
},
|
|
105
|
+
custom: function () {
|
|
106
|
+
this.updated();
|
|
107
|
+
},
|
|
108
|
+
doubleClickOnTreeMap: function (e) {
|
|
109
|
+
return this.ej2Instances.doubleClickOnTreeMap(e);
|
|
110
|
+
},
|
|
111
|
+
export: function (type, fileName, orientation, allowDownload) {
|
|
112
|
+
return this.ej2Instances.export(type, fileName, orientation, allowDownload);
|
|
113
|
+
},
|
|
114
|
+
print: function (id) {
|
|
115
|
+
return this.ej2Instances.print(id);
|
|
116
|
+
},
|
|
117
|
+
selectItem: function (levelOrder, isSelected) {
|
|
118
|
+
return this.ej2Instances.selectItem(levelOrder, isSelected);
|
|
119
|
+
},
|
|
120
|
+
}
|
|
121
|
+
});
|
|
184
122
|
export var TreeMapPlugin = {
|
|
185
123
|
name: 'ejs-treemap',
|
|
186
124
|
install: function (Vue) {
|