all files / chart/legend/ legend.js

91.71% Statements 354/386
85.43% Branches 305/357
94.12% Functions 32/34
91.6% Lines 349/381
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 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 439 440 441 442 443 444 445 446 447 448 449 450 451 452 453 454 455 456 457 458 459 460 461 462 463 464 465 466 467 468 469 470 471 472 473 474 475 476 477 478 479 480 481 482 483 484 485 486 487 488 489 490 491 492 493 494 495 496 497 498 499 500 501 502 503 504 505 506 507 508 509 510 511 512 513 514 515 516 517 518 519 520 521 522 523 524 525 526 527 528 529 530 531 532 533 534 535 536 537 538 539 540 541 542 543 544 545 546 547 548 549 550 551 552 553 554 555 556 557 558 559 560          1812× 1812× 1812× 1812×   1812×     1812× 1812× 1812×   1812× 193×   1619× 1619× 1619×   709× 656× 656× 42×   42× 42× 42× 157× 157×           163× 21×     2482× 2482× 2482× 2482× 2482× 2482× 2482× 2482× 1506×   2482× 5112× 5112× 5082× 4484×   4484× 4484×   4484×         30× 38× 38×   38× 38×       25× 21× 228× 228×   228× 228× 228× 57× 57× 57× 155× 155× 55×     57×                   2482×     2485× 2485× 2485× 2485× 2485× 2485× 2485× 2485× 2485× 2485× 2485× 2485× 2485× 2485× 2485× 2485× 2485× 2403×     82×   2485× 2485× 2485× 2485× 2485× 2485× 2485× 2485× 2485× 2485× 2485× 2485× 2485× 2485× 2485× 4590× 4590×     4590×     4590×       4590× 4590× 4590× 4590× 4590× 4590× 4590× 4590× 4590× 4590× 4462× 4462×   4462× 4462× 54× 54×   4462× 4462× 338× 338× 45×   338× 338× 338× 338×   4462× 4462×   4462×     4462×     2485× 2485× 2485× 2485× 16×     2485× 2485× 2384×   2485× 2469×     16×     4462× 4462× 4462×     36× 30×         36× 36×     4496× 4496×   4496× 4496×   1668× 1668× 239×   1668×         2828× 2828×   4496×     4496× 54×   4496× 4496× 4460×     4496× 4438×     58×     329× 329× 329× 329× 329× 329× 329× 325×       325× 325× 325× 325× 47×   325× 319× 319×               317×   319×   319× 319×           325×               16× 16×                   323× 323×   323× 47× 470×   47×   323× 323× 323× 323× 323× 323× 323× 323× 323× 323× 323× 323× 770× 770× 770×     323× 323× 323×       323×     323× 323×   317× 317× 67×   317× 68×   317×       634×   323× 47×   276×     323× 770× 770× 10× 10× 10×   770× 568×       466× 466×     466× 466× 466× 466×   466×   466× 466× 750× 750× 329× 329× 329×     466×   462×   466×   466× 20×     466×                                                                                     41538×   1812×        
/* 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/legend/legend", "../../common/utils/helper", "../../common/utils/helper", "@syncfusion/ej2-svg-base", "../../common/model/constants", "../../common/utils/helper"], function (require, exports, ej2_base_1, legend_1, helper_1, helper_2, ej2_svg_base_1, constants_1, helper_3) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    var Legend = (function (_super) {
        __extends(Legend, _super);
        function Legend(chart) {
            var _this = _super.call(this, chart) || this;
            _this.library = _this;
            _this.addEventListener();
            return _this;
        }
        Legend.prototype.addEventListener = function () {
            Iif (this.chart.isDestroyed) {
                return;
            }
            this.chart.on(ej2_base_1.Browser.touchMoveEvent, this.mouseMove, this);
            this.chart.on('click', this.click, this);
            this.chart.on(ej2_base_1.Browser.touchEndEvent, this.mouseEnd, this);
        };
        Legend.prototype.removeEventListener = function () {
            if (this.chart.isDestroyed) {
                return;
            }
            this.chart.off(ej2_base_1.Browser.touchMoveEvent, this.mouseMove);
            this.chart.off('click', this.click);
            this.chart.off(ej2_base_1.Browser.touchEndEvent, this.mouseEnd);
        };
        Legend.prototype.mouseMove = function (e) {
            if (this.chart.legendSettings.visible && !this.chart.isTouch) {
                this.move(e);
                if (this.chart.highlightModule && (this.chart.highlightMode !== 'None' || this.chart.legendSettings.enableHighlight)) {
                    var legendItemsId = [this.legendID + '_text_', this.legendID + '_shape_marker_',
                        this.legendID + '_shape_', this.legendID + '_g_'];
                    var targetId = e.target.id;
                    var index = void 0;
                    for (var _i = 0, legendItemsId_1 = legendItemsId; _i < legendItemsId_1.length; _i++) {
                        var id = legendItemsId_1[_i];
                        if (targetId.indexOf(id) > -1) {
                            index = parseInt(targetId.split(id)[1], 10);
                            this.chart.highlightModule.legendSelection(this.chart, index, e.target, e.type);
                            break;
                        }
                    }
                }
            }
        };
        Legend.prototype.mouseEnd = function (e) {
            if (this.chart.legendSettings.visible && this.chart.isTouch) {
                this.move(e);
            }
        };
        Legend.prototype.getLegendOptions = function (visibleSeriesCollection, chart) {
            this.legendCollections = [];
            var seriesType;
            var fill;
            var dashArray;
            var colors = [];
            this.isRtlEnable = chart.enableRtl;
            this.isReverse = !this.isRtlEnable && chart.legendSettings.reverse;
            if (visibleSeriesCollection.length > 1) {
                this.legend.mode = 'Series';
            }
            for (var _i = 0, visibleSeriesCollection_1 = visibleSeriesCollection; _i < visibleSeriesCollection_1.length; _i++) {
                var series = visibleSeriesCollection_1[_i];
                if (this.legend.mode === 'Series') {
                    if (series.category !== 'Indicator') {
                        seriesType = (chart.chartAreaType === 'PolarRadar') ? series.drawType :
                            series.type;
                        dashArray = !series.marker.visible && (seriesType.indexOf('Line') > -1 && seriesType.indexOf('Area') === -1) ? series.dashArray : '';
                        fill = (series.pointColorMapping && series.points.length > 0) ?
                            (series.points[0].interior ? series.points[0].interior : series.interior) : series.interior;
                        this.legendCollections.push(new legend_1.LegendOptions(series.name, fill, series.legendShape, (series.category === 'TrendLine' ?
                            this.chart.series[series.sourceIndex].trendlines[series.index].visible : series.visible), seriesType, series.legendImageUrl ? series.legendImageUrl : (series.type === 'Scatter' && series.marker.shape === 'Image' ?
                            series.marker.imageUrl : ''), series.marker.shape, series.marker.visible, null, null, dashArray));
                    }
                }
                else if (this.legend.mode === 'Point') {
                    for (var _a = 0, _b = series.points; _a < _b.length; _a++) {
                        var points = _b[_a];
                        seriesType = (chart.chartAreaType === 'PolarRadar') ? series.drawType :
                            series.type;
                        fill = points.interior ? points.interior : series.interior;
                        this.legendCollections.push(new legend_1.LegendOptions(points.x.toString(), fill, series.legendShape, (series.category === 'TrendLine' ?
                            this.chart.series[series.sourceIndex].trendlines[series.index].visible : points.visible), seriesType, (series.type === 'Scatter' && series.marker.shape === 'Image') ? series.marker.imageUrl : '', series.marker.shape, series.marker.visible));
                    }
                }
                else if (this.legend.mode === 'Range') {
                    for (var _c = 0, _d = series.points; _c < _d.length; _c++) {
                        var points = _d[_c];
                        seriesType = (chart.chartAreaType === 'PolarRadar') ? series.drawType :
                            series.type;
                        fill = points.interior ? points.interior : series.interior;
                        var legendLabel = 'Others';
                        if (colors.indexOf(fill) < 0) {
                            colors.push(fill);
                            Eif (chart.rangeColorSettings.length >= 1 && chart.rangeColorSettings[0].colors.length === 1) {
                                for (var _e = 0, _f = chart.rangeColorSettings; _e < _f.length; _e++) {
                                    var rangeMap = _f[_e];
                                    if (rangeMap.colors[0] === fill) {
                                        legendLabel = rangeMap.label;
                                    }
                                }
                                this.legendCollections.push(new legend_1.LegendOptions(legendLabel, fill, series.legendShape, (series.category === 'TrendLine' ?
                                    this.chart.series[series.sourceIndex].trendlines[series.index].visible : points.visible), seriesType, (series.type === 'Scatter' && series.marker.shape === 'Image') ? series.marker.imageUrl : '', series.marker.shape, series.marker.visible));
                            }
                        }
                    }
                }
                else {
                    Eif (this.legendCollections.length === 0 && chart.rangeColorSettings.length > 0) {
                        var startLabel = chart.rangeColorSettings[0].start.toString();
                        var endLabel = chart.rangeColorSettings[chart.rangeColorSettings.length - 1].end.toString();
                        this.legendCollections.push(new legend_1.LegendOptions(startLabel, series.interior, 'Rectangle', true, seriesType, '', series.marker.shape, series.marker.visible));
                        this.legendCollections.push(new legend_1.LegendOptions(endLabel, series.interior, 'Rectangle', true, seriesType, '', series.marker.shape, series.marker.visible));
                    }
                }
            }
            if (this.isReverse && chart.legendSettings.mode !== 'Gradient') {
                this.legendCollections.reverse();
            }
        };
        Legend.prototype.getLegendBounds = function (availableSize, legendBounds, legend) {
            this.calculateLegendTitle(legend, legendBounds);
            this.isTitle = legend.title ? true : false;
            this.chartRowCount = 1;
            this.rowHeights = [];
            this.columnHeights = [];
            this.pageHeights = [];
            var padding = legend.padding;
            var titlePosition = legend.titlePosition;
            var extraHeight = 0;
            var legendOption;
            var extraWidth = 0;
            var arrowWidth = this.arrowWidth;
            var arrowHeight = this.arrowHeight;
            var verticalArrowSpace = this.isVertical && !legend.enablePages ? arrowHeight : 0;
            var titleSpace = this.isTitle && titlePosition === 'Top' ? this.legendTitleSize.height + this.fivePixel : 0;
            titleSpace = this.isTitle && this.isVertical && titlePosition !== 'Top' ? this.legendTitleSize.height + this.fivePixel : titleSpace;
            if (!this.isVertical) {
                extraHeight = !legend.height ? ((availableSize.height / 100) * 5) : 0;
            }
            else {
                extraWidth = !legend.width ? ((availableSize.width / 100) * 5) : 0;
            }
            legendBounds.height += (extraHeight);
            legendBounds.width += extraWidth;
            var shapeWidth = legend.shapeWidth;
            var shapePadding = legend.shapePadding;
            var maximumWidth = 0;
            var rowWidth = 0;
            var legendWidth = 0;
            var columnHeight = 0;
            var columnCount = 0;
            var rowCount = 0;
            var titlePlusArrowSpace = 0;
            var legendEventArgs;
            var render = false;
            this.maxItemHeight = Math.max(ej2_svg_base_1.measureText('MeasureText', legend.textStyle, this.chart.themeStyle.legendLabelFont).height, legend.shapeHeight);
            for (var i = 0; i < this.legendCollections.length; i++) {
                legendOption = this.legendCollections[i];
                Iif (constants_1.regSub.test(legendOption.text)) {
                    legendOption.text = helper_2.getUnicodeText(legendOption.text, constants_1.regSub);
                }
                Iif (constants_1.regSup.test(legendOption.text)) {
                    legendOption.text = helper_2.getUnicodeText(legendOption.text, constants_1.regSup);
                }
                legendEventArgs = {
                    fill: legendOption.fill, text: legendOption.text, shape: legendOption.shape,
                    markerShape: legendOption.markerShape, name: constants_1.legendRender, cancel: false
                };
                this.chart.trigger(constants_1.legendRender, legendEventArgs);
                legendOption.render = !legendEventArgs.cancel;
                legendOption.text = legendEventArgs.text;
                legendOption.fill = legendEventArgs.fill;
                legendOption.shape = legendEventArgs.shape;
                legendOption.markerShape = legendEventArgs.markerShape;
                legendOption.textSize = ej2_svg_base_1.measureText(legendOption.text, legend.textStyle, this.chart.themeStyle.legendLabelFont);
                shapeWidth = legendOption.text ? legend.shapeWidth : 0;
                shapePadding = legendOption.text ? legend.shapePadding : 0;
                if (legendOption.render && legendOption.text) {
                    render = true;
                    legendWidth = shapeWidth + shapePadding + (legend.maximumLabelWidth ? legend.maximumLabelWidth :
                        legendOption.textSize.width) + (!this.isVertical ? (i === 0) ? padding : this.itemPadding : padding);
                    rowWidth = rowWidth + legendWidth;
                    if (!legend.enablePages && !this.isVertical) {
                        titlePlusArrowSpace = this.isTitle && titlePosition !== 'Top' ? this.legendTitleSize.width + this.fivePixel : 0;
                        titlePlusArrowSpace += arrowWidth;
                    }
                    this.getLegendHeight(legendOption, legend, legendBounds, rowWidth, this.maxItemHeight, padding);
                    if (legendBounds.width < (padding + rowWidth + titlePlusArrowSpace) || this.isVertical) {
                        maximumWidth = Math.max(maximumWidth, (rowWidth + padding + titlePlusArrowSpace - (this.isVertical ? 0 : legendWidth)));
                        if (rowCount === 0 && (legendWidth !== rowWidth)) {
                            rowCount = 1;
                        }
                        rowWidth = this.isVertical ? 0 : legendWidth;
                        rowCount++;
                        columnCount = 0;
                        columnHeight = verticalArrowSpace;
                    }
                    var len = (rowCount > 0 ? (rowCount - 1) : 0);
                    this.rowHeights[len] = Math.max((this.rowHeights[len] ?
                        this.rowHeights[len] : 0), legendOption.textSize.height);
                    this.columnHeights[columnCount] = (this.columnHeights[columnCount] ?
                        this.columnHeights[columnCount] : 0) + legendOption.textSize.height +
                        (this.isVertical ? (i === 0) ? padding : this.itemPadding : padding);
                    columnCount++;
                }
            }
            columnHeight = Math.max.apply(null, this.columnHeights) + padding + titleSpace;
            columnHeight = Math.max(columnHeight, (this.maxItemHeight + padding) + padding + titleSpace);
            this.isPaging = legendBounds.height < columnHeight;
            if (this.isPaging && !legend.enablePages) {
                if (!this.isVertical) {
                    columnHeight = (this.maxItemHeight + padding) + padding + (titlePosition === 'Top' ? titleSpace : 0);
                }
            }
            this.totalPages = rowCount;
            if (!this.isPaging && !this.isVertical) {
                rowWidth += this.isTitle && titlePosition !== 'Top' ? (this.fivePixel + this.legendTitleSize.width + this.fivePixel) : 0;
            }
            if (render) {
                this.setBounds(Math.max((rowWidth + padding), maximumWidth), columnHeight, legend, legendBounds);
            }
            else {
                this.setBounds(0, 0, legend, legendBounds);
            }
        };
        Legend.prototype.getLegendHeight = function (legendOption, legend, legendBounds, rowWidth, legendHeight, padding) {
            var legendWidth = legendOption.textSize.width;
            var textPadding = legend.shapePadding + (padding * 2) + legend.shapeWidth;
            switch (legend.textWrap) {
                case 'Wrap':
                case 'AnyWhere':
                    if (legendWidth > legend.maximumLabelWidth || legendWidth + rowWidth > legendBounds.width) {
                        legendOption.textCollection = helper_3.textWrap(legendOption.text, (legend.maximumLabelWidth ? Math.min(legend.maximumLabelWidth, (legendBounds.width - textPadding)) :
                            (legendBounds.width - textPadding)), legend.textStyle, this.chart.enableRtl, null, null, this.chart.themeStyle.legendLabelFont);
                    }
                    else {
                        legendOption.textCollection.push(legendOption.text);
                    }
                    legendOption.textSize.height = (legendHeight * legendOption.textCollection.length);
                    break;
            }
        };
        Legend.prototype.getRenderPoint = function (legendOption, start, textPadding, previousLegend, rect, count, firstLegend) {
            var padding = this.legend.padding;
            var textWidth = textPadding + (this.legend.maximumLabelWidth ?
                this.legend.maximumLabelWidth : previousLegend.textSize.width);
            var previousBound = previousLegend.location.x + ((!this.isRtlEnable) ? textWidth : -textWidth);
            if (this.isWithinBounds(previousBound, (this.legend.maximumLabelWidth ?
                this.legend.maximumLabelWidth : legendOption.textSize.width) + textPadding - this.itemPadding, rect) || this.isVertical) {
                legendOption.location.x = start.x;
                if (count !== firstLegend) {
                    this.chartRowCount++;
                }
                legendOption.location.y = (count === firstLegend) ? previousLegend.location.y :
                    previousLegend.location.y + (this.isVertical ? previousLegend.textSize.height :
                        this.rowHeights[(this.chartRowCount - 2)]) + (this.isVertical ? this.itemPadding : padding);
            }
            else {
                legendOption.location.x = (count === firstLegend) ? previousLegend.location.x : previousBound;
                legendOption.location.y = previousLegend.location.y;
            }
            var availwidth = (!this.isRtlEnable) ? (this.legendBounds.x + this.legendBounds.width) - (legendOption.location.x +
                textPadding - this.itemPadding - this.legend.shapeWidth / 2) : (legendOption.location.x - textPadding + this.itemPadding +
                (this.legend.shapeWidth / 2)) - this.legendBounds.x;
            if (!this.isVertical && this.isPaging && !this.legend.enablePages) {
                availwidth = this.legendBounds.width - legendOption.location.x - this.fivePixel;
            }
            availwidth = this.legend.maximumLabelWidth ? Math.min(this.legend.maximumLabelWidth, availwidth) : availwidth;
            if (this.legend.textOverflow === 'Ellipsis' && this.legend.textWrap === 'Normal') {
                legendOption.text = helper_1.textTrim(+availwidth.toFixed(4), legendOption.text, this.legend.textStyle, this.chart.enableRtl, this.chart.themeStyle.legendLabelFont);
            }
        };
        Legend.prototype.isWithinBounds = function (previousBound, textWidth, rect) {
            if (!this.isRtlEnable) {
                return (previousBound + textWidth) > (rect.x + rect.width + (this.legend.shapeWidth / 2));
            }
            else {
                return (previousBound - textWidth) < (rect.x - (this.legend.shapeWidth / 2));
            }
        };
        Legend.prototype.LegendClick = function (index, event) {
            var chart = this.chart;
            var seriesIndex = chart.legendSettings.mode === 'Series' ? index : 0;
            var legendIndex = !this.isReverse ? index : (this.legendCollections.length - 1) - index;
            var series = chart.visibleSeries[seriesIndex];
            var legend = this.legendCollections[legendIndex];
            var changeDetection = 'isProtectedOnChange';
            if (chart.legendSettings.mode === 'Series') {
                var legendClickArgs = {
                    legendText: legend.text, legendShape: legend.shape,
                    chart: chart.isBlazor ? {} : chart, series: series, points: series.points, name: constants_1.legendClick, cancel: false
                };
                this.chart.trigger(constants_1.legendClick, legendClickArgs);
                series.legendShape = legendClickArgs.legendShape;
                Eif (!legendClickArgs.cancel) {
                    if (series.fill !== null) {
                        chart.visibleSeries[index].interior = series.fill;
                    }
                    if (chart.legendSettings.toggleVisibility) {
                        series.chart[changeDetection] = true;
                        if (series.category === 'TrendLine') {
                            Iif (!chart.series[series.sourceIndex].trendlines[series.index].visible &&
                                chart.series[series.sourceIndex].visible) {
                                chart.series[series.sourceIndex].trendlines[series.index].visible = true;
                            }
                            else {
                                chart.series[series.sourceIndex].trendlines[series.index].visible = false;
                            }
                        }
                        else {
                            this.changeSeriesVisiblity(series, series.visible);
                        }
                        legend.visible = series.category === 'TrendLine' ? chart.series[series.sourceIndex].trendlines[series.index].visible :
                            (series.visible);
                        this.refreshLegendToggle(chart, series);
                        Iif (chart.highlightModule && chart.legendSettings.enableHighlight) {
                            chart.highlightModule.legendSelection(chart, index, event.target, 'mousemove');
                        }
                    }
                    else if (chart.highlightModule) {
                        chart.highlightModule.legendSelection(chart, index, event.target, event.type);
                    }
                    else Eif (chart.selectionModule) {
                        chart.selectionModule.legendSelection(chart, index, event.target, event.type);
                    }
                    series.chart[changeDetection] = false;
                }
            }
            else if (chart.legendSettings.mode === 'Point') {
                var point = series.points[index];
                var legendClickArgs = {
                    legendText: legend.text, legendShape: legend.shape,
                    chart: chart.isBlazor ? {} : chart, series: series, points: [point], name: constants_1.legendClick, cancel: false
                };
                this.chart.trigger(constants_1.legendClick, legendClickArgs);
                Eif (chart.legendSettings.toggleVisibility && !legendClickArgs.cancel) {
                    point.visible = !point.visible;
                    var legendOption = this.legendCollections[index];
                    legendOption.visible = point.visible;
                    this.refreshLegendToggle(chart, series);
                }
            }
            else Eif (chart.legendSettings.mode === 'Range') {
                var points = [];
                var legendOption = this.legendCollections[index];
                for (var _i = 0, _a = series.points; _i < _a.length; _i++) {
                    var point = _a[_i];
                    if (legendOption.fill === (point.interior || series.interior)) {
                        points.push(point);
                    }
                }
                var legendClickArgs = {
                    legendText: legend.text, legendShape: legend.shape,
                    chart: chart.isBlazor ? {} : chart, series: series, points: points, name: constants_1.legendClick, cancel: false
                };
                this.chart.trigger(constants_1.legendClick, legendClickArgs);
                Eif (chart.legendSettings.toggleVisibility && !legendClickArgs.cancel) {
                    legendOption.visible = !legendOption.visible;
                    for (var _b = 0, points_1 = points; _b < points_1.length; _b++) {
                        var point = points_1[_b];
                        point.visible = !point.visible;
                    }
                    this.refreshLegendToggle(chart, series);
                }
            }
        };
        Legend.prototype.refreshLegendToggle = function (chart, series) {
            var selectedDataIndexes = [];
            if (chart.selectionModule) {
                selectedDataIndexes = ej2_base_1.extend([], chart.selectionModule.selectedDataIndexes, null, true);
            }
            if ((chart.svgObject.childNodes.length > 0) && !chart.enableAnimation && !chart.enableCanvas) {
                while (chart.svgObject.lastChild) {
                    chart.svgObject.removeChild(chart.svgObject.lastChild);
                }
                ej2_base_1.remove(chart.svgObject);
            }
            chart.animateSeries = false;
            chart.redraw = chart.enableAnimation;
            series.isLegendClicked = true;
            chart.rotatedDataLabelCollections = [];
            helper_1.removeElement(ej2_svg_base_1.getElement(chart.element.id + '_Secondary_Element').querySelectorAll('.ejSVGTooltip')[0]);
            helper_1.blazorTemplatesReset(chart);
            this.redrawSeriesElements(series, chart);
            chart.removeSvg();
            chart.refreshAxis();
            series.refreshAxisLabel();
            this.refreshSeries(chart.visibleSeries);
            for (var _i = 0, _a = chart.visibleSeries; _i < _a.length; _i++) {
                var series_1 = _a[_i];
                Eif (!ej2_base_1.isNullOrUndefined(series_1)) {
                    chart.markerRender.removeHighlightedMarker(series_1, null, true);
                }
            }
            chart.refreshBound();
            chart.trigger('loaded', { chart: chart });
            Iif (selectedDataIndexes.length > 0) {
                chart.selectionModule.selectedDataIndexes = selectedDataIndexes;
                chart.selectionModule.redrawSelection(chart, chart.selectionMode);
            }
            Iif (!chart.enableCanvas && chart.highlightModule && (chart.highlightMode !== 'None' || chart.legendSettings.enableHighlight)) {
                chart.highlightModule.redrawSelection(chart, chart.highlightMode);
            }
            chart.redraw = false;
            series.isLegendClicked = false;
        };
        Legend.prototype.changeSeriesVisiblity = function (series, visibility) {
            series.visible = !visibility;
            if (this.isSecondaryAxis(series.xAxis)) {
                series.xAxis.internalVisibility = series.xAxis.series.some(function (value) { return (value.visible); });
            }
            if (this.isSecondaryAxis(series.yAxis) || (series.category === 'Pareto' && series.type === 'Line')) {
                series.yAxis.internalVisibility = series.yAxis.series.some(function (value) { return (value.visible); });
            }
            if (series.trendlines.length && series.visible) {
                series.trendlines.forEach(function (trendline) {
                    trendline.visible = true;
                });
            }
        };
        Legend.prototype.isSecondaryAxis = function (axis) {
            return (this.chart.axes.indexOf(axis) > -1);
        };
        Legend.prototype.redrawSeriesElements = function (series, chart) {
            if (!chart.redraw) {
                return null;
            }
            helper_1.removeElement(chart.element.id + '_Series_' + (series.index === undefined ? series.category : series.index) +
                '_DataLabelCollections');
        };
        Legend.prototype.refreshSeries = function (seriesCollection) {
            for (var _i = 0, seriesCollection_1 = seriesCollection; _i < seriesCollection_1.length; _i++) {
                var series = seriesCollection_1[_i];
                if (series.type.indexOf('Spline') > -1) {
                    var isArea = (series.type.indexOf('Area') > -1 || series.drawType.indexOf('Area') > -1);
                    var isRange = series.type.indexOf('Range') > -1;
                    this.chart['spline' + (isArea ? isRange ? 'RangeArea' : 'Area' : '') + 'SeriesModule'].findSplinePoint(series);
                }
                if (series.visible) {
                    series.position = undefined;
                }
            }
        };
        Legend.prototype.click = function (event) {
            var _this = this;
            Iif (!this.chart.legendSettings.visible) {
                return;
            }
            var pageX = this.chart.mouseX;
            var pageY = this.chart.mouseY;
            var legendRegion = [];
            var targetId = event.target.id.indexOf('_chart_legend_g_') > -1 ?
                event.target.firstChild['id'] : event.target.id;
            var legendItemsId = [this.legendID + '_text_', this.legendID + '_shape_marker_',
                this.legendID + '_shape_'];
            var seriesIndex;
            for (var _i = 0, legendItemsId_2 = legendItemsId; _i < legendItemsId_2.length; _i++) {
                var id = legendItemsId_2[_i];
                if (targetId.indexOf(id) > -1) {
                    seriesIndex = parseInt(targetId.split(id)[1], 10);
                    this.LegendClick(seriesIndex, event);
                    break;
                }
            }
            if (targetId.indexOf(this.legendID + '_pageup') > -1) {
                this.changePage(event, true);
            }
            else if (targetId.indexOf(this.legendID + '_pagedown') > -1) {
                this.changePage(event, false);
            }
            if (this.chart.enableCanvas && this.pagingRegions.length) {
                this.checkWithinBounds(pageX, pageY);
            }
            legendRegion = this.legendRegions.filter(function (region) {
                return (helper_1.withInBounds(pageX, (pageY + (_this.isPaging ? (_this.currentPageNumber - 1) *
                    _this.translatePage(_this.chart.enableCanvas, null, 1, 2) : 0)), region.rect));
            });
            Iif (legendRegion.length && this.chart.enableCanvas) {
                this.LegendClick(legendRegion[0].index, event);
            }
        };
        Legend.prototype.checkWithinBounds = function (pageX, pageY) {
            var cRender = this.chart.renderer;
            var bounds = this.legendBounds;
            var borderWidth = this.chart.legendSettings.border.width;
            var canvasRect = new ej2_svg_base_1.Rect(bounds.x, bounds.y, bounds.width, bounds.height);
            canvasRect.x = canvasRect.x - borderWidth / 2;
            canvasRect.y = canvasRect.y - borderWidth / 2;
            canvasRect.width = canvasRect.width + borderWidth;
            canvasRect.height = canvasRect.height + borderWidth;
            Iif (helper_1.withInBounds(pageX, pageY, this.pagingRegions[0])) {
                if (!this.isRtlEnable) {
                    this.canvasPageDown(cRender, canvasRect, bounds);
                }
                else {
                    this.canvasPageUp(cRender, canvasRect, bounds);
                }
                return null;
            }
            Iif (helper_1.withInBounds(pageX, pageY, this.pagingRegions[1])) {
                if (!this.isRtlEnable) {
                    this.canvasPageUp(cRender, canvasRect, bounds);
                }
                else {
                    this.canvasPageDown(cRender, canvasRect, bounds);
                }
                return null;
            }
        };
        Legend.prototype.canvasPageDown = function (cRender, canvasRect, bounds) {
            if (--this.currentPageNumber > 0) {
                this.legendRegions = [];
                cRender.clearRect(canvasRect);
                cRender.canvasClip(new helper_1.RectOption('legendClipPath', 'transparent', { width: 0, color: '' }, null, canvasRect));
                this.renderLegend(this.chart, this.legend, bounds);
                cRender.canvasRestore();
            }
            else {
                ++this.currentPageNumber;
            }
        };
        Legend.prototype.canvasPageUp = function (cRender, canvasRect, bounds) {
            if (++this.currentPageNumber > 0 && this.currentPageNumber <= this.totalNoOfPages) {
                this.legendRegions = [];
                cRender.clearRect(canvasRect);
                cRender.canvasClip(new helper_1.RectOption('legendClipPath', 'transpaent', { width: 0, color: '' }, null, canvasRect));
                this.renderLegend(this.chart, this.legend, bounds);
                cRender.canvasRestore();
            }
            else {
                --this.currentPageNumber;
            }
        };
        Legend.prototype.getModuleName = function () {
            return 'Legend';
        };
        Legend.prototype.destroy = function () {
            this.removeEventListener();
        };
        return Legend;
    }(legend_1.BaseLegend));
    exports.Legend = Legend;
});