| 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114 | 1×
1×
1×
1×
1×
103×
103×
103×
103×
103×
103×
103×
204×
196×
103×
94×
103×
1×
11×
11×
11×
11×
11×
1×
11×
11×
11×
195×
184×
184×
11×
11×
1×
198×
198×
198×
198×
198×
198×
198×
198×
198×
198×
197×
197×
184×
184×
184×
185×
13×
13×
13×
197×
197×
1×
197×
197×
197×
197×
197×
197×
1×
1667×
1×
1×
197×
197×
197×
197×
1×
1×
| define(["require", "exports", "../utils/helper-common", "../model/constants", "@syncfusion/ej2-base"], function (require, exports, helper_common_1, constants_1, ej2_base_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var Annotations = (function () {
function Annotations(gauge) {
}
Annotations.prototype.renderAnnotation = function (axis, index, gauge) {
var _this = this;
var width = gauge.availableSize.width;
var element = ej2_base_1.createElement('div', {
id: gauge.element.id + '_Annotations_' + index, styles: gauge.allowLoadingAnimation ? 'opacity: 0' : 'opacity: 1'
});
var parentElement = helper_common_1.getElement(gauge.element.id + '_Secondary_Element');
Eif (!ej2_base_1.isNullOrUndefined(document.getElementById(gauge.element.id + '_Secondary_Element'))) {
document.getElementById(gauge.element.id + '_Secondary_Element').style.width = width + 'px';
}
axis.annotations.map(function (annotation, annotationIndex) {
if (annotation.content !== null) {
_this.createTemplate(element, annotationIndex, index, gauge);
}
});
if (parentElement && element.childElementCount) {
parentElement.appendChild(element);
}
gauge.renderReactTemplates();
};
Annotations.prototype.annotationAnimation = function (gauge) {
for (var i = 0; i < gauge.axes.length; i++) {
var element = document.getElementById(gauge.element.id + '_Annotations_' + i);
Eif (!ej2_base_1.isNullOrUndefined(element)) {
Eif (element['style']['opacity'] === '0') {
this.annotationAnimate(element, gauge, i);
}
}
}
};
Annotations.prototype.annotationAnimate = function (element, gauge, axisIndex) {
var tempOpacity = 0;
var opacity = 1;
new ej2_base_1.Animation({}).animate(element, {
duration: gauge.loadingAnimationDuration[axisIndex],
progress: function (args) {
if (args.timeStamp > args.delay) {
tempOpacity = ((args.timeStamp - args.delay) / args.duration);
element['style']['opacity'] = (opacity * tempOpacity);
}
},
end: function () {
element['style']['opacity'] = opacity;
gauge.isOverAllAnimationComplete = true;
}
});
};
Annotations.prototype.createTemplate = function (element, annotationIndex, axisIndex, gauge) {
var _this = this;
var axis = gauge.axes[axisIndex];
var annotation = axis.annotations[annotationIndex];
var childElement = ej2_base_1.createElement('div', {
id: gauge.element.id + '_Axis_' + axisIndex + '_Annotation_' + annotationIndex
});
childElement.style.cssText = 'position: absolute; z-index:' + annotation.zIndex + ';transform:' +
(annotation.autoAngle ? 'rotate(' + (annotation.angle - 90) + 'deg)' : 'rotate(0deg)') + ';';
var argsData = {
cancel: false, name: constants_1.annotationRender, content: annotation.content,
axis: axis, annotation: annotation, textStyle: annotation.textStyle
};
gauge.trigger('annotationRender', argsData, function (observedArgs) {
var templateFn;
var templateElement;
if (!argsData.cancel) {
templateFn = helper_common_1.getTemplateFunction(argsData.content, gauge);
if (templateFn && templateFn(axis, gauge, argsData.content, gauge.element.id + '_Axis' + axisIndex + '_ContentTemplate' + annotationIndex).length) {
templateElement = Array.prototype.slice.call(templateFn(axis, gauge, argsData.content, gauge.element.id + '_Axis' + axisIndex + '_ContentTemplate' + annotationIndex));
var length_1 = templateElement.length;
for (var i = 0; i < length_1; i++) {
childElement.appendChild(templateElement[i]);
}
}
else {
var annotationElement = ej2_base_1.createElement('div', {
innerHTML: !ej2_base_1.isNullOrUndefined(argsData.content) ? argsData.content.toString() : null,
id: 'StringTemplate'
});
annotationElement.style.cssText = helper_common_1.getFontStyle(argsData.textStyle);
childElement.appendChild(annotationElement);
}
_this.updateLocation(childElement, axis, annotation, gauge);
element.appendChild(childElement);
}
});
};
Annotations.prototype.updateLocation = function (element, axis, annotation, gauge) {
var location = helper_common_1.getLocationFromAngle(annotation.angle - 90, helper_common_1.stringToNumber(annotation.radius, axis.currentRadius), gauge.midPoint);
var elementRect = this.measureElementRect(element);
element.style.left = (location.x - (elementRect.width / 2)) + 'px';
element.style.top = (location.y - (elementRect.height / 2)) + 'px';
element.setAttribute('aria-label', annotation.description || 'Annotation');
element.setAttribute('role', 'region');
};
Annotations.prototype.getModuleName = function () {
return 'Annotations';
};
Annotations.prototype.destroy = function () { };
Annotations.prototype.measureElementRect = function (element) {
document.body.appendChild(element);
var bounds = element.getBoundingClientRect();
helper_common_1.removeElement(element.id);
return bounds;
};
return Annotations;
}());
exports.Annotations = Annotations;
});
|