all files / common/user-interaction/ tooltip.js

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
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
 
1×
1×
1×
1×
1×
1×
1×
1×
 
 
1×
 
1×
1×
1×
1×
574×
574×
574×
574×
574×
 
1×
547×
 
1×
233×
233×
 
 
233×
233×
197×
 
36×
 
1×
197×
197×
197×
197×
197×
 
1×
132×
132×
123×
 
 
9×
 
132×
132×
118×
 
132×
 
 
 
1×
298×
298×
298×
60×
60×
41×
40×
 
41×
 
19×
19×
10×
10×
 
 
 
1×
195×
195×
195×
 
 
1×
212×
276×
276×
155×
 
 
 
1×
212×
212×
212×
212×
212×
183×
 
 
 
 
 
 
 
 
 
 
212×
212×
212×
 
 
14×
2×
 
 
 
 
 
29×
29×
29×
29×
29×
29×
29×
29×
29×
29×
29×
29×
29×
 
 
1×
212×
212×
276×
276×
 
212×
 
1×
276×
155×
 
 
121×
 
 
 
 
1×
212×
81×
 
212×
 
1×
2×
2×
2×
2×
2×
2×
2×
2×
2×
2×
 
 
1×
 
 
 
 
 
 
 
 
 
 
1×
278×
278×
 
 
 
278×
278×
276×
5×
5×
 
276×
276×
 
278×
 
1×
88×
88×
88×
19×
69×
 
 
 
1×
240×
 
1×
25×
25×
25×
25×
13×
11×
11×
 
 
 
 
1×
 
1×
 
 
/* istanbul ignore next */ 
var __extends = (this && this.__extends) || (function () {
    var extendStatics = Object.setPrototypeOf ||
        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
        function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
    return function (d, b) {
        extendStatics(d, b);
        function __() { this.constructor = d; }
        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
    };
})();
define(["require", "exports", "@syncfusion/ej2-base", "../../common/utils/helper", "../../common/utils/helper", "../../chart/utils/get-data", "../../common/model/constants", "@syncfusion/ej2-svg-base"], function (require, exports, ej2_base_1, helper_1, helper_2, get_data_1, constants_1, ej2_svg_base_1) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    var BaseTooltip = (function (_super) {
        __extends(BaseTooltip, _super);
        function BaseTooltip(chart) {
            var _this = _super.call(this, chart) || this;
            _this.element = _this.chart.element;
            _this.textStyle = chart.tooltip.textStyle;
            _this.control = chart;
            return _this;
        }
        BaseTooltip.prototype.getElement = function (id) {
            return document.getElementById(id);
        };
        BaseTooltip.prototype.getTooltipElement = function (isTooltip) {
            this.inverted = this.chart.requireInvertedAxis;
            this.header = (this.control.tooltip.header === null) ?
                ((this.control.tooltip.shared) ? '<b>${point.x}</b>' : '<b>${series.name}</b>')
                : (this.control.tooltip.header);
            this.formattedText = [];
            if (!isTooltip) {
                return this.createElement();
            }
            return null;
        };
        BaseTooltip.prototype.createElement = function () {
            var tooltipDiv = document.createElement('div');
            tooltipDiv.id = this.element.id + '_tooltip';
            tooltipDiv.className = 'ejSVGTooltip';
            tooltipDiv.setAttribute('style', 'pointer-events:none; position:absolute;z-index: 1');
            return tooltipDiv;
        };
        BaseTooltip.prototype.pushData = function (data, isFirst, tooltipDiv, isChart) {
            Eif (data.series.enableTooltip) {
                if (isChart) {
                    this.currentPoints.push(data);
                }
                else {
                    this.currentPoints.push(data);
                }
                this.stopAnimation();
                if (tooltipDiv && !document.getElementById(tooltipDiv.id)) {
                    document.getElementById(this.element.id + '_Secondary_Element').appendChild(tooltipDiv);
                }
                return true;
            }
            return false;
        };
        BaseTooltip.prototype.removeHighlight = function (chart) {
            var item;
            var series;
            for (var i = 0, len = this.previousPoints.length; i < len; i++) {
                item = this.previousPoints[i];
                if (item.series.isRectSeries) {
                    if (item.series.visible) {
                        this.highlightPoint(item.series, item.point.index, false);
                    }
                    continue;
                }
                series = item.series;
                if (!series.marker.visible && item.series.type !== 'Scatter' && item.series.type !== 'Bubble') {
                    this.previousPoints.shift();
                    len -= 1;
                }
            }
        };
        BaseTooltip.prototype.highlightPoint = function (series, pointIndex, highlight) {
            var element = this.getElement(this.element.id + '_Series_' + series.index + '_Point_' + pointIndex);
            Eif (element) {
                element.setAttribute('opacity', (highlight ? series.opacity / 2 : series.opacity).toString());
            }
        };
        BaseTooltip.prototype.highlightPoints = function () {
            for (var _i = 0, _a = this.currentPoints; _i < _a.length; _i++) {
                var item = _a[_i];
                if (item.series.isRectSeries && item.series.category === 'Series') {
                    this.highlightPoint(item.series, item.point.index, true);
                }
            }
        };
        BaseTooltip.prototype.createTooltip = function (chart, isFirst, header, location, clipLocation, point, shapes, offset, bounds, extraPoints, templatePoint) {
            Iif (extraPoints === void 0) { extraPoints = null; }
            if (templatePoint === void 0) { templatePoint = null; }
            var series = this.currentPoints[0].series;
            var module = chart.tooltipModule || chart.accumulationTooltipModule;
            if (isFirst) {
                this.svgTooltip = new ej2_svg_base_1.Tooltip({
                    opacity: chart.tooltip.opacity,
                    header: header, content: this.text, fill: chart.tooltip.fill, border: chart.tooltip.border,
                    enableAnimation: chart.tooltip.enableAnimation, location: location, shared: chart.tooltip.shared,
                    shapes: shapes, clipBounds: this.chart.chartAreaType === 'PolarRadar' ? new helper_1.ChartLocation(0, 0) : clipLocation,
                    areaBounds: bounds, palette: this.findPalette(), template: chart.tooltip.template, data: templatePoint,
                    theme: chart.theme, offset: offset, textStyle: chart.tooltip.textStyle,
                    isNegative: (series.isRectSeries && series.type !== 'Waterfall' && point && point.y < 0),
                    inverted: this.chart.requireInvertedAxis && series.isRectSeries,
                    arrowPadding: this.text.length > 1 ? 0 : 12,
                    tooltipRender: function () {
                        module.removeHighlight(module.control);
                        module.highlightPoints();
                        module.updatePreviousPoint(extraPoints);
                    },
                    animationComplete: function (args) {
                        if (args.tooltip.fadeOuted) {
                            module.fadeOut(module.previousPoints, chart);
                        }
                    }
                }, '#' + this.element.id + '_tooltip');
            }
            else {
                this.svgTooltip.location = location;
                this.svgTooltip.content = this.text;
                this.svgTooltip.header = header;
                this.svgTooltip.offset = offset;
                this.svgTooltip.palette = this.findPalette();
                this.svgTooltip.shapes = shapes;
                this.svgTooltip.data = templatePoint;
                this.svgTooltip.template = chart.tooltip.template;
                this.svgTooltip.textStyle = chart.tooltip.textStyle;
                this.svgTooltip.isNegative = (series.isRectSeries && series.type !== 'Waterfall' && point && point.y < 0);
                this.svgTooltip.clipBounds = this.chart.chartAreaType === 'PolarRadar' ? new helper_1.ChartLocation(0, 0) : clipLocation;
                this.svgTooltip.arrowPadding = this.text.length > 1 ? 0 : 12;
                this.svgTooltip.dataBind();
            }
        };
        BaseTooltip.prototype.findPalette = function () {
            var colors = [];
            for (var _i = 0, _a = this.currentPoints; _i < _a.length; _i++) {
                var data = _a[_i];
                colors.push(this.findColor(data, data.series));
            }
            return colors;
        };
        BaseTooltip.prototype.findColor = function (data, series) {
            if (series.isRectSeries) {
                return data.point.color;
            }
            else {
                return (data.point.color && data.point.color !== '#ffffff' ? data.point.color
                    : data.point.interior) ||
                    series.marker.fill || series.interior;
            }
        };
        BaseTooltip.prototype.updatePreviousPoint = function (extraPoints) {
            if (extraPoints) {
                this.currentPoints = this.currentPoints.concat(extraPoints);
            }
            this.previousPoints = ej2_base_1.extend([], this.currentPoints, null, true);
        };
        BaseTooltip.prototype.fadeOut = function (data, chart) {
            var svgElement = this.getElement(this.element.id + '_tooltip_svg');
            var isTooltip = (svgElement && parseInt(svgElement.getAttribute('opacity'), 10) > 0);
            Eif (!isTooltip) {
                this.valueX = null;
                this.valueY = null;
                this.currentPoints = [];
                this.removeHighlight(chart);
                this.removeHighlightedMarker(data);
                this.svgTooltip = null;
                this.control.trigger('animationComplete', {});
            }
        };
        BaseTooltip.prototype.removeHighlightedMarker = function (data) {
            if (this.chart.markerRender) {
                for (var _i = 0, data_1 = data; _i < data_1.length; _i++) {
                    var item = data_1[_i];
                    helper_2.removeElement(this.element.id + '_Series_' + item.series.index +
                        '_Point_' + item.point.index + '_Trackball');
                }
                this.chart.markerRender.removeHighlightedMarker();
            }
            this.previousPoints = [];
        };
        BaseTooltip.prototype.triggerEvent = function (point, isFirst, textCollection, firstText) {
            Eif (firstText === void 0) { firstText = true; }
            var argsData = {
                cancel: false, name: constants_1.tooltipRender, text: textCollection,
                point: point.point, series: point.series, textStyle: this.textStyle
            };
            this.chart.trigger(constants_1.tooltipRender, argsData);
            if (!argsData.cancel) {
                if (point.series.type === 'BoxAndWhisker') {
                    this.removeText();
                    isFirst = true;
                }
                this.formattedText = this.formattedText.concat(argsData.text);
                this.text = this.formattedText;
            }
            return !argsData.cancel;
        };
        BaseTooltip.prototype.removeText = function () {
            this.textElements = [];
            var element = this.getElement(this.element.id + '_tooltip_group');
            if (element && element.childNodes.length > 0) {
                while (element.lastChild && element.childNodes.length !== 1) {
                    element.removeChild(element.lastChild);
                }
            }
        };
        BaseTooltip.prototype.stopAnimation = function () {
            helper_2.stopTimer(this.toolTipInterval);
        };
        BaseTooltip.prototype.removeTooltip = function (duration) {
            var _this = this;
            var tooltipElement = this.getElement(this.element.id + '_tooltip');
            this.stopAnimation();
            if (tooltipElement && this.previousPoints.length > 0) {
                this.toolTipInterval = setTimeout(function () {
                    Eif (_this.svgTooltip) {
                        _this.svgTooltip.fadeOut();
                    }
                }, duration);
            }
        };
        return BaseTooltip;
    }(get_data_1.ChartData));
    exports.BaseTooltip = BaseTooltip;
});