tsichart-core 1.0.4 → 2.0.0-beta.1

package/dist/LineChart-DcUenMrZ.js

@@ -1,3181 +0,0 @@
-import { _ as __extends, a as __assign } from './_tslib-DYvz7dIO.js';
-import * as d3 from 'd3';
-import * as d3Voronoi from 'd3-voronoi';
-import { U as Utils, D as DataTypes, Y as YAxisStates, L as LINECHARTTOPPADDING, N as NONNUMERICTOPMARGIN, E as EventElementTypes, S as ShiftTypes, K as KeyCodes, M as MARKERVALUENUMERICHEIGHT, b as LINECHARTXOFFSET, c as LINECHARTCHARTMARGINS, s as swimlaneLabelConstants, T as TooltipMeasureFormat, V as VALUEBARHEIGHT, d as SERIESLABELWIDTH } from './Utils-CdKMmmwx.js';
-import { L as Legend } from './Legend-CQ5yaF8f.js';
-import { T as TemporalXAxisComponent } from './TemporalXAxisComponent-BsTQyVO6.js';
-import { C as ChartComponentData } from './Grid-ByDh3Qdn.js';
-import { C as ContextMenu } from './ContextMenu-CP1qV7pP.js';
-import { T as Tooltip } from './Tooltip-B-mIKo4g.js';
-import { interpolatePath } from 'd3-interpolate-path';
-import { C as Component } from './Component-C9fQU2ia.js';
-
-var LineChartData = /** @class */ (function (_super) {
-    __extends(LineChartData, _super);
-    function LineChartData() {
-        var _this = _super.call(this) || this;
-        _this.timeMap = {};
-        _this._yExtents = [];
-        return _this;
-    }
-    Object.defineProperty(LineChartData.prototype, "yExtents", {
-        get: function () {
-            return this._yExtents;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    LineChartData.prototype.setYExtents = function (idx, value) {
-        this._yExtents[idx] = value;
-    };
-    LineChartData.prototype.resetYExtents = function () {
-        this._yExtents = [];
-        for (var i = 0; i < this.data.length; i++) {
-            this._yExtents.push(null);
-        }
-    };
-    LineChartData.prototype.setTimeMap = function () {
-        this.timeMap = this.allValues.reduce(function (timeMap, currVal) {
-            var millis = currVal.dateTime.valueOf();
-            if (currVal.bucketSize != undefined) {
-                millis += (currVal.bucketSize / 2);
-            }
-            if (currVal.measures != null) {
-                if (timeMap[millis] == undefined) {
-                    timeMap[millis] = [currVal];
-                }
-                else {
-                    timeMap[millis].push(currVal);
-                }
-            }
-            return timeMap;
-        }, {});
-    };
-    LineChartData.prototype.mergeDataToDisplayStateAndTimeArrays = function (data, aggregateExpressionOptions) {
-        if (aggregateExpressionOptions === void 0) { aggregateExpressionOptions = null; }
-        _super.prototype.mergeDataToDisplayStateAndTimeArrays.call(this, data, aggregateExpressionOptions);
-    };
-    return LineChartData;
-}(ChartComponentData));
-
-var Plot = /** @class */ (function (_super) {
-    __extends(Plot, _super);
-    function Plot(renderTarget) {
-        var _this = _super.call(this, renderTarget) || this;
-        _this.backdropRect = null;
-        return _this;
-    }
-    Plot.prototype.getVisibleSeries = function (aggKey) {
-        var _this = this;
-        return Object.keys(this.chartComponentData.timeArrays[aggKey]).filter(function (s) {
-            return _this.chartComponentData.isSplitByVisible(aggKey, s);
-        });
-    };
-    Plot.prototype.createGradientKey = function (d, splitByIndex, i) {
-        return d.aggregateKey.replace(/^[^a-z]+|[^\w:.-]+/gi, "") + '_' + splitByIndex + '_' + i;
-    };
-    Plot.prototype.addGradientStops = function (d, gradient) {
-        var _this = this;
-        gradient.selectAll('stop').remove();
-        this.chartDataOptions.valueMap;
-        if (!d.measures) {
-            return;
-        }
-        //behavior if numeric measures
-        var allMeasuresNumeric = Object.keys(d.measures).reduce(function (p, currMeasure) {
-            return (typeof d.measures[currMeasure]) === 'number' && p;
-        }, true);
-        var sumOfMeasures;
-        if (allMeasuresNumeric) {
-            sumOfMeasures = Object.keys(d.measures).reduce(function (p, currMeasure) {
-                return p + d.measures[currMeasure];
-            }, 0);
-            if (sumOfMeasures <= 0) {
-                return;
-            }
-        }
-        var numMeasures = Object.keys(d.measures).length;
-        Object.keys(d.measures).reduce(function (p, currMeasure, i) {
-            var currFraction = allMeasuresNumeric ? (d.measures[currMeasure] / sumOfMeasures) : (i / numMeasures);
-            gradient.append('stop')
-                .attr("offset", (p * 100) + "%")
-                .attr("stop-color", _this.getColorForValue(currMeasure))
-                .attr("stop-opacity", 1);
-            var newFraction = allMeasuresNumeric ? (p + currFraction) : ((i + 1) / numMeasures);
-            gradient.append('stop')
-                .attr("offset", (newFraction * 100) + "%")
-                .attr("stop-color", _this.getColorForValue(currMeasure))
-                .attr("stop-opacity", 1);
-            return newFraction;
-        }, 0);
-    };
-    Plot.prototype.createBackdropRect = function (isVisible) {
-        this.backdropRect = this.aggregateGroup.selectAll('.tsi-backdropRect')
-            .data([isVisible]);
-        this.backdropRect.enter().append('rect')
-            .attr('class', 'tsi-backdropRect')
-            .attr('x', 0)
-            .attr('y', 0)
-            .merge(this.backdropRect)
-            .attr('visibility', function (d) { return d ? 'visible' : 'hidden'; })
-            .attr('width', this.x.range()[1])
-            .attr('height', this.height);
-        this.backdropRect.exit().remove();
-    };
-    Plot.prototype.getColorForValue = function (value) {
-        return Utils.getColorForValue(this.chartDataOptions, value);
-    };
-    Plot.prototype.getVisibleMeasures = function (measures) {
-        return Object.keys(measures).filter(function (measure) {
-            return measures[measure] !== 0;
-        });
-    };
-    Plot.prototype.hasData = function (d) {
-        return d.measures && (Object.keys(d.measures).length !== 0);
-    };
-    return Plot;
-}(Component));
-
-var LinePlot = /** @class */ (function (_super) {
-    __extends(LinePlot, _super);
-    function LinePlot(svgSelection) {
-        var _this = _super.call(this, svgSelection) || this;
-        _this.plotDataType = DataTypes.Numeric;
-        return _this;
-    }
-    LinePlot.prototype.getXPosition = function (d, x) {
-        var bucketSize = this.chartComponentData.displayState[d.aggregateKey].bucketSize;
-        if (bucketSize) {
-            return (x(d.dateTime) + x((new Date(d.dateTime.valueOf() + bucketSize)))) / 2;
-        }
-        return x(d.dateTime);
-    };
-    LinePlot.prototype.createAreaPath = function (y) {
-        var _this = this;
-        this.areaPath = d3.area()
-            .curve(this.chartOptions.interpolationFunction)
-            .defined(function (d) {
-            return (d.measures !== null) &&
-                (d.measures[_this.chartComponentData.getVisibleMeasure(d.aggregateKey, d.splitBy)] !== null);
-        })
-            .x(function (d) {
-            return _this.getXPosition(d, _this.x);
-        })
-            .y0(function (d) {
-            return d.measures ? y(d.measures[_this.chartComponentData.getVisibleMeasure(d.aggregateKey, d.splitBy)]) : 0;
-        })
-            .y1(this.chartHeight);
-    };
-    // returns the next visibleAggI
-    LinePlot.prototype.render = function (chartOptions, visibleAggI, agg, aggVisible, aggregateGroup, chartComponentData, yAxisState, chartHeight, visibleAggCount, colorMap, previousAggregateData, x, areaPath, strokeOpacity, y, yMap, defs, chartDataOptions, previousIncludeDots, yTopAndHeight, svgSelection, categoricalMouseover, categoricalMouseout, yAxisOnClick) {
-        var _this = this;
-        this.previousIncludeDots = previousIncludeDots;
-        this.defs = defs;
-        this.chartOptions = chartOptions;
-        this.chartHeight = chartHeight;
-        this.visibleAggCount = visibleAggCount;
-        this.chartComponentData = chartComponentData;
-        this.x = x;
-        this.y = y;
-        var aggKey = agg.aggKey;
-        this.aggregateGroup = aggregateGroup;
-        var yAxisHasOnClick = yAxisOnClick && typeof yAxisOnClick === "function";
-        visibleAggI = yAxisState.positionInGroup;
-        this.yTop = yTopAndHeight[0];
-        this.height = yTopAndHeight[1];
-        var aggY;
-        var aggLine;
-        var aggEnvelope;
-        this.yAxisState = yAxisState;
-        var yExtent = this.yAxisState.yExtent;
-        aggY = d3.scaleLinear();
-        aggY.range([this.height, this.chartOptions.aggTopMargin]);
-        if (this.chartComponentData.aggHasVisibleSplitBys(aggKey)) {
-            var yRange = (yExtent[1] - yExtent[0]) > 0 ? yExtent[1] - yExtent[0] : 1;
-            var yOffsetPercentage = 10 / (this.chartHeight / ((this.yAxisState.axisType === YAxisStates.Overlap) ? 1 : this.visibleAggCount));
-            var yDomainMin = this.chartOptions.isArea ?
-                (Math.max(yExtent[0] - (yRange * yOffsetPercentage), 0)) :
-                (yExtent[0] - (yRange * yOffsetPercentage));
-            aggY.domain([yDomainMin, yExtent[1] + (yRange * (10 / this.chartHeight))]);
-        }
-        else {
-            aggY.domain([0, 1]);
-            yExtent = [0, 1];
-        }
-        aggLine = d3.line()
-            .curve(this.chartComponentData.displayState[aggKey].interpolationFunction ? d3[this.chartComponentData.displayState[aggKey].interpolationFunction] : this.chartOptions.interpolationFunction)
-            .defined(function (d) {
-            return (d.measures !== null) &&
-                (d.measures[_this.chartComponentData.getVisibleMeasure(d.aggregateKey, d.splitBy)] !== null);
-        })
-            .x(function (d) { return _this.getXPosition(d, _this.x); })
-            .y(function (d) {
-            return d.measures ? aggY(d.measures[_this.chartComponentData.getVisibleMeasure(d.aggregateKey, d.splitBy)]) : null;
-        });
-        aggEnvelope = d3.area()
-            .curve(this.chartComponentData.displayState[aggKey].interpolationFunction ? d3[this.chartComponentData.displayState[aggKey].interpolationFunction] : this.chartOptions.interpolationFunction)
-            .defined(function (d) { return (d.measures !== null) && (d.measures['min'] !== null) && (d.measures['max'] !== null); })
-            .x(function (d) { return _this.getXPosition(d, _this.x); })
-            .y0(function (d) { return d.measures ? aggY(d.measures['max']) : 0; })
-            .y1(function (d) { return d.measures ? aggY(d.measures['min']) : 0; });
-        var localY = aggY.copy();
-        localY.range([this.yTop + this.height, this.yTop + this.chartOptions.aggTopMargin]);
-        yMap[aggKey] = localY;
-        var yAxis = this.aggregateGroup.selectAll(".yAxis")
-            .data([aggKey]);
-        var visibleYAxis = (aggVisible && (this.yAxisState.axisType !== YAxisStates.Shared || visibleAggI === 0));
-        yAxis = yAxis.enter()
-            .append("g")
-            .attr("class", "yAxis ".concat(yAxisHasOnClick ? "tsi-clickableYAxis tsi-swimLaneAxis-".concat(this.chartComponentData.displayState[aggKey].aggregateExpression.swimLane) : ''))
-            .merge(yAxis)
-            .style("visibility", ((visibleYAxis && !this.chartOptions.yAxisHidden) ? "visible" : "hidden"));
-        if (this.yAxisState.axisType === YAxisStates.Overlap) {
-            yAxis.call(d3.axisLeft(aggY).tickFormat(Utils.formatYAxisNumber).tickValues(yExtent))
-                .selectAll("text")
-                .attr("y", function (d, j) { return (j == 0) ? (-visibleAggI * 16) : (visibleAggI * 16); })
-                .style("fill", this.chartComponentData.displayState[aggKey].color);
-        }
-        else {
-            yAxis.call(d3.axisLeft(aggY).tickFormat(Utils.formatYAxisNumber)
-                .ticks(Math.max(2, Math.ceil(this.height / (this.yAxisState.axisType === YAxisStates.Stacked ? this.visibleAggCount : 1) / 90))))
-                .selectAll("text").classed("standardYAxisText", true);
-        }
-        // If yAxisOnClick present, attach to yAxis
-        if (yAxisHasOnClick) {
-            yAxis.on("click", function () {
-                yAxisOnClick();
-            });
-            var label_1 = document.getElementsByClassName("tsi-swimLaneLabel-".concat(agg.swimLane))[0];
-            if (label_1) {
-                yAxis.on("mouseover", function () {
-                    label_1.classList.add("tsi-axisHover");
-                    yAxis.selectAll("text").classed("tsi-boldYAxisText", true);
-                });
-                yAxis.on("mouseout", function () {
-                    label_1.classList.remove("tsi-axisHover");
-                    yAxis.selectAll("text").classed("tsi-boldYAxisText", false);
-                });
-            }
-        }
-        yAxis.exit().remove();
-        ({
-            x: this.x});
-        var splitByColors = Utils.createSplitByColors(this.chartComponentData.displayState, aggKey, this.chartOptions.keepSplitByColor);
-        var includeDots = this.chartOptions.includeDots || this.chartComponentData.displayState[aggKey].includeDots;
-        var self = this;
-        var splitByGroups = this.aggregateGroup.selectAll(".tsi-splitByGroup")
-            .data(Object.keys(this.chartComponentData.timeArrays[aggKey]));
-        splitByGroups.enter()
-            .append("g")
-            .attr("class", "tsi-splitByGroup " + agg.aggKey)
-            .merge(splitByGroups)
-            .each(function (splitBy, j) {
-            var _this = this;
-            colorMap[aggKey + "_" + splitBy] = splitByColors[j];
-            // creation of segments between each gap in the data
-            var segments = [];
-            var lineData = self.chartComponentData.timeArrays[aggKey][splitBy];
-            var visibleMeasure = self.chartComponentData.getVisibleMeasure(aggKey, splitBy);
-            for (var i = 0; i < lineData.length - 1; i++) {
-                if (lineData[i].measures !== null && lineData[i].measures[visibleMeasure] !== null) {
-                    var scannerI = i + 1;
-                    while (scannerI < lineData.length && ((lineData[scannerI].measures == null) ||
-                        lineData[scannerI].measures[visibleMeasure] == null)) {
-                        scannerI++;
-                    }
-                    if (scannerI < lineData.length && scannerI != i + 1) {
-                        segments.push([lineData[i], lineData[scannerI]]);
-                    }
-                    i = scannerI - 1;
-                }
-            }
-            var durationFunction = function (d) {
-                var previousUndefined = previousAggregateData.get(_this) === undefined;
-                return (self.chartOptions.noAnimate || previousUndefined) ? 0 : self.TRANSDURATION;
-            };
-            var gapPath = d3.select(this).selectAll(".tsi-gapLine")
-                .data(segments.map(function (d) {
-                d.inTransition = true;
-                return d;
-            }));
-            gapPath.enter()
-                .append("path")
-                .attr("class", "tsi-valueElement tsi-gapLine")
-                .merge(gapPath)
-                .style("visibility", function (d) {
-                return (self.chartComponentData.isSplitByVisible(aggKey, splitBy)) ? "visible" : "hidden";
-            })
-                .transition()
-                .duration(durationFunction)
-                .ease(d3.easeExp)
-                .attr("stroke-dasharray", "5,5")
-                .attr("stroke", splitByColors[j])
-                .attrTween('d', function (d) {
-                var previous = d3.select(this).attr('d');
-                var current = aggLine(d);
-                return interpolatePath(previous, current);
-            })
-                .on('end', function (d) {
-                d.inTransition = false;
-            });
-            var path = d3.select(this).selectAll(".tsi-valueLine")
-                .data([self.chartComponentData.timeArrays[aggKey][splitBy]].map(function (d) {
-                d.inTransition = true;
-                return d;
-            }));
-            path.enter()
-                .append("path")
-                .attr("class", "tsi-valueElement tsi-valueLine")
-                .merge(path)
-                .style("visibility", function (d) {
-                return (self.chartComponentData.isSplitByVisible(aggKey, splitBy)) ? "visible" : "hidden";
-            })
-                .transition()
-                .duration(durationFunction)
-                .ease(d3.easeExp)
-                .attr("stroke", splitByColors[j])
-                .attr("stroke-opacity", self.strokeOpacity)
-                .attrTween('d', function (d) {
-                var previous = d3.select(this).attr('d');
-                var current = aggLine(d);
-                return interpolatePath(previous, current);
-            })
-                .on('end', function (d) {
-                d.inTransition = false;
-            });
-            if (self.chartOptions.includeDots || self.chartComponentData.displayState[aggKey].includeDots) {
-                var dots = d3.select(this).selectAll(".tsi-valueDot")
-                    .data(self.chartComponentData.timeArrays[aggKey][splitBy].filter(function (d) {
-                    return d && d.measures && d.measures[self.chartComponentData.getVisibleMeasure(d.aggregateKey, d.splitBy)] !== null;
-                }), function (d, i) {
-                    return d.dateTime.toString();
-                });
-                dots.enter()
-                    .append('circle')
-                    .attr('class', 'tsi-valueElement tsi-valueDot')
-                    .attr('r', 3)
-                    .merge(dots)
-                    .style("visibility", function (d) {
-                    return (self.chartComponentData.isSplitByVisible(aggKey, splitBy) && d.measures) ? "visible" : "hidden";
-                })
-                    .transition()
-                    .duration(function (d, i) {
-                    return (self.previousIncludeDots.get(this) === true) ? durationFunction() : 0;
-                })
-                    .ease(d3.easeExp)
-                    .attr("fill", splitByColors[j])
-                    .attr('cx', function (d) { return self.getXPosition(d, self.x); })
-                    .attr('cy', function (d) {
-                    return d.measures ? aggY(d.measures[self.chartComponentData.getVisibleMeasure(d.aggregateKey, d.splitBy)]) : null;
-                })
-                    .each(function () {
-                    self.previousIncludeDots.set(this, includeDots);
-                });
-                dots.exit().remove();
-            }
-            else {
-                d3.select(this).selectAll(".tsi-valueDot").remove();
-            }
-            var envelopeData = {};
-            if ((self.chartComponentData.displayState[aggKey].includeEnvelope || self.chartOptions.includeEnvelope) && self.chartComponentData.isPossibleEnvelope(aggKey, splitBy)) {
-                envelopeData = self.chartComponentData.timeArrays[aggKey][splitBy].map(function (d) { return (__assign(__assign({}, d), { isEnvelope: true })); });
-            }
-            var envelope = d3.select(this).selectAll(".tsi-valueEnvelope")
-                .data([envelopeData]);
-            envelope.enter()
-                .append("path")
-                .attr("class", "tsi-valueElement tsi-valueEnvelope")
-                .merge(envelope)
-                .style("visibility", function (d) {
-                return (self.chartComponentData.isSplitByVisible(aggKey, splitBy)) ? "visible" : "hidden";
-            })
-                .transition()
-                .duration(durationFunction)
-                .ease(d3.easeExp)
-                .style("fill", splitByColors[j])
-                .attr("fill-opacity", .2)
-                .attr("d", aggEnvelope);
-            if (self.chartOptions.isArea) {
-                self.createAreaPath(aggY);
-                var area = d3.select(this).selectAll(".tsi-valueArea")
-                    .data([self.chartComponentData.timeArrays[aggKey][splitBy]]);
-                // logic for shiny gradient fill via url()
-                var svgId = Utils.guid();
-                var lg = self.defs.selectAll('linearGradient')
-                    .data([self.chartComponentData.timeArrays[aggKey][splitBy]]);
-                var gradient = lg.enter()
-                    .append('linearGradient');
-                gradient.merge(lg)
-                    .attr('id', svgId).attr('x1', '0%').attr('x2', '0%').attr('y1', '0%').attr('y2', '100%');
-                gradient.append('stop').attr('offset', '0%').attr('style', function () { return 'stop-color:' + splitByColors[j] + ';stop-opacity:.2'; });
-                gradient.append('stop').attr('offset', '100%').attr('style', function () { return 'stop-color:' + splitByColors[j] + ';stop-opacity:.03'; });
-                lg.exit().remove();
-                area.enter()
-                    .append("path")
-                    .attr("class", "tsi-valueArea")
-                    .merge(area)
-                    .style("fill", 'url(#' + (svgId) + ')')
-                    .style("visibility", function (d) {
-                    return (self.chartComponentData.isSplitByVisible(aggKey, splitBy)) ? "visible" : "hidden";
-                })
-                    .transition()
-                    .duration(durationFunction)
-                    .ease(d3.easeExp)
-                    .attr("d", self.areaPath);
-                area.exit().remove();
-            }
-            gapPath.exit().remove();
-            path.exit().remove();
-            previousAggregateData.set(this, splitBy);
-        });
-        splitByGroups.exit().remove();
-    };
-    return LinePlot;
-}(Plot));
-
-var TOPMARGIN = 4;
-var CategoricalPlot = /** @class */ (function (_super) {
-    __extends(CategoricalPlot, _super);
-    function CategoricalPlot(svgSelection) {
-        var _this = _super.call(this, svgSelection) || this;
-        _this.plotDataType = DataTypes.Categorical;
-        return _this;
-    }
-    CategoricalPlot.prototype.onMouseover = function (d, rectWidth) {
-        var _this = this;
-        var visibleMeasures = this.getVisibleMeasures(d.measures);
-        this.hoverRect.attr('visibility', 'visible')
-            .attr('x', function () {
-            return _this.x(new Date(d.dateTime));
-        })
-            .attr('width', rectWidth)
-            .attr('height', Math.max(0, this.chartHeight + 1 - LINECHARTTOPPADDING))
-            .attr('fill', function () {
-            return visibleMeasures.length === 1 ? _this.getColorForValue(visibleMeasures[0]) : 'none';
-        });
-    };
-    CategoricalPlot.prototype.onMouseout = function () {
-        this.hoverRect.attr('visibility', 'hidden');
-        this.categoricalMouseout();
-    };
-    CategoricalPlot.prototype.createHoverRect = function () {
-        if (!this.hoverRect) {
-            this.hoverRect = this.chartGroup.append('rect')
-                .attr('class', 'tsi-categoricalHoverRect')
-                .attr('y', LINECHARTTOPPADDING)
-                .attr('height', this.chartHeight + 1);
-        }
-        else {
-            this.hoverRect.raise();
-        }
-    };
-    CategoricalPlot.prototype.getSeriesEndDate = function () {
-        if (this.chartDataOptions.searchSpan) {
-            return new Date(this.chartDataOptions.searchSpan.to);
-        }
-        return new Date(this.chartComponentData.toMillis);
-    };
-    CategoricalPlot.prototype.getBucketEndDate = function (d, i) {
-        var _this = this;
-        var data = this.chartComponentData.timeArrays[d.aggregateKey][d.splitBy];
-        if (i + 1 < data.length) {
-            return data[i + 1].dateTime;
-        }
-        else {
-            var shouldRoundEnd = Utils.safeNotNullOrUndefined(function () { return _this.chartDataOptions.searchSpan; }) && Utils.safeNotNullOrUndefined(function () { return _this.chartDataOptions.searchSpan.bucketSize; });
-            return shouldRoundEnd ? Utils.roundToMillis(this.getSeriesEndDate().valueOf(), Utils.parseTimeInput(this.chartDataOptions.searchSpan.bucketSize)) : this.getSeriesEndDate();
-        }
-    };
-    CategoricalPlot.prototype.render = function (chartOptions, visibleAggI, agg, aggVisible, aggregateGroup, chartComponentData, yExtent, chartHeight, visibleAggCount, colorMap, previousAggregateData, x, areaPath, strokeOpacity, y, yMap, defs, chartDataOptions, previousIncludeDots, yTopAndHeight, chartGroup, categoricalMouseover, categoricalMouseout) {
-        var _this = this;
-        this.chartOptions = chartOptions;
-        this.yTop = yTopAndHeight[0];
-        this.height = yTopAndHeight[1];
-        this.x = x;
-        this.chartComponentData = chartComponentData;
-        var aggKey = agg.aggKey;
-        this.chartDataOptions = chartDataOptions;
-        this.chartHeight = chartHeight;
-        this.chartGroup = chartGroup;
-        this.categoricalMouseover = categoricalMouseover;
-        this.aggregateGroup = aggregateGroup;
-        this.categoricalMouseout = categoricalMouseout;
-        this.createBackdropRect(true);
-        if (this.aggregateGroup.selectAll('defs').empty()) {
-            this.defs = this.aggregateGroup.append('defs');
-        }
-        if (this.aggregateGroup.selectAll('.tsi-splitBysGroup').empty()) {
-            this.splitBysGroup = this.aggregateGroup.append('g').classed('tsi-splitBysGroup', true);
-        }
-        var gradientData = [];
-        var durationFunction = function (d) {
-            var previousUndefined = previousAggregateData.get(_this) === undefined;
-            return (self.chartOptions.noAnimate || previousUndefined) ? 0 : self.TRANSDURATION;
-        };
-        var self = this;
-        this.createHoverRect();
-        var series = this.getVisibleSeries(aggKey);
-        var heightPerSeries = Math.max((self.chartDataOptions.height - (series.length * TOPMARGIN)) / series.length, 0);
-        var splitByGroups = this.splitBysGroup.selectAll(".tsi-splitByGroup")
-            .data(series, function (d) {
-            return d.splitBy;
-        });
-        splitByGroups.enter()
-            .append("g")
-            .attr("class", "tsi-splitByGroup " + agg.aggKey)
-            .merge(splitByGroups)
-            .attr('transform', function (d, i) {
-            return 'translate(0,' + (NONNUMERICTOPMARGIN + (i * (_this.chartDataOptions.height / series.length))) + ')';
-        })
-            .each(function (splitBy, j) {
-            var data = self.chartComponentData.timeArrays[aggKey][splitBy];
-            var categoricalBuckets = d3.select(this).selectAll(".tsi-categoricalBucket")
-                .data(data);
-            var getWidth = function (d, i) {
-                self.x.range()[1] - self.x.range()[0];
-                var xPos1 = Math.max(self.x(new Date(d.dateTime)), 0);
-                var xPos2 = self.x(self.getBucketEndDate(d, i));
-                return Math.max(xPos2 - xPos1, 1);
-            };
-            var categoricalBucketsEntered = categoricalBuckets.enter()
-                .append("rect")
-                .attr("class", "tsi-valueElement tsi-categoricalBucket")
-                .merge(categoricalBuckets)
-                .style("visibility", function (d) {
-                return (self.chartComponentData.isSplitByVisible(aggKey, splitBy) && self.hasData(d)) ? "visible" : "hidden";
-            })
-                .on('mouseover', function (event, d) {
-                var e = categoricalBucketsEntered.nodes();
-                var i = e.indexOf(event.currentTarget);
-                var y = self.yTop + (j * (self.chartDataOptions.height / series.length));
-                var x = self.x(new Date(d.dateTime)) + (getWidth(d, i));
-                var shouldMouseover = self.categoricalMouseover(d, x, y + NONNUMERICTOPMARGIN, self.getBucketEndDate(d, i), getWidth(d, i));
-                if (shouldMouseover) {
-                    self.onMouseover(d, getWidth(d, i));
-                }
-            })
-                .on('mouseout', function () {
-                self.onMouseout();
-            })
-                .attr('cursor', (self.chartDataOptions.onElementClick ? 'pointer' : 'inherit'))
-                .on('click', function (event, d) {
-                if (self.chartDataOptions.onElementClick) {
-                    self.chartDataOptions.onElementClick(d.aggregateKey, d.splitBy, d.dateTime.toISOString(), d.measures);
-                }
-            })
-                .transition()
-                .duration(durationFunction)
-                .ease(d3.easeExp)
-                .attr('height', heightPerSeries)
-                .attr('width', getWidth)
-                .attr('x', function (d) {
-                return self.x(new Date(d.dateTime));
-            })
-                .each(function (d, i) {
-                var gradientKey = self.createGradientKey(d, j, i);
-                gradientData.push([gradientKey, d]);
-                d3.select(this)
-                    .attr('fill', "url(#" + gradientKey + ")");
-            });
-            categoricalBuckets.exit().remove();
-        });
-        splitByGroups.exit().remove();
-        //corresponding linear gradients
-        var gradients = this.defs.selectAll('linearGradient')
-            .data(gradientData, function (d) {
-            return d[1].splitBy;
-        });
-        var enteredGradients = gradients.enter()
-            .append('linearGradient')
-            .attr("x2", "0%")
-            .attr("y2", "100%")
-            .merge(gradients)
-            .attr("id", function (d) { return d[0]; });
-        enteredGradients
-            .each(function (d) {
-            self.addGradientStops(d[1], d3.select(this));
-        });
-        gradients.exit().remove();
-    };
-    return CategoricalPlot;
-}(Plot));
-
-var EventsPlot = /** @class */ (function (_super) {
-    __extends(EventsPlot, _super);
-    function EventsPlot(svgSelection) {
-        var _this = _super.call(this, svgSelection) || this;
-        _this.gradientArray = {};
-        _this.eventOnClick = function (d) {
-            if (_this.chartDataOptions.onElementClick) {
-                _this.chartDataOptions.onElementClick(d.aggregateKey, d.splitBy, d.dateTime.toISOString(), d.measures);
-            }
-        };
-        _this.colorFunction = function (d) {
-            if (d.measures) {
-                if (Object.keys(d.measures).length === 1) {
-                    return _this.getColorForValue(Object.keys(d.measures)[0]);
-                }
-                else {
-                    return 'grey';
-                }
-            }
-            return 'none';
-        };
-        _this.createDateStringFunction = function (shiftMillis) {
-            return Utils.timeFormat(_this.chartComponentData.usesSeconds, _this.chartComponentData.usesMillis, _this.chartOptions.offset, _this.chartOptions.is24HourTime, shiftMillis, null, _this.chartOptions.dateLocale);
-        };
-        _this.createEventElements = function (splitBy, g, splitByIndex) {
-            var sortEvents = function () {
-                enteredEvents.sort(function (a, b) {
-                    if (a.dateTime < b.dateTime) {
-                        return -1;
-                    }
-                    else if (a.dateTime > b.dateTime) {
-                        return 1;
-                    }
-                    return 0;
-                });
-            };
-            var data = _this.chartComponentData.timeArrays[_this.aggKey][splitBy];
-            var discreteEvents = g.selectAll(".tsi-discreteEvent")
-                .data(data, function (d) { return d.dateTime; });
-            var self = _this;
-            var enteredEvents;
-            var shiftMillis = _this.chartComponentData.getTemporalShiftMillis(_this.aggKey);
-            var dateStringFn = _this.createDateStringFunction(shiftMillis);
-            switch (_this.chartDataOptions.eventElementType) {
-                case EventElementTypes.Teardrop:
-                    if (discreteEvents.size() && discreteEvents.classed('tsi-discreteEventDiamond')) {
-                        g.selectAll('.tsi-discreteEvent').remove();
-                        discreteEvents = g.selectAll(".tsi-discreteEvent")
-                            .data(data, function (d) { return d.dateTime; });
-                    }
-                    enteredEvents = discreteEvents.enter()
-                        .append('path')
-                        .attr('class', 'tsi-discreteEvent tsi-valueElement')
-                        .merge(discreteEvents)
-                        .classed('tsi-discreteEventDiamond', false)
-                        .classed('tsi-discreteEventTeardrop', true)
-                        .attr('transform', function (d) {
-                        return 'translate(' + (_this.x(new Date(d.dateTime)) + _this.eventHeight / 2) + ',' + (_this.eventHeight * 1.4) + ') rotate(180)';
-                    })
-                        .attr('d', _this.teardropD(_this.eventHeight, _this.eventHeight))
-                        .attr('stroke-width', Math.min(_this.eventHeight / 2.25, 8))
-                        .attr('stroke', _this.colorFunction)
-                        .attr('fill', 'none');
-                    break;
-                case EventElementTypes.Diamond:
-                    if (discreteEvents.size() && discreteEvents.classed('tsi-discreteEventTeardrop')) {
-                        g.selectAll('.tsi-discreteEvent').remove();
-                        discreteEvents = g.selectAll(".tsi-discreteEvent")
-                            .data(data, function (d) { return d.dateTime; });
-                    }
-                    enteredEvents = discreteEvents.enter()
-                        .append('rect')
-                        .attr('class', 'tsi-discreteEvent tsi-valueElement')
-                        .merge(discreteEvents)
-                        .classed('tsi-discreteEventTeardrop', false)
-                        .classed('tsi-discreteEventDiamond', true)
-                        .attr('d', 'none')
-                        .attr('transform', function (d) {
-                        return 'translate(' + _this.x(new Date(d.dateTime)) + ',0) rotate(45)';
-                    })
-                        .attr('fill', _this.colorFunction)
-                        .attr('stroke', 'none');
-                    break;
-            }
-            enteredEvents
-                .attr('y', 0)
-                .attr('x', 0)
-                .attr('width', _this.eventHeight)
-                .attr('height', _this.eventHeight)
-                .on('mouseover', function (event, d) {
-                d3.select(this).raise();
-                self.onMouseover(d, splitByIndex);
-            })
-                .on('mouseout', function () {
-                _this.onMouseout();
-            })
-                .on('click', function (event, d) {
-                _this.eventOnClick(d);
-            })
-                .on('touchstart', function (event, d) {
-                _this.eventOnClick(d);
-            })
-                .on('keydown', function (event, d) {
-                if (event.keyCode === 9) {
-                    sortEvents();
-                    d3.select(this).node().focus();
-                }
-                if (event.keyCode === 32 || event.keyCode === 13) {
-                    self.eventOnClick(d);
-                }
-            })
-                .attr('role', _this.chartDataOptions.onElementClick ? 'button' : null)
-                .attr('tabindex', _this.chartDataOptions.onElementClick ? '0' : null)
-                .attr('cursor', _this.chartDataOptions.onElementClick ? 'pointer' : 'inherit')
-                .attr('aria-label', function (d) {
-                if (_this.chartDataOptions.onElementClick) {
-                    var dateString = dateStringFn(d);
-                    var retString_1 = "".concat(_this.getString('event in series'), " ").concat(d.aggregateName, " ").concat(_this.getString('at time'), " ").concat(dateString, ".");
-                    Object.keys(d.measures).forEach(function (mKey) {
-                        retString_1 += " ".concat(_this.getString('measure with key'), " ").concat(mKey, " ").concat(_this.getString('and value'), " ").concat(d.measures[mKey], ".");
-                    });
-                    return retString_1;
-                }
-                return null;
-            })
-                .style('visibility', function (d) {
-                return (self.chartComponentData.isSplitByVisible(_this.aggKey, splitBy) && self.hasData(d)) ? 'visible' : 'hidden';
-            })
-                .each(function (d, i) {
-                if (Object.keys(d.measures).length > 1) {
-                    var gradientKey = self.createGradientKey(d, splitByIndex, i);
-                    self.gradientData.push([gradientKey, d]);
-                    d3.select(this)
-                        .attr(self.chartDataOptions.eventElementType === EventElementTypes.Teardrop ? 'stroke' : 'fill', "url(#" + gradientKey + ")");
-                }
-            });
-            discreteEvents.exit().remove();
-        };
-        _this.shouldDrawBackdrop = function () {
-            //check to see if this is the first aggregate within a collapsed swimlane. 
-            var lane = _this.chartComponentData.getSwimlane(_this.aggKey);
-            if (!_this.chartOptions.swimLaneOptions || !_this.chartOptions.swimLaneOptions[lane] ||
-                !_this.chartOptions.swimLaneOptions[lane].collapseEvents) {
-                return true;
-            }
-            var eventSeriesInLane = Object.keys(_this.chartComponentData.displayState).filter(function (aggKey) {
-                return _this.chartComponentData.getSwimlane(aggKey) === lane;
-            });
-            return eventSeriesInLane.indexOf(_this.aggKey) === 0;
-        };
-        _this.plotDataType = DataTypes.Events;
-        return _this;
-    }
-    EventsPlot.prototype.onMouseover = function (d, seriesNumber) {
-        var _this = this;
-        var getX = function () {
-            return _this.x(new Date(d.dateTime));
-        };
-        var seriesWidth = Math.ceil(this.eventHeight * Math.sqrt(2));
-        var seriesTop = this.yTop + NONNUMERICTOPMARGIN + (seriesWidth * seriesNumber) + (seriesWidth / 2);
-        var shouldMouseover = this.discreteEventsMouseover(d, getX() + (seriesWidth / 2), seriesTop, seriesWidth);
-        if (!shouldMouseover) {
-            return;
-        }
-        var visibleMeasures = this.getVisibleMeasures(d.measures);
-        this.hoverLine.attr('visibility', 'visible')
-            .attr('x1', getX)
-            .attr('x2', getX)
-            .attr('y1', LINECHARTTOPPADDING)
-            .attr('y2', this.chartHeight + 1)
-            .attr('stroke', function () {
-            return visibleMeasures.length === 1 ? _this.getColorForValue(visibleMeasures[0]) : 'grey';
-        });
-    };
-    EventsPlot.prototype.onMouseout = function () {
-        this.hoverLine.attr('visibility', 'hidden');
-        this.discreteEventsMouseout();
-    };
-    EventsPlot.prototype.createHoverLine = function () {
-        if (!this.hoverLine) {
-            this.hoverLine = this.chartGroup.append('line')
-                .attr('class', 'tsi-discreteEventHoverLine')
-                .attr('y1', LINECHARTTOPPADDING)
-                .attr('y2', this.chartHeight + 1)
-                .attr('pointer-events', 'none')
-                .attr('visibility', 'hidden');
-        }
-        else {
-            this.hoverLine.raise();
-        }
-    };
-    EventsPlot.prototype.setEventHeight = function (visibleSeriesCount) {
-        var useableHeight = this.height - NONNUMERICTOPMARGIN;
-        this.eventHeight = Math.floor((useableHeight / visibleSeriesCount) / Math.sqrt(2));
-    };
-    EventsPlot.prototype.render = function (chartOptions, visibleAggI, agg, aggVisible, aggregateGroup, chartComponentData, yExtent, chartHeight, visibleAggCount, colorMap, previousAggregateData, x, areaPath, strokeOpacity, y, yMap, defs, chartDataOptions, previousIncludeDots, yTopAndHeight, chartGroup, discreteEventsMouseover, discreteEventsMouseout) {
-        var _this = this;
-        this.chartOptions = chartOptions;
-        this.yTop = yTopAndHeight[0];
-        this.height = yTopAndHeight[1];
-        this.x = x;
-        this.chartComponentData = chartComponentData;
-        this.aggKey = agg.aggKey;
-        this.chartDataOptions = chartDataOptions;
-        this.chartHeight = chartHeight;
-        this.chartGroup = chartGroup;
-        this.aggregateGroup = aggregateGroup;
-        this.discreteEventsMouseover = discreteEventsMouseover;
-        this.discreteEventsMouseout = discreteEventsMouseout;
-        this.createBackdropRect(this.shouldDrawBackdrop());
-        if (this.aggregateGroup.selectAll('defs').empty()) {
-            this.defs = this.aggregateGroup.append('defs');
-        }
-        this.createHoverLine();
-        var series = this.getVisibleSeries(agg.aggKey);
-        this.setEventHeight(series.length);
-        if (this.aggregateGroup.selectAll('.tsi-splitBysGroup').empty()) {
-            this.splitBysGroup = this.aggregateGroup.append('g').classed('tsi-splitBysGroup', true);
-        }
-        var self = this;
-        var splitByGroups = this.splitBysGroup.selectAll(".tsi-splitByGroup")
-            .data(series, function (d) {
-            return d.splitBy;
-        });
-        this.gradientData = [];
-        splitByGroups.enter()
-            .append("g")
-            .attr("class", "tsi-eventsGroup tsi-splitByGroup " + this.aggKey)
-            .merge(splitByGroups)
-            .attr('transform', function (d, i) {
-            return 'translate(0,' + (+(i * (_this.chartDataOptions.height / series.length))) + ')';
-        })
-            .each(function (splitBy, j) {
-            self.createEventElements(splitBy, d3.select(this), j);
-        }).each(function () {
-            self.themify(d3.select(this), self.chartOptions.theme);
-        });
-        splitByGroups.exit().remove();
-        var gradients = this.defs.selectAll('linearGradient')
-            .data(this.gradientData, function (d) {
-            return d[1].splitBy;
-        });
-        var enteredGradients = gradients.enter()
-            .append('linearGradient')
-            .attr("x2", "0%")
-            .attr("y2", "100%")
-            .merge(gradients)
-            .attr("id", function (d) { return d[0]; });
-        enteredGradients
-            .each(function (d) {
-            self.addGradientStops(d[1], d3.select(this));
-        });
-        gradients.exit().remove();
-    };
-    return EventsPlot;
-}(Plot));
-
-var AxisState = /** @class */ (function () {
-    function AxisState(axisType, yExtent, positionInGroup) {
-        this.axisType = axisType;
-        this.yExtent = yExtent;
-        this.positionInGroup = positionInGroup;
-    }
-    return AxisState;
-}());
-
-var MARKERSTRINGMAXLENGTH = 250;
-var MARKERVALUEMAXWIDTH = 80;
-var Marker = /** @class */ (function (_super) {
-    __extends(Marker, _super);
-    function Marker(renderTarget) {
-        var _this = _super.call(this, renderTarget) || this;
-        _this.tooltipMap = {};
-        _this.labelText = '';
-        _this.markerIsDragging = false;
-        _this.isSeriesLabels = false;
-        _this.ADDITIONALRIGHTSIDEOVERHANG = 12;
-        _this.guid = Utils.guid();
-        return _this;
-    }
-    Marker.prototype.getGuid = function () {
-        return this.guid;
-    };
-    Marker.prototype.setMillis = function (millis) {
-        this.timestampMillis = millis;
-    };
-    Marker.prototype.getMillis = function () {
-        return this.timestampMillis;
-    };
-    // returns whether the string was trimmed to the max length
-    Marker.prototype.setLabelText = function (labelText) {
-        if (labelText.length > MARKERSTRINGMAXLENGTH) {
-            this.labelText = labelText.slice(0, MARKERSTRINGMAXLENGTH);
-            return true;
-        }
-        this.labelText = labelText;
-        return false;
-    };
-    Marker.prototype.getLabelText = function () {
-        return this.labelText;
-    };
-    Marker.prototype.setSeriesLabelText = function (d, text, isSeriesLabelInFocus) {
-        text.classed('tsi-isExpanded', false);
-        var title = text.append('h4')
-            .attr('class', 'tsi-seriesLabelGroupName tsi-tooltipTitle');
-        Utils.appendFormattedElementsFromString(title, d.aggregateName);
-        var shiftTuple = this.chartComponentData.getTemporalShiftStringTuple(d.aggregateKey);
-        var shiftString = '';
-        if (shiftTuple !== null) {
-            shiftString = shiftTuple[0] === ShiftTypes.startAt ? this.timeFormat(new Date(shiftTuple[1])) : shiftTuple[1];
-        }
-        var labelDatum = {
-            splitBy: d.splitBy,
-            variableAlias: this.chartComponentData.displayState[d.aggregateKey].aggregateExpression.variableAlias,
-            timeShift: shiftString,
-        };
-        var subtitle = text.selectAll('.tsi-seriesLabelSeriesName').data([labelDatum]);
-        var enteredSubtitle = subtitle.enter()
-            .append('div')
-            .attr('class', 'tsi-seriesLabelSeriesName tsi-tooltipSubtitle');
-        if (labelDatum.splitBy && labelDatum.splitBy !== '') {
-            enteredSubtitle.append('span')
-                .classed('tsi-splitBy', true);
-        }
-        if (labelDatum.timeShift) {
-            enteredSubtitle.append('span')
-                .classed('tsi-timeShift', true);
-        }
-        if (labelDatum.variableAlias) {
-            enteredSubtitle.append('span')
-                .classed('tsi-variableAlias', true);
-        }
-        subtitle.exit().remove();
-        Utils.setSeriesLabelSubtitleText(enteredSubtitle, false);
-    };
-    Marker.prototype.tooltipFormat = function (d, text, measureFormat, xyrMeasures, isSeriesLabelInFocus) {
-        if (isSeriesLabelInFocus === void 0) { isSeriesLabelInFocus = false; }
-        var tooltipHeight = MARKERVALUENUMERICHEIGHT;
-        // revert to default text format if none specified
-        if (!this.isSeriesLabels) {
-            text.text(Utils.formatYAxisNumber(this.getValueOfVisible(d)))
-                .style('height', tooltipHeight + 'px')
-                .style('line-height', ((tooltipHeight - 2) + 'px')); // - 2 to account for border height
-        }
-        else {
-            this.setSeriesLabelText(d, text, isSeriesLabelInFocus);
-        }
-        text.classed('tsi-markerValueTooltipInner', true)
-            .style('border-color', this.colorMap[d.aggregateKey + "_" + d.splitBy]);
-    };
-    Marker.prototype.getLeft = function (d) {
-        return Math.round(this.x(d.timestamp) + this.marginLeft);
-    };
-    // check to see if any marker is being dragged
-    Marker.prototype.isMarkerDragOccuring = function () {
-        return this.markerIsDragging;
-    };
-    Marker.prototype.bumpMarker = function () {
-        var _this = this;
-        d3.select(this.renderTarget).selectAll('.tsi-markerContainer')
-            .style('animation', 'none')
-            .sort(function (a, b) {
-            if (a.timestamp === _this.timestampMillis) {
-                return 1;
-            }
-            if (b.timestamp === _this.timestampMillis) {
-                return -1;
-            }
-            return a.timestamp < b.timestamp ? 1 : -1;
-        });
-    };
-    Marker.prototype.renderMarker = function () {
-        var _this = this;
-        var self = this;
-        var marker = d3.select(this.renderTarget).selectAll(".tsi-markerContainer")
-            .filter(function (d) { return d.guid === _this.guid; })
-            .data([{ guid: this.guid, timestamp: this.timestampMillis }]);
-        this.markerContainer = marker.enter()
-            .append('div')
-            .attr('class', 'tsi-markerContainer')
-            .classed('tsi-isSeriesLabels', this.isSeriesLabels)
-            .merge(marker)
-            .style('top', "".concat(this.chartMargins.top + this.chartOptions.aggTopMargin, "px"))
-            .style('height', "".concat(this.chartHeight - (this.chartMargins.top + this.chartMargins.bottom + this.chartOptions.aggTopMargin), "px"))
-            .style('left', function (d) {
-            return "".concat(_this.getLeft(d), "px");
-        })
-            .classed('tsi-isFlipped', function (d) {
-            if (_this.isSeriesLabels) {
-                return false;
-            }
-            return (_this.chartOptions.labelSeriesWithMarker && _this.x(d.timestamp) > (_this.x.range()[1] - MARKERVALUEMAXWIDTH));
-        })
-            .each(function (markerD) {
-            if (self.isSeriesLabels) {
-                return;
-            }
-            if (d3.select(this).selectAll('.tsi-markerLine').empty()) {
-                d3.select(this).append('div')
-                    .attr('class', 'tsi-markerLine');
-                self.markerLabel = d3.select(this).append('div')
-                    .attr('class', 'tsi-markerLabel')
-                    .on('mouseleave', function () {
-                    d3.select(this).classed('tsi-markerLabelHovered', false);
-                });
-                self.markerLabel.append('div')
-                    .attr('class', 'tsi-markerGrabber')
-                    .on('mouseenter', function () {
-                    self.bumpMarker();
-                });
-                self.markerLabel.append('div')
-                    .attr('class', 'tsi-markerLabelText')
-                    .attr('contenteditable', 'true')
-                    .text(self.labelText)
-                    .on('keydown', function (event) {
-                    if (event.keyCode === KeyCodes.Enter && !event.shiftKey) {
-                        event.preventDefault();
-                        self.closeButton.node().focus();
-                    }
-                })
-                    .on('input', function () {
-                    var didTrim = self.setLabelText(d3.select(this).text());
-                    if (didTrim) {
-                        d3.select(this).text(self.labelText);
-                    }
-                })
-                    .on('focus', function () {
-                    d3.select(this.parentNode).classed('tsi-markerLabelTextFocused', true);
-                })
-                    .on('blur', function () {
-                    d3.select(this.parentNode).classed('tsi-markerLabelTextFocused', false);
-                    self.onChange(false, false, false);
-                })
-                    .on('mousedown', function (event) {
-                    event.stopPropagation();
-                })
-                    .on('mouseover', function () {
-                    if (!self.isMarkerDragOccuring()) {
-                        d3.select(d3.select(this).node().parentNode).classed('tsi-markerLabelHovered', true);
-                        self.bumpMarker();
-                    }
-                });
-                self.closeButton = self.markerLabel.append("button")
-                    .attr("aria-label", self.getString('Delete marker'))
-                    .classed("tsi-closeButton", true)
-                    .on("click", function () {
-                    self.onChange(true, false);
-                    d3.select(d3.select(this).node().parentNode.parentNode).remove();
-                });
-                self.timeLabel = d3.select(this).append("div")
-                    .attr('class', 'tsi-markerTimeLabel');
-            }
-            d3.select(this).selectAll('.tsi-markerTimeLabel,.tsi-markerLine,.tsi-markerLabel')
-                .call(d3.drag()
-                .on('start', function (event, d) {
-                d.isDragging = true;
-                self.markerIsDragging = true;
-                self.bumpMarker();
-            })
-                .on('drag', function (event, d) {
-                if (d3.select(event.sourceEvent.target).classed('tsi-closeButton')) {
-                    return;
-                }
-                d3.select(d3.select(this).node().parentNode);
-                var startPosition = self.x(new Date(self.timestampMillis));
-                var newPosition = startPosition + event.x;
-                self.timestampMillis = Utils.findClosestTime(self.x.invert(newPosition).valueOf(), self.chartComponentData.timeMap);
-                self.setPositionsAndLabels(self.timestampMillis);
-            })
-                .on('end', function (event, d) {
-                if (!d3.select(event.sourceEvent.target).classed('tsi-closeButton')) {
-                    self.onChange(false, false);
-                }
-                d.isDragging = false;
-                self.markerIsDragging = false;
-            }));
-        });
-        marker.exit().remove();
-    };
-    Marker.prototype.getValueOfVisible = function (d) {
-        return Utils.getValueOfVisible(d, this.chartComponentData.getVisibleMeasure(d.aggregateKey, d.splitBy));
-    };
-    Marker.prototype.getTooltipKey = function (d) {
-        return d.aggregateKey + '_' + d.splitBy;
-    };
-    Marker.prototype.findYatX = function (x, path) {
-        path.parentNode;
-        var length_end = path.getTotalLength();
-        var length_start = 0;
-        var point = path.getPointAtLength((length_end + length_start) / 2);
-        var bisection_iterations_max = 100;
-        var bisection_iterations = 0;
-        var error = 0.01;
-        while (x < point.x - error || x > point.x + error) {
-            point = path.getPointAtLength((length_end + length_start) / 2);
-            if (x < point.x) {
-                length_end = (length_start + length_end) / 2;
-            }
-            else {
-                length_start = (length_start + length_end) / 2;
-            }
-            if (bisection_iterations_max < ++bisection_iterations) {
-                break;
-            }
-        }
-        var offset = path.parentNode.parentNode.transform.baseVal[0].matrix.f; // roundabout way of getting the y transform of the agg group
-        return point.y + offset;
-    };
-    Marker.prototype.positionToValue = function (yPos, aggKey) {
-        var yScale = this.yMap[aggKey];
-        return yScale.invert(yPos);
-    };
-    Marker.prototype.bisectionInterpolateValue = function (millis, aggKey, splitBy, path) {
-        if (path === null) {
-            return null;
-        }
-        var yPosition = this.findYatX(this.x(millis), path);
-        var interpolatedValue = this.positionToValue(yPosition, aggKey);
-        var newDatum = this.createNewDatum(aggKey, splitBy, interpolatedValue);
-        newDatum.isInterpolated = true;
-        return newDatum;
-    };
-    Marker.prototype.getPath = function (aggKey, splitBy) {
-        var selectedPaths = d3.select(this.renderTarget).selectAll('.tsi-valueLine').filter(function (d) {
-            if (d.length) {
-                return d[0].aggregateKey === aggKey && d[0].splitBy === splitBy;
-            }
-            return false;
-        });
-        if (selectedPaths.size() === 0) {
-            return null;
-        }
-        return selectedPaths.nodes()[0];
-    };
-    Marker.prototype.createNewDatum = function (aggKey, splitBy, valueOfVisible) {
-        var newDatum = {};
-        newDatum.aggregateKey = aggKey;
-        newDatum.splitBy = splitBy;
-        newDatum.measures = {};
-        newDatum.measures[this.chartComponentData.getVisibleMeasure(aggKey, splitBy)] = valueOfVisible;
-        return newDatum;
-    };
-    Marker.prototype.findGapPath = function (aggKey, splitBy, millis) {
-        var gapPath = d3.select(this.renderTarget).selectAll('.tsi-gapLine')
-            .filter(function (d) {
-            if (d.length === 2 && aggKey === d[0].aggregateKey && splitBy === d[0].splitBy) {
-                return (millis > d[0].dateTime.valueOf() && millis < d[1].dateTime.valueOf());
-            }
-            return false;
-        });
-        if (gapPath.size() === 0) {
-            return null;
-        }
-        return gapPath.nodes()[0];
-    };
-    //check if a value is within the time constrained bounds of a path
-    Marker.prototype.inBounds = function (path, millis) {
-        var _this = this;
-        var filteredData = path.data()[0].filter(function (d) {
-            return d.measures && _this.getValueOfVisible(d) !== null;
-        });
-        if (filteredData.length > 0) {
-            var lowerBound = filteredData[0].dateTime.valueOf();
-            var upperBound = filteredData[filteredData.length - 1].dateTime.valueOf();
-            return millis >= lowerBound && millis <= upperBound;
-        }
-        return false;
-    };
-    Marker.prototype.getIntersectingPath = function (aggKey, splitBy, millis) {
-        if (this.chartComponentData.displayState[aggKey].bucketSize) {
-            millis = millis - (this.chartComponentData.displayState[aggKey].bucketSize / 2);
-        }
-        var gapPath = this.findGapPath(aggKey, splitBy, millis);
-        if (gapPath) {
-            return gapPath;
-        }
-        else {
-            return this.inBounds(d3.select(this.getPath(aggKey, splitBy)), millis) ? this.getPath(aggKey, splitBy) : null;
-        }
-    };
-    Marker.prototype.interpolateValue = function (millis, aggKey, splitBy) {
-        var path = this.getIntersectingPath(aggKey, splitBy, millis);
-        if (path === null) {
-            return null;
-        }
-        return this.bisectionInterpolateValue(millis, aggKey, splitBy, path);
-    };
-    Marker.prototype.getValuesAtTime = function (closestTime) {
-        var _this = this;
-        var valueArray = [];
-        var values = this.chartComponentData.timeMap[closestTime] != undefined ? this.chartComponentData.timeMap[closestTime] : [];
-        Object.keys(this.chartComponentData.visibleTAs).forEach(function (aggKey) {
-            Object.keys(_this.chartComponentData.visibleTAs[aggKey]).forEach(function (splitBy) {
-                if (_this.chartComponentData.displayState[aggKey].dataType !== DataTypes.Numeric) {
-                    return;
-                }
-                var filteredValues = values.filter(function (v) {
-                    return (v.aggregateKey === aggKey && v.splitBy === splitBy && _this.getValueOfVisible(v) !== null);
-                });
-                if (filteredValues.length === 1 && (_this.getValueOfVisible(filteredValues[0]) !== null)) {
-                    valueArray.push(filteredValues[0]);
-                }
-                else {
-                    var interpolatedValue = _this.interpolateValue(closestTime, aggKey, splitBy);
-                    if (interpolatedValue !== null || !_this.isSeriesLabels) {
-                        valueArray.push(interpolatedValue);
-                    }
-                    else {
-                        var lastValue = _this.chartComponentData.findLastTimestampWithValue(aggKey, splitBy);
-                        if (lastValue !== null) {
-                            valueArray.push(lastValue);
-                        }
-                    }
-                }
-            });
-        });
-        return valueArray;
-    };
-    Marker.prototype.setValueLabels = function (closestTime) {
-        var _this = this;
-        var values = this.getValuesAtTime(closestTime);
-        values = values.filter(function (d) {
-            return d && _this.chartComponentData.getDataType(d.aggregateKey) === DataTypes.Numeric;
-        });
-        var self = this;
-        var valueLabels = this.markerContainer.selectAll(".tsi-markerValue").data(values, function (d) {
-            return d.aggregateKey + "_" + d.splitBy;
-        });
-        valueLabels.enter()
-            .append("div")
-            .classed("tsi-markerValue", true)
-            .classed('tsi-seriesLabelValue', this.isSeriesLabels)
-            .merge(valueLabels)
-            .classed('tsi-isInterpolated', function (d) {
-            return d.isInterpolated;
-        })
-            .style('top', function (d) { return _this.calcTopOfValueLabel(d) + 'px'; })
-            .each(function (d) {
-            var tooltipKey = self.getTooltipKey(d);
-            var tooltip;
-            if (self.tooltipMap[tooltipKey]) {
-                tooltip = self.tooltipMap[tooltipKey];
-            }
-            else {
-                tooltip = new Tooltip(d3.select(this));
-                self.tooltipMap[tooltipKey] = tooltip;
-            }
-            tooltip.render(self.chartOptions.theme);
-            tooltip.draw(d, self.chartComponentData, 0, MARKERVALUENUMERICHEIGHT / 2, { right: 0, left: 0, top: 0, bottom: 0 }, function (tooltipTextElement) {
-                self.tooltipFormat(d, tooltipTextElement, null, null);
-            }, null, 0, 0, self.colorMap[d.aggregateKey + "_" + d.splitBy], true);
-            var markerValueCaret = d3.select(this).selectAll('.tsi-markerValueCaret')
-                .data([d]);
-            markerValueCaret.enter().append('div')
-                .attr('class', 'tsi-markerValueCaret')
-                .merge(markerValueCaret)
-                .style("border-right-color", function () { return self.colorMap[d.aggregateKey + "_" + d.splitBy]; });
-            markerValueCaret.exit().remove();
-        });
-        var valueLabelsExit = valueLabels.exit();
-        valueLabelsExit.each(function (d) {
-            delete _this.tooltipMap[_this.getTooltipKey(d)];
-        });
-        valueLabelsExit.remove();
-    };
-    Marker.prototype.calcTopOfValueLabel = function (d) {
-        var yScale = this.yMap[d.aggregateKey];
-        return Math.round(yScale(this.getValueOfVisible(d)) - this.chartOptions.aggTopMargin);
-    };
-    Marker.prototype.getTimeFormat = function () {
-        return Utils.timeFormat(this.chartComponentData.usesSeconds, this.chartComponentData.usesMillis, this.chartOptions.offset, this.chartOptions.is24HourTime, 0, null, this.chartOptions.dateLocale);
-    };
-    Marker.prototype.setTimeLabel = function (closestTime) {
-        if (this.isSeriesLabels) {
-            return;
-        }
-        var values = this.chartComponentData.timeMap[closestTime];
-        if (values == undefined || values.length == 0) {
-            return;
-        }
-        var firstValue = values[0].dateTime;
-        var secondValue = new Date(values[0].dateTime.valueOf() + (values[0].bucketSize != null ? values[0].bucketSize : 0));
-        this.timeLabel.text('');
-        this.timeLabel.append('div')
-            .attr('class', 'tsi-markerTimeLine')
-            .text(this.timeFormat(firstValue));
-        if (values[0].bucketSize !== null) {
-            this.timeLabel.append('div')
-                .attr('class', 'tsi-markerTimeLine')
-                .text(this.timeFormat(secondValue));
-        }
-        var markerLeft = Number(this.markerContainer.style("left").replace("px", ""));
-        var timeLabelWidth = Math.round(this.timeLabel.node().getBoundingClientRect().width);
-        var minLeftPosition = this.marginLeft + LINECHARTXOFFSET;
-        var width = this.x.range()[1] - this.x.range()[0];
-        var maxRightPosition = width + this.marginLeft + LINECHARTXOFFSET + this.ADDITIONALRIGHTSIDEOVERHANG;
-        var calculatedLeftPosition = markerLeft - (timeLabelWidth / 2);
-        var calculatedRightPosition = markerLeft + (timeLabelWidth / 2);
-        var translate = "translateX(calc(-50% + 1px))";
-        if (calculatedLeftPosition < minLeftPosition) {
-            translate = "translateX(-" + Math.max(0, markerLeft - minLeftPosition) + "px)";
-        }
-        if (calculatedRightPosition > maxRightPosition) {
-            translate = "translateX(calc(-50% + " + (maxRightPosition - calculatedRightPosition) + "px))";
-        }
-        this.timeLabel
-            .style("-webkit-tranform", translate)
-            .style("transform", translate);
-    };
-    Marker.prototype.focusCloseButton = function () {
-        if (this.closeButton) {
-            this.closeButton.node().focus();
-        }
-    };
-    Marker.prototype.isMarkerInRange = function (millis) {
-        if (millis === void 0) { millis = this.timestampMillis; }
-        var domain = this.x.domain();
-        return !(millis < domain[0].valueOf() || millis > domain[1].valueOf());
-    };
-    Marker.prototype.destroyMarker = function () {
-        if (this.markerContainer) {
-            this.markerContainer.remove();
-        }
-        this.tooltipMap = {};
-        this.markerContainer = null;
-    };
-    Marker.prototype.render = function (timestampMillis, chartOptions, chartComponentData, additionalMarkerFields) {
-        this.chartMargins = Object.assign({}, additionalMarkerFields.chartMargins);
-        this.chartHeight = additionalMarkerFields.chartHeight;
-        this.timestampMillis = timestampMillis;
-        this.chartOptions = chartOptions;
-        this.x = additionalMarkerFields.x;
-        this.chartComponentData = chartComponentData;
-        this.marginLeft = additionalMarkerFields.marginLeft;
-        this.colorMap = additionalMarkerFields.colorMap;
-        this.timeFormat = this.getTimeFormat();
-        this.isSeriesLabels = additionalMarkerFields.isSeriesLabels;
-        if (additionalMarkerFields.labelText) {
-            this.labelText = additionalMarkerFields.labelText;
-        }
-        this.yMap = additionalMarkerFields.yMap;
-        if (additionalMarkerFields.onChange) { // only update onChange if passed in, otherwise maintain previous
-            this.onChange = additionalMarkerFields.onChange;
-        }
-        if (!this.isMarkerInRange(this.timestampMillis)) {
-            this.destroyMarker();
-            return;
-        }
-        this.renderMarker();
-        var closestTime = Utils.findClosestTime(this.timestampMillis, this.chartComponentData.timeMap);
-        this.setPositionsAndLabels(closestTime);
-        _super.prototype.themify.call(this, this.markerContainer, this.chartOptions.theme);
-    };
-    Marker.prototype.setPositionsAndLabels = function (millis) {
-        if (!this.isMarkerInRange(millis)) {
-            this.destroyMarker();
-            return;
-        }
-        this.renderMarker();
-        this.setTimeLabel(millis);
-        this.setValueLabels(millis);
-    };
-    return Marker;
-}(Component));
-
-var LineChart = /** @class */ (function (_super) {
-    __extends(LineChart, _super);
-    function LineChart(renderTarget) {
-        var _this = _super.call(this, renderTarget) || this;
-        _this.minBrushWidth = 1;
-        _this.strokeOpacity = 1;
-        _this.nonFocusStrokeOpactiy = .3;
-        _this.chartComponentData = new LineChartData();
-        _this.surpressBrushTimeSet = false;
-        _this.hasStackedButton = false;
-        _this.stackedButton = null;
-        _this.horizontalLabelOffset = LINECHARTCHARTMARGINS.left + swimlaneLabelConstants.leftMarginOffset;
-        _this.markers = {};
-        _this.seriesLabelsMarker = null;
-        _this.markerGuidMap = {};
-        _this.isDroppingMarker = false;
-        _this.brushStartPosition = null;
-        _this.brushEndPosition = null;
-        _this.hasBrush = false;
-        _this.isClearingBrush = false;
-        _this.previousAggregateData = d3.local();
-        _this.previousIncludeDots = d3.local();
-        _this.mx = null;
-        _this.my = null;
-        _this.focusedAggKey = null;
-        _this.focusedSplitby = null;
-        _this.plotComponents = {};
-        _this.isFirstMarkerDrop = true;
-        _this.xOffset = 8;
-        _this.swimlaneYExtents = {}; // mapping of swimlanes to the y extents of that swimlane
-        _this.swimLaneContents = {};
-        _this.resetValueElementsFocus = function () {
-            _this.svgSelection.selectAll(".tsi-valueElement")
-                .attr("stroke-opacity", _this.strokeOpacity)
-                .filter(function () {
-                return !d3.select(this).classed("tsi-valueEnvelope");
-            })
-                .attr("fill-opacity", 1);
-            _this.svgSelection.selectAll(".tsi-valueEnvelope")
-                .attr("fill-opacity", .2);
-            Utils.revertAllSubtitleText(d3.select(_this.renderTarget).selectAll('.tsi-markerValue'));
-            _this.focusedAggKey = null;
-            _this.focusedSplitby = null;
-        };
-        _this.triggerLineFocus = function (aggKey, splitBy) {
-            _this.focusedAggKey = null;
-            _this.focusedSplitby = null;
-            _this.focusOnlyHoveredSeries(aggKey, splitBy, true);
-        };
-        _this.focusOnlyHoveredSeries = function (aggKey, splitBy, shouldSetFocusedValues) {
-            if (aggKey !== _this.focusedAggKey || splitBy !== _this.focusedSplitby) {
-                var selectedFilter = Utils.createValueFilter(aggKey, splitBy);
-                _this.focusMarkerLabel(selectedFilter, aggKey, splitBy);
-                _this.svgSelection.selectAll(".tsi-valueElement")
-                    .attr("stroke-opacity", _this.nonFocusStrokeOpactiy)
-                    .attr("fill-opacity", .3);
-                _this.svgSelection.selectAll(".tsi-valueEnvelope")
-                    .attr("fill-opacity", .1);
-                _this.svgSelection.selectAll(".tsi-valueElement")
-                    .filter(selectedFilter)
-                    .attr("stroke-opacity", _this.strokeOpacity)
-                    .attr("fill-opacity", 1);
-                _this.svgSelection.selectAll(".tsi-valueEnvelope")
-                    .filter(selectedFilter)
-                    .attr("fill-opacity", .3);
-                if (shouldSetFocusedValues) {
-                    _this.focusedAggKey = aggKey;
-                    _this.focusedSplitby = splitBy;
-                }
-            }
-        };
-        _this.discreteEventsMouseover = function (d, x, y, width) {
-            if (_this.isDroppingMarker) {
-                return false;
-            }
-            _this.legendObject.triggerSplitByFocus(d.aggregateKey, d.splitBy);
-            _this.focusOnlyHoveredSeries(d.aggregateKey, d.splitBy, true);
-            var xPos = x;
-            y + _this.chartMargins.top;
-            _this.getValueOfVisible(d);
-            if (_this.chartOptions.tooltip) {
-                _this.tooltip.render(_this.chartOptions.theme);
-                _this.tooltip.draw(d, _this.chartComponentData, xPos, y, _this.chartMargins, function (text) {
-                    _this.tooltipFormat(d, text, TooltipMeasureFormat.SingleValue);
-                }, width, 0, 0);
-            }
-            else
-                _this.tooltip.hide();
-            return true;
-        };
-        _this.discreteEventsMouseout = function () {
-            _this.legendObject.legendElement.selectAll('.tsi-splitByLabel').classed("inFocus", false);
-            _this.resetValueElementsFocus();
-            _this.tooltip.hide();
-        };
-        //returns false if supressed via isDroppingMarker, true otherwise
-        _this.categoricalMouseover = function (d, x, y, endDate, width) {
-            if (_this.isDroppingMarker) {
-                return false;
-            }
-            _this.legendObject.triggerSplitByFocus(d.aggregateKey, d.splitBy);
-            _this.focusOnlyHoveredSeries(d.aggregateKey, d.splitBy, true);
-            var xPos = x;
-            y + _this.chartMargins.top;
-            _this.getValueOfVisible(d);
-            if (_this.chartOptions.tooltip) {
-                _this.tooltip.render(_this.chartOptions.theme);
-                _this.tooltip.draw(d, _this.chartComponentData, xPos, y, _this.chartMargins, function (text) {
-                    d.endDate = endDate;
-                    _this.tooltipFormat(d, text, TooltipMeasureFormat.SingleValue);
-                }, width, 0, 0);
-            }
-            else
-                _this.tooltip.hide();
-            return true;
-        };
-        _this.categoricalMouseout = function () {
-            _this.legendObject.legendElement.selectAll('.tsi-splitByLabel').classed("inFocus", false);
-            _this.resetValueElementsFocus();
-            _this.tooltip.hide();
-        };
-        _this.voronoiMouseover = function (d) {
-            //supress if the context menu is visible
-            if (_this.contextMenu && _this.contextMenu.contextMenuVisible)
-                return;
-            var shiftMillis = _this.chartComponentData.getTemporalShiftMillis(d.aggregateKey);
-            var yScale = _this.yMap[d.aggregateKey];
-            var xValue = d.dateTime;
-            var xPos = _this.getXPosition(d, _this.x);
-            var yValue = _this.getValueOfVisible(d);
-            var yPos = yScale(yValue);
-            _this.focus.style("display", "block");
-            _this.focus.attr("transform", "translate(" + xPos + "," + yPos + ")");
-            _this.focus.select('.tsi-hLine').attr("transform", "translate(" + (-xPos) + ",0)");
-            _this.focus.select('.tsi-vLine').attr("transform", "translate(0," + (-yPos) + ")");
-            _this.setHorizontalValuePosAndText(d, xPos + _this.getSVGLeftOffset() + _this.chartMargins.left, xValue, shiftMillis);
-            _this.setVerticalValueAndPosition(yValue, yPos + _this.chartMargins.top);
-            var bucketSize = _this.chartComponentData.displayState[d.aggregateKey].bucketSize;
-            var endValue = bucketSize ? (new Date(xValue.valueOf() + bucketSize)) : null;
-            if (endValue) {
-                var barWidth = _this.x(endValue) - _this.x(xValue);
-                _this.horizontalValueBar
-                    .style('display', 'block')
-                    .attr("x1", (-barWidth / 2))
-                    .attr("x2", (barWidth / 2))
-                    .attr('y1', _this.chartHeight - yPos + 2)
-                    .attr('y2', _this.chartHeight - yPos + 2);
-            }
-            else {
-                _this.horizontalValueBar.style('display', 'none');
-            }
-            if (_this.chartOptions.tooltip) {
-                _this.tooltip.render(_this.chartOptions.theme);
-                _this.tooltip.draw(d, _this.chartComponentData, xPos, yPos, _this.chartMargins, function (text) {
-                    _this.tooltipFormat(d, text, TooltipMeasureFormat.Enveloped);
-                }, null, 20, 20, _this.colorMap[d.aggregateKey + "_" + d.splitBy]);
-            }
-            else
-                _this.tooltip.hide();
-            _this.focus.node().parentNode.appendChild(_this.focus.node());
-            _this.legendObject.triggerSplitByFocus(d.aggregateKey, d.splitBy);
-            /** update the y axis for in focus aggregate */
-            if (_this.chartOptions.yAxisState === YAxisStates.Overlap) {
-                _this.svgSelection.selectAll(".yAxis")
-                    .selectAll("text")
-                    .style("fill-opacity", .5)
-                    .classed("standardYAxisText", true);
-                _this.svgSelection.selectAll(".yAxis")
-                    .filter(function (yAxisAggKey) {
-                    return yAxisAggKey == d.aggregateKey;
-                })
-                    .selectAll("text")
-                    .style("fill-opacity", 1)
-                    .classed("standardYAxisText", false)
-                    .style("font-weight", "bold");
-            }
-            if (_this.chartOptions.yAxisHidden) {
-                _this.svgSelection.selectAll(".yAxis").style("display", "hidden");
-            }
-            if (_this.chartOptions.xAxisHidden) {
-                _this.svgSelection.selectAll(".xAxis").style("display", "none");
-            }
-            _this.chartOptions.onMouseover(d.aggregateKey, d.splitBy);
-        };
-        _this.stickyOrUnstickySeries = function (aggKey, splitBy) {
-            if (_this.chartComponentData.stickiedKey && _this.chartComponentData.stickiedKey.aggregateKey === aggKey &&
-                _this.chartComponentData.stickiedKey.splitBy === splitBy) {
-                _this.unstickySeries(aggKey, splitBy);
-            }
-            else {
-                _this.stickySeries(aggKey, splitBy);
-            }
-        };
-        _this.unstickySeries = function (aggKey, splitby) {
-            if (splitby === void 0) { splitby = null; }
-            if (_this.getDataType(aggKey) !== DataTypes.Numeric || !_this.chartOptions.shouldSticky) {
-                return;
-            }
-            _this.chartComponentData.stickiedKey = null;
-            _this.legendObject.legendElement.selectAll('.tsi-splitByLabel').classed("stickied", false);
-            // recompute voronoi with no sticky
-            _this.voronoiDiagram = _this.voronoi(_this.getFilteredAndSticky(_this.chartComponentData.allValues));
-            _this.chartOptions.onUnsticky(aggKey, splitby);
-        };
-        _this.stickySeries = function (aggregateKey, splitBy) {
-            if (splitBy === void 0) { splitBy = null; }
-            if (_this.getDataType(aggregateKey) !== DataTypes.Numeric || !_this.chartOptions.shouldSticky) {
-                return;
-            }
-            var filteredValues = _this.getFilteredAndSticky(_this.chartComponentData.allValues);
-            if (filteredValues == null || filteredValues.length == 0)
-                return;
-            _this.focusedAggKey = null;
-            _this.focusedSplitby = null;
-            _this.chartComponentData.stickiedKey = {
-                aggregateKey: aggregateKey,
-                splitBy: (splitBy == null ? null : splitBy)
-            };
-            _this.legendObject.legendElement.selectAll('.tsi-splitByLabel').filter(function (filteredSplitBy) {
-                return (d3.select(this.parentNode).datum() == aggregateKey) && (filteredSplitBy == splitBy);
-            }).classed("stickied", true);
-            _this.voronoiDiagram = _this.voronoi(_this.getFilteredAndSticky(_this.chartComponentData.allValues));
-            _this.chartOptions.onSticky(aggregateKey, splitBy);
-        };
-        _this.filteredValueExist = function () {
-            var filteredValues = _this.getFilteredAndSticky(_this.chartComponentData.allValues);
-            return !(filteredValues == null || filteredValues.length == 0);
-        };
-        _this.addMarker = function () {
-            if (_this.isFirstMarkerDrop) {
-                _this.isFirstMarkerDrop = false;
-                _this.createMarkerInstructions();
-            }
-            _this.isDroppingMarker = !_this.isDroppingMarker;
-            if (!_this.isDroppingMarker) {
-                _this.destroyMarkerInstructions();
-                return;
-            }
-            Utils.focusOnEllipsisButton(_this.renderTarget);
-            var marker = new Marker(_this.renderTarget);
-            var markerUID = Utils.guid();
-            var onChange = _this.createOnMarkerChange(markerUID, marker);
-            _this.activeMarker = marker;
-            _this.markerGuidMap[markerUID] = marker;
-            _this.renderMarker(marker, Infinity, onChange, "".concat(_this.getString('Marker'), " ").concat(Object.keys(_this.markerGuidMap).length));
-        };
-        _this.labelMouseout = function () {
-            if (_this.svgSelection) {
-                Utils.revertAllSubtitleText(d3.select(_this.renderTarget).selectAll('.tsi-markerValue'));
-                _this.svgSelection.selectAll(".tsi-valueElement")
-                    .filter(function () { return !d3.select(this).classed("tsi-valueEnvelope"); })
-                    .attr("stroke-opacity", 1)
-                    .attr("fill-opacity", 1);
-                _this.svgSelection.selectAll(".tsi-valueEnvelope")
-                    .attr("fill-opacity", .3);
-            }
-        };
-        _this.labelMouseover = function (aggregateKey, splitBy) {
-            if (splitBy === void 0) { splitBy = null; }
-            _this.focusOnlyHoveredSeries(aggregateKey, splitBy, false);
-        };
-        _this.nextStackedState = function () {
-            if (_this.chartOptions.yAxisState === YAxisStates.Stacked)
-                return "shared";
-            else if (_this.chartOptions.yAxisState === YAxisStates.Shared)
-                return "overlap";
-            else
-                return "stacked";
-        };
-        _this.MINHEIGHT = 26;
-        _this.chartMargins = Object.assign({}, LINECHARTCHARTMARGINS);
-        return _this;
-    }
-    LineChart.prototype.LineChart = function () {
-    };
-    //get the left and right positions of the brush
-    LineChart.prototype.getBrushPositions = function () {
-        var leftPos = null;
-        var rightPos = null;
-        if (this.brushStartTime) {
-            var rawLeft = this.x(this.brushStartTime);
-            if (rawLeft >= 0 && rawLeft <= this.chartWidth)
-                leftPos = Math.round(rawLeft + this.chartMargins.left);
-        }
-        if (this.brushEndTime) {
-            var rawRight = this.x(this.brushEndTime);
-            if (rawRight >= 0 && rawRight <= this.chartWidth)
-                rightPos = Math.round(rawRight + this.chartMargins.left);
-        }
-        return {
-            leftPos: leftPos,
-            rightPos: rightPos
-        };
-    };
-    LineChart.prototype.hideFocusElements = function () {
-        this.focus.style('display', 'none');
-        this.verticalValueBox.style('display', 'none');
-        this.horizontalValueBox.style('display', 'none');
-    };
-    LineChart.prototype.voronoiMouseout = function (event, d) {
-        //supress if the context menu is visible
-        if (this.contextMenu && this.contextMenu.contextMenuVisible)
-            return;
-        this.hideFocusElements();
-        this.tooltip.hide();
-        this.legendObject.legendElement.selectAll('.tsi-splitByLabel').classed("inFocus", false);
-        if (event && event.type != 'end') {
-            event.stopPropagation();
-        }
-        this.resetValueElementsFocus();
-        /** Update y Axis */
-        if (this.chartOptions.yAxisState == YAxisStates.Overlap) {
-            this.svgSelection.selectAll(".yAxis")
-                .selectAll("text")
-                .style("fill-opacity", 1)
-                .classed("standardYAxisText", false)
-                .style("font-weight", "normal");
-        }
-    };
-    LineChart.prototype.createMarkerInstructions = function () {
-        this.targetElement.selectAll(".tsi-markerInstructions").remove();
-        this.targetElement.append("div")
-            .classed("tsi-markerInstructions", true)
-            .attr('role', 'alert')
-            .attr('aria-live', 'assertive')
-            .text(this.getString("Click to drop marker") + "," + this.getString("drag to reposition") + ".");
-    };
-    LineChart.prototype.destroyMarkerInstructions = function () {
-        this.targetElement.selectAll(".tsi-markerInstructions").remove();
-    };
-    LineChart.prototype.getMouseoverFunction = function (chartType) {
-        if (chartType === void 0) { chartType = DataTypes.Numeric; }
-        switch (chartType) {
-            case DataTypes.Categorical:
-                return this.categoricalMouseover;
-            case DataTypes.Events:
-                return this.discreteEventsMouseover;
-            default:
-                return function () { };
-        }
-    };
-    LineChart.prototype.getMouseoutFunction = function (chartType) {
-        if (chartType === void 0) { chartType = DataTypes.Numeric; }
-        switch (chartType) {
-            case DataTypes.Categorical:
-                return this.categoricalMouseout;
-            case DataTypes.Events:
-                return this.discreteEventsMouseout;
-            default:
-                return function () { };
-        }
-    };
-    LineChart.prototype.mismatchingChartType = function (aggKey) {
-        if (!this.plotComponents[aggKey]) {
-            return false;
-        }
-        var typeOfPlot = this.plotComponents[aggKey].plotDataType;
-        return typeOfPlot !== this.getDataType(aggKey);
-    };
-    LineChart.prototype.setHorizontalValuePosAndText = function (d, xPos, xValue, shiftMillis) {
-        var bucketSize = this.chartComponentData.displayState[d.aggregateKey].bucketSize;
-        var endValue = bucketSize ? (new Date(xValue.valueOf() + bucketSize)) : null;
-        this.horizontalValueBox.text('')
-            .style('left', "".concat(xPos, "px"))
-            .style('top', "".concat((this.chartMargins.top + this.chartHeight + VALUEBARHEIGHT), "px"))
-            .style('display', 'block');
-        this.horizontalValueBox.append('div')
-            .attr('class', 'tsi-valueBoxText')
-            .text(Utils.timeFormat(this.chartComponentData.usesSeconds, this.chartComponentData.usesMillis, this.chartOptions.offset, this.chartOptions.is24HourTime, shiftMillis, null, this.chartOptions.dateLocale)(xValue));
-        if (endValue !== null) {
-            this.horizontalValueBox.append('div')
-                .attr('class', 'tsi-valueBoxText')
-                .text(Utils.timeFormat(this.chartComponentData.usesSeconds, this.chartComponentData.usesMillis, this.chartOptions.offset, this.chartOptions.is24HourTime, shiftMillis, null, this.chartOptions.dateLocale)(endValue));
-        }
-    };
-    LineChart.prototype.setVerticalValueAndPosition = function (yValue, yPos) {
-        this.verticalValueBox.style('top', "".concat(yPos, "px"))
-            .style('right', "".concat((this.chartMargins.right + this.chartWidth), "px"))
-            .style('display', 'block')
-            .text(Utils.formatYAxisNumber(yValue));
-    };
-    //get the extent of an array of timeValues
-    LineChart.prototype.getYExtent = function (aggValues, isEnvelope, aggKey) {
-        var _this = this;
-        if (aggKey === void 0) { aggKey = null; }
-        var extent;
-        if (aggKey !== null && (this.chartComponentData.displayState[aggKey].yExtent !== null)) {
-            return this.chartComponentData.displayState[aggKey].yExtent;
-        }
-        if (this.chartOptions.yExtent !== null) {
-            return this.chartOptions.yExtent;
-        }
-        if (isEnvelope) {
-            var filteredValues = this.getFilteredValues(aggValues);
-            var flatValuesList = [];
-            filteredValues.forEach(function (d) {
-                if (_this.chartComponentData.isPossibleEnvelope(d.aggregateKey, d.splitBy)) {
-                    if (d.measures['min'] != undefined && d.measures['min'] != null) {
-                        flatValuesList.push(d.measures['min']);
-                    }
-                    if (d.measures['avg'] != undefined && d.measures['avg'] != null) {
-                        flatValuesList.push(d.measures['avg']);
-                    }
-                    if (d.measures['max'] != undefined && d.measures['max'] != null) {
-                        flatValuesList.push(d.measures['max']);
-                    }
-                }
-                else {
-                    var visibleMeasure = _this.chartComponentData.getVisibleMeasure(d.aggregateKey, d.splitBy);
-                    if (d.measures[visibleMeasure] != undefined && d.measures[visibleMeasure] != null) {
-                        flatValuesList.push(d.measures[visibleMeasure]);
-                    }
-                }
-            });
-            extent = d3.extent(flatValuesList);
-        }
-        else {
-            extent = d3.extent(this.getFilteredValues(aggValues), function (d) {
-                var visibleMeasure = _this.chartComponentData.getVisibleMeasure(d.aggregateKey, d.splitBy);
-                if (d.measures[visibleMeasure] != undefined && d.measures[visibleMeasure] != null) {
-                    return d.measures[visibleMeasure];
-                }
-                return null;
-            });
-        }
-        if (extent[0] == undefined || extent[1] == undefined)
-            return [0, 1];
-        return extent;
-    };
-    LineChart.prototype.getFilteredValues = function (aggValues) {
-        var _this = this;
-        return aggValues.filter(function (d) {
-            return (d.measures && _this.getValueOfVisible(d) !== null);
-        });
-    };
-    LineChart.prototype.getFilteredAndSticky = function (aggValues) {
-        var _this = this;
-        var filteredValues = this.getFilteredValues(aggValues);
-        var numericFiltered = filteredValues.filter(function (d) {
-            return (_this.getDataType(d.aggregateKey) === DataTypes.Numeric);
-        });
-        if (this.chartComponentData.stickiedKey == null)
-            return numericFiltered;
-        return numericFiltered.filter(function (d) {
-            return d.aggregateKey == _this.chartComponentData.stickiedKey.aggregateKey &&
-                ((_this.chartComponentData.stickiedKey.splitBy == null) ? true :
-                    d.splitBy == _this.chartComponentData.stickiedKey.splitBy);
-        });
-    };
-    LineChart.prototype.getHandleHeight = function () {
-        return Math.min(Math.max(this.chartHeight / 2, 24), this.chartHeight + 8);
-    };
-    LineChart.prototype.getXPosition = function (d, x) {
-        var bucketSize = this.chartComponentData.displayState[d.aggregateKey].bucketSize;
-        if (bucketSize)
-            return (x(d.dateTime) + x((new Date(d.dateTime.valueOf() + bucketSize)))) / 2;
-        return x(d.dateTime);
-    };
-    LineChart.prototype.setBrushStartTime = function (startTime) {
-        this.brushStartTime = startTime;
-    };
-    LineChart.prototype.setBrushEndTime = function (endTime) {
-        this.brushEndTime = endTime;
-    };
-    LineChart.prototype.setBrush = function () {
-        if (this.brushStartTime && this.brushEndTime && this.brushElem && this.brush) {
-            var rawLeftSide = this.x(this.brushStartTime);
-            var rawRightSide = this.x(this.brushEndTime);
-            //if selection is out of range of brush. clear brush
-            this.brushElem.call(this.brush.move, null);
-            if ((rawRightSide < this.xOffset) || (rawLeftSide > (this.chartWidth - (2 * this.xOffset)))) {
-                this.isClearingBrush = true;
-                this.brushElem.call(this.brush.move, null);
-                return;
-            }
-            var leftSide = Math.min(this.chartWidth - (2 * this.xOffset), Math.max(this.xOffset, this.x(this.brushStartTime)));
-            var rightSide = Math.min(this.chartWidth - (2 * this.xOffset), Math.max(this.xOffset, this.x(this.brushEndTime)));
-            this.surpressBrushTimeSet = true;
-            this.brushStartPosition = leftSide;
-            this.brushEndPosition = rightSide;
-            //small adjusetment so that width is always at least 1 pixel
-            if (rightSide - leftSide < 1) {
-                if (rightSide + 1 > this.chartWidth - (2 * this.xOffset)) {
-                    leftSide += -1;
-                }
-                else {
-                    rightSide += 1;
-                }
-            }
-            this.brushElem.call(this.brush.move, [leftSide, rightSide]);
-        }
-    };
-    LineChart.prototype.findClosestValidTime = function (rawMillis) {
-        var minDiff = Infinity;
-        return Object.keys(this.chartComponentData.timeMap).reduce(function (closestValue, currValue) {
-            var diff = Math.abs(Number(currValue) - rawMillis);
-            if (diff < minDiff) {
-                minDiff = diff;
-                return Number(currValue);
-            }
-            return closestValue;
-        }, Infinity);
-    };
-    LineChart.prototype.getMarkerMarginLeft = function () {
-        var legendWidth = this.legendObject.legendElement.node().getBoundingClientRect().width;
-        return this.chartMargins.left + (this.chartOptions.legend === "shown" || this.chartOptions.legend === "hidden" ? legendWidth : 0) +
-            (this.chartOptions.legend === "shown" ? this.GUTTERWIDTH : 0);
-    };
-    LineChart.prototype.exportMarkers = function () {
-        var _this = this;
-        this.chartOptions.markers = Object.keys(this.markerGuidMap)
-            .filter(function (markerGuid) { return !_this.activeMarker || _this.activeMarker.getGuid() !== markerGuid; })
-            .map(function (markerGuid) { return [_this.markerGuidMap[markerGuid].getMillis(), _this.markerGuidMap[markerGuid].getLabelText()]; });
-        this.chartOptions.onMarkersChange(this.chartOptions.markers);
-    };
-    LineChart.prototype.createOnMarkerChange = function (markerGuid, marker) {
-        var _this = this;
-        return function (isDeleting, droppedMarker, shouldSort) {
-            if (shouldSort === void 0) { shouldSort = true; }
-            if (droppedMarker) {
-                _this.markerGuidMap[markerGuid] = marker;
-            }
-            else if (isDeleting) {
-                delete _this.markerGuidMap[markerGuid];
-                //set focus to first marker if markers exist on delete
-                var visibleMarkers = Object.values(_this.markerGuidMap).filter(function (marker) {
-                    return marker.isMarkerInRange();
-                });
-                if (visibleMarkers.length !== 0) {
-                    visibleMarkers[0].focusCloseButton();
-                }
-                else {
-                    _this.focusOnEllipsis();
-                }
-            }
-            _this.exportMarkers();
-            if (shouldSort)
-                _this.sortMarkers();
-        };
-    };
-    LineChart.prototype.renderMarker = function (marker, millis, onChange, labelText, isSeriesLabels) {
-        if (onChange === void 0) { onChange = null; }
-        if (labelText === void 0) { labelText = null; }
-        if (isSeriesLabels === void 0) { isSeriesLabels = false; }
-        marker.render(millis, this.chartOptions, this.chartComponentData, {
-            chartMargins: this.chartMargins,
-            x: this.x,
-            marginLeft: this.getMarkerMarginLeft() + (isSeriesLabels ? this.getAdditionalOffsetFromHorizontalMargin() : 0),
-            colorMap: this.colorMap,
-            yMap: this.yMap,
-            onChange: onChange,
-            chartHeight: this.height,
-            isDropping: false,
-            labelText: labelText,
-            isSeriesLabels: isSeriesLabels
-        });
-    };
-    LineChart.prototype.sortMarkers = function () {
-        d3.select(this.renderTarget).selectAll(".tsi-markerContainer").sort(function (a, b) {
-            return (a.timestamp < b.timestamp) ? 1 : -1;
-        });
-    };
-    LineChart.prototype.getAllLinesTransitionsComplete = function () {
-        var _this = this;
-        return new Promise(function (resolve, reject) {
-            var checkAllLines = function (numberOfAttempts) {
-                if (numberOfAttempts === void 0) { numberOfAttempts = 0; }
-                if (numberOfAttempts < 5) {
-                    setTimeout(function () {
-                        var allOutOfTransition = true;
-                        d3.select(_this.renderTarget).selectAll('.tsi-gapLine').data().forEach(function (d) {
-                            allOutOfTransition = allOutOfTransition && !d.inTransition;
-                        });
-                        d3.select(_this.renderTarget).selectAll('.tsi-valueLine').data().forEach(function (d) {
-                            allOutOfTransition = allOutOfTransition && !d.inTransition;
-                        });
-                        if (allOutOfTransition) {
-                            resolve(null);
-                        }
-                        else {
-                            checkAllLines(numberOfAttempts + 1);
-                        }
-                    }, Math.max(_this.TRANSDURATION, 250));
-                }
-                else {
-                    reject();
-                }
-            };
-            checkAllLines(0);
-        });
-    };
-    LineChart.prototype.importMarkers = function () {
-        var _this = this;
-        if (this.chartOptions.markers && this.chartOptions.markers.length > 0) {
-            // delete all the old markers
-            if (Object.keys(this.markerGuidMap).length) {
-                Object.keys(this.markerGuidMap).forEach(function (guid) {
-                    _this.markerGuidMap[guid].destroyMarker();
-                    delete _this.markerGuidMap[guid];
-                });
-            }
-            this.markerGuidMap = {};
-            this.chartOptions.markers.forEach(function (markerValueTuples, markerIndex) {
-                if (markerValueTuples === null || markerValueTuples === undefined) {
-                    return;
-                }
-                var marker = new Marker(_this.renderTarget);
-                var markerUID = Utils.guid();
-                var markerMillis;
-                if (typeof markerValueTuples === 'number') {
-                    markerMillis = markerValueTuples;
-                    marker.setLabelText("".concat(_this.getString('Marker'), " ").concat(markerIndex + 1));
-                }
-                else {
-                    marker.setLabelText(markerValueTuples[1]);
-                    markerMillis = markerValueTuples[0];
-                }
-                marker.setMillis(markerMillis);
-                _this.markerGuidMap[markerUID] = marker;
-            });
-            this.renderAllMarkers();
-            this.sortMarkers();
-        }
-    };
-    LineChart.prototype.createSeriesLabelsMarker = function () {
-        this.seriesLabelsMarker = new Marker(this.renderTarget);
-    };
-    LineChart.prototype.renderSeriesLabelsMarker = function () {
-        if (this.chartOptions.labelSeriesWithMarker) {
-            this.renderMarker(this.seriesLabelsMarker, this.x.domain()[1], function () { }, null, true);
-        }
-    };
-    LineChart.prototype.renderAllMarkers = function () {
-        var _this = this;
-        this.getAllLinesTransitionsComplete().then(function () {
-            Object.keys(_this.markerGuidMap).forEach(function (guid) {
-                var marker = _this.markerGuidMap[guid];
-                var onChange = _this.createOnMarkerChange(guid, marker);
-                _this.renderMarker(marker, marker.getMillis(), onChange);
-            });
-            if (_this.seriesLabelsMarker) {
-                _this.renderSeriesLabelsMarker();
-            }
-        });
-    };
-    LineChart.prototype.focusOnEllipsis = function () {
-        if (this.ellipsisContainer !== null) {
-            this.ellipsisContainer.select(".tsi-ellipsisButton").node().focus();
-        }
-    };
-    LineChart.prototype.voronoiExists = function () {
-        return (this.getVisibleNumerics() !== 0);
-    };
-    LineChart.prototype.voronoiMousemove = function (mouseEvent) {
-        if (!this.filteredValueExist() || !this.voronoiExists())
-            return;
-        this.mx = mouseEvent[0];
-        this.my = mouseEvent[1];
-        var mx = mouseEvent[0]; mouseEvent[1];
-        var site = this.voronoiDiagram.find(this.mx, this.my);
-        if (!this.isDroppingMarker) {
-            this.voronoiMouseover(site.data);
-        }
-        else {
-            var rawTime = this.x.invert(mx);
-            var closestTime = Utils.findClosestTime(rawTime.valueOf(), this.chartComponentData.timeMap);
-            this.renderMarker(this.activeMarker, closestTime);
-            return;
-        }
-        if (site.data.aggregateKey !== this.focusedAggKey || site.data.splitBy !== this.focusedSplitby) {
-            var selectedFilter = Utils.createValueFilter(site.data.aggregateKey, site.data.splitBy);
-            this.focusMarkerLabel(selectedFilter, site.data.aggregateKey, site.data.splitBy);
-            this.focusOnlyHoveredSeries(site.data.aggregateKey, site.data.splitBy, true);
-        }
-    };
-    LineChart.prototype.voronoiContextMenu = function (d3Event, mouseEvent) {
-        if (!this.filteredValueExist() || !this.voronoiExists())
-            return;
-        var _a = d3.pointer(d3Event, mouseEvent), mx = _a[0], my = _a[1];
-        var site = this.voronoiDiagram.find(mx, my);
-        if (this.chartComponentData.displayState[site.data.aggregateKey].contextMenuActions &&
-            this.chartComponentData.displayState[site.data.aggregateKey].contextMenuActions.length) {
-            var mousePosition = d3.pointer(d3Event, this.targetElement.node());
-            var sitePageCoords = void 0;
-            if (this.hasBrush) {
-                sitePageCoords = this.brushElem.node().getBoundingClientRect();
-            }
-            else {
-                sitePageCoords = this.voronoiRegion.node().getBoundingClientRect();
-            }
-            var eventSite = { pageX: sitePageCoords.left + site[0], pageY: sitePageCoords.top + site[1] - 12 };
-            d3Event.preventDefault();
-            this.contextMenu.draw(this.chartComponentData, this.renderTarget, this.chartOptions, mousePosition, site.data.aggregateKey, site.data.splitBy, null, site.data.dateTime, null, eventSite);
-            if (this.brushContextMenu) {
-                this.brushContextMenu.hide();
-            }
-            this.voronoiMouseover(site.data);
-        }
-    };
-    LineChart.prototype.voronoiClick = function (d3Event, mouseEvent) {
-        var _this = this;
-        //supress if the context menu is visible
-        if (this.contextMenu && this.contextMenu.contextMenuVisible)
-            return;
-        if (!this.filteredValueExist() || !this.voronoiExists())
-            return;
-        if (this.brushElem && !this.isDroppingMarker)
-            return;
-        var _a = d3.pointer(d3Event, mouseEvent), mx = _a[0], my = _a[1];
-        var site = this.voronoiDiagram.find(mx, my);
-        var cDO = this.getCDOFromAggKey(site.data.aggregateKey);
-        if (!this.isDroppingMarker) {
-            if (site.data && cDO.onElementClick !== null) {
-                cDO.onElementClick(site.data.aggregateKey, site.data.splitBy, site.data.dateTime.toISOString(), site.data.measures);
-            }
-            else {
-                if (this.chartComponentData.stickiedKey !== null) {
-                    site = this.voronoiDiagram.find(mx, my);
-                    this.voronoiMousemove(site.data);
-                    this.unstickySeries(site.data.aggregateKey, site.data.splitBy);
-                    return;
-                }
-                this.stickySeries(site.data.aggregateKey, site.data.splitBy);
-            }
-        }
-        else {
-            if (!this.hasBrush) {
-                this.isDroppingMarker = false;
-            }
-        }
-        this.destroyMarkerInstructions();
-        if (Utils.safeNotNullOrUndefined(function () { return _this.activeMarker; })) {
-            this.activeMarker.onChange(false, true);
-            this.exportMarkers();
-            this.activeMarker = null;
-        }
-    };
-    LineChart.prototype.getValueOfVisible = function (d) {
-        return Utils.getValueOfVisible(d, this.chartComponentData.getVisibleMeasure(d.aggregateKey, d.splitBy));
-    };
-    LineChart.prototype.brushBrush = function (event) {
-        var handleHeight = this.getHandleHeight();
-        this.brushElem.selectAll('.handle')
-            .attr('height', handleHeight)
-            .attr('y', (this.chartHeight - handleHeight) / 2);
-        if (!event.sourceEvent) {
-            return;
-        }
-        if (event.sourceEvent && event.sourceEvent.type === 'mousemove') {
-            this.brushElem.select(".selection").attr("visibility", "visible");
-            //check boundary conditions for width of the brush
-            if (event.selection[1] - event.selection[0] < this.minBrushWidth) {
-                return;
-            }
-            else {
-                this.brushElem.selectAll(".handle").attr("visibility", "visible");
-            }
-        }
-        if (this.surpressBrushTimeSet == true) {
-            this.surpressBrushTimeSet = false;
-            return;
-        }
-        if (!event.selection)
-            return;
-        if (this.contextMenu)
-            this.contextMenu.hide();
-        if (this.brushContextMenu)
-            this.brushContextMenu.hide();
-        var newBrushStartPosition = event.selection[0];
-        var newBrushEndPosition = event.selection[1];
-        if (newBrushStartPosition != this.brushStartPosition) {
-            this.brushStartTime = this.x.invert(event.selection[0]);
-            this.brushStartPosition = newBrushStartPosition;
-        }
-        if (newBrushEndPosition != this.brushEndPosition) {
-            this.brushEndTime = this.x.invert(event.selection[1]);
-            this.brushEndPosition = newBrushEndPosition;
-        }
-        if (this.chartOptions.brushMoveAction) {
-            this.chartOptions.brushMoveAction(this.brushStartTime, this.brushEndTime);
-        }
-    };
-    LineChart.prototype.brushEnd = function (d3Event, mouseEvent) {
-        var _this = this;
-        if (this.isClearingBrush) {
-            this.isClearingBrush = false;
-            if (this.brushContextMenu) {
-                this.brushContextMenu.hide();
-            }
-            return;
-        }
-        if (d3Event && d3Event.selection == null && d3Event.sourceEvent && d3Event.sourceEvent.type == "mouseup" && this.chartOptions.minBrushWidth == 0) {
-            if (this.brushContextMenu) {
-                this.brushContextMenu.hide();
-            }
-            var _a = d3.pointer(d3Event, mouseEvent), mx = _a[0], my = _a[1];
-            var site = this.voronoiDiagram.find(mx, my);
-            var isClearingBrush = (this.brushStartPosition !== null) && (this.brushEndPosition !== null);
-            if (this.chartComponentData.stickiedKey !== null && !this.isDroppingMarker && !isClearingBrush) {
-                this.chartComponentData.stickiedKey = null;
-                this.legendObject.legendElement.selectAll('.tsi-splitByLabel').classed("stickied", false);
-                // recompute voronoi with no sticky
-                this.voronoiDiagram = this.voronoi(this.getFilteredAndSticky(this.chartComponentData.allValues));
-                site = this.voronoiDiagram.find(mx, my);
-                this.voronoiMousemove(site.data);
-                this.chartOptions.onUnsticky(site.data.aggregateKey, site.data.splitBy);
-                return;
-            }
-            this.brushStartTime = null;
-            this.brushEndTime = null;
-            this.brushStartPosition = null;
-            this.brushEndPosition = null;
-            if (!this.isDroppingMarker && !isClearingBrush && !(this.contextMenu && this.contextMenu.contextMenuVisible)) {
-                this.stickySeries(site.data.aggregateKey, site.data.splitBy);
-            }
-            else {
-                this.isDroppingMarker = false;
-            }
-            return;
-        }
-        if (d3Event.selection == null) {
-            if (!this.chartOptions.brushClearable) {
-                d3.select(mouseEvent).transition().call(d3Event.target.move, [this.x(this.brushStartTime), this.x(this.brushEndTime)]);
-            }
-            return;
-        }
-        var transformCall = null; //if the brush needs to be transformed due to snap brush or it being too small, this is envoked
-        var isZeroWidth = false; //clear the brush context menu if the brush has 0 width
-        if (this.chartOptions.snapBrush) {
-            //find the closest possible value and set to that
-            if (this.possibleTimesArray.length > 0) {
-                var findClosestTime = function (rawXValue) {
-                    var closestDate = null;
-                    _this.possibleTimesArray.reduce(function (prev, curr) {
-                        var prospectiveDiff = Math.abs(rawXValue - _this.x(curr));
-                        var currBestDiff = Math.abs(rawXValue - prev);
-                        if (prospectiveDiff < currBestDiff) {
-                            closestDate = curr;
-                            return _this.x(curr);
-                        }
-                        return prev;
-                    }, Infinity);
-                    return closestDate;
-                };
-                var newBrushStartTime = findClosestTime(d3Event.selection[0]);
-                var newBrushEndTime = findClosestTime(d3Event.selection[1]);
-                if (newBrushStartTime != this.brushStartTime || newBrushEndTime != this.brushEndTime) {
-                    this.brushStartTime = newBrushStartTime;
-                    this.brushEndTime = newBrushEndTime;
-                    this.brushStartPosition = this.x(this.brushStartTime);
-                    this.brushEndPosition = this.x(this.brushEndTime);
-                    transformCall = function () { return d3.select(mouseEvent).transition().call(d3Event.target.move, [_this.x(_this.brushStartTime), _this.x(_this.brushEndTime)]); };
-                    isZeroWidth = this.x(this.brushStartTime) == this.x(this.brushEndTime);
-                }
-            }
-        }
-        if (d3Event.selection[1] - d3Event.selection[0] < this.minBrushWidth) {
-            var rightSide_1 = Math.min(d3Event.selection[0] + this.minBrushWidth, this.x.range()[1]);
-            transformCall = function () { return d3.select(mouseEvent).transition().call(d3Event.target.move, [rightSide_1 - _this.minBrushWidth, rightSide_1]); };
-            isZeroWidth = (rightSide_1 - this.minBrushWidth == rightSide_1);
-        }
-        if (this.chartOptions.brushMoveEndAction && (d3Event.sourceEvent && d3Event.sourceEvent.type == 'mouseup')) {
-            this.chartOptions.brushMoveEndAction(this.brushStartTime, this.brushEndTime);
-        }
-        if (this.chartOptions.brushContextMenuActions && this.chartOptions.autoTriggerBrushContextMenu &&
-            (d3Event.sourceEvent && d3Event.sourceEvent.type == 'mouseup')) {
-            if (!this.chartOptions.brushContextMenuActions || this.chartOptions.brushContextMenuActions.length == 0)
-                return;
-            var mousePosition = d3.pointer(d3Event, this.targetElement.node());
-            //constrain the mouse position to the renderTarget
-            var boundingCRect = this.targetElement.node().getBoundingClientRect();
-            var correctedMousePositionX = Math.min(boundingCRect.width, Math.max(mousePosition[0], 0));
-            var correctedMousePositionY = Math.min(boundingCRect.height, Math.max(mousePosition[1], 0));
-            var correctedMousePosition = [correctedMousePositionX, correctedMousePositionY];
-            this.brushContextMenu.draw(this.chartComponentData, this.renderTarget, this.chartOptions, correctedMousePosition, null, null, null, this.brushStartTime, this.brushEndTime);
-        }
-        if (transformCall) {
-            transformCall();
-            if (this.brushContextMenu && isZeroWidth) {
-                this.brushContextMenu.hide();
-            }
-        }
-    };
-    LineChart.prototype.focusMarkerLabel = function (filterFunction, aggKey, splitBy) {
-        Utils.revertAllSubtitleText(d3.select(this.renderTarget).selectAll(".tsi-markerValue"), .2);
-        d3.select(this.renderTarget).selectAll(".tsi-markerValue")
-            .filter(filterFunction)
-            .style("opacity", 1)
-            .classed('tsi-isExpanded', true)
-            .each(function () {
-            Utils.setSeriesLabelSubtitleText(d3.select(this).selectAll('.tsi-tooltipSubtitle'), true);
-        });
-        d3.select(this.renderTarget).selectAll(".tsi-markerContainer").each(function () {
-            d3.select(this).selectAll(".tsi-markerValue").sort(function (a, b) {
-                return (a.aggregateKey == aggKey && (splitBy == null || splitBy == a.splitBy)) ? 1 : -1;
-            });
-        });
-    };
-    LineChart.prototype.drawBrushRange = function () {
-        if (this.chartOptions.brushRangeVisible) {
-            if (this.targetElement.select('.tsi-rangeTextContainer').empty() && (this.brushStartTime || this.brushEndTime)) {
-                this.targetElement.append("div")
-                    .attr("class", "tsi-rangeTextContainer");
-            }
-            this.updateBrushRange();
-        }
-    };
-    LineChart.prototype.getSVGLeftOffset = function () {
-        return this.chartOptions.legend === 'shown' ? (this.width - this.svgSelection.node().getBoundingClientRect().width) : 0;
-    };
-    LineChart.prototype.updateBrushRange = function () {
-        var svgLeftOffset = this.getSVGLeftOffset();
-        if (!(this.brushStartTime || this.brushEndTime)) {
-            this.deleteBrushRange();
-            return;
-        }
-        var rangeText = Utils.rangeTimeFormat(this.brushEndTime.valueOf() - this.brushStartTime.valueOf());
-        var rangeTextContainer = this.targetElement.select('.tsi-rangeTextContainer');
-        var leftPos = this.chartMargins.left +
-            Math.min(Math.max(0, this.x(this.brushStartTime)), this.x.range()[1]) + svgLeftOffset;
-        var rightPos = this.chartMargins.left +
-            Math.min(Math.max(0, this.x(this.brushEndTime)), this.x.range()[1]) + svgLeftOffset;
-        rangeTextContainer
-            .text(rangeText)
-            .style("left", Math.max(8, Math.round((leftPos + rightPos) / 2)) + "px")
-            .style("top", (this.chartMargins.top + this.chartOptions.aggTopMargin) + 'px');
-        if (this.chartOptions.color) {
-            rangeTextContainer
-                .style('background-color', this.chartOptions.color)
-                .style('color', 'white');
-        }
-        var calcedWidth = rangeTextContainer.node().getBoundingClientRect().width;
-        if (this.chartOptions.isCompact && (rightPos - leftPos) < calcedWidth) {
-            rangeTextContainer.style('visibility', 'hidden');
-        }
-        else {
-            rangeTextContainer.style('visibility', 'visible');
-        }
-    };
-    LineChart.prototype.deleteBrushRange = function () {
-        this.targetElement.select('.tsi-rangeTextContainer').remove();
-    };
-    LineChart.prototype.getYExtents = function () {
-        return this.chartComponentData.yExtents;
-    };
-    LineChart.prototype.clearBrush = function () {
-        this.svgSelection.select('.svgGroup').select(".brushElem").call(this.brush.move, null);
-        this.deleteBrushRange();
-        if (this.brushContextMenu) {
-            this.brushContextMenu.hide();
-        }
-    };
-    LineChart.prototype.getVisibleNumerics = function () {
-        var _this = this;
-        var visibleGroups = this.data.filter(function (agg) { return _this.chartComponentData.displayState[agg.aggKey]["visible"]; });
-        var visibleCDOs = this.aggregateExpressionOptions.filter(function (cDO) { return _this.chartComponentData.displayState[cDO.aggKey]["visible"]; });
-        return visibleGroups.filter(function (aggKey, i) {
-            return visibleCDOs[i].dataType === DataTypes.Numeric;
-        }).length;
-    };
-    LineChart.prototype.getSwimlaneOffsets = function (linechartTopPadding, visibleGroups, visibleCDOs, heightPerNumeric, swimLaneSet) {
-        var _this = this;
-        var cumulativeOffset = LINECHARTTOPPADDING;
-        //initialize to null and set while going through swimLanes
-        var visibleGroupEndValues = visibleGroups.map(function () { return null; });
-        Object.keys(swimLaneSet).sort(function (a, b) { return (Number(a) <= Number(b) ? -1 : 1); }).forEach(function (swimLaneStr) {
-            // find all numerics and set to cumulative offset/height per non numeric
-            var swimlane = Number(swimLaneStr);
-            var hasNumeric = false;
-            visibleCDOs.forEach(function (aggGroup, i) {
-                if (aggGroup.swimLane === swimlane && aggGroup.dataType === DataTypes.Numeric) {
-                    hasNumeric = true;
-                    visibleGroupEndValues[i] = [cumulativeOffset, heightPerNumeric];
-                }
-            });
-            // find all non-numerics and set their offset/heights
-            var swimLaneOffset = hasNumeric ? heightPerNumeric : 0;
-            if (_this.chartOptions.swimLaneOptions && _this.chartOptions.swimLaneOptions[swimlane] && _this.chartOptions.swimLaneOptions[swimlane].collapseEvents) {
-                swimLaneOffset += _this.getEventsCollapsedSwimlaneHeight(visibleCDOs, swimlane);
-                visibleCDOs.forEach(function (aggGroup, i) {
-                    if (aggGroup.swimLane === swimlane) {
-                        visibleGroupEndValues[i] = [cumulativeOffset, _this.getEventsCollapsedSwimlaneHeight(visibleCDOs, swimlane)];
-                    }
-                });
-            }
-            else {
-                visibleCDOs.forEach(function (aggGroup, i) {
-                    if (aggGroup.swimLane === swimlane && aggGroup.dataType !== DataTypes.Numeric) {
-                        var currGroupsHeight_1 = Utils.getNonNumericHeight(aggGroup.height);
-                        visibleGroupEndValues[i] = [swimLaneOffset + cumulativeOffset, currGroupsHeight_1];
-                        swimLaneOffset += currGroupsHeight_1;
-                    }
-                });
-            }
-            cumulativeOffset += swimLaneOffset;
-        });
-        return visibleGroupEndValues;
-    };
-    LineChart.prototype.setSwimLaneYExtents = function (visibleGroups, visibleCDOs, swimLanes, swimLaneOptions) {
-        var _this = this;
-        var extents = {};
-        swimLanes.forEach(function (lane) {
-            var extent = [];
-            // Check if swim lane options sets y-axis extents for this lane. If so use that
-            // value for yExtents.
-            if (swimLaneOptions && swimLaneOptions[lane] && swimLaneOptions[lane].yExtent) {
-                extents[lane] = swimLaneOptions[lane].yExtent;
-                return;
-            }
-            visibleGroups.forEach(function (aggGroup, i) {
-                var cDO = visibleCDOs[i];
-                if (cDO.dataType !== DataTypes.Numeric) {
-                    return;
-                }
-                var aggValues = [];
-                if (cDO.swimLane === lane) {
-                    var aggKey_1 = cDO.aggKey;
-                    Object.keys(_this.chartComponentData.visibleTAs[aggKey_1]).forEach(function (splitBy) {
-                        aggValues = aggValues.concat(_this.chartComponentData.visibleTAs[aggKey_1][splitBy]);
-                    });
-                    var yExtent = _this.getYExtent(aggValues, _this.chartComponentData.displayState[aggKey_1].includeEnvelope ?
-                        _this.chartComponentData.displayState[aggKey_1].includeEnvelope :
-                        _this.chartOptions.includeEnvelope, aggKey_1);
-                    extent = d3.extent(yExtent.concat(extent));
-                    extents[lane] = extent;
-                }
-            });
-        });
-        this.swimlaneYExtents = extents;
-    };
-    LineChart.prototype.getEventsCollapsedSwimlaneHeight = function (visibleCDOs, swimlane) {
-        // if a swimlane has collapsed events, the events height impact is the largest height of a visible events group in the swimlane
-        var rawHeight = visibleCDOs.reduce(function (tallest, currGroup) {
-            if (currGroup.dataType === DataTypes.Events && currGroup.swimLane === swimlane) {
-                return Math.max(tallest, currGroup.height);
-            }
-            return tallest;
-        }, 0);
-        return rawHeight !== 0 ? Utils.getNonNumericHeight(rawHeight) : 0;
-    };
-    //returns an array of tuples of y offset and height for each visible aggregate group 
-    LineChart.prototype.createYOffsets = function () {
-        var _this = this;
-        var visibleGroups = this.data.filter(function (agg) { return _this.chartComponentData.displayState[agg.aggKey]["visible"]; });
-        var visibleCDOs = this.aggregateExpressionOptions.filter(function (cDO) { return _this.chartComponentData.displayState[cDO.aggKey]["visible"]; });
-        var visibleNumericCount;
-        var swimLaneSet = {};
-        visibleCDOs.forEach(function (aEO, i) {
-            if (aEO.swimLane === null) {
-                aEO.swimLane = i + 1;
-            }
-        });
-        visibleCDOs.forEach(function (cDO) {
-            swimLaneSet[cDO.swimLane] = swimLaneSet[cDO.swimLane] || (cDO.dataType === DataTypes.Numeric);
-        });
-        visibleNumericCount = Object.keys(swimLaneSet).reduce(function (visibleCount, swimLane) {
-            return visibleCount + (swimLaneSet[swimLane] ? 1 : 0);
-        }, 0);
-        var countNumericLanes = visibleNumericCount;
-        var linechartTopPadding = this.chartOptions.isArea ? 0 : LINECHARTTOPPADDING;
-        var useableHeight = this.chartHeight - linechartTopPadding;
-        var fixedEventsHeight = 0;
-        if (this.chartOptions.swimLaneOptions) {
-            Object.keys(this.chartOptions.swimLaneOptions).forEach(function (swimlaneKey) {
-                var swimlane = Number(swimlaneKey);
-                var sLO = _this.chartOptions.swimLaneOptions[swimlane];
-                if (sLO.collapseEvents) {
-                    var swimlaneHeight = _this.getEventsCollapsedSwimlaneHeight(visibleCDOs, swimlane);
-                    fixedEventsHeight += swimlaneHeight;
-                }
-            });
-        }
-        var heightNonNumeric = visibleCDOs.reduce(function (sumPrevious, currGroup, i) {
-            if (currGroup.dataType === DataTypes.Events && _this.chartOptions.swimLaneOptions && _this.chartOptions.swimLaneOptions[currGroup.swimLane] && _this.chartOptions.swimLaneOptions[currGroup.swimLane].collapseEvents) {
-                return sumPrevious;
-            }
-            return sumPrevious + (currGroup.dataType !== DataTypes.Numeric ? Utils.getNonNumericHeight(currGroup.height) : 0);
-        }, 0);
-        heightNonNumeric += fixedEventsHeight;
-        var heightPerNumeric = (useableHeight - heightNonNumeric) / countNumericLanes;
-        this.setSwimLaneYExtents(visibleGroups, visibleCDOs, Object.keys(swimLaneSet)
-            .filter(function (lane) { return swimLaneSet[lane]; })
-            .map(function (stringLane) { return Number(stringLane); }), this.chartOptions.swimLaneOptions);
-        return this.getSwimlaneOffsets(linechartTopPadding, visibleGroups, visibleCDOs, heightPerNumeric, swimLaneSet);
-    };
-    LineChart.prototype.heightNonNumeric = function () {
-        var _this = this;
-        var visibleCDOs = this.aggregateExpressionOptions.filter(function (agg) { return _this.chartComponentData.displayState[agg.aggKey]["visible"]; });
-        return visibleCDOs.reduce(function (sumPrevious, currGroup) {
-            return sumPrevious + (currGroup.dataType !== DataTypes.Numeric ? Utils.getNonNumericHeight(currGroup.height) : 0);
-        }, 0);
-    };
-    LineChart.prototype.getGroupYExtent = function (aggKey, aggVisible, aggValues, yExtent) {
-        if ((this.chartOptions.yAxisState === YAxisStates.Shared) || (Object.keys(this.chartComponentData.timeArrays)).length < 2 || !aggVisible) {
-            yExtent = this.getYExtent(this.chartComponentData.allNumericValues, this.chartComponentData.displayState[aggKey].includeEnvelope ?
-                this.chartComponentData.displayState[aggKey].includeEnvelope :
-                this.chartOptions.includeEnvelope, null);
-        }
-        else if (this.chartComponentData.aggHasVisibleSplitBys(aggKey)) {
-            yExtent = this.getYExtent(aggValues, this.chartComponentData.displayState[aggKey].includeEnvelope ?
-                this.chartComponentData.displayState[aggKey].includeEnvelope :
-                this.chartOptions.includeEnvelope, aggKey);
-        }
-        else {
-            yExtent = [0, 1];
-        }
-        return yExtent;
-    };
-    LineChart.prototype.getAggAxisType = function (agg) {
-        if (this.chartOptions.yAxisState === YAxisStates.Stacked) {
-            if (this.chartOptions.swimLaneOptions && this.chartOptions.swimLaneOptions[agg.swimLane] && this.chartOptions.swimLaneOptions[agg.swimLane].yAxisType) {
-                return this.chartOptions.swimLaneOptions[agg.swimLane].yAxisType;
-            }
-            else {
-                return YAxisStates.Shared;
-            }
-        }
-        return this.chartOptions.yAxisState;
-    };
-    LineChart.prototype.adjustSwimLanes = function () {
-        if (this.chartOptions.yAxisState === YAxisStates.Shared || this.chartOptions.yAxisState === YAxisStates.Overlap) {
-            this.aggregateExpressionOptions.forEach(function (aEO) {
-                aEO.swimLane = 0;
-            });
-            // consolidate horizontal markers
-            if (this.chartOptions.swimLaneOptions) {
-                var horizontalMarkers_1 = [];
-                Object.values(this.chartOptions.swimLaneOptions).forEach(function (lane) {
-                    horizontalMarkers_1.push.apply(horizontalMarkers_1, lane.horizontalMarkers);
-                });
-                this.chartOptions.swimLaneOptions = { 0: { yAxisType: this.chartOptions.yAxisState, horizontalMarkers: horizontalMarkers_1 } };
-            }
-        }
-        else {
-            var minimumPresentSwimLane_1 = this.aggregateExpressionOptions.reduce(function (currMin, aEO) {
-                return Math.max(aEO.swimLane, currMin);
-            }, 0);
-            this.aggregateExpressionOptions.forEach(function (aEO) {
-                if (aEO.swimLane === null) {
-                    aEO.swimLane = ++minimumPresentSwimLane_1;
-                }
-            });
-        }
-    };
-    LineChart.prototype.overwriteSwimLanes = function () {
-        var _this = this;
-        this.aggregateExpressionOptions.forEach(function (aEO, i) {
-            _this.aggregateExpressionOptions[i].swimLane = _this.originalSwimLanes[i];
-        });
-        this.chartOptions.swimLaneOptions = this.originalSwimLaneOptions;
-    };
-    LineChart.prototype.getHorizontalMarkersWithYScales = function () {
-        var _this = this;
-        var visibleCDOs = this.aggregateExpressionOptions.filter(function (cDO) { return _this.chartComponentData.displayState[cDO.aggKey]["visible"]; });
-        var markerList = [];
-        var pushMarker = function (cDO, marker, markerList) {
-            var _a, _b;
-            if (_this.chartOptions.yAxisState === YAxisStates.Overlap) {
-                return;
-            }
-            var domain = _this.chartOptions.yAxisState === YAxisStates.Stacked ?
-                _this.swimlaneYExtents[cDO.swimLane] :
-                _this.swimlaneYExtents[0];
-            // filter out markers not in the y range of that lane and in lanes that have overlap axis
-            if (domain &&
-                ((_b = (_a = _this.chartOptions.swimLaneOptions) === null || _a === void 0 ? void 0 : _a[cDO.swimLane]) === null || _b === void 0 ? void 0 : _b.yAxisType) !== YAxisStates.Overlap &&
-                marker.value >= domain[0] &&
-                marker.value <= domain[1]) {
-                markerList.push(__assign({ yScale: _this.yMap[cDO.aggKey] }, marker));
-            }
-        };
-        visibleCDOs.forEach(function (cDO) {
-            cDO.horizontalMarkers.forEach(function (horizontalMarkerParams) {
-                pushMarker(cDO, horizontalMarkerParams, markerList);
-            });
-        });
-        // find a visible CDO for a swimlane 
-        var findFirstVisibleCDO = function (swimlaneNumber) {
-            return visibleCDOs.find(function (cDO) {
-                return (cDO.swimLane === swimlaneNumber);
-            });
-        };
-        if (this.chartOptions.yAxisState !== YAxisStates.Overlap && this.chartOptions.swimLaneOptions) {
-            Object.keys(this.chartOptions.swimLaneOptions).forEach(function (swimlaneNumber) {
-                var _a;
-                var swimlaneOptions = _this.chartOptions.swimLaneOptions[swimlaneNumber];
-                (_a = swimlaneOptions.horizontalMarkers) === null || _a === void 0 ? void 0 : _a.forEach(function (horizontalMarkerParams) {
-                    var firstVisibleCDO = findFirstVisibleCDO(Number(swimlaneNumber));
-                    if (firstVisibleCDO) {
-                        pushMarker(firstVisibleCDO, horizontalMarkerParams, markerList);
-                    }
-                });
-            });
-        }
-        return markerList;
-    };
-    // having horizontal markers present should add additional right hand margin to allow space for series labels 
-    LineChart.prototype.getAdditionalOffsetFromHorizontalMargin = function () {
-        return this.getHorizontalMarkersWithYScales().length ? 16 : 0;
-    };
-    LineChart.prototype.drawHorizontalMarkers = function () {
-        var markerList = this.getHorizontalMarkersWithYScales();
-        var self = this;
-        var markerContainers = this.svgSelection.select('.svgGroup').selectAll('.tsi-horizontalMarker')
-            .data(markerList);
-        markerContainers
-            .enter()
-            .append('g')
-            .merge(markerContainers)
-            .attr('class', 'tsi-horizontalMarker')
-            .attr("transform", function (marker) {
-            return "translate(" + 0 + "," + marker.yScale(marker.value) + ")";
-        })
-            .each(function (marker) {
-            var valueText = d3.select(this)
-                .selectAll('.tsi-horizontalMarkerText')
-                .data([marker.value]);
-            valueText
-                .enter()
-                .append('text')
-                .merge(valueText)
-                .attr('class', 'tsi-horizontalMarkerText')
-                .attr('x', self.chartWidth)
-                .attr('y', -4)
-                .text(function (value) { return value; });
-            valueText.exit().remove();
-            var valueLine = d3.select(this)
-                .selectAll('.tsi-horizontalMarkerLine')
-                .data([marker]);
-            valueLine
-                .enter()
-                .append('line')
-                .merge(valueLine)
-                .attr('class', 'tsi-horizontalMarkerLine')
-                .attr('stroke', function (marker) { return marker.color; })
-                .attr('x1', 0)
-                .attr('y1', 0)
-                .attr('x2', self.chartWidth)
-                .attr('y2', 0);
-            valueLine.exit().remove();
-        });
-        markerContainers.exit().remove();
-    };
-    LineChart.prototype.createSwimlaneLabels = function (offsetsAndHeights, visibleCDOs) {
-        var _this = this;
-        // swimLaneLabels object contains data needed to render each lane label
-        var swimLaneLabels = {};
-        /*
-            The logic below constructs swimlane labels. The first aggregate found in each
-            lane is used to position that lanes label. Numeric aggs are prioritized first,
-            as they share a y-Axis, meaning only the first numeric in each lane needs to be
-            considered.  Next, non-numerics are checked, if they are the first agg found in
-            their lane, their position data is used, otherwise, their height is added to the
-            current height of the lane.
-        */
-        var useAggForLaneLabel = function (aggGroup) {
-            var _a, _b, _c, _d, _e, _f;
-            var swimLane = aggGroup.swimLane;
-            var aggIndex = visibleCDOs.findIndex(function (el) { return el.aggKey === aggGroup.aggKey; });
-            var onClick = null;
-            if (typeof ((_c = (_b = (_a = _this.chartOptions) === null || _a === void 0 ? void 0 : _a.swimLaneOptions) === null || _b === void 0 ? void 0 : _b[swimLane]) === null || _c === void 0 ? void 0 : _c.onClick) === 'function') {
-                onClick = function () { var _a, _b, _c, _d; return (_d = (_c = (_b = (_a = _this.chartOptions) === null || _a === void 0 ? void 0 : _a.swimLaneOptions) === null || _b === void 0 ? void 0 : _b[swimLane]) === null || _c === void 0 ? void 0 : _c.onClick) === null || _d === void 0 ? void 0 : _d.call(_c, swimLane); };
-            }
-            swimLaneLabels[swimLane] = {
-                offset: offsetsAndHeights[aggIndex][0],
-                height: offsetsAndHeights[aggIndex][1],
-                label: (_f = (_e = (_d = _this.chartOptions) === null || _d === void 0 ? void 0 : _d.swimLaneOptions) === null || _e === void 0 ? void 0 : _e[swimLane]) === null || _f === void 0 ? void 0 : _f.label,
-                onClick: onClick
-            };
-        };
-        // First add numeric dataTypes (share Y-Axis) to label map
-        visibleCDOs.filter(function (aggGroup) { return aggGroup.dataType === DataTypes.Numeric; }).forEach(function (aggGroup) {
-            if (!(aggGroup.swimLane in swimLaneLabels)) { // Only add swimlanes once to swimLaneLabels map
-                useAggForLaneLabel(aggGroup);
-            }
-        });
-        // Then, map over any non-numeric dataType and increment heights if they're sharing a lane
-        visibleCDOs.filter(function (aggGroup) { return aggGroup.dataType !== DataTypes.Numeric; }).forEach(function (aggGroup) {
-            var _a, _b, _c;
-            var aggIndex = visibleCDOs.findIndex(function (el) { return el.aggKey === aggGroup.aggKey; });
-            if (!(aggGroup.swimLane in swimLaneLabels)) { // Only add swimlanes once to swimLaneLabels map
-                useAggForLaneLabel(aggGroup);
-            }
-            else { // if lane contains non-numeric data and is being added to another lane
-                if (!((_c = (_b = (_a = _this.chartOptions) === null || _a === void 0 ? void 0 : _a.swimLaneOptions) === null || _b === void 0 ? void 0 : _b[aggGroup.swimLane]) === null || _c === void 0 ? void 0 : _c.collapseEvents)) { // Only increment event heights if collapseEvents === false
-                    swimLaneLabels[aggGroup.swimLane].height += offsetsAndHeights[aggIndex][1]; // add heights (non-numerics don't share Y axis)
-                }
-            }
-        });
-        // Clear prior labels
-        this.swimLaneLabelGroup.selectAll('*').remove();
-        // Function to trim labels to max height
-        var truncateLabel = function (labelRef, data) {
-            var maxHeight = data.height - swimlaneLabelConstants.swimLaneLabelHeightPadding; // padding on actual lane height
-            if (data.label) {
-                var labelClientRect = labelRef.getBoundingClientRect();
-                var labelText = labelRef.textContent;
-                while (labelClientRect.height > maxHeight && labelText.length > 0) {
-                    labelText = labelText.slice(0, -1);
-                    labelRef.textContent = labelText + '...';
-                    labelClientRect = labelRef.getBoundingClientRect();
-                }
-            }
-        };
-        var boldYAxisText = function (enabled, lane) {
-            _this.svgSelection.select('.svgGroup')
-                .selectAll(".tsi-swimLaneAxis-".concat(lane))
-                .selectAll('text')
-                .classed('tsi-boldYAxisText', enabled);
-        };
-        var onClickPresentAndValid = function (dp) { return dp.onClick && typeof dp.onClick === 'function'; };
-        // Map over swimLanes and create labels
-        Object.keys(swimLaneLabels).forEach(function (lane) {
-            var labelData = [swimLaneLabels[lane]];
-            var label = _this.swimLaneLabelGroup.selectAll("tsi-swimLaneLabel-".concat(lane)).data(labelData);
-            label.enter()
-                .append("text")
-                .attr("class", function (d) { return "tsi-swimLaneLabel-".concat(lane, " tsi-swimLaneLabel ").concat(onClickPresentAndValid(d) ? 'tsi-boldOnHover' : ''); })
-                .merge(label)
-                .style("text-anchor", "middle")
-                .attr("transform", function (d) { return "translate(".concat((-_this.horizontalLabelOffset + swimlaneLabelConstants.labelLeftPadding), ",").concat((d.offset + d.height / 2), ") rotate(-90)"); })
-                .text(function (d) { return d.label; })
-                .each(function (d) { truncateLabel(this, d); })
-                .on("click", function (event, d) {
-                if (onClickPresentAndValid(d)) {
-                    d.onClick();
-                }
-            })
-                .on("mouseover", function (event, d) {
-                if (onClickPresentAndValid(d)) {
-                    boldYAxisText(true, lane);
-                }
-            })
-                .on("mouseout", function () {
-                boldYAxisText(false, lane);
-            })
-                .append("svg:title")
-                .text(function (d) { return d.label; });
-            label.exit().remove();
-        });
-    };
-    LineChart.prototype.render = function (data, options, aggregateExpressionOptions) {
-        var _this = this;
-        _super.prototype.render.call(this, data, options, aggregateExpressionOptions);
-        this.originalSwimLanes = this.aggregateExpressionOptions.map(function (aEO) {
-            return aEO.swimLane;
-        });
-        this.originalSwimLaneOptions = options.swimLaneOptions;
-        this.hasBrush = options && (options.brushMoveAction || options.brushMoveEndAction || options.brushContextMenuActions);
-        this.chartOptions.setOptions(options);
-        this.chartMargins.right = this.chartOptions.labelSeriesWithMarker ? (SERIESLABELWIDTH + 8) : LINECHARTCHARTMARGINS.right;
-        this.width = this.getWidth();
-        this.height = Math.max(d3.select(this.renderTarget).node().clientHeight, this.MINHEIGHT);
-        if (this.chartOptions.legend == "compact")
-            this.chartMargins.top = 72;
-        else
-            this.chartMargins.top = 40;
-        if (this.chartOptions.hideChartControlPanel) {
-            this.chartMargins.top += -28;
-        }
-        if (!this.chartOptions.brushRangeVisible && this.targetElement) {
-            this.deleteBrushRange();
-        }
-        if (this.seriesLabelsMarker && !this.chartOptions.labelSeriesWithMarker) {
-            this.seriesLabelsMarker.destroyMarker();
-            this.seriesLabelsMarker = null;
-        }
-        this.strokeOpacity = this.chartOptions.isArea ? .55 : 1;
-        this.nonFocusStrokeOpactiy = this.chartOptions.isArea ? .55 : .3;
-        this.chartComponentData.mergeDataToDisplayStateAndTimeArrays(this.data, this.aggregateExpressionOptions);
-        this.chartComponentData.data.forEach(function (d, i) {
-            _this.aggregateExpressionOptions[i].aggKey = d.aggKey;
-        });
-        if (this.chartOptions.xAxisHidden && this.chartOptions.focusHidden) {
-            this.chartMargins.bottom = 5;
-        }
-        this.chartHeight = Math.max(1, this.height - this.chartMargins.bottom - this.chartMargins.top);
-        this.chartWidth = this.getChartWidth();
-        if (this.brush && this.svgSelection.select('.svgGroup').select(".brushElem") && !this.chartOptions.keepBrush) {
-            this.brushStartTime = null;
-            this.brushEndTime = null;
-            this.brushStartPosition = null;
-            this.brushEndPosition = null;
-            this.clearBrush();
-        }
-        if (!this.chartOptions.hideChartControlPanel && this.chartControlsPanel === null) {
-            this.chartControlsPanel = Utils.createControlPanel(this.renderTarget, this.legendWidth + (this.GUTTERWIDTH / 2), Math.max((this.chartMargins.top + 12), 0), this.chartOptions);
-            var self = this;
-            this.hasStackedButton = true;
-            this.stackedButton = this.chartControlsPanel.append("button")
-                .style("left", "60px")
-                .attr("class", "tsi-stackedButton")
-                .attr("aria-label", function () { return _this.getString("set axis state to") + ' ' + _this.nextStackedState(); })
-                .attr("title", function () { return _this.getString("Change y-axis type"); })
-                .attr("type", "button")
-                .on("click", function () {
-                var _this = this;
-                self.overwriteSwimLanes();
-                self.render(self.data, __assign(__assign({}, self.chartOptions), { yAxisState: self.nextStackedState() }), self.aggregateExpressionOptions);
-                d3.select(this).attr("aria-label", function () { return self.getString("set axis state to") + ' ' + self.nextStackedState(); });
-                setTimeout(function () { return d3.select(_this).node().focus(); }, 200);
-            });
-        }
-        else if (this.chartOptions.hideChartControlPanel && this.chartControlsPanel !== null) {
-            this.hasStackedButton = false;
-            this.removeControlPanel();
-        }
-        if (this.chartControlsPanel !== null) {
-            this.drawEllipsisMenu([{
-                    iconClass: "flag",
-                    label: this.getString("Drop a Marker"),
-                    action: this.addMarker,
-                    description: ""
-                }]);
-            this.chartControlsPanel.style("top", Math.max((this.chartMargins.top - 24), 0) + 'px');
-        }
-        this.adjustSwimLanes();
-        if (this.svgSelection == null) {
-            /******************** Static Elements *********************************/
-            this.targetElement = d3.select(this.renderTarget)
-                .classed("tsi-lineChart", true);
-            this.svgSelection = this.targetElement.append("svg")
-                .attr("class", "tsi-lineChartSVG tsi-chartSVG")
-                .attr('title', this.getString('Line chart'))
-                .attr("height", this.height);
-            var g = this.svgSelection.append("g")
-                .classed("svgGroup", true)
-                .attr("transform", "translate(" + this.chartMargins.left + "," + this.chartMargins.top + ")");
-            var defs = this.svgSelection.append('defs');
-            this.brushElem = null;
-            if (this.hasBrush) {
-                this.brushElem = g.append("g")
-                    .attr("class", "brushElem");
-                this.brushElem.classed("hideBrushHandles", !this.chartOptions.brushHandlesVisible);
-            }
-            else {
-                //if there is no brushElem, the voronoi lives here
-                this.voronoiRegion = g.append("rect").classed("voronoiRect", true);
-            }
-            this.focus = g.append("g")
-                .attr("transform", "translate(-200,-100)")
-                .attr("class", "tsi-focus");
-            this.focus.append("line")
-                .attr("class", "tsi-focusLine tsi-vLine")
-                .attr("x1", 0)
-                .attr("x2", 0)
-                .attr("y1", this.chartOptions.aggTopMargin)
-                .attr("y2", this.chartHeight);
-            this.focus.append("line")
-                .attr("class", "tsi-focusLine tsi-hLine")
-                .attr("x1", 0)
-                .attr("x2", this.chartWidth)
-                .attr("y1", 0)
-                .attr("y2", 0);
-            this.focus.append("circle")
-                .attr("r", 4);
-            this.horizontalValueBox = d3.select(this.renderTarget)
-                .append('div')
-                .attr('class', 'tsi-horizontalValueBox tsi-chartValueTextBox')
-                .style('display', 'none')
-                .attr('pointer-events', 'none');
-            this.verticalValueBox = d3.select(this.renderTarget)
-                .append('div')
-                .attr('class', 'tsi-verticalValueBox')
-                .style('display', 'none');
-            this.horizontalValueBar = this.focus.append('line')
-                .attr('y1', 0)
-                .attr('y2', 0)
-                .attr('class', 'tsi-horizontalValueBar')
-                .style('display', 'none');
-            this.swimLaneLabelGroup = g.append("g").
-                attr("class", "tsi-swimLaneLabels");
-            if (!this.tooltip) {
-                this.tooltip = new Tooltip(d3.select(this.renderTarget));
-            }
-            this.draw = function (isFromResize, event) {
-                if (isFromResize === void 0) { isFromResize = false; }
-                _this.minBrushWidth = (_this.chartOptions.minBrushWidth) ? _this.chartOptions.minBrushWidth : _this.minBrushWidth;
-                _this.focus.attr("visibility", (_this.chartOptions.focusHidden) ? "hidden" : "visible");
-                _this.verticalValueBox.style("visibility", (_this.chartOptions.focusHidden) ? "hidden" : "visible");
-                _this.horizontalValueBox.style("visibility", (_this.chartOptions.focusHidden) ? "hidden" : "visible");
-                if (_this.chartOptions.xAxisHidden && _this.chartOptions.focusHidden) {
-                    _this.chartMargins.bottom = 5;
-                }
-                // Check if any swimlane labels present & modify left margin if so
-                var isLabelVisible = false;
-                _this.aggregateExpressionOptions.filter(function (aggExpOpt) {
-                    return _this.chartComponentData.displayState[aggExpOpt.aggKey]["visible"];
-                }).forEach(function (visibleAgg) {
-                    var _a, _b;
-                    if ((_b = (_a = _this.originalSwimLaneOptions) === null || _a === void 0 ? void 0 : _a[visibleAgg.swimLane]) === null || _b === void 0 ? void 0 : _b.label) {
-                        isLabelVisible = true;
-                    }
-                });
-                if (isLabelVisible) {
-                    _this.chartMargins.left = _this.horizontalLabelOffset;
-                }
-                else if (_this.chartMargins.left === _this.horizontalLabelOffset) {
-                    _this.chartMargins.left = LINECHARTCHARTMARGINS.left;
-                }
-                _this.width = Math.max(d3.select(_this.renderTarget).node().clientWidth, _this.MINWIDTH);
-                if (!isFromResize) {
-                    _this.chartWidth = _this.getChartWidth();
-                }
-                _this.height = Math.max(d3.select(_this.renderTarget).node().clientHeight, _this.MINHEIGHT);
-                _this.chartHeight = Math.max(1, _this.height - _this.chartMargins.bottom - _this.chartMargins.top);
-                g.attr("transform", "translate(" + _this.chartMargins.left + "," + _this.chartMargins.top + ")");
-                if (_this.brushElem) {
-                    _this.brushElem.classed("hideBrushHandles", !_this.chartOptions.brushHandlesVisible);
-                }
-                _this.focus.select('.tsi-hLine').attr("x2", _this.chartWidth);
-                _this.focus.select('.tsi-vLine').attr("y2", _this.chartHeight);
-                _this.svgSelection
-                    .style("width", _this.getSVGWidth() + "px")
-                    .style("height", _this.height + "px");
-                _super.prototype.themify.call(_this, _this.targetElement, _this.chartOptions.theme);
-                if (!isFromResize) {
-                    _this.legendObject.draw(_this.chartOptions.legend, _this.chartComponentData, function (aggKey, splitBy) { _this.labelMouseover(aggKey, splitBy); }, _this.svgSelection, _this.chartOptions, function () {
-                        Utils.revertAllSubtitleText(d3.select(_this.renderTarget).selectAll('.tsi-markerValue'));
-                    }, _this.stickySeries, event);
-                }
-                _this.svgSelection.selectAll(".yAxis").style("visibility", "hidden");
-                _this.x = d3.scaleTime()
-                    .rangeRound([_this.xOffset, Math.max(_this.xOffset, _this.chartWidth - (2 * _this.xOffset))]);
-                _this.y = d3.scaleLinear()
-                    .range([Math.max(_this.chartHeight - _this.heightNonNumeric(), _this.chartOptions.aggTopMargin) - LINECHARTTOPPADDING, _this.chartOptions.aggTopMargin]);
-                var fromAndTo = _this.chartComponentData.setAllValuesAndVisibleTAs();
-                var xExtent = (_this.chartComponentData.allValues.length != 0) ? d3.extent(_this.chartComponentData.allValues, function (d) { return d.dateTime; }) : [0, 1];
-                (_this.chartComponentData.allValues.length != 0) ? Math.max(2, (xExtent[1].valueOf() - xExtent[0].valueOf())) : 2;
-                var xOffsetPercentage = _this.xOffset / _this.chartWidth;
-                if (_this.chartOptions.timeFrame) {
-                    fromAndTo = [new Date(_this.chartOptions.timeFrame[0]), new Date(_this.chartOptions.timeFrame[1])];
-                }
-                _this.x.domain(fromAndTo);
-                _this.xLowerBound = _this.x(fromAndTo[0]);
-                _this.xUpperBound = _this.x(fromAndTo[1]);
-                //allPossibleTimes -> a combination of the beginning and end of buckets
-                _this.chartComponentData.setTimeMap();
-                var startOfBuckets = _this.chartComponentData.allValues.map(function (d) { return d.dateTime; });
-                var endOfBuckets = _this.chartComponentData.allValues.filter(function (d) { return d.bucketSize != null; })
-                    .map(function (d) { return new Date(d.dateTime.valueOf() + d.bucketSize); });
-                var allPossibleTimes = startOfBuckets.concat(endOfBuckets);
-                var timeSet = new Set(allPossibleTimes);
-                _this.possibleTimesArray = Array.from(timeSet.values()).sort().map(function (ts) {
-                    return new Date(ts);
-                });
-                if (_this.voronoiRegion) {
-                    _this.voronoiRegion.attr("x", xOffsetPercentage * _this.chartWidth)
-                        .attr("y", _this.chartOptions.aggTopMargin)
-                        .attr("width", _this.chartWidth - (xOffsetPercentage * _this.chartWidth * 2))
-                        .attr("height", _this.chartHeight);
-                }
-                if (_this.brushElem) {
-                    var self = _this;
-                    _this.brush = d3.brushX()
-                        .extent([[_this.xLowerBound, Math.min(_this.chartHeight, _this.chartOptions.aggTopMargin)],
-                        [_this.xUpperBound, _this.chartHeight]])
-                        .on("start", function (event) {
-                        if (self.activeMarker !== null && self.isDroppingMarker) {
-                            self.voronoiClick(event, this);
-                        }
-                        var handleHeight = self.getHandleHeight();
-                        self.brushElem.selectAll('.handle')
-                            .attr('height', handleHeight)
-                            .attr('y', (self.chartHeight - handleHeight) / 2)
-                            .attr('rx', '4px')
-                            .attr('ry', '4px');
-                    })
-                        .on("brush", function (event) {
-                        self.brushBrush(event);
-                        self.drawBrushRange();
-                    })
-                        .on("end", function (event) {
-                        self.brushEnd(event, this);
-                        self.drawBrushRange();
-                    });
-                    _this.brushElem.call(_this.brush);
-                    _this.setBrush();
-                }
-                var yExtent = _this.getYExtent(_this.chartComponentData.allValues, false, null);
-                var yRange = (yExtent[1] - yExtent[0]) > 0 ? yExtent[1] - yExtent[0] : 1;
-                var yOffsetPercentage = _this.chartOptions.isArea ? (1.5 / _this.chartHeight) : (10 / _this.chartHeight);
-                _this.y.domain([yExtent[0] - (yRange * yOffsetPercentage), yExtent[1] + (yRange * (10 / _this.chartHeight))]);
-                if (_this.chartOptions.isArea) {
-                    _this.areaPath = d3.area()
-                        .curve(_this.chartOptions.interpolationFunction)
-                        .defined(function (d) {
-                        return (d.measures !== null) &&
-                            (d.measures[_this.chartComponentData.getVisibleMeasure(d.aggregateKey, d.splitBy)] !== null);
-                    })
-                        .x(function (d) {
-                        return _this.getXPosition(d, _this.x);
-                    })
-                        .y0(function (d) {
-                        return d.measures ? _this.y(d.measures[_this.chartComponentData.getVisibleMeasure(d.aggregateKey, d.splitBy)]) : 0;
-                    })
-                        .y1(_this.chartHeight);
-                }
-                if (!_this.chartOptions.xAxisHidden) {
-                    _this.xAxis = g.selectAll(".xAxis").data([_this.x]);
-                    _this.drawXAxis(_this.chartHeight);
-                    _this.xAxis.exit().remove();
-                    var xAxisBaseline = g.selectAll(".xAxisBaseline").data([_this.x]);
-                    xAxisBaseline.enter().append("line")
-                        .attr("class", "xAxisBaseline")
-                        .attr("x1", .5)
-                        .merge(xAxisBaseline)
-                        .attr("y2", _this.chartHeight + .5)
-                        .attr("y1", _this.chartHeight + .5)
-                        .attr("x2", _this.chartWidth - _this.xOffset);
-                    xAxisBaseline.exit().remove();
-                }
-                if (g.selectAll(".xAxis").size() !== 0) {
-                    g.selectAll(".xAxis").style("visibility", ((!_this.chartOptions.xAxisHidden) ? "visible" : "hidden"));
-                }
-                /******************** Draw Line and Points ************************/
-                _this.visibleAggCount = Object.keys(_this.chartComponentData.timeArrays).reduce(function (count, aggKey) {
-                    return count + (_this.chartComponentData.displayState[aggKey]['visible'] ? 1 : 0);
-                }, 0);
-                _this.yMap = {};
-                _this.colorMap = {};
-                _this.svgSelection.selectAll(".yAxis").remove();
-                _this.chartComponentData.data.filter(function (agg) { return _this.chartComponentData.displayState[agg.aggKey]["visible"]; });
-                var visibleCDOs = _this.aggregateExpressionOptions.filter(function (cDO) {
-                    return _this.chartComponentData.displayState[cDO.aggKey]["visible"];
-                });
-                var offsetsAndHeights = _this.createYOffsets();
-                // Add swimlane labels to SVG
-                _this.createSwimlaneLabels(offsetsAndHeights, visibleCDOs);
-                var swimLaneCounts = {};
-                // Reset public facing yExtents
-                _this.chartComponentData.resetYExtents();
-                var aggregateGroups = _this.svgSelection.select('.svgGroup').selectAll('.tsi-aggGroup')
-                    .data(visibleCDOs, function (agg) { return agg.aggKey; });
-                var self = _this;
-                var visibleNumericI = 0;
-                aggregateGroups.enter()
-                    .append('g')
-                    .classed('tsi-aggGroup', true)
-                    .merge(aggregateGroups)
-                    .transition()
-                    .duration((_this.chartOptions.noAnimate) ? 0 : self.TRANSDURATION)
-                    .ease(d3.easeExp)
-                    .attr('transform', function (agg, i) {
-                    return self.chartOptions.isArea ? null : 'translate(0,' + offsetsAndHeights[i][0] + ')';
-                })
-                    .each(function (agg, i) {
-                    var _a, _b, _c;
-                    var yExtent;
-                    var aggVisible = true;
-                    var aggValues = [];
-                    var aggKey = agg.aggKey;
-                    Object.keys(self.chartComponentData.visibleTAs[aggKey]).forEach(function (splitBy) {
-                        aggValues = aggValues.concat(self.chartComponentData.visibleTAs[aggKey][splitBy]);
-                    });
-                    yExtent = self.getGroupYExtent(aggKey, aggVisible, aggValues, yExtent);
-                    if (self.plotComponents[aggKey] === undefined || self.mismatchingChartType(aggKey)) {
-                        var g_1 = d3.select(this);
-                        delete self.plotComponents[aggKey];
-                        g_1.selectAll('*').remove();
-                        self.plotComponents[aggKey] = self.createPlot(g_1, i, visibleCDOs);
-                    }
-                    var mouseoverFunction = self.getMouseoverFunction(visibleCDOs[i].dataType);
-                    var mouseoutFunction = self.getMouseoutFunction(visibleCDOs[i].dataType);
-                    var positionInGroup = visibleNumericI;
-                    if (self.getAggAxisType(agg) === YAxisStates.Shared) {
-                        yExtent = self.swimlaneYExtents[agg.swimLane];
-                    }
-                    // Update yExtent index in LineChartData after all local yExtent updates (this is public facing yExtent)
-                    // Only update if dataType is numeric
-                    if (agg.dataType === 'numeric') {
-                        var idx = self.aggregateExpressionOptions.findIndex(function (el) { return el.aggKey === aggKey; });
-                        self.chartComponentData.setYExtents(idx, yExtent);
-                    }
-                    //should count all as same swim lane when not in stacked.
-                    var swimLane = agg.swimLane;
-                    var offsetImpact = (agg.dataType === DataTypes.Numeric) ? 1 : 0;
-                    if (swimLaneCounts[swimLane]) {
-                        positionInGroup = swimLaneCounts[swimLane];
-                        swimLaneCounts[swimLane] += offsetImpact;
-                    }
-                    else {
-                        positionInGroup = 0;
-                        swimLaneCounts[swimLane] = offsetImpact;
-                    }
-                    var axisState = new AxisState(self.getAggAxisType(agg), yExtent, positionInGroup);
-                    var yAxisOnClick = null;
-                    if (typeof ((_c = (_b = (_a = self.chartOptions) === null || _a === void 0 ? void 0 : _a.swimLaneOptions) === null || _b === void 0 ? void 0 : _b[swimLane]) === null || _c === void 0 ? void 0 : _c.onClick) === 'function') {
-                        yAxisOnClick = function () { var _a, _b; return (_b = (_a = self.chartOptions.swimLaneOptions[swimLane]).onClick) === null || _b === void 0 ? void 0 : _b.call(_a, swimLane); };
-                    }
-                    self.plotComponents[aggKey].render(self.chartOptions, visibleNumericI, agg, true, d3.select(this), self.chartComponentData, axisState, self.chartHeight, self.visibleAggCount, self.colorMap, self.previousAggregateData, self.x, self.areaPath, self.strokeOpacity, self.y, self.yMap, defs, visibleCDOs[i], self.previousIncludeDots, offsetsAndHeights[i], g, mouseoverFunction, mouseoutFunction, yAxisOnClick);
-                    //increment index of visible numerics if appropriate
-                    visibleNumericI += (visibleCDOs[i].dataType === DataTypes.Numeric ? 1 : 0);
-                });
-                aggregateGroups.exit().remove();
-                /******************** Voronoi diagram for hover action ************************/
-                _this.voronoi = d3Voronoi.voronoi()
-                    .x(function (d) {
-                    return (d.bucketSize != undefined ? self.x(new Date(d.dateTime.valueOf() + (d.bucketSize / 2))) : self.x(d.dateTime));
-                })
-                    .y(function (d) {
-                    if (d.measures) {
-                        return self.yMap[d.aggregateKey] ? self.yMap[d.aggregateKey](self.getValueOfVisible(d)) : null;
-                    }
-                    return null;
-                })
-                    .extent([[0, 0], [_this.chartWidth, _this.chartHeight]]);
-                //if brushElem present then use the overlay, otherwise create a rect to put the voronoi on
-                var voronoiSelection = (_this.brushElem ? _this.brushElem.select(".overlay") : _this.voronoiRegion);
-                voronoiSelection.on("mousemove", function (event) {
-                    var mouseEvent = d3.pointer(event);
-                    self.voronoiMousemove(mouseEvent);
-                })
-                    .on("mouseout", function (event, d) {
-                    if (!self.filteredValueExist() || !self.voronoiExists())
-                        return;
-                    var _a = d3.pointer(event), mx = _a[0], my = _a[1];
-                    var site = self.voronoiDiagram.find(mx, my);
-                    self.voronoiMouseout(event, site.data);
-                    self.chartOptions.onMouseout();
-                    if (self.tooltip)
-                        self.tooltip.hide();
-                })
-                    .on("contextmenu", function (event, d) {
-                    self.voronoiContextMenu(event, this);
-                })
-                    .on("click", function (event, d) {
-                    self.voronoiClick(event, this);
-                });
-                if (_this.brushElem) {
-                    _this.brushElem.selectAll(".selection, .handle").on("contextmenu", function (event, d) {
-                        if (!self.chartOptions.brushContextMenuActions || self.chartOptions.brushContextMenuActions.length == 0 || self.chartOptions.autoTriggerBrushContextMenu)
-                            return;
-                        var mousePosition = d3.pointer(event, self.targetElement.node());
-                        event.preventDefault();
-                        self.brushContextMenu.draw(self.chartComponentData, self.renderTarget, self.chartOptions, mousePosition, null, null, null, self.brushStartTime, self.brushEndTime);
-                    });
-                    _this.brushElem.selectAll('.selection')
-                        .attr('stroke', _this.chartOptions.color ? _this.chartOptions.color : 'none')
-                        .attr('fill', _this.chartOptions.color ? _this.chartOptions.color : 'grey');
-                    var handleHeight = self.getHandleHeight();
-                    _this.brushElem.selectAll('.handle')
-                        .attr('fill', _this.chartOptions.color ? _this.chartOptions.color : 'grey')
-                        .attr('height', handleHeight)
-                        .attr('y', (_this.chartHeight - handleHeight) / 2);
-                }
-                /******************** Stack/Unstack button ************************/
-                if (_this.hasStackedButton) {
-                    _this.stackedButton.style("opacity", function () {
-                        if (_this.chartOptions.yAxisState === YAxisStates.Stacked)
-                            return 1;
-                        if (_this.chartOptions.yAxisState === YAxisStates.Shared)
-                            return .6;
-                        return .3;
-                    })
-                        .style("display", _this.visibleAggCount < 2 ? "none" : "block")
-                        .classed('tsi-lightTheme', _this.chartOptions.theme == 'light')
-                        .classed('tsi-darkTheme', _this.chartOptions.theme == 'dark');
-                }
-                (_this.chartOptions.timeFrame) ? _this.chartOptions.timeFrame : _this.x.domain();
-                if (!_this.chartOptions.hideChartControlPanel && _this.chartControlsPanel !== null) {
-                    _this.chartControlsPanel.style("width", _this.calcSVGWidth() + "px");
-                }
-                _this.renderAllMarkers();
-                _this.drawHorizontalMarkers();
-                _this.voronoiDiagram = _this.voronoi(_this.getFilteredAndSticky(_this.chartComponentData.allValues));
-            };
-            this.legendObject = new Legend(this.draw, this.renderTarget, this.legendWidth);
-            this.contextMenu = new ContextMenu(this.draw, this.renderTarget);
-            this.brushContextMenu = new ContextMenu(this.draw, this.renderTarget);
-            window.addEventListener("resize", function (event) {
-                if (!_this.chartOptions.suppressResizeListener) {
-                    _this.draw(true, event);
-                    _this.renderAllMarkers();
-                }
-            });
-        }
-        this.chartComponentData.mergeDataToDisplayStateAndTimeArrays(this.data, this.aggregateExpressionOptions);
-        this.draw();
-        this.gatedShowGrid();
-        this.chartOptions.noAnimate = false; // ensure internal renders are always animated, overriding the users noAnimate option
-        if (this.chartOptions.labelSeriesWithMarker && this.seriesLabelsMarker === null) {
-            this.createSeriesLabelsMarker();
-        }
-        this.renderSeriesLabelsMarker();
-        if (this.chartOptions.markers && this.chartOptions.markers.length > 0) {
-            this.importMarkers();
-        }
-        d3.select("html").on("click." + Utils.guid(), function (event) {
-            if (_this.ellipsisContainer && event.target != _this.ellipsisContainer.select(".tsi-ellipsisButton").node()) {
-                _this.ellipsisMenu.setMenuVisibility(false);
-            }
-        });
-        this.legendPostRenderProcess(this.chartOptions.legend, this.svgSelection, true, function () {
-            _this.updateBrushRange();
-        });
-    };
-    LineChart.prototype.createPlot = function (svgGroup, i, cDO) {
-        var chartType = cDO[i].dataType;
-        if (chartType === DataTypes.Numeric) {
-            return new LinePlot(svgGroup);
-        }
-        else if (chartType === DataTypes.Categorical) {
-            return new CategoricalPlot(svgGroup);
-        }
-        else if (chartType === DataTypes.Events) {
-            return new EventsPlot(svgGroup);
-        }
-        return null;
-    };
-    return LineChart;
-}(TemporalXAxisComponent));
-
-export { LineChart as L };