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

90.53% Statements 153/169
87.57% Branches 148/169
96.43% Functions 27/28
92.02% Lines 150/163
11 statements, 6 functions, 9 branches Ignored     
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 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276          1168× 1168× 1168× 1168× 1168× 1168×   2189×   797× 797×     797× 797× 797× 797× 529×   268×   529× 529× 529× 529× 529× 529× 529×   226× 226×     226× 204×     22×   226× 226× 191× 191×           226×       876× 876× 359× 359× 179× 179×   179×       540× 540× 540× 540× 506×   506×     501×               541× 753× 753× 361×       541× 541× 541× 541× 541×   541×       541× 424×                                                                   541× 541× 541×     69×       424×     117× 117× 117× 117× 117× 117× 117× 117× 117× 117× 117× 117× 117× 117× 117×   117× 117×     541×       541× 541× 753× 753×   541×   753× 143×     610×         541× 316×   541×                             336× 336× 336× 93× 265×       629×   64× 64× 64× 64× 34× 26× 25×              
/* istanbul ignore next */ 
var __extends = (this && this.__extends) || (function () {
    var extendStatics = function (d, b) {
        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 extendStatics(d, b);
    };
    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", "@syncfusion/ej2-svg-base"], function (require, exports, ej2_base_1, helper_1, helper_2, get_data_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;
            _this.template = chart.tooltip.template;
            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) ? '${point.x}' : '${series.name}')
                : (this.control.tooltip.header);
            this.formattedText = [];
            var tooltipDiv = document.getElementById(this.chart.element.id + '_tooltip');
            var isStockChart = this.chart.element.id.indexOf('stockChart') > -1;
            if (!isTooltip && !tooltipDiv || isStockChart) {
                return this.createElement();
            }
            return null;
        };
        BaseTooltip.prototype.createElement = function () {
            var tooltipDiv = document.createElement('div');
            tooltipDiv.id = this.element.id + '_tooltip';
            tooltipDiv.className = 'ejSVGTooltip';
            tooltipDiv.style.pointerEvents = 'none';
            tooltipDiv.style.position = 'absolute';
            tooltipDiv.style.zIndex = '1';
            return tooltipDiv;
        };
        BaseTooltip.prototype.pushData = function (data, isFirst, tooltipDiv, isChart, enable3D) {
            Eif (data.series.enableTooltip) {
                Iif (enable3D) {
                    this.currentPoints.push(data);
                }
                else if (isChart) {
                    this.currentPoints.push(data);
                }
                else {
                    this.currentPoints.push(data);
                }
                this.stopAnimation();
                if (tooltipDiv && !document.getElementById(tooltipDiv.id)) {
                    Eif (!this.chart.stockChart) {
                        document.getElementById(this.element.id + '_Secondary_Element').appendChild(tooltipDiv);
                    }
                    else {
                        document.getElementById(this.chart.stockChart.element.id + '_Secondary_Element').appendChild(tooltipDiv);
                    }
                }
                return true;
            }
            return false;
        };
        BaseTooltip.prototype.removeHighlight = function () {
            var item;
            for (var i = 0, len = this.previousPoints.length; i < len; i++) {
                item = this.previousPoints[i];
                if (item.series.isRectSeries) {
                    Eif (item.series.visible) {
                        this.highlightPoint(item.series, item.point.index, false);
                    }
                    continue;
                }
            }
        };
        BaseTooltip.prototype.highlightPoint = function (series, pointIndex, highlight) {
            var element = this.getElement(this.element.id + '_Series_' + series.index + '_Point_' + pointIndex);
            var selectionModule = this.control.accumulationSelectionModule;
            var isSelectedElement = selectionModule && selectionModule.selectedDataIndexes.length > 0 ? true : false;
            if (element) {
                Eif ((!isSelectedElement || isSelectedElement && element.getAttribute('class')
                    && element.getAttribute('class').indexOf('_ej2_chart_selection_series_') === -1)) {
                    if (this.chart.highlightColor !== '' && !ej2_base_1.isNullOrUndefined(this.chart.highlightColor)) {
                        element.setAttribute('fill', (highlight && this.chart.highlightColor !== 'transparent' ? this.chart.highlightColor : series.pointColorMapping !== '' ? (series.points[0]).color : series.points[pointIndex].color || series.interior));
                    }
                    else {
                        element.setAttribute('opacity', (highlight && this.chart.highlightColor !== 'transparent' ? series.opacity / 2 : series.opacity).toString());
                    }
                }
                else {
                    element.setAttribute('opacity', 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, location, clipLocation, point, shapes, offset, bounds, crosshairEnabled, extraPoints, templatePoint, customTemplate) {
            Iif (crosshairEnabled === void 0) { crosshairEnabled = false; }
            Iif (extraPoints === void 0) { extraPoints = null; }
            Iif (templatePoint === void 0) { templatePoint = null; }
            var series = this.currentPoints[0].series;
            var tooltipModule = chart.tooltipModule || chart.tooltip3DModule ||
                chart.accumulationTooltipModule;
            Iif (!tooltipModule || location === null) {
                helper_2.removeElement(this.chart.element.id + '_tooltip');
                return;
            }
            if (isFirst) {
                this.svgTooltip = new ej2_svg_base_1.Tooltip({
                    opacity: chart.tooltip.opacity ? chart.tooltip.opacity : ((this.chart.theme === 'Material3' || this.chart.theme === 'Material3Dark' || this.chart.theme.indexOf('Bootstrap5') > -1) ? 1 : 0.75),
                    header: this.headerText,
                    content: this.text,
                    fill: chart.tooltip.fill,
                    border: chart.tooltip.border,
                    enableAnimation: chart.tooltip.enableAnimation,
                    location: location,
                    shared: this.control.tooltip.shared,
                    crosshair: crosshairEnabled,
                    shapes: shapes,
                    clipBounds: this.chart.chartAreaType === 'PolarRadar' ? new helper_1.ChartLocation(0, 0) : clipLocation,
                    areaBounds: bounds,
                    palette: this.findPalette(),
                    template: customTemplate || this.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 || this.chart.stockChart || (this.chart.tooltip.location.x !== null
                        || this.chart.tooltip.location.y !== null) ? 0 : 7,
                    availableSize: chart.availableSize,
                    duration: this.chart.tooltip.duration,
                    isCanvas: this.chart.enableCanvas,
                    isFixed: (this.chart.tooltip.location.x !== null || this.chart.tooltip.location.y !== null),
                    isTextWrap: chart.tooltip.enableTextWrap && chart.getModuleName() === 'chart',
                    blazorTemplate: { name: 'Template', parent: this.chart.tooltip },
                    controlInstance: this.chart,
                    enableRTL: chart.enableRtl,
                    controlName: 'Chart',
                    allowHighlight: chart.getModuleName() === 'chart' && !series.marker.allowHighlight,
                    tooltipRender: function () {
                        tooltipModule.removeHighlight();
                        tooltipModule.highlightPoints();
                        tooltipModule.updatePreviousPoint(extraPoints);
                    },
                    animationComplete: function (args) {
                        if (args.tooltip.fadeOuted) {
                            tooltipModule.fadeOut(tooltipModule.previousPoints);
                        }
                    }
                });
                this.svgTooltip.appendTo(this.getElement(this.element.id + '_tooltip'));
            }
            else {
                Eif (this.svgTooltip) {
                    this.svgTooltip.location = location;
                    this.svgTooltip.content = this.text;
                    this.svgTooltip.header = this.headerText;
                    this.svgTooltip.offset = offset;
                    this.svgTooltip.palette = this.findPalette();
                    this.svgTooltip.shapes = shapes;
                    this.svgTooltip.data = templatePoint;
                    this.svgTooltip.template = this.template;
                    this.svgTooltip.controlName = 'Chart';
                    this.svgTooltip.crosshair = crosshairEnabled;
                    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 || this.chart.stockChart || (this.chart.tooltip.location.x !== null
                        || this.chart.tooltip.location.y !== null) ? 0 : 7;
                    this.svgTooltip.allowHighlight = chart.getModuleName() === 'chart' && !series.marker.allowHighlight;
                    this.svgTooltip.dataBind();
                }
            }
            Iif (this.chart.isReact) {
                this.chart.renderReactTemplates();
            }
        };
        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 && (series.type === 'Candle' || series.type === 'Hilo' || series.type === 'HiloOpenClose')) {
                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) {
            var svgElement = this.chart.enableCanvas ? this.getElement(this.element.id + '_tooltip_group') :
                this.getElement(this.element.id + '_tooltip_svg');
            var isTooltip = (svgElement && parseInt(svgElement.getAttribute('opacity'), 10) > 0);
            if (!isTooltip) {
                this.valueX = null;
                this.valueY = null;
                this.currentPoints = [];
                this.removeHighlight();
                this.removeHighlightedMarker(data, true);
                this.svgTooltip = null;
                this.control.trigger('animationComplete', {});
            }
        };
        BaseTooltip.prototype.removeHighlightedMarker = function (data, fadeOut) {
            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(item.series, item.point, fadeOut);
                }
            }
            this.previousPoints = [];
        };
        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 () {
                    if (_this.svgTooltip) {
                        _this.svgTooltip.fadeOut();
                    }
                }, duration);
            }
        };
        return BaseTooltip;
    }(get_data_1.ChartData));
    exports.BaseTooltip = BaseTooltip;
});