| 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 | 1×
1×
1×
1×
30×
30×
1×
33×
33×
33×
33×
33×
33×
1×
65×
65×
65×
8×
57×
65×
1×
32×
32×
32×
32×
32×
13×
13×
32×
1×
65×
18×
47×
47×
47×
47×
47×
38×
9×
9×
8×
46×
1×
64×
64×
64×
64×
64×
64×
60×
4×
1×
185×
185×
185×
185×
185×
185×
185×
185×
185×
147×
38×
38×
185×
1×
65×
65×
65×
39×
39×
3×
1×
1×
1×
801×
1×
1×
1×
| define(["require", "exports", "@syncfusion/ej2-svg-base", "../../common/utils/helper", "../../common/utils/helper", "@syncfusion/ej2-svg-base", "@syncfusion/ej2-base"], function (require, exports, ej2_svg_base_1, helper_1, helper_2, ej2_svg_base_2, ej2_base_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var RangeTooltip = (function () {
function RangeTooltip(range) {
this.control = range;
this.elementId = range.element.id;
}
RangeTooltip.prototype.renderLeftTooltip = function (rangeSlider) {
this.fadeOutTooltip();
var content = this.getTooltipContent(rangeSlider.currentStart);
var contentWidth = this.getContentSize(content);
var rect = this.control.enableRtl ? rangeSlider.rightRect : rangeSlider.leftRect;
Iif (contentWidth > rect.width) {
rect = rangeSlider.midRect;
}
this.leftTooltip = this.renderTooltip(rect, this.createElement('_leftTooltip'), rangeSlider.startX, content);
};
RangeTooltip.prototype.getContentSize = function (value) {
var width;
var font = this.control.tooltip.textStyle;
if (this.control.tooltip.template) {
width = helper_1.createTemplate(ej2_base_1.createElement('div', {
id: 'measureElement',
styles: 'position: absolute;'
}), 0, this.control.tooltip.template, this.control).getBoundingClientRect().width;
}
else {
width = ej2_svg_base_2.measureText(value[0], font, this.control.themeStyle.tooltipLabelFont).width + 20;
}
return width;
};
RangeTooltip.prototype.renderRightTooltip = function (rangeSlider) {
this.fadeOutTooltip();
var content = this.getTooltipContent(rangeSlider.currentEnd);
var contentWidth = this.getContentSize(content);
var rect = this.control.enableRtl ? rangeSlider.leftRect : rangeSlider.rightRect;
if (contentWidth > rect.width) {
rect = rangeSlider.midRect;
rect.x = !this.control.series.length ? rect.x : 0;
}
this.rightTooltip = this.renderTooltip(rect, this.createElement('_rightTooltip'), rangeSlider.endX, content);
};
RangeTooltip.prototype.createElement = function (id) {
if (helper_1.getElement(this.elementId + id)) {
return helper_1.getElement(this.elementId + id);
}
else {
var element = document.createElement('div');
element.id = this.elementId + id;
element.className = 'ejSVGTooltip';
element.style.cssText = 'pointer-events:none; position:absolute;z-index: 1';
if (!this.control.stockChart) {
helper_1.getElement(this.elementId + '_Secondary_Element').appendChild(element);
}
else {
var stockChart = this.control.stockChart;
helper_1.getElement(stockChart.element.id + '_Secondary_Element').appendChild(element);
element.style.transform = 'translateY(' + (((stockChart.availableSize.height - stockChart.toolbarHeight - 51) +
stockChart.toolbarHeight) + stockChart.titleSize.height) + 'px)';
}
return element;
}
};
RangeTooltip.prototype.renderTooltip = function (bounds, parent, pointX, content) {
var control = this.control;
var tooltip = control.tooltip;
var argsData = {
cancel: false, name: 'tooltipRender', text: content,
textStyle: tooltip.textStyle
};
this.control.trigger('tooltipRender', argsData);
var left = control.svgObject.getBoundingClientRect().left -
control.element.getBoundingClientRect().left;
if (!argsData.cancel) {
return new ej2_svg_base_1.Tooltip({
location: { x: pointX, y: control.rangeSlider.sliderY },
content: argsData.text, marginX: 2,
enableShadow: false,
marginY: 2, arrowPadding: 8, rx: 4, ry: 4,
inverted: control.series.length > 0,
areaBounds: bounds, fill: tooltip.fill ? tooltip.fill : this.control.themeStyle.tooltipBackground,
theme: this.control.theme,
clipBounds: { x: left },
border: tooltip.border, opacity: tooltip.opacity ? tooltip.opacity : ((this.control.theme === 'Material3' || this.control.theme === 'Material3Dark' || this.control.theme.indexOf('Bootstrap5') > -1) ? 1 : 0.75),
template: tooltip.template,
textStyle: argsData.textStyle,
availableSize: control.availableSize,
controlName: 'RangeNavigator',
data: {
'start': this.getTooltipContent(this.control.startValue)[0],
'end': this.getTooltipContent(this.control.endValue)[0],
'value': content[0]
}
}, parent);
}
else {
return null;
}
};
RangeTooltip.prototype.getTooltipContent = function (value) {
var control = this.control;
var tooltip = control.tooltip;
var xAxis = control.chartSeries.xAxis;
var text;
var format = tooltip.format || xAxis.labelFormat;
var isCustom = format.match('{value}') !== null;
var valueType = xAxis.valueType;
value = (valueType === 'DateTimeCategory' ? parseInt(xAxis.labels[Math.floor(value)], 10) : value);
if (valueType.indexOf('DateTime') > -1) {
text = (control.intl.getDateFormat({
format: format || 'MM/dd/yyyy',
type: helper_1.firstToLowerCase(control.skeletonType),
skeleton: valueType === 'DateTime' ? control.dateTimeModule.getSkeleton(xAxis, null, null) : control.dateTimeCategoryModule.getSkeleton(xAxis, null, null)
}))(new Date(value));
}
else {
xAxis.format = control.intl.getNumberFormat({
format: isCustom ? '' : format,
useGrouping: control.useGroupingSeparator
});
text = control.doubleModule.formatValue(xAxis, isCustom, format, valueType === 'Logarithmic' ? Math.pow(xAxis.logBase, value) : value);
}
return [text];
};
RangeTooltip.prototype.fadeOutTooltip = function () {
var _this = this;
var tooltip = this.control.tooltip;
if (tooltip.displayMode === 'OnDemand') {
helper_2.stopTimer(this.toolTipInterval);
if (this.rightTooltip) {
this.toolTipInterval = +setTimeout(function () {
_this.leftTooltip.fadeOut();
_this.rightTooltip.fadeOut();
}, 1000);
}
}
};
RangeTooltip.prototype.getModuleName = function () {
return 'RangeTooltip';
};
RangeTooltip.prototype.destroy = function () {
};
return RangeTooltip;
}());
exports.RangeTooltip = RangeTooltip;
});
|