all files / stock-chart/renderer/ toolbar-selector.js

94.78% Statements 254/268
80.54% Branches 120/149
100% Functions 22/22
94.72% Lines 251/265
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 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362 363 364 365 366 367 368 369 370 371 372 373 374 375 376 377 378 379 380 381 382 383 384 385 386 387 388 389 390 391 392 393 394 395 396 397 398 399 400 401 402 403 404 405 406 407 408 409 410 411 412 413 414 415 416 417 418 419 420 421 422 423 424 425 426 427 428 429 430 431 432 433 434 435 436 437 438   110× 110× 110× 110× 110× 110×   110× 110× 110× 110× 110× 110× 110× 110× 21×   110× 110× 16×   110×   257× 257× 21× 126×   21× 21× 126× 126× 126× 21×         236× 110× 1100×   110× 160× 1600× 1600× 1600× 1600× 160× 160×         126× 110× 770×       16× 96× 96×       257×               21× 21×   21×   21×               21×   16× 16×                                               16×   110× 110×         12× 12×       12×   12× 12× 12× 12× 12×   12×                     110×   10× 10×                               10×           21×                                             24×     24×             110× 110×                           110×                                                                                    
define(["require", "exports", "../../common/utils/helper", "@syncfusion/ej2-splitbuttons", "@syncfusion/ej2-svg-base", "@syncfusion/ej2-base"], function (require, exports, helper_1, ej2_splitbuttons_1, ej2_svg_base_1, ej2_base_1) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    var ToolBarSelector = (function () {
        function ToolBarSelector(chart) {
            this.selectedSeries = '';
            this.selectedIndicator = '';
            this.selectedTrendLine = '';
            this.indicators = [];
            this.stockChart = chart;
            this.selectedSeries = this.stockChart.series[0].type;
        }
        ToolBarSelector.prototype.initializePeriodSelector = function () {
            var periods = this.stockChart.tempPeriods;
            this.stockChart.periods = periods;
            this.stockChart.periodSelector.rootControl = this.stockChart;
            var rect = this.stockChart.chart.chartAxisLayoutPanel.seriesClipRect;
            var htmlElement = helper_1.getElement(this.stockChart.element.id + '_Secondary_Element');
            var height = this.stockChart.toolbarHeight;
            this.stockChart.periodSelector.appendSelector({ thumbSize: 0, element: htmlElement, width: rect.width, height: height }, rect.x);
            if (this.stockChart.seriesType.length > 0) {
                this.initializeSeriesSelector();
            }
            this.initializeIndicatorSelector();
            if (this.stockChart.trendlineType.length > 0) {
                this.initializeTrendlineSelector();
            }
            this.exportButton();
        };
        ToolBarSelector.prototype.getDropDownItems = function (type) {
            var result = [];
            if (type === this.stockChart.seriesType) {
                for (var i = 0; i < type.length; i++) {
                    result.push({ text: '&nbsp;&nbsp;&nbsp;' + type[i].toString() });
                }
                for (var i = 0; i < this.stockChart.series.length; i++) {
                    for (var j = 0; j < result.length; j++) {
                        var text = result[j].text.replace('&nbsp;&nbsp;&nbsp;', '');
                        text = (text === 'OHLC') ? 'HiloOpenClose' : text;
                        if (text === this.stockChart.series[i].type) {
                            result[j].text = result[j].text.replace('&nbsp;&nbsp;&nbsp;', '&#10004&nbsp;');
                        }
                    }
                }
            }
            else if (type === this.stockChart.indicatorType) {
                for (var i = 0; i < type.length; i++) {
                    result.push({ text: '&nbsp;&nbsp;&nbsp;' + type[i].toString() });
                }
                for (var i = 0; i < this.stockChart.indicators.length; i++) {
                    for (var j = 0; j < result.length; j++) {
                        var text = result[j].text.replace('&nbsp;&nbsp;&nbsp;', '');
                        text = text.toLowerCase().replace(/(^\w|_\w)/g, function (match) { return match.toUpperCase(); }).replace(/_/g, '');
                        text = text === 'Accumulation distribution' ? 'AccumulationDistribution' : text === 'Bollinger bands' ? 'BollingerBands' : text;
                        if (text === this.stockChart.indicators[i].type) {
                            result[j].text = result[j].text.replace('&nbsp;&nbsp;&nbsp;', '&#10004&nbsp;');
                            this.indicators.push(text);
                        }
                    }
                }
            }
            else if (type === this.stockChart.exportType) {
                for (var i = 0; i < type.length; i++) {
                    result.push({ text: type[i].toString() });
                }
            }
            else {
                for (var i = 0; i < type.length; i++) {
                    Eif (type[i].toString() !== 'Print') {
                        result.push({ text: '&nbsp;&nbsp;&nbsp;' + type[i].toString() });
                    }
                }
            }
            return result;
        };
        ToolBarSelector.prototype.addedSeries = function (seriesType) {
            var series = this.stockChart.series;
            for (var i = 0; i < series.length; i++) {
                Iif (series[i].yName === 'volume') {
                    continue;
                }
                series[i].type = (seriesType.indexOf('Candle') > -1 ? 'Candle' :
                    (seriesType.indexOf('OHLC') > -1 ? 'HiloOpenClose' : seriesType));
                series[i].enableSolidCandles = seriesType === 'Candle';
                for (var index = 0; index < series[i].trendlines.length; index++) {
                    var trendLine = series[i].trendlines[index];
                    trendLine.animation.enable = false;
                    trendLine.enableTooltip = false;
                }
            }
        };
        ToolBarSelector.prototype.initializeSeriesSelector = function () {
            var _this = this;
            if (this.stockChart.seriesType.indexOf('HiloOpenClose') > -1) {
                this.stockChart.seriesType[this.stockChart.seriesType.indexOf('HiloOpenClose')] = 'OHLC';
            }
            if (this.stockChart.seriesType.indexOf('Candle') > -1 && this.stockChart.seriesType.indexOf('Hollow Candle') === -1) {
                this.stockChart.seriesType[this.stockChart.seriesType.length] = 'Hollow Candle';
            }
            var seriesType = new ej2_splitbuttons_1.DropDownButton({
                enableHtmlSanitizer: false,
                items: this.getDropDownItems(this.stockChart.seriesType),
                select: function (args) {
                    _this.selectedSeries = args.item.text;
                    var text = _this.tickMark(args);
                    _this.addedSeries(text);
                    _this.stockChart.cartesianChart.initializeChart();
                    if (_this.stockChart.stockLegendModule && _this.stockChart.stockLegendModule.legendCollections.length
                        && _this.stockChart.legendSettings.visible) {
                        var bounds = _this.stockChart.stockLegendModule.legendBounds;
                        _this.stockChart.stockLegendModule.renderLegend(_this.stockChart, _this.stockChart.legendSettings, bounds);
                    }
                }
            });
            seriesType.appendTo('#' + this.stockChart.element.id + '_seriesType');
        };
        ToolBarSelector.prototype.initializeTrendlineSelector = function () {
            var _this = this;
            this.trendlineDropDown = new ej2_splitbuttons_1.DropDownButton({
                enableHtmlSanitizer: false,
                items: this.stockChart.resizeTo ? this.trendlineDropDown.items :
                    this.getDropDownItems(this.stockChart.trendlineType),
                select: function (args) {
                    var type = _this.tickMark(args);
                    _this.selectedTrendLine = _this.selectedTrendLine === '' ? type : _this.selectedTrendLine + ',' + type;
                    Eif (_this.trendline !== type) {
                        _this.trendline = type;
                        for (var i = 0; i < _this.stockChart.series.length; i++) {
                            Iif (_this.stockChart.series[i].yName === 'volume') {
                                continue;
                            }
                            Eif (_this.stockChart.series[0].trendlines.length === 0) {
                                var trendlines = void 0;
                                Eif (_this.stockChart.trendlinetriggered) {
                                    trendlines = [{ type: type, width: 1, enableTooltip: false }];
                                    _this.stockChart.trendlinetriggered = false;
                                }
                                _this.stockChart.series[0].trendlines = trendlines;
                            }
                            else {
                                _this.stockChart.series[0].trendlines[0].width = 1;
                                _this.stockChart.series[0].trendlines[0].type = type;
                                _this.stockChart.series[0].trendlines[0].animation.enable = _this.stockChart.trendlinetriggered ? true : false;
                            }
                        }
                        _this.stockChart.cartesianChart.initializeChart();
                    }
                    else {
                        args.item.text = '&nbsp;&nbsp;&nbsp;' + args.item.text.replace('&#10004&nbsp;', '');
                        _this.stockChart.series[0].trendlines[0].width = 0;
                        _this.trendline = null;
                        _this.stockChart.cartesianChart.initializeChart();
                    }
                }
            });
            this.trendlineDropDown.appendTo('#' + this.stockChart.element.id + '_trendType');
        };
        ToolBarSelector.prototype.initializeIndicatorSelector = function () {
            var _this = this;
            this.indicatorDropDown = new ej2_splitbuttons_1.DropDownButton({
                enableHtmlSanitizer: false,
                items: this.stockChart.resizeTo ? this.indicatorDropDown.items :
                    this.getDropDownItems(this.stockChart.indicatorType),
                select: function (args) {
                    for (var l = 0; l < _this.stockChart.series.length; l++) {
                        Iif (_this.stockChart.series[l].trendlines.length !== 0) {
                            _this.stockChart.series[l].trendlines[0].animation.enable = false;
                        }
                    }
                    args.item.text = args.item.text.indexOf('&#10004&nbsp;') >= 0 ? args.item.text.substr(args.item.text.indexOf(';') + 1) :
                        args.item.text;
                    var text = args.item.text.replace('&nbsp;&nbsp;&nbsp;', '');
                    text = text.split(' ')[0].toLocaleLowerCase() + (text.split(' ')[1] ? text.split(' ')[1] : '');
                    text = text.substr(0, 1).toUpperCase() + text.substr(1);
                    var type = text;
                    _this.selectedIndicator = _this.selectedIndicator.indexOf(type) === -1 ? _this.selectedIndicator + ' ' + type :
                        _this.selectedIndicator.replace(type, '');
                    if (type === 'Tma' || type === 'BollingerBands' || type === 'Sma' || type === 'Ema') {
                        if (_this.indicators.indexOf(type) === -1) {
                            args.item.text = '&#10004&nbsp;' + args.item.text.replace('&nbsp;&nbsp;&nbsp;', '');
                            var indicator = _this.getIndicator(type, _this.stockChart.series[0].yAxisName);
                            _this.indicators.push(type);
                            _this.stockChart.indicators = _this.stockChart.indicators.concat(indicator);
                            _this.stockChart.cartesianChart.initializeChart();
                        }
                        else {
                            args.item.text = '&nbsp;&nbsp;&nbsp;' + args.item.text;
                            for (var z = 0; z < _this.stockChart.indicators.length; z++) {
                                if (_this.stockChart.indicators[z].type === type) {
                                    _this.stockChart.indicators.splice(z, 1);
                                }
                            }
                            _this.indicators.splice(_this.indicators.indexOf(type), 1);
                            _this.stockChart.cartesianChart.initializeChart();
                        }
                    }
                    else {
                        _this.createIndicatorAxes(type, args);
                    }
                }
            });
            this.indicatorDropDown.appendTo('#' + this.stockChart.element.id + '_indicatorType');
        };
        ToolBarSelector.prototype.getIndicator = function (type, yAxisName) {
            var currentSeries = this.stockChart.series[0];
            var indicator = [{
                    type: type, period: 3, yAxisName: yAxisName,
                    dataSource: currentSeries.localData,
                    xName: currentSeries.xName,
                    open: currentSeries.open,
                    close: currentSeries.close,
                    high: currentSeries.high,
                    low: currentSeries.low,
                    volume: currentSeries.volume,
                    fill: type === 'Sma' ? '#32CD32' : '#6063ff',
                    animation: { enable: false }, upperLine: { color: '#FFE200', width: 1 },
                    periodLine: { width: 2 }, lowerLine: { color: '#FAA512', width: 1 },
                    fastPeriod: 8, slowPeriod: 5, macdType: 'Both', width: 1,
                    macdPositiveColor: '#6EC992', macdNegativeColor: '#FF817F',
                    bandColor: 'rgba(245, 203, 35, 0.12)'
                }];
            return indicator;
        };
        ToolBarSelector.prototype.createIndicatorAxes = function (type, args) {
            if (this.indicators.indexOf(type) === -1) {
                args.item.text = '&#10004&nbsp;' + args.item.text.replace('&nbsp;&nbsp;&nbsp;', '');
                this.indicators.push(type);
                var len = this.stockChart.rows.length;
                this.stockChart.rows[this.stockChart.rows.length - 1].height = '15%';
                var row = [{ height: '' + (100 - len * 15) + 'px' }];
                if (this.stockChart.rows.length === 1) {
                    this.stockChart.isSingleAxis = true;
                }
                this.stockChart.rows = this.stockChart.rows.concat(row);
                Iif (!this.stockChart.isSingleAxis) {
                    this.stockChart.axes[0].rowIndex += 1;
                }
                else {
                    for (var i = 0; i < this.stockChart.axes.length; i++) {
                        this.stockChart.axes[i].rowIndex += 1;
                    }
                }
                var axis = [{
                        plotOffset: 10, opposedPosition: true,
                        rowIndex: (!this.stockChart.isSingleAxis ? this.stockChart.axes.length : 0),
                        desiredIntervals: 1,
                        labelFormat: 'n2',
                        majorGridLines: this.stockChart.primaryYAxis.majorGridLines,
                        lineStyle: this.stockChart.primaryYAxis.lineStyle,
                        labelPosition: this.stockChart.primaryYAxis.labelPosition,
                        majorTickLines: this.stockChart.primaryYAxis.majorTickLines,
                        rangePadding: 'None', name: type.toString()
                    }];
                this.stockChart.axes = this.stockChart.axes.concat(axis);
                this.stockChart.primaryYAxis.rowIndex = (!this.stockChart.isSingleAxis ? 0 : len + 1);
                var indicator = this.getIndicator(type, type.toString());
                this.stockChart.indicators = this.stockChart.indicators.concat(indicator);
                this.stockChart.cartesianChart.initializeChart();
            }
            else {
                args.item.text = '&nbsp;&nbsp;&nbsp;' + args.item.text;
                for (var i = 0; i < this.stockChart.indicators.length; i++) {
                    if (this.stockChart.indicators[i].type === type) {
                        this.stockChart.indicators.splice(i, 1);
                    }
                }
                this.indicators.splice(this.indicators.indexOf(type), 1);
                var removedIndex = 0;
                for (var z = 0; z < this.stockChart.axes.length; z++) {
                    if (this.stockChart.axes[z].name === type) {
                        removedIndex = this.stockChart.axes[z].rowIndex;
                        this.stockChart.rows.splice(z, 1);
                        this.stockChart.axes.splice(z, 1);
                    }
                }
                for (var z = 0; z < this.stockChart.axes.length; z++) {
                    if (this.stockChart.axes[z].rowIndex !== 0 && this.stockChart.axes[z].rowIndex > removedIndex) {
                        this.stockChart.axes[z].rowIndex = this.stockChart.axes[z].rowIndex - 1;
                    }
                }
                this.stockChart.cartesianChart.initializeChart();
            }
        };
        ToolBarSelector.prototype.tickMark = function (args) {
            var text;
            var items = args.item['parentObj'].items;
            for (var i = 0; i < items.length; i++) {
                items[i].text = items[i].text.indexOf('&#10004&nbsp;') >= 0 ?
                    items[i].text.substr(items[i].text.indexOf(';') + 1) :
                    items[i].text;
                if (!(items[i].text.indexOf('&nbsp;&nbsp;&nbsp;') >= 0)) {
                    items[i].text = '&nbsp;&nbsp;&nbsp;' + items[i].text;
                }
            }
            if (args.item.text.indexOf('&nbsp;&nbsp;&nbsp;') >= 0) {
                text = args.item.text.replace('&nbsp;&nbsp;&nbsp;', '');
                args.item.text = args.item.text.replace('&nbsp;&nbsp;&nbsp;', '&#10004&nbsp;');
            }
            else {
                text = args.item.text.replace('&#10004&nbsp;', '');
            }
            return text;
        };
        ToolBarSelector.prototype.exportButton = function () {
            var _this = this;
            var exportChart = new ej2_splitbuttons_1.DropDownButton({
                enableHtmlSanitizer: false,
                items: this.getDropDownItems(this.stockChart.exportType),
                select: function (args) {
                    var type = args.item.text;
                    Eif (_this.stockChart.chart.exportModule) {
                        var stockChart = _this.stockChart;
                        var stockID = stockChart.element.id + '_stockChart_';
                        var svgHeight = stockChart.svgObject.getBoundingClientRect();
                        _this.stockChart.svgObject.insertAdjacentElement('afterbegin', _this.addExportSettings(type === 'Print'));
                        var additionalRect = stockChart.svgObject.firstElementChild.getBoundingClientRect();
                        var rect = new helper_1.RectOption('additionalRect', 'transparent', { width: 0, color: 'transparent' }, 1, new ej2_svg_base_1.Rect(0, 0, _this.stockChart.availableSize.width, additionalRect.height));
                        stockChart.svgObject.firstElementChild.insertAdjacentElement('afterbegin', _this.stockChart.renderer.drawRectangle(rect));
                        _this.stockChart.svgObject.setAttribute('height', (svgHeight.height + additionalRect.height).toString());
                        helper_1.getElement(stockID + 'chart').style.transform = 'translateY(' + additionalRect.height + 'px)';
                        Eif (stockChart.enableSelector) {
                            helper_1.getElement(stockID + 'rangeSelector').setAttribute('transform', 'translate(' + 0 + ',' + (stockChart.cartesianChart.cartesianChartSize.height + additionalRect.height) + ')');
                        }
                        Eif (_this.stockChart.legendSettings.visible && _this.stockChart.stockLegendModule) {
                            helper_1.getElement(stockChart.element.id + '_chart_legend_g').style.transform = 'translateY(' + additionalRect.height + 'px)';
                        }
                        if (type === 'Print') {
                            _this.stockChart.chart.print(_this.stockChart.svgObject.id);
                        }
                        else {
                            stockChart.chart.exportModule.export(type, 'StockChart', null, [stockChart], null, stockChart.svgObject.clientHeight);
                        }
                        ej2_base_1.remove(helper_1.getElement(_this.stockChart.element.id + '_additionalExport'));
                        helper_1.getElement(stockID + 'chart').style.transform = '';
                        Eif (stockChart.enableSelector) {
                            helper_1.getElement(stockID + 'rangeSelector').setAttribute('transform', 'translate(' + 0 + ',' + (stockChart.cartesianChart.cartesianChartSize.height) + ')');
                        }
                        Eif (_this.stockChart.legendSettings.visible && _this.stockChart.stockLegendModule) {
                            helper_1.getElement(stockChart.element.id + '_chart_legend_g').style.transform = 'translateY(0px)';
                        }
                        _this.stockChart.svgObject.setAttribute('height', (svgHeight.height).toString());
                    }
                }
            });
            exportChart.appendTo('#' + this.stockChart.element.id + '_export');
        };
        ToolBarSelector.prototype.calculateAutoPeriods = function () {
            var defaultPeriods = [];
            var min = this.stockChart.isDateTimeCategory ? this.stockChart.sortedData[this.stockChart.seriesXMin] :
                this.stockChart.seriesXMin;
            var max = this.stockChart.isDateTimeCategory ? this.stockChart.sortedData[this.stockChart.seriesXMax] :
                this.stockChart.seriesXMax;
            defaultPeriods = this.findRange(min, max);
            defaultPeriods.push({ text: 'YTD', selected: true }, { text: 'All' });
            return defaultPeriods;
        };
        ToolBarSelector.prototype.findRange = function (min, max) {
            var defaultPeriods = [];
            if (((max - min) / 3.154e+10) >= 1) {
                defaultPeriods.push({ text: '1M', interval: 1, intervalType: 'Months' }, { text: '3M', interval: 3, intervalType: 'Months' }, { text: '6M', interval: 6, intervalType: 'Months' }, { text: '1Y', interval: 1, intervalType: 'Years' });
            }
            else if ((max - min) / 1.577e+10 >= 1) {
                defaultPeriods.push({ text: '1M', interval: 1, intervalType: 'Months' }, { text: '3M', interval: 3, intervalType: 'Months' }, { text: '6M', interval: 6, intervalType: 'Months' });
            }
            else if ((max - min) / 2.628e+9 >= 1) {
                defaultPeriods.push({ text: '1D', interval: 1, intervalType: 'Days' }, { text: '3W', interval: 3, intervalType: 'Weeks' }, { text: '1M', interval: 1, intervalType: 'Months' });
            }
            else if ((max - min) / 8.64e+7 >= 1) {
                defaultPeriods.push({ text: '1H', interval: 1, intervalType: 'Hours' }, { text: '12H', interval: 12, intervalType: 'Hours' }, { text: '1D', interval: 1, intervalType: 'Days' });
            }
            return defaultPeriods;
        };
        ToolBarSelector.prototype.addExportSettings = function (isPrint) {
            var exportElement = this.stockChart.renderer.createGroup({
                id: this.stockChart.element.id + '_additionalExport',
                width: this.stockChart.availableSize.width,
                fill: this.stockChart.background ? this.stockChart.background : 'transparent'
            });
            var titleHeight = ej2_svg_base_1.measureText(this.stockChart.title, this.stockChart.titleStyle, this.stockChart.themeStyle.chartTitleFont).height;
            var options = new ej2_svg_base_1.TextOption(exportElement.id + '_Title', helper_1.titlePositionX(new ej2_svg_base_1.Rect(0, 0, this.stockChart.availableSize.width, 0), this.stockChart.titleStyle), 0, 'middle', this.stockChart.title, '', 'text-before-edge');
            helper_1.textElement(this.stockChart.renderer, options, this.stockChart.titleStyle, this.stockChart.titleStyle.color || this.stockChart.themeStyle.chartTitleFont.color, exportElement, null, null, null, null, null, null, null, null, null, null, this.stockChart.themeStyle.chartTitleFont);
            if (isPrint) {
                return exportElement;
            }
            var style = { size: '16px', fontWeight: '600', color: this.stockChart.themeStyle.chartTitleFont.color, fontStyle: 'Normal', fontFamily: this.stockChart.themeStyle.chartTitleFont.fontFamily };
            var x = ej2_svg_base_1.measureText('Series: ' + this.selectedSeries, style).width / 2;
            var y = titleHeight;
            this.textElementSpan(new ej2_svg_base_1.TextOption(exportElement.id + '_Series', x, y, 'start', ['Series : ', this.selectedSeries], '', 'text-before-edge'), style, this.stockChart.themeStyle.chartTitleFont.color, exportElement);
            x += ej2_svg_base_1.measureText('Series: ' + this.selectedSeries + ' Z', style).width;
            Iif (this.selectedIndicator !== '') {
                this.textElementSpan(new ej2_svg_base_1.TextOption(exportElement.id + '_Indicator', x, y, 'start', ['Indicator :', this.selectedIndicator], '', 'text-before-edge'), style, this.stockChart.themeStyle.chartTitleFont.color, exportElement);
                x += ej2_svg_base_1.measureText('Indicator: ' + this.selectedIndicator + ' Z', style).width;
            }
            Iif (this.selectedTrendLine !== '') {
                this.textElementSpan(new ej2_svg_base_1.TextOption(exportElement.id + '_TrendLine', x, y, 'start', ['Trendline :', this.selectedTrendLine], '', 'text-before-edge'), style, this.stockChart.themeStyle.chartTitleFont.color, exportElement);
            }
            return exportElement;
        };
        ToolBarSelector.prototype.textElementSpan = function (options, font, color, parent, isMinus, redraw, isAnimate, forceAnimate, animateDuration) {
            Eif (isMinus === void 0) { isMinus = false; }
            Eif (forceAnimate === void 0) { forceAnimate = false; }
            var renderer = new ej2_svg_base_1.SvgRenderer('');
            var renderOptions = {};
            var tspanElement;
            renderOptions = {
                'id': options.id,
                'font-style': font.fontStyle,
                'font-family': font.fontFamily,
                'font-weight': font.fontWeight,
                'text-anchor': options.anchor,
                'x': options.x,
                'y': options.y,
                'fill': color,
                'font-size': font.size,
                'transform': options.transform,
                'opacity': font.opacity,
                'dominant-baseline': options.baseLine
            };
            var text = typeof options.text === 'string' ? options.text : isMinus ? options.text[options.text.length - 1] : options.text[0];
            var htmlObject = renderer.createText(renderOptions, text);
            Eif (typeof options.text !== 'string' && options.text.length > 1) {
                for (var i = 1, len = options.text.length; i < len; i++) {
                    options.text[i] = ' ' + options.text[i];
                    tspanElement = renderer.createTSpan({
                        'x': options.x + ej2_svg_base_1.measureText(text, font).width + 5, 'id': options.id,
                        'y': (options.y), opacity: 0.5
                    }, options.text[i]);
                    htmlObject.appendChild(tspanElement);
                }
            }
            helper_1.appendChildElement(false, parent, htmlObject, redraw, isAnimate, 'x', 'y', null, null, forceAnimate, false, null, animateDuration);
            return htmlObject;
        };
        return ToolBarSelector;
    }());
    exports.ToolBarSelector = ToolBarSelector;
});