| 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
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162 | 1×
1×
1×
1×
28×
28×
1×
25×
25×
25×
25×
5×
5×
5×
25×
7×
7×
2×
7×
1×
5×
5×
1×
7×
7×
7×
7×
7×
7×
14×
14×
14×
14×
12×
12×
12×
12×
1×
25×
25×
1×
25×
25×
25×
5×
5×
5×
25×
1×
2×
2×
2×
2×
1×
25×
25×
25×
25×
25×
25×
25×
15×
15×
15×
10×
10×
10×
25×
1×
28×
25×
3×
3×
3×
3×
3×
3×
3×
3×
3×
1×
73×
1×
1×
1×
| define(["require", "exports", "@syncfusion/ej2-svg-base", "@syncfusion/ej2-base", "../utils/helper", "./constant"], function (require, exports, ej2_svg_base_1, ej2_base_1, helper_1, constant_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var ProgressTooltip = (function () {
function ProgressTooltip(control) {
this.text = [];
this.control = control;
}
ProgressTooltip.prototype.tooltip = function (e) {
var svgElement = document.getElementById(this.control.element.id + '_tooltip');
var isTooltip = (svgElement && parseInt(svgElement.getAttribute('opacity'), 10) > 0);
this.renderTooltip(e, this.control, !isTooltip);
if (this.control.tooltip.enable && this.control.type === 'Circular' && this.control.animation.enable && !(this.control.tooltip.showTooltipOnHover)) {
svgElement.style.visibility = 'hidden';
var delay = this.control.secondaryProgress ? this.control.circular.delay + this.control.animation.duration :
this.control.animation.duration;
this.tooltipDelay(this.control, svgElement, delay);
}
if (this.control.animation.enable && !(this.control.tooltip.showTooltipOnHover) && !(this.control.type === 'Circular')) {
var delay = this.control.secondaryProgress ? this.control.linear.delay : this.control.animation.delay;
if (this.control.secondaryProgress) {
svgElement.style.visibility = 'hidden';
}
this.toolTipAnimation(svgElement, this.control, delay);
}
};
ProgressTooltip.prototype.tooltipDelay = function (progress, element, delay) {
var animation = new ej2_base_1.Animation({});
animation.animate(element, {
duration: progress.animation.duration,
delay: delay,
progress: function (args) {
args.element.style.visibility = 'visible';
}
});
};
ProgressTooltip.prototype.toolTipAnimation = function (element, progress, delay) {
var _this = this;
var animation = new ej2_base_1.Animation({});
var endValue = parseInt(element.style.left, 10);
var tooltipSVG = document.getElementById(this.control.element.id + '_tooltip_svg');
var width = parseInt(tooltipSVG.getAttribute('width'), 10);
animation.animate(element, {
duration: progress.animation.duration,
delay: delay,
progress: function (args) {
progress.cancelResize = true;
args.name = 'SlideRight';
Eif (progress.type === 'Linear') {
if (args.timeStamp >= args.delay) {
args.element.style.visibility = 'visible';
var value = helper_1.effect(args.timeStamp, (0 - (width / 2 - _this.control.progressRect.x - 5)), endValue + (width / 2 - _this.control.progressRect.x - 5), args.duration, progress.enableRtl);
args.element.style.left = '';
args.element.style.left = value + 'px'.toString();
}
}
},
end: function (args) {
progress.cancelResize = false;
args.element.style.left = '';
args.element.style.left = endValue + 'px'.toString();
}
});
};
ProgressTooltip.prototype.renderTooltip = function (e, chart, isFirst) {
this.textFormat = this.format((this.control.tooltip.showTooltipOnHover) ? e.target.id.indexOf('Linearbuffer') >= 0 || e.target.id.indexOf('Circularbuffer') >= 0 ? this.control.secondaryProgress : this.control.value : this.control.value);
this.triggerTooltipRender(e, isFirst, this.textFormat);
};
ProgressTooltip.prototype.format = function (formatValue) {
var currentFormat = formatValue.toString();
var value;
if (this.control.tooltip.format) {
currentFormat = this.control.tooltip.format;
value = new RegExp('${value' + '}', 'gm');
currentFormat = currentFormat.replace(value.source, formatValue.toString());
}
return currentFormat;
};
ProgressTooltip.prototype.removeTooltip = function (duration) {
var _this = this;
var tooltipElement = document.getElementById(this.control.element.id + '_tooltip');
Eif (tooltipElement) {
this.fadeInInterval = +setTimeout(function () {
if (_this.svgTooltip) {
_this.svgTooltip.fadeOut();
}
}, duration);
}
};
ProgressTooltip.prototype.triggerTooltipRender = function (e, isFirst, textCollection) {
var padding = 5;
var argsData = {
cancel: false, name: constant_1.tooltipRender, text: textCollection + '%'
};
this.control.trigger(constant_1.tooltipRender, argsData);
textCollection = argsData.text;
Eif (!argsData.cancel) {
this.text = [].concat(argsData.text);
if (this.control.type === 'Linear') {
var linearEndPointX = (this.control.linear.linearProgressWidth - padding / 2 + (this.control.progressRect.x));
var linearEndPointY = (this.control.cornerRadius === 'Round4px') ? (this.control.progressRect.y + padding) : (this.control.progressRect.y + (this.control.progressRect.height / 2)) -
(this.control.progressThickness ? this.control.progressThickness : this.control.themeStyle.linearProgressThickness) / 2 +
padding;
this.createTooltip(this.control, isFirst, (this.control.tooltip.enable && !this.control.tooltip.showTooltipOnHover || !(e.target.id.indexOf('Linearbuffer') >= 0)) ? (new helper_1.ProgressLocation((this.control.cornerRadius === 'Round4px') ? linearEndPointX - padding : linearEndPointX, linearEndPointY)) : (new helper_1.ProgressLocation(this.control.linear.bufferWidth - (padding / 2) + (this.control.progressRect.x), linearEndPointY)), this.control.initialClipRect);
}
else {
var circularEndPointX = this.control.circular.endPosition.x - padding / 2;
var circularEndPointY = this.control.circular.endPosition.y + this.control.progressRect.y - padding / 2;
this.createTooltip(this.control, isFirst, (this.control.tooltip.enable && !this.control.tooltip.showTooltipOnHover || !(e.target.id.indexOf('Circularbuffer') >= 0)) ? (new helper_1.ProgressLocation(circularEndPointX, circularEndPointY)) : (new helper_1.ProgressLocation(this.control.circular.bufferEndPosition.x - padding / 2, this.control.circular.bufferEndPosition.y + this.control.progressRect.y - padding / 2)), this.control.initialClipRect);
}
}
this.isRendered = true;
};
ProgressTooltip.prototype.createTooltip = function (chart, isFirst, location, bounds) {
if (isFirst) {
this.svgTooltip = new ej2_svg_base_1.Tooltip({
opacity: this.control.tooltip.textStyle.opacity ? this.control.tooltip.textStyle.opacity : ((this.control.theme === 'Material3' || this.control.theme === 'Material3Dark' || this.control.theme.indexOf('Bootstrap5') > -1) ? 1 : 0.75),
header: '',
content: this.text,
fill: this.control.tooltip.fill,
border: this.control.tooltip.border,
enableAnimation: true,
location: location,
theme: this.control.theme,
areaBounds: bounds,
template: null,
offset: 7.5,
marginX: 8,
marginY: 4.5,
textStyle: this.control.tooltip.textStyle,
arrowPadding: 7,
availableSize: this.control.progressSize,
duration: 300,
blazorTemplate: { name: 'Template', parent: this.control.tooltip },
controlInstance: this.control,
enableRTL: chart.enableRtl,
controlName: 'Progressbar'
}, '#' + this.control.element.id + '_tooltip');
}
else {
Eif (this.svgTooltip) {
this.svgTooltip.location = location;
this.svgTooltip.content = this.text;
this.svgTooltip.header = '';
this.svgTooltip.offset = 7.5;
this.svgTooltip.textStyle = this.control.tooltip.textStyle;
this.svgTooltip.areaBounds = bounds;
this.svgTooltip.arrowPadding = 7;
this.svgTooltip.dataBind();
}
}
};
ProgressTooltip.prototype.getModuleName = function () {
return 'ProgressTooltip';
};
ProgressTooltip.prototype.destroy = function () {
};
return ProgressTooltip;
}());
exports.ProgressTooltip = ProgressTooltip;
});
|