all files / stock-chart/legend/ legend.js

93.57% Statements 233/249
77.78% Branches 147/189
86.67% Functions 26/30
94.19% Lines 227/241
18 statements, 7 functions, 29 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              12×                                                                                                                     59× 59× 59× 59×   59×     59× 59× 59×   59×   54× 54× 54×               59× 59× 59× 59×   59× 63× 63× 63× 63× 63× 63×   61×     59×   63×   63×   63×             59× 59× 59× 59× 59× 59× 59× 59× 59× 59× 59× 59× 59× 47×     12×   59× 59× 59× 59× 59× 59× 59× 59× 59× 59× 59× 59× 59× 59× 63× 63×     63×     63×       63× 63× 63× 63× 63× 63× 63× 63× 63× 63×   63× 63×   63× 12×   12×     12× 12× 12×         59× 59× 59×     59× 59× 46×   59× 59×           68× 68× 68×     60× 60×         68×   68×                 124×   122×     118×                               10× 10×                     5771×   59×        
/* 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 __());
    };
})();
/* istanbul ignore next */ 
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
define(["require", "exports", "../../common/utils/helper", "../../common/legend/legend", "@syncfusion/ej2-svg-base", "../../common/model/constants", "../../common/utils/helper", "../model/base", "@syncfusion/ej2-base", "@syncfusion/ej2-base", "../../common/model/base"], function (require, exports, helper_1, legend_1, ej2_svg_base_1, constants_1, helper_2, base_1, ej2_base_1, ej2_base_2, base_2) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    var StockChartLegendSettings = (function (_super) {
        __extends(StockChartLegendSettings, _super);
        function StockChartLegendSettings() {
            return _super !== null && _super.apply(this, arguments) || this;
        }
        __decorate([
            ej2_base_2.Property(false)
        ], StockChartLegendSettings.prototype, "visible", void 0);
        __decorate([
            ej2_base_2.Property(null)
        ], StockChartLegendSettings.prototype, "height", void 0);
        __decorate([
            ej2_base_2.Property(null)
        ], StockChartLegendSettings.prototype, "width", void 0);
        __decorate([
            ej2_base_2.Complex({ x: 0, y: 0 }, base_2.Location)
        ], StockChartLegendSettings.prototype, "location", void 0);
        __decorate([
            ej2_base_2.Property('Auto')
        ], StockChartLegendSettings.prototype, "position", void 0);
        __decorate([
            ej2_base_2.Property('Series')
        ], StockChartLegendSettings.prototype, "mode", void 0);
        __decorate([
            ej2_base_2.Property(8)
        ], StockChartLegendSettings.prototype, "padding", void 0);
        __decorate([
            ej2_base_2.Property(null)
        ], StockChartLegendSettings.prototype, "itemPadding", void 0);
        __decorate([
            ej2_base_2.Property('Center')
        ], StockChartLegendSettings.prototype, "alignment", void 0);
        __decorate([
            ej2_base_2.Complex({ fontFamily: null, size: null, fontStyle: null, fontWeight: null, color: null }, base_1.StockChartFont)
        ], StockChartLegendSettings.prototype, "textStyle", void 0);
        __decorate([
            ej2_base_2.Property(10)
        ], StockChartLegendSettings.prototype, "shapeHeight", void 0);
        __decorate([
            ej2_base_2.Property(10)
        ], StockChartLegendSettings.prototype, "shapeWidth", void 0);
        __decorate([
            ej2_base_2.Complex({}, base_1.StockChartBorder)
        ], StockChartLegendSettings.prototype, "border", void 0);
        __decorate([
            ej2_base_2.Complex({ left: 0, right: 0, top: 0, bottom: 0 }, base_1.StockMargin)
        ], StockChartLegendSettings.prototype, "margin", void 0);
        __decorate([
            ej2_base_2.Complex({ left: 0, right: 0, top: 0, bottom: 0 }, base_2.ContainerPadding)
        ], StockChartLegendSettings.prototype, "containerPadding", void 0);
        __decorate([
            ej2_base_2.Property(8)
        ], StockChartLegendSettings.prototype, "shapePadding", void 0);
        __decorate([
            ej2_base_2.Property('transparent')
        ], StockChartLegendSettings.prototype, "background", void 0);
        __decorate([
            ej2_base_2.Property(1)
        ], StockChartLegendSettings.prototype, "opacity", void 0);
        __decorate([
            ej2_base_2.Property(true)
        ], StockChartLegendSettings.prototype, "toggleVisibility", void 0);
        __decorate([
            ej2_base_2.Property(null)
        ], StockChartLegendSettings.prototype, "description", void 0);
        __decorate([
            ej2_base_2.Property(3)
        ], StockChartLegendSettings.prototype, "tabIndex", void 0);
        __decorate([
            ej2_base_2.Property(null)
        ], StockChartLegendSettings.prototype, "title", void 0);
        __decorate([
            ej2_base_2.Complex({ fontFamily: null, size: null, fontStyle: null, fontWeight: null, color: null }, base_1.StockChartFont)
        ], StockChartLegendSettings.prototype, "titleStyle", void 0);
        __decorate([
            ej2_base_2.Property('Top')
        ], StockChartLegendSettings.prototype, "titlePosition", void 0);
        __decorate([
            ej2_base_2.Property(100)
        ], StockChartLegendSettings.prototype, "maximumTitleWidth", void 0);
        __decorate([
            ej2_base_2.Property(true)
        ], StockChartLegendSettings.prototype, "enablePages", void 0);
        __decorate([
            ej2_base_2.Property(false)
        ], StockChartLegendSettings.prototype, "isInversed", void 0);
        __decorate([
            ej2_base_2.Property(null)
        ], StockChartLegendSettings.prototype, "template", void 0);
        return StockChartLegendSettings;
    }(ej2_base_2.ChildProperty));
    exports.StockChartLegendSettings = StockChartLegendSettings;
    var StockLegend = (function (_super) {
        __extends(StockLegend, _super);
        function StockLegend(chart) {
            var _this = _super.call(this, chart) || this;
            _this.library = _this;
            _this.addEventListener();
            return _this;
        }
        StockLegend.prototype.addEventListener = function () {
            Iif (this.chart.isDestroyed) {
                return;
            }
            this.chart.on('click', this.click, this);
            this.chart.on(ej2_base_1.Browser.touchEndEvent, this.mouseEnd, this);
            this.chart.on(ej2_base_1.Browser.touchMoveEvent, this.mouseMove, this);
        };
        StockLegend.prototype.removeEventListener = function () {
            if (this.chart.isDestroyed) {
                return;
            }
            this.chart.off('click', this.click);
            this.chart.off(ej2_base_1.Browser.touchEndEvent, this.mouseEnd);
            this.chart.off(ej2_base_1.Browser.touchMoveEvent, this.mouseMove);
        };
        StockLegend.prototype.mouseMove = function (e) {
            Eif (this.chart.legendSettings.visible && !this.chart.isTouch) {
                this.move(e);
            }
        };
        StockLegend.prototype.mouseEnd = function (e) {
            if (this.chart.legendSettings.visible && this.chart.isTouch) {
                this.move(e);
            }
        };
        StockLegend.prototype.getLegendOptions = function (visibleSeriesCollection) {
            this.legendCollections = [];
            var seriesType;
            var fillColor;
            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];
                Eif (this.legend.mode === 'Series') {
                    Eif (series.category !== 'Indicator') {
                        seriesType = series.type;
                        var seriesColor = void 0;
                        if (this.hasGradient(series) === 'linear_gradient') {
                            seriesColor = "url(#" + this.chart.element.id + "_stockChart_chart_series_" + series.index + "_linear_gradient)";
                        }
                        else if (this.hasGradient(series) === 'radial_gradient') {
                            seriesColor = "url(#" + this.chart.element.id + "_stockChart_chart_series_" + series.index + "_radial_gradient)";
                        }
                        else {
                            seriesColor = series.interior;
                        }
                        fillColor = (series.pointColorMapping && series.points.length > 0) ?
                            (series.points[0].interior ? series.points[0].interior : seriesColor) : seriesColor;
                        this.legendCollections.push(new legend_1.LegendOptions(series.name, fillColor, series.legendShape, (series.category === 'TrendLine' ?
                            this.chart.series[series.sourceIndex].trendlines[series.index].visible : series.visible), seriesType, series.legendImageUrl, series.marker.shape, series.marker.visible));
                        if (this.chart.legendSettings.template) {
                            var sz = helper_2.measureLegendTemplateSize(this.legendID, this.chart, this.legendCollections.length - 1);
                            this.legendCollections[this.legendCollections.length - 1].templateSize = sz;
                            this.legendCollections[this.legendCollections.length - 1].textSize = sz;
                            this.legendCollections[this.legendCollections.length - 1].template =
                                this.chart.legendSettings.template;
                        }
                    }
                }
            }
        };
        StockLegend.prototype.getLegendBounds = function (availableSize, legendBound, legend) {
            this.calculateLegendTitle(legend, legendBound);
            var padding = legend.padding;
            this.isTitle = legend.title ? true : false;
            var titlePosition = legend.titlePosition;
            var extraWidth = 0;
            var extraHeight = 0;
            var legendOption;
            var arrowHeight = this.arrowHeight;
            var arrowWidth = this.arrowWidth;
            var verticalArrowSpace = this.isVertical && !legend.enablePages ? arrowHeight : 0;
            var titleSpace = this.isTitle && titlePosition === 'Top' ? this.fivePixel + this.legendTitleSize.height : 0;
            titleSpace = this.isTitle && this.isVertical && titlePosition !== 'Top' ? this.fivePixel + this.legendTitleSize.height : titleSpace;
            if (!this.isVertical) {
                extraHeight = !legend.height ? ((availableSize.height / 100) * 5) : 0;
            }
            else {
                extraWidth = !legend.width ? ((availableSize.width / 100) * 5) : 0;
            }
            legendBound.height += (extraHeight);
            legendBound.width += extraWidth;
            var shapePadding = legend.shapePadding;
            var shapeWidth = legend.shapeWidth;
            var maximumWidth = 0;
            var rowWidth = 0;
            var legendWidth = 0;
            var columnHeight = 0;
            var rowCount = 0;
            var titlePlusArrowSpace = 0;
            var legendEventArgs;
            this.maxItemHeight = Math.max(ej2_svg_base_1.measureText('MeasureText', legend.textStyle, this.chart.themeStyle.legendLabelFont).height, legend.shapeHeight);
            var render = false;
            for (var i = 0; i < this.legendCollections.length; i++) {
                legendOption = this.legendCollections[i];
                Iif (constants_1.regSup.test(legendOption.text)) {
                    legendOption.text = helper_1.getUnicodeText(legendOption.text, constants_1.regSup);
                }
                Iif (constants_1.regSub.test(legendOption.text)) {
                    legendOption.text = helper_1.getUnicodeText(legendOption.text, constants_1.regSub);
                }
                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.text = legendEventArgs.text;
                legendOption.render = !legendEventArgs.cancel;
                legendOption.shape = legendEventArgs.shape;
                legendOption.fill = legendEventArgs.fill;
                legendOption.markerShape = legendEventArgs.markerShape;
                legendOption.textSize = ej2_svg_base_1.measureText(legendOption.text, legend.textStyle, this.chart.themeStyle.legendLabelFont);
                Eif (legendOption.render) {
                    render = true;
                    legendWidth = shapePadding + shapeWidth + 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;
                    }
                    if (legendBound.width < (padding + rowWidth + titlePlusArrowSpace) || this.isVertical) {
                        maximumWidth = Math.max(maximumWidth, (rowWidth + padding + titlePlusArrowSpace -
                            (this.isVertical ? 0 : legendWidth)));
                        Iif (rowCount === 0 && (legendWidth !== rowWidth)) {
                            rowCount = 1;
                        }
                        rowWidth = this.isVertical ? 0 : legendWidth;
                        rowCount++;
                        columnHeight = (rowCount * (this.maxItemHeight + (this.isVertical ? this.itemPadding : padding))) +
                            padding + titleSpace + verticalArrowSpace;
                    }
                }
            }
            columnHeight = Math.max(columnHeight, (this.maxItemHeight + padding) + padding + titleSpace);
            this.isPaging = legendBound.height < columnHeight;
            if (this.isPaging && !legend.enablePages) {
                Eif (!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;
            }
            Eif (render) {
                this.setBounds(Math.max((rowWidth + padding), maximumWidth), columnHeight, legend, legendBound);
            }
            else {
                this.setBounds(0, 0, legend, legendBound);
            }
        };
        StockLegend.prototype.getRenderPoint = function (legendOptions, start, textPadding, prevLegend, rect, count, firstLegend) {
            var previousBound = (prevLegend.location.x + textPadding + prevLegend.textSize.width);
            var padding = this.legend.padding;
            if ((previousBound + (legendOptions.textSize.width + textPadding - this.itemPadding)) >
                (rect.x + rect.width + this.legend.shapeWidth / 2) ||
                this.isVertical) {
                legendOptions.location.x = start.x;
                legendOptions.location.y = (count === firstLegend) ? prevLegend.location.y :
                    prevLegend.location.y + this.maxItemHeight + (this.isVertical ? this.itemPadding : padding);
            }
            else {
                legendOptions.location.x = (count === firstLegend) ? prevLegend.location.x : previousBound;
                legendOptions.location.y = prevLegend.location.y;
            }
            var availwidth = (this.legendBounds.width + this.legendBounds.x) - (legendOptions.location.x +
                textPadding - this.itemPadding - this.legend.shapeWidth / 2);
            legendOptions.text = helper_1.textTrim(+availwidth.toFixed(4), legendOptions.text, this.legend.textStyle, this.chart.enableRtl, this.chart.themeStyle.legendLabelFont);
        };
        StockLegend.prototype.legendClick = function (index) {
            var chart = this.chart;
            var seriesIndex = chart.legendSettings.mode === 'Series' ? index : 0;
            var targetSeries = chart.visibleSeries[seriesIndex];
            var targetLegend = this.legendCollections[index];
            var legendClickArgs = {
                legendText: targetLegend.text, legendShape: targetLegend.shape,
                chart: chart, series: targetSeries, name: constants_1.legendClick, cancel: false
            };
            this.chart.trigger(constants_1.legendClick, legendClickArgs);
            targetSeries.legendShape = legendClickArgs.legendShape;
            Eif (targetSeries.fill !== null) {
                chart.visibleSeries[index].interior = targetSeries.fill;
            }
            Eif (chart.legendSettings.toggleVisibility) {
                chart.legendClicked = true;
                this.changeSeriesVisiblity(targetSeries, targetSeries.visible);
                targetLegend.visible = targetSeries.category === 'TrendLine' ? chart.series[targetSeries.sourceIndex].trendlines[targetSeries.index].visible :
                    (targetSeries.visible);
                this.refreshLegendToggle(chart);
            }
        };
        StockLegend.prototype.hasGradient = function (series) {
            if (!ej2_base_1.isNullOrUndefined(series.linearGradient) && series.linearGradient.gradientColorStop.length > 0) {
                return 'linear_gradient';
            }
            else if (!ej2_base_1.isNullOrUndefined(series.radialGradient) && series.radialGradient.gradientColorStop.length > 0) {
                return 'radial_gradient';
            }
            else {
                return '';
            }
        };
        StockLegend.prototype.refreshLegendToggle = function (chart) {
            var bounds = chart.stockLegendModule.legendBounds;
            chart.stockLegendModule.renderLegend(chart, chart.legendSettings, bounds);
        };
        StockLegend.prototype.changeSeriesVisiblity = function (series, visibility) {
            series.visible = !visibility;
            Iif (this.SecondaryAxis(series.yAxis)) {
                series.yAxis.internalVisibility = series.yAxis.series.some(function (value) { return (value.visible); });
            }
            Iif (this.SecondaryAxis(series.xAxis)) {
                series.xAxis.internalVisibility = series.xAxis.series.some(function (value) { return (value.visible); });
            }
        };
        StockLegend.prototype.SecondaryAxis = function (axis) {
            return (this.chart.axes.indexOf(axis) > -1);
        };
        StockLegend.prototype.click = function (event) {
            var _this = this;
            Iif (!this.chart.legendSettings.visible) {
                return;
            }
            var pageY = this.chart.mouseY;
            var pageX = this.chart.mouseX;
            var legendItemsId = [this.legendID + '_text_', this.legendID + '_shape_marker_',
                this.legendID + '_shape_', this.legendID + '_template_'];
            var targetId = event.target.id;
            Eif (!targetId || targetId.indexOf(this.legendID + '_template_') === -1) {
                var tplAncestor = event.target.closest("[id^=\"" + this.legendID + "_template_\"]");
                Iif (tplAncestor && tplAncestor.id) {
                    targetId = tplAncestor.id;
                }
            }
            var seriesIndex;
            for (var _i = 0, legendItemsId_1 = legendItemsId; _i < legendItemsId_1.length; _i++) {
                var id = legendItemsId_1[_i];
                if (targetId.indexOf(id) > -1) {
                    seriesIndex = parseInt(targetId.split(id)[1], 10);
                    this.legendClick(seriesIndex);
                    break;
                }
            }
            Iif (targetId.indexOf(this.legendID + '_pagedown') > -1) {
                this.changePage(event, false);
            }
            else Iif (targetId.indexOf(this.legendID + '_pageup') > -1) {
                this.changePage(event, true);
            }
            this.legendRegions.filter(function (region) {
                return (helper_1.withInBounds(pageX, (pageY + (_this.isPaging ? (_this.currentPageNumber - 1) *
                    _this.translatePage(false, null, 1, 2) : 0)), region.rect));
            });
        };
        StockLegend.prototype.getModuleName = function () {
            return 'StockLegend';
        };
        StockLegend.prototype.destroy = function () {
            this.removeEventListener();
        };
        return StockLegend;
    }(legend_1.BaseLegend));
    exports.StockLegend = StockLegend;
});