@fluentui/react-charting 5.16.24 → 5.16.25

package/lib-amd/components/LineChart/LineChart.base.js

@@ -0,0 +1,809 @@
+define(["require", "exports", "tslib", "react", "d3-selection", "d3-array", "../Legends/index", "d3-shape", "@fluentui/react/lib/Utilities", "../../index", "@fluentui/react/lib/Callout", "./eventAnnotation/EventAnnotation", "../../utilities/index"], function (require, exports, tslib_1, React, d3_selection_1, d3_array_1, index_1, d3_shape_1, Utilities_1, index_2, Callout_1, EventAnnotation_1, index_3) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.LineChartBase = void 0;
+    var getClassNames = Utilities_1.classNamesFunction();
+    var PointSize;
+    (function (PointSize) {
+        PointSize[PointSize["hoverSize"] = 11] = "hoverSize";
+        PointSize[PointSize["invisibleSize"] = 1] = "invisibleSize";
+    })(PointSize || (PointSize = {}));
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    var bisect = d3_array_1.bisector(function (d) { return d.x; }).left;
+    var DEFAULT_LINE_STROKE_SIZE = 4;
+    // The given shape of a icon must be 2.5 times bigger than line width (known as stroke width)
+    var PATH_MULTIPLY_SIZE = 2.5;
+    /**
+     *
+     * @param x units from origin
+     * @param y units from origin
+     * @param w is the legnth of the each side of a shape
+     * @param index index to get the shape path
+     */
+    var _getPointPath = function (x, y, w, index) {
+        var allPointPaths = [
+            // circle path
+            "M" + (x - w / 2) + " " + y + "\n     A" + w / 2 + " " + w / 2 + " 0 1 0 " + (x + w / 2) + " " + y + "\n     M" + (x - w / 2) + " " + y + "\n     A " + w / 2 + " " + w / 2 + " 0 1 1 " + (x + w / 2) + " " + y + "\n     ",
+            //square
+            "M" + (x - w / 2) + " " + (y - w / 2) + "\n     L" + (x + w / 2) + " " + (y - w / 2) + "\n     L" + (x + w / 2) + " " + (y + w / 2) + "\n     L" + (x - w / 2) + " " + (y + w / 2) + "\n     Z",
+            //triangle
+            "M" + (x - w / 2) + " " + (y - 0.2886 * w) + "\n     H " + (x + w / 2) + "\n     L" + x + " " + (y + 0.5774 * w) + " Z",
+            //diamond
+            "M" + x + " " + (y - w / 2) + "\n     L" + (x + w / 2) + " " + y + "\n     L" + x + " " + (y + w / 2) + "\n     L" + (x - w / 2) + " " + y + "\n     Z",
+            //pyramid
+            "M" + x + " " + (y - 0.5774 * w) + "\n     L" + (x + w / 2) + " " + (y + 0.2886 * w) + "\n     L" + (x - w / 2) + " " + (y + 0.2886 * w) + " Z",
+            //hexagon
+            "M" + (x - 0.5 * w) + " " + (y - 0.866 * w) + "\n     L" + (x + 0.5 * w) + " " + (y - 0.866 * w) + "\n     L" + (x + w) + " " + y + "\n     L" + (x + 0.5 * w) + " " + (y + 0.866 * w) + "\n     L" + (x - 0.5 * w) + " " + (y + 0.866 * w) + "\n     L" + (x - w) + " " + y + "\n     Z",
+            //pentagon
+            "M" + x + " " + (y - 0.851 * w) + "\n     L" + (x + 0.6884 * w) + " " + (y - 0.2633 * w) + "\n     L" + (x + 0.5001 * w) + " " + (y + 0.6884 * w) + "\n     L" + (x - 0.5001 * w) + " " + (y + 0.6884 * w) + "\n     L" + (x - 0.6884 * w) + " " + (y - 0.2633 * w) + "\n     Z",
+            //octagon
+            "M" + (x - 0.5001 * w) + " " + (y - 1.207 * w) + "\n     L" + (x + 0.5001 * w) + " " + (y - 1.207 * w) + "\n     L" + (x + 1.207 * w) + " " + (y - 0.5001 * w) + "\n     L" + (x + 1.207 * w) + " " + (y + 0.5001 * w) + "\n     L" + (x + 0.5001 * w) + " " + (y + 1.207 * w) + "\n     L" + (x - 0.5001 * w) + " " + (y + 1.207 * w) + "\n     L" + (x - 1.207 * w) + " " + (y + 0.5001 * w) + "\n     L" + (x - 1.207 * w) + " " + (y - 0.5001 * w) + "\n     Z",
+        ];
+        return allPointPaths[index];
+    };
+    var LineChartBase = /** @class */ (function (_super) {
+        tslib_1.__extends(LineChartBase, _super);
+        function LineChartBase(props) {
+            var _this_1 = _super.call(this, props) || this;
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            _this_1._xAxisScale = '';
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            _this_1._yAxisScale = '';
+            _this_1.eventLabelHeight = 36;
+            _this_1._injectIndexPropertyInLineChartData = function (lineChartData) {
+                var _a = _this_1.props.allowMultipleShapesForPoints, allowMultipleShapesForPoints = _a === void 0 ? false : _a;
+                return lineChartData
+                    ? lineChartData.map(function (item, index) {
+                        var _a, _b;
+                        var color;
+                        // isInverted property is applicable to v8 themes only
+                        if (typeof item.color === 'undefined') {
+                            color = index_3.getNextColor(index, 0, (_a = _this_1.props.theme) === null || _a === void 0 ? void 0 : _a.isInverted);
+                        }
+                        else {
+                            color = index_3.getColorFromToken(item.color, (_b = _this_1.props.theme) === null || _b === void 0 ? void 0 : _b.isInverted);
+                        }
+                        return tslib_1.__assign(tslib_1.__assign({}, item), { index: allowMultipleShapesForPoints ? index : -1, color: color });
+                    })
+                    : [];
+            };
+            _this_1._getCustomizedCallout = function () {
+                return _this_1.props.onRenderCalloutPerStack
+                    ? _this_1.props.onRenderCalloutPerStack(_this_1.state.stackCalloutProps)
+                    : _this_1.props.onRenderCalloutPerDataPoint
+                        ? _this_1.props.onRenderCalloutPerDataPoint(_this_1.state.dataPointCalloutProps)
+                        : null;
+            };
+            _this_1._getMargins = function (margins) {
+                _this_1.margins = margins;
+            };
+            _this_1._initializeLineChartData = function (xScale, yScale, containerHeight, containerWidth, xElement) {
+                _this_1._xAxisScale = xScale;
+                _this_1._yAxisScale = yScale;
+                _this_1._renderedColorFillBars = _this_1.props.colorFillBars ? _this_1._createColorFillBars(containerHeight) : [];
+                _this_1.lines = _this_1._createLines(xElement, containerHeight);
+            };
+            _this_1._handleSingleLegendSelectionAction = function (lineChartItem) {
+                if (_this_1.state.selectedLegend === lineChartItem.legend) {
+                    _this_1.setState({ selectedLegend: '' });
+                    _this_1._handleLegendClick(lineChartItem, null);
+                }
+                else {
+                    _this_1.setState({ selectedLegend: lineChartItem.legend });
+                    _this_1._handleLegendClick(lineChartItem, lineChartItem.legend);
+                }
+            };
+            _this_1._onHoverCardHide = function () {
+                _this_1.setState({
+                    selectedLegendPoints: [],
+                    selectedColorBarLegend: [],
+                    isSelectedLegend: false,
+                });
+            };
+            _this_1._closeCallout = function () {
+                _this_1.setState({
+                    isCalloutVisible: false,
+                });
+            };
+            _this_1._getBoxWidthOfShape = function (pointId, pointIndex, isLastPoint) {
+                var _a = _this_1.props, _b = _a.allowMultipleShapesForPoints, allowMultipleShapesForPoints = _b === void 0 ? false : _b, _c = _a.strokeWidth, strokeWidth = _c === void 0 ? DEFAULT_LINE_STROKE_SIZE : _c;
+                var activePoint = _this_1.state.activePoint;
+                if (allowMultipleShapesForPoints) {
+                    if (activePoint === pointId) {
+                        return PointSize.hoverSize;
+                    }
+                    else if (pointIndex === 1 || isLastPoint) {
+                        return strokeWidth * PATH_MULTIPLY_SIZE;
+                    }
+                    else {
+                        return PointSize.invisibleSize;
+                    }
+                }
+                else {
+                    if (activePoint === pointId) {
+                        return PointSize.hoverSize;
+                    }
+                    else {
+                        return PointSize.invisibleSize;
+                    }
+                }
+            };
+            _this_1._getPath = function (xPos, yPos, pointId, pointIndex, isLastPoint, pointOftheLine) {
+                var _a = _this_1.props.allowMultipleShapesForPoints, allowMultipleShapesForPoints = _a === void 0 ? false : _a;
+                var w = _this_1._getBoxWidthOfShape(pointId, pointIndex, isLastPoint);
+                var index = allowMultipleShapesForPoints ? pointOftheLine % Object.keys(index_3.pointTypes).length : 0;
+                var widthRatio = index_3.pointTypes[index].widthRatio;
+                w = widthRatio > 1 ? w / widthRatio : w;
+                return _getPointPath(xPos, yPos, w, index);
+            };
+            _this_1._getPointFill = function (lineColor, pointId, pointIndex, isLastPoint) {
+                var activePoint = _this_1.state.activePoint;
+                var _a = _this_1.props, theme = _a.theme, _b = _a.allowMultipleShapesForPoints, allowMultipleShapesForPoints = _b === void 0 ? false : _b;
+                if (allowMultipleShapesForPoints) {
+                    if (pointIndex === 1 || isLastPoint) {
+                        if (activePoint === pointId) {
+                            return theme.palette.white;
+                        }
+                        else {
+                            return lineColor;
+                        }
+                    }
+                    else {
+                        if (activePoint === pointId) {
+                            return theme.palette.white;
+                        }
+                        else {
+                            return lineColor;
+                        }
+                    }
+                }
+                else {
+                    if (activePoint === pointId) {
+                        return theme.palette.white;
+                    }
+                    else {
+                        return lineColor;
+                    }
+                }
+            };
+            _this_1._createColorFillBars = function (containerHeight) {
+                var _a;
+                var colorFillBars = [];
+                if (_this_1.state.isSelectedLegend) {
+                    _this_1._colorFillBars = _this_1.state.selectedColorBarLegend;
+                }
+                else {
+                    _this_1._colorFillBars = _this_1.props.colorFillBars;
+                }
+                var yMinMaxValues = index_3.getMinMaxOfYAxis(_this_1._points, index_3.ChartTypes.LineChart);
+                var FILL_Y_PADDING = 3;
+                for (var i = 0; i < _this_1._colorFillBars.length; i++) {
+                    var colorFillBar = _this_1._colorFillBars[i];
+                    var colorFillBarId = Utilities_1.getId(colorFillBar.legend.replace(/\W/g, ''));
+                    // isInverted property is applicable to v8 themes only
+                    var color = index_3.getColorFromToken(colorFillBar.color, (_a = _this_1.props.theme) === null || _a === void 0 ? void 0 : _a.isInverted);
+                    if (colorFillBar.applyPattern) {
+                        // Using a pattern element because CSS was unable to render diagonal stripes for rect elements
+                        colorFillBars.push(_this_1._getStripePattern(color, i));
+                    }
+                    for (var j = 0; j < colorFillBar.data.length; j++) {
+                        var startX = colorFillBar.data[j].startX;
+                        var endX = colorFillBar.data[j].endX;
+                        var opacity = _this_1._legendHighlighted(colorFillBar.legend) || _this_1._noLegendHighlighted() || _this_1.state.isSelectedLegend
+                            ? _this_1._getColorFillBarOpacity(colorFillBar)
+                            : 0.1;
+                        colorFillBars.push(React.createElement("rect", { fill: colorFillBar.applyPattern ? "url(#" + _this_1._colorFillBarPatternId + "_" + i + ")" : color, fillOpacity: opacity, x: _this_1._xAxisScale(startX), y: _this_1._yAxisScale(yMinMaxValues.endValue) - FILL_Y_PADDING, width: Math.abs(_this_1._xAxisScale(endX) - _this_1._xAxisScale(startX)), height: _this_1._yAxisScale(_this_1.props.yMinValue || 0) - _this_1._yAxisScale(yMinMaxValues.endValue) + FILL_Y_PADDING, key: "" + colorFillBarId + j }));
+                    }
+                }
+                return colorFillBars;
+            };
+            _this_1._getStripePattern = function (color, id) {
+                // This describes a tile pattern that resembles diagonal stripes
+                // For more information: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/d
+                var stripePath = 'M-4,4 l8,-8 M0,16 l16,-16 M12,20 l8,-8';
+                return (React.createElement("pattern", { id: _this_1._colorFillBarPatternId + "_" + id, width: 16, height: 16, key: _this_1._colorFillBarPatternId + "_" + id, patternUnits: 'userSpaceOnUse' },
+                    React.createElement("path", { d: stripePath, stroke: color, strokeWidth: 1.25 })));
+            };
+            _this_1._checkInGap = function (pointIndex, gaps, currentGapIndex) {
+                var gapIndex = currentGapIndex;
+                var isInGap = false;
+                while (gapIndex < gaps.length && pointIndex > gaps[gapIndex].endIndex) {
+                    gapIndex++;
+                }
+                if (gapIndex < gaps.length && pointIndex > gaps[gapIndex].startIndex && pointIndex <= gaps[gapIndex].endIndex) {
+                    isInGap = true;
+                }
+                return { isInGap: isInGap, gapIndex: gapIndex };
+            };
+            _this_1._onMouseOverLargeDataset = function (linenumber, lineHeight, mouseEvent) {
+                mouseEvent.persist();
+                var data = _this_1.props.data;
+                var lineChartData = data.lineChartData;
+                // This will get the value of the X when mouse is on the chart
+                var xOffset = _this_1._xAxisScale.invert(d3_selection_1.clientPoint(document.getElementById(_this_1._rectId), mouseEvent)[0]);
+                var i = bisect(lineChartData[linenumber].data, xOffset);
+                var d0 = lineChartData[linenumber].data[i - 1];
+                var d1 = lineChartData[linenumber].data[i];
+                var axisType = null;
+                var xPointToHighlight = null;
+                var index = null;
+                if (d0 === undefined && d1 !== undefined) {
+                    xPointToHighlight = d1.x;
+                    index = i;
+                }
+                else if (d0 !== undefined && d1 === undefined) {
+                    xPointToHighlight = d0.x;
+                    index = i - 1;
+                }
+                else {
+                    axisType = index_3.getTypeOfAxis(lineChartData[linenumber].data[0].x, true);
+                    var x0 = void 0;
+                    var point0 = void 0;
+                    var point1 = void 0;
+                    switch (axisType) {
+                        case index_3.XAxisTypes.DateAxis:
+                            x0 = new Date(xOffset).getTime();
+                            point0 = d0.x.getTime();
+                            point1 = d1.x.getTime();
+                            xPointToHighlight = Math.abs(x0 - point0) > Math.abs(x0 - point1) ? d1.x : d0.x;
+                            index = Math.abs(x0 - point0) > Math.abs(x0 - point1) ? i : i - 1;
+                            break;
+                        case index_3.XAxisTypes.NumericAxis:
+                            x0 = xOffset;
+                            point0 = d0.x;
+                            point1 = d1.x;
+                            xPointToHighlight = Math.abs(x0 - point0) > Math.abs(x0 - point1) ? d1.x : d0.x;
+                            index = Math.abs(x0 - point0) > Math.abs(x0 - point1) ? i : i - 1;
+                            break;
+                        default:
+                            break;
+                    }
+                }
+                var _a = lineChartData[linenumber].data[index], xAxisCalloutData = _a.xAxisCalloutData, xAxisCalloutAccessibilityData = _a.xAxisCalloutAccessibilityData;
+                var formattedDate = xPointToHighlight instanceof Date ? xPointToHighlight.toLocaleString() : xPointToHighlight;
+                var modifiedXVal = xPointToHighlight instanceof Date ? xPointToHighlight.getTime() : xPointToHighlight;
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                var found = Utilities_1.find(_this_1._calloutPoints, function (element) {
+                    return element.x === modifiedXVal;
+                });
+                var pointToHighlight = lineChartData[linenumber].data[index];
+                var pointToHighlightUpdated = _this_1.state.nearestCircleToHighlight === null ||
+                    (_this_1.state.nearestCircleToHighlight !== null &&
+                        pointToHighlight !== null &&
+                        (_this_1.state.nearestCircleToHighlight.x !== pointToHighlight.x ||
+                            _this_1.state.nearestCircleToHighlight.y !== pointToHighlight.y));
+                // if no points need to be called out then don't show vertical line and callout card
+                if (found && pointToHighlightUpdated) {
+                    _this_1._uniqueCallOutID = "#" + _this_1._staticHighlightCircle + "_" + linenumber;
+                    d3_selection_1.select("#" + _this_1._staticHighlightCircle + "_" + linenumber)
+                        .attr('cx', "" + _this_1._xAxisScale(pointToHighlight.x))
+                        .attr('cy', "" + _this_1._yAxisScale(pointToHighlight.y))
+                        .attr('visibility', 'visibility');
+                    d3_selection_1.select("#" + _this_1._verticalLine)
+                        .attr('transform', function () { return "translate(" + _this_1._xAxisScale(pointToHighlight.x) + ", " + _this_1._yAxisScale(pointToHighlight.y) + ")"; })
+                        .attr('visibility', 'visibility')
+                        .attr('y2', "" + (lineHeight - _this_1._yAxisScale(pointToHighlight.y)));
+                    _this_1.setState({
+                        nearestCircleToHighlight: pointToHighlight,
+                        isCalloutVisible: true,
+                        refSelected: "#" + _this_1._staticHighlightCircle + "_" + linenumber,
+                        stackCalloutProps: found,
+                        YValueHover: found.values,
+                        dataPointCalloutProps: found,
+                        hoverXValue: xAxisCalloutData ? xAxisCalloutData : formattedDate,
+                        xAxisCalloutAccessibilityData: xAxisCalloutAccessibilityData,
+                        activePoint: '',
+                        activeLine: linenumber,
+                    });
+                }
+                if (!found) {
+                    _this_1.setState({
+                        isCalloutVisible: false,
+                        nearestCircleToHighlight: pointToHighlight,
+                        activePoint: '',
+                        activeLine: linenumber,
+                    });
+                }
+            };
+            _this_1._handleFocus = function (lineId, x, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData) {
+                _this_1._uniqueCallOutID = circleId;
+                var formattedData = x instanceof Date ? x.toLocaleDateString() : x;
+                var xVal = x instanceof Date ? x.getTime() : x;
+                var found = Utilities_1.find(_this_1._calloutPoints, function (element) { return element.x === xVal; });
+                // if no points need to be called out then don't show vertical line and callout card
+                if (found) {
+                    var _this_2 = _this_1;
+                    d3_selection_1.select("#" + _this_1._verticalLine)
+                        .attr('transform', function () { return "translate(" + _this_2._xAxisScale(x) + ", 0)"; })
+                        .attr('visibility', 'visibility');
+                    _this_1._refArray.forEach(function (obj) {
+                        if (obj.index === lineId) {
+                            _this_1.setState({
+                                isCalloutVisible: true,
+                                refSelected: obj.refElement,
+                                hoverXValue: xAxisCalloutData ? xAxisCalloutData : '' + formattedData,
+                                YValueHover: found.values,
+                                stackCalloutProps: found,
+                                dataPointCalloutProps: found,
+                                activePoint: circleId,
+                                xAxisCalloutAccessibilityData: xAxisCalloutAccessibilityData,
+                            });
+                        }
+                    });
+                }
+                else {
+                    _this_1.setState({
+                        activePoint: circleId,
+                    });
+                }
+            };
+            _this_1._handleHover = function (x, y, lineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData, mouseEvent) {
+                mouseEvent.persist();
+                var formattedData = x instanceof Date ? x.toLocaleDateString() : x;
+                var xVal = x instanceof Date ? x.getTime() : x;
+                var _this = _this_1;
+                var found = Utilities_1.find(_this_1._calloutPoints, function (element) { return element.x === xVal; });
+                // if no points need to be called out then don't show vertical line and callout card
+                if (found) {
+                    d3_selection_1.select("#" + _this_1._verticalLine)
+                        .attr('transform', function () { return "translate(" + _this._xAxisScale(x) + ", " + _this._yAxisScale(y) + ")"; })
+                        .attr('visibility', 'visibility')
+                        .attr('y2', "" + (lineHeight - _this._yAxisScale(y)));
+                    if (_this_1._uniqueCallOutID !== circleId) {
+                        _this_1._uniqueCallOutID = circleId;
+                        _this_1.setState({
+                            isCalloutVisible: true,
+                            refSelected: "#" + circleId,
+                            hoverXValue: xAxisCalloutData ? xAxisCalloutData : '' + formattedData,
+                            YValueHover: found.values,
+                            stackCalloutProps: found,
+                            dataPointCalloutProps: found,
+                            activePoint: circleId,
+                            xAxisCalloutAccessibilityData: xAxisCalloutAccessibilityData,
+                            nearestCircleToHighlight: null,
+                            activeLine: null,
+                        });
+                    }
+                }
+                else {
+                    _this_1.setState({
+                        activePoint: circleId,
+                        nearestCircleToHighlight: null,
+                        activeLine: null,
+                    });
+                }
+            };
+            /**
+             * Screen readers announce an element as clickable if the onClick attribute is set.
+             * This function sets the attribute only when a click event handler is provided.
+             */
+            _this_1._getClickHandler = function (func) {
+                if (func) {
+                    return {
+                        onClick: func,
+                    };
+                }
+                return {};
+            };
+            _this_1._handleMouseOut = function () {
+                d3_selection_1.select("#" + _this_1._verticalLine).attr('visibility', 'hidden');
+            };
+            _this_1._handleChartMouseLeave = function () {
+                _this_1._uniqueCallOutID = null;
+                _this_1.setState({
+                    isCalloutVisible: false,
+                    activePoint: '',
+                    activeLine: null,
+                });
+            };
+            _this_1._handleLegendClick = function (lineChartItem, selectedLegend) {
+                if (lineChartItem.onLegendClick) {
+                    lineChartItem.onLegendClick(selectedLegend);
+                }
+            };
+            _this_1._handleMultipleLineLegendSelectionAction = function (selectedLine) {
+                var selectedLineIndex = _this_1.state.selectedLegendPoints.reduce(function (acc, line, index) {
+                    if (acc > -1 || line.legend !== selectedLine.legend) {
+                        return acc;
+                    }
+                    else {
+                        return index;
+                    }
+                }, -1);
+                var selectedLines;
+                if (selectedLineIndex === -1) {
+                    selectedLines = tslib_1.__spreadArray(tslib_1.__spreadArray([], _this_1.state.selectedLegendPoints), [selectedLine]);
+                }
+                else {
+                    selectedLines = _this_1.state.selectedLegendPoints
+                        .slice(0, selectedLineIndex)
+                        .concat(_this_1.state.selectedLegendPoints.slice(selectedLineIndex + 1));
+                }
+                var areAllLineLegendsSelected = _this_1.props.data && selectedLines.length === _this_1.props.data.lineChartData.length;
+                if (areAllLineLegendsSelected &&
+                    ((_this_1.props.colorFillBars && _this_1.props.colorFillBars.length === _this_1.state.selectedColorBarLegend.length) ||
+                        !_this_1.props.colorFillBars)) {
+                    // Clear all legends if all legends including color fill bar legends are selected
+                    // Or clear all legends if all legends are selected and there are no color fill bars
+                    _this_1._clearMultipleLegendSelections();
+                }
+                else if (!selectedLines.length && !_this_1.state.selectedColorBarLegend.length) {
+                    // Clear all legends if no legends including color fill bar legends are selected
+                    _this_1._clearMultipleLegendSelections();
+                }
+                else {
+                    // Otherwise, set state when one or more legends are selected, including color fill bar legends
+                    _this_1.setState({
+                        selectedLegendPoints: selectedLines,
+                        isSelectedLegend: true,
+                    });
+                }
+                var selectedLegendTitlesToPass = selectedLines.map(function (line) { return line.legend; });
+                _this_1._handleLegendClick(selectedLine, selectedLegendTitlesToPass);
+            };
+            _this_1._handleMultipleColorFillBarLegendSelectionAction = function (selectedColorFillBar) {
+                var selectedColorFillBarIndex = _this_1.state.selectedColorBarLegend.reduce(function (acc, colorFillBar, index) {
+                    if (acc > -1 || colorFillBar.legend !== selectedColorFillBar.legend) {
+                        return acc;
+                    }
+                    else {
+                        return index;
+                    }
+                }, -1);
+                var selectedColorFillBars;
+                if (selectedColorFillBarIndex === -1) {
+                    selectedColorFillBars = tslib_1.__spreadArray(tslib_1.__spreadArray([], _this_1.state.selectedColorBarLegend), [selectedColorFillBar]);
+                }
+                else {
+                    selectedColorFillBars = _this_1.state.selectedColorBarLegend
+                        .slice(0, selectedColorFillBarIndex)
+                        .concat(_this_1.state.selectedColorBarLegend.slice(selectedColorFillBarIndex + 1));
+                }
+                var areAllColorFillBarLegendsSelected = selectedColorFillBars.length === (_this_1.props.colorFillBars && _this_1.props.colorFillBars.length);
+                if (areAllColorFillBarLegendsSelected &&
+                    ((_this_1.props.data && _this_1.props.data.lineChartData.length === _this_1.state.selectedLegendPoints.length) ||
+                        !_this_1.props.data)) {
+                    // Clear all legends if all legends, including line legends, are selected
+                    // Or clear all legends if all legends are selected and there is no line data
+                    _this_1._clearMultipleLegendSelections();
+                }
+                else if (!selectedColorFillBars.length && !_this_1.state.selectedLegendPoints.length) {
+                    // Clear all legends if no legends are selected, including line legends
+                    _this_1._clearMultipleLegendSelections();
+                }
+                else {
+                    // set state when one or more legends are selected, including line legends
+                    _this_1.setState({
+                        selectedColorBarLegend: selectedColorFillBars,
+                        isSelectedLegend: true,
+                    });
+                }
+                var selectedLegendTitlesToPass = selectedColorFillBars.map(function (colorFillBar) { return colorFillBar.legend; });
+                _this_1._handleLegendClick(selectedColorFillBar, selectedLegendTitlesToPass);
+            };
+            _this_1._clearMultipleLegendSelections = function () {
+                _this_1.setState({
+                    selectedColorBarLegend: [],
+                    selectedLegendPoints: [],
+                    isSelectedLegend: false,
+                });
+            };
+            /**
+             * This function checks if the given legend is highlighted or not.
+             * A legend can be highlighted in 2 ways:
+             * 1. selection: if the user clicks on it
+             * 2. hovering: if there is no selected legend and the user hovers over it
+             */
+            _this_1._legendHighlighted = function (legend) {
+                return (_this_1.state.selectedLegend === legend || (_this_1.state.selectedLegend === '' && _this_1.state.activeLegend === legend));
+            };
+            /**
+             * This function checks if none of the legends is selected or hovered.
+             */
+            _this_1._noLegendHighlighted = function () {
+                return _this_1.state.selectedLegend === '' && _this_1.state.activeLegend === '';
+            };
+            _this_1._getColorFillBarOpacity = function (colorFillBar) {
+                return colorFillBar.applyPattern ? 1 : 0.4;
+            };
+            _this_1._getAriaLabel = function (lineIndex, pointIndex) {
+                var _a;
+                var line = _this_1._points[lineIndex];
+                var point = line.data[pointIndex];
+                var formattedDate = point.x instanceof Date ? point.x.toLocaleString() : point.x;
+                var xValue = point.xAxisCalloutData || formattedDate;
+                var legend = line.legend;
+                var yValue = point.yAxisCalloutData || point.y;
+                return ((_a = point.callOutAccessibilityData) === null || _a === void 0 ? void 0 : _a.ariaLabel) || xValue + ". " + legend + ", " + yValue + ".";
+            };
+            _this_1.state = {
+                hoverXValue: '',
+                activeLegend: '',
+                YValueHover: [],
+                refSelected: '',
+                selectedLegend: '',
+                isCalloutVisible: false,
+                selectedLegendPoints: [],
+                selectedColorBarLegend: [],
+                isSelectedLegend: false,
+                activePoint: '',
+                nearestCircleToHighlight: null,
+                activeLine: null,
+            };
+            _this_1._refArray = [];
+            _this_1._points = _this_1._injectIndexPropertyInLineChartData(_this_1.props.data.lineChartData);
+            _this_1._colorFillBars = [];
+            _this_1._calloutPoints = index_3.calloutData(_this_1._points) || [];
+            _this_1._circleId = Utilities_1.getId('circle');
+            _this_1._lineId = Utilities_1.getId('lineID');
+            _this_1._borderId = Utilities_1.getId('borderID');
+            _this_1._verticalLine = Utilities_1.getId('verticalLine');
+            _this_1._colorFillBarPatternId = Utilities_1.getId('colorFillBarPattern');
+            _this_1._tooltipId = Utilities_1.getId('LineChartTooltipId_');
+            _this_1._rectId = Utilities_1.getId('containerRectLD');
+            _this_1._staticHighlightCircle = Utilities_1.getId('staticHighlightCircle');
+            props.eventAnnotationProps &&
+                props.eventAnnotationProps.labelHeight &&
+                (_this_1.eventLabelHeight = props.eventAnnotationProps.labelHeight);
+            return _this_1;
+        }
+        LineChartBase.prototype.componentDidUpdate = function (prevProps) {
+            /** note that height and width are not used to resize or set as dimesions of the chart,
+             * fitParentContainer is responisble for setting the height and width or resizing of the svg/chart
+             */
+            if (prevProps.height !== this.props.height ||
+                prevProps.width !== this.props.width ||
+                prevProps.data !== this.props.data) {
+                this._points = this._injectIndexPropertyInLineChartData(this.props.data.lineChartData);
+                this._calloutPoints = index_3.calloutData(this._points) || [];
+            }
+        };
+        LineChartBase.prototype.render = function () {
+            var _this_1 = this;
+            var _a = this.props, tickValues = _a.tickValues, tickFormat = _a.tickFormat, eventAnnotationProps = _a.eventAnnotationProps, legendProps = _a.legendProps, data = _a.data;
+            this._points = this._injectIndexPropertyInLineChartData(data.lineChartData);
+            var isXAxisDateType = index_3.getXAxisType(this._points);
+            var points = this._points;
+            if (legendProps && !!legendProps.canSelectMultipleLegends) {
+                points = this.state.selectedLegendPoints.length >= 1 ? this.state.selectedLegendPoints : this._points;
+                this._calloutPoints = index_3.calloutData(points);
+            }
+            var legendBars = this._createLegends(this._points);
+            var calloutProps = tslib_1.__assign({ isCalloutVisible: this.state.isCalloutVisible, directionalHint: Callout_1.DirectionalHint.topAutoEdge, YValueHover: this.state.YValueHover, hoverXValue: this.state.hoverXValue, id: "toolTip" + this._uniqueCallOutID, target: this.state.refSelected, isBeakVisible: false, gapSpace: 15, onDismiss: this._closeCallout, preventDismissOnEvent: function () { return true; }, hidden: !(!this.props.hideTooltip && this.state.isCalloutVisible), descriptionMessage: this.props.getCalloutDescriptionMessage && this.state.stackCalloutProps
+                    ? this.props.getCalloutDescriptionMessage(this.state.stackCalloutProps)
+                    : undefined, 'data-is-focusable': true, xAxisCalloutAccessibilityData: this.state.xAxisCalloutAccessibilityData }, this.props.calloutProps);
+            var tickParams = {
+                tickValues: tickValues,
+                tickFormat: tickFormat,
+            };
+            return (React.createElement(index_2.CartesianChart, tslib_1.__assign({}, this.props, { chartTitle: data.chartTitle, points: points, chartType: index_3.ChartTypes.LineChart, isCalloutForStack: true, calloutProps: calloutProps, tickParams: tickParams, legendBars: legendBars, getmargins: this._getMargins, getGraphData: this._initializeLineChartData, xAxisType: isXAxisDateType ? index_3.XAxisTypes.DateAxis : index_3.XAxisTypes.NumericAxis, customizedCallout: this._getCustomizedCallout(), onChartMouseLeave: this._handleChartMouseLeave, 
+                /* eslint-disable react/jsx-no-bind */
+                // eslint-disable-next-line react/no-children-prop
+                children: function (props) {
+                    _this_1._xAxisScale = props.xScale;
+                    _this_1._yAxisScale = props.yScale;
+                    return (React.createElement(React.Fragment, null,
+                        React.createElement("g", null,
+                            React.createElement("line", { x1: 0, y1: 0, x2: 0, y2: props.containerHeight, stroke: '#C8C8C8', id: _this_1._verticalLine, visibility: 'hidden', strokeDasharray: '5,5' }),
+                            _this_1.props.optimizeLargeData ? (React.createElement("rect", { id: _this_1._rectId, width: props.containerWidth, height: props.containerHeight, fill: 'transparent' })) : (React.createElement(React.Fragment, null)),
+                            React.createElement("g", null,
+                                _this_1._renderedColorFillBars,
+                                _this_1.lines),
+                            eventAnnotationProps && (React.createElement(EventAnnotation_1.EventsAnnotation, tslib_1.__assign({}, eventAnnotationProps, { scale: props.xScale, chartYTop: _this_1.margins.top + _this_1.eventLabelHeight, chartYBottom: props.containerHeight - 35 }))))));
+                } })));
+        };
+        LineChartBase.prototype._createLegends = function (data) {
+            var _this_1 = this;
+            var _a = this.props, legendProps = _a.legendProps, _b = _a.allowMultipleShapesForPoints, allowMultipleShapesForPoints = _b === void 0 ? false : _b;
+            var isLegendMultiSelectEnabled = !!(legendProps && !!legendProps.canSelectMultipleLegends);
+            var legendDataItems = data.map(function (point) {
+                var color = point.color;
+                // mapping data to the format Legends component needs
+                var legend = tslib_1.__assign(tslib_1.__assign({ title: point.legend, color: color, action: function () {
+                        if (isLegendMultiSelectEnabled) {
+                            _this_1._handleMultipleLineLegendSelectionAction(point);
+                        }
+                        else {
+                            _this_1._handleSingleLegendSelectionAction(point);
+                        }
+                    }, onMouseOutAction: function () {
+                        _this_1.setState({ activeLegend: '' });
+                    }, hoverAction: function () {
+                        _this_1._handleChartMouseLeave();
+                        _this_1.setState({ activeLegend: point.legend });
+                    } }, (point.legendShape && {
+                    shape: point.legendShape,
+                })), (allowMultipleShapesForPoints && {
+                    shape: index_3.Points[point.index % Object.keys(index_3.pointTypes).length],
+                }));
+                return legend;
+            });
+            var colorFillBarsLegendDataItems = this.props.colorFillBars
+                ? this.props.colorFillBars.map(function (colorFillBar, index) {
+                    var _a;
+                    var title = colorFillBar.legend;
+                    // isInverted property is applicable to v8 themes only
+                    var color = index_3.getColorFromToken(colorFillBar.color, (_a = _this_1.props.theme) === null || _a === void 0 ? void 0 : _a.isInverted);
+                    var legend = {
+                        title: title,
+                        color: color,
+                        action: function () {
+                            if (isLegendMultiSelectEnabled) {
+                                _this_1._handleMultipleColorFillBarLegendSelectionAction(colorFillBar);
+                            }
+                            else {
+                                _this_1._handleSingleLegendSelectionAction(colorFillBar);
+                            }
+                        },
+                        onMouseOutAction: function () {
+                            _this_1.setState({ activeLegend: '' });
+                        },
+                        hoverAction: function () {
+                            _this_1._handleChartMouseLeave();
+                            _this_1.setState({ activeLegend: title });
+                        },
+                        opacity: _this_1._getColorFillBarOpacity(colorFillBar),
+                        stripePattern: colorFillBar.applyPattern,
+                    };
+                    return legend;
+                })
+                : [];
+            var legends = (React.createElement(index_1.Legends, tslib_1.__assign({ legends: tslib_1.__spreadArray(tslib_1.__spreadArray([], legendDataItems), colorFillBarsLegendDataItems), enabledWrapLines: this.props.enabledLegendsWrapLines, overflowProps: this.props.legendsOverflowProps, focusZonePropsInHoverCard: this.props.focusZonePropsForLegendsInHoverCard, overflowText: this.props.legendsOverflowText }, (isLegendMultiSelectEnabled && { onLegendHoverCardLeave: this._onHoverCardHide }), this.props.legendProps)));
+            return legends;
+        };
+        LineChartBase.prototype._createLines = function (xElement, containerHeight) {
+            var _this_1 = this;
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z;
+            var lines = [];
+            if (this.state.isSelectedLegend) {
+                this._points = this.state.selectedLegendPoints;
+            }
+            else {
+                this._points = this._injectIndexPropertyInLineChartData(this.props.data.lineChartData);
+            }
+            var _loop_1 = function (i) {
+                var linesForLine = [];
+                var bordersForLine = [];
+                var pointsForLine = [];
+                var legendVal = this_1._points[i].legend;
+                var lineColor = this_1._points[i].color;
+                var activePoint = this_1.state.activePoint;
+                var theme = this_1.props.theme;
+                var verticaLineHeight = containerHeight - this_1.margins.bottom + 6;
+                if (this_1._points[i].data.length === 1) {
+                    var _0 = this_1._points[i].data[0], x1_1 = _0.x, y1 = _0.y, xAxisCalloutData_1 = _0.xAxisCalloutData, xAxisCalloutAccessibilityData_1 = _0.xAxisCalloutAccessibilityData;
+                    var circleId_1 = this_1._circleId + "_" + i;
+                    pointsForLine.push(React.createElement("circle", tslib_1.__assign({ id: circleId_1, key: circleId_1, r: activePoint === circleId_1 ? 5.5 : 3.5, cx: this_1._xAxisScale(x1_1), cy: this_1._yAxisScale(y1), fill: activePoint === circleId_1 ? theme.palette.white : lineColor, onMouseOver: this_1._handleHover.bind(this_1, x1_1, y1, verticaLineHeight, xAxisCalloutData_1, circleId_1, xAxisCalloutAccessibilityData_1), onMouseMove: this_1._handleHover.bind(this_1, x1_1, y1, verticaLineHeight, xAxisCalloutData_1, circleId_1, xAxisCalloutAccessibilityData_1), onMouseOut: this_1._handleMouseOut, strokeWidth: activePoint === circleId_1 ? DEFAULT_LINE_STROKE_SIZE : 0, stroke: activePoint === circleId_1 ? lineColor : '', role: "img", "aria-label": this_1._getAriaLabel(i, 0), "data-is-focusable": true, ref: function (e) {
+                            _this_1._refCallback(e, circleId_1);
+                        }, onFocus: function () { return _this_1._handleFocus(circleId_1, x1_1, xAxisCalloutData_1, circleId_1, xAxisCalloutAccessibilityData_1); }, onBlur: this_1._handleMouseOut }, this_1._getClickHandler(this_1._points[i].data[0].onDataPointClick))));
+                }
+                var gapIndex = 0;
+                var gaps = (_b = (_a = this_1._points[i].gaps) === null || _a === void 0 ? void 0 : _a.sort(function (a, b) { return a.startIndex - b.startIndex; })) !== null && _b !== void 0 ? _b : [];
+                // Use path rendering technique for larger datasets to optimize performance.
+                if (this_1.props.optimizeLargeData && this_1._points[i].data.length > 1) {
+                    var line = d3_shape_1.line()
+                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                        .x(function (d) { return _this_1._xAxisScale(d[0]); })
+                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                        .y(function (d) { return _this_1._yAxisScale(d[1]); })
+                        .curve(d3_shape_1.curveLinear);
+                    var lineId = this_1._lineId + "_" + i;
+                    var borderId = this_1._borderId + "_" + i;
+                    var strokeWidth = ((_c = this_1._points[i].lineOptions) === null || _c === void 0 ? void 0 : _c.strokeWidth) || this_1.props.strokeWidth || DEFAULT_LINE_STROKE_SIZE;
+                    var isLegendSelected = this_1._legendHighlighted(legendVal) || this_1._noLegendHighlighted() || this_1.state.isSelectedLegend;
+                    var lineData = [];
+                    for (var k = 0; k < this_1._points[i].data.length; k++) {
+                        lineData.push([
+                            this_1._points[i].data[k].x instanceof Date
+                                ? this_1._points[i].data[k].x.getTime()
+                                : this_1._points[i].data[k].x,
+                            this_1._points[i].data[k].y,
+                        ]);
+                    }
+                    if (isLegendSelected) {
+                        var lineBorderWidth = ((_d = this_1._points[i].lineOptions) === null || _d === void 0 ? void 0 : _d.lineBorderWidth)
+                            ? Number.parseFloat(this_1._points[i].lineOptions.lineBorderWidth.toString())
+                            : 0;
+                        if (lineBorderWidth > 0) {
+                            bordersForLine.push(React.createElement("path", { id: borderId, key: borderId, d: line(lineData), fill: "transparent", strokeLinecap: (_f = (_e = this_1._points[i].lineOptions) === null || _e === void 0 ? void 0 : _e.strokeLinecap) !== null && _f !== void 0 ? _f : 'round', strokeWidth: Number.parseFloat(strokeWidth.toString()) + lineBorderWidth, stroke: ((_g = this_1._points[i].lineOptions) === null || _g === void 0 ? void 0 : _g.lineBorderColor) || theme.palette.white, opacity: 1 }));
+                        }
+                        linesForLine.push(React.createElement("path", tslib_1.__assign({ id: lineId, key: lineId, d: line(lineData), fill: "transparent", "data-is-focusable": true, stroke: lineColor, strokeWidth: strokeWidth, strokeLinecap: (_j = (_h = this_1._points[i].lineOptions) === null || _h === void 0 ? void 0 : _h.strokeLinecap) !== null && _j !== void 0 ? _j : 'round', onMouseMove: this_1._onMouseOverLargeDataset.bind(this_1, i, verticaLineHeight), onMouseOver: this_1._onMouseOverLargeDataset.bind(this_1, i, verticaLineHeight), onMouseOut: this_1._handleMouseOut }, this_1._getClickHandler(this_1._points[i].onLineClick), { opacity: 1, role: "img", "aria-label": legendVal + ", series " + (i + 1) + " of " + this_1._points.length + " with " + this_1._points[i].data.length + " data points." })));
+                    }
+                    else {
+                        linesForLine.push(React.createElement("path", { id: lineId, key: lineId, d: line(lineData), fill: "transparent", "data-is-focusable": true, stroke: lineColor, strokeWidth: strokeWidth, strokeLinecap: (_l = (_k = this_1._points[i].lineOptions) === null || _k === void 0 ? void 0 : _k.strokeLinecap) !== null && _l !== void 0 ? _l : 'round', opacity: 0.1, role: "img", "aria-label": legendVal + ", series " + (i + 1) + " of " + this_1._points.length + " with " + this_1._points[i].data.length + " data points." }));
+                    }
+                    var isPointHighlighted = this_1.state.activeLine !== null && this_1.state.activeLine === i;
+                    pointsForLine.push(React.createElement("circle", { id: this_1._staticHighlightCircle + "_" + i, key: this_1._staticHighlightCircle + "_" + i, r: 5.5, cx: 0, cy: 0, fill: theme.palette.white, strokeWidth: DEFAULT_LINE_STROKE_SIZE, stroke: lineColor, visibility: isPointHighlighted ? 'visibility' : 'hidden', onMouseMove: this_1._onMouseOverLargeDataset.bind(this_1, i, verticaLineHeight), onMouseOver: this_1._onMouseOverLargeDataset.bind(this_1, i, verticaLineHeight), onMouseOut: this_1._handleMouseOut }));
+                }
+                else if (!this_1.props.optimizeLargeData) {
+                    var _loop_2 = function (j) {
+                        var gapResult = this_1._checkInGap(j, gaps, gapIndex);
+                        var isInGap = gapResult.isInGap;
+                        gapIndex = gapResult.gapIndex;
+                        var lineId = this_1._lineId + "_" + i + "_" + j;
+                        var borderId = this_1._borderId + "_" + i + "_" + j;
+                        var circleId = this_1._circleId + "_" + i + "_" + j;
+                        var _1 = this_1._points[i].data[j - 1], x1 = _1.x, y1 = _1.y, xAxisCalloutData = _1.xAxisCalloutData, xAxisCalloutAccessibilityData = _1.xAxisCalloutAccessibilityData;
+                        var _2 = this_1._points[i].data[j], x2 = _2.x, y2 = _2.y;
+                        var path = this_1._getPath(this_1._xAxisScale(x1), this_1._yAxisScale(y1), circleId, j, false, this_1._points[i].index);
+                        var strokeWidth = ((_m = this_1._points[i].lineOptions) === null || _m === void 0 ? void 0 : _m.strokeWidth) || this_1.props.strokeWidth || DEFAULT_LINE_STROKE_SIZE;
+                        var isLegendSelected = this_1._legendHighlighted(legendVal) || this_1._noLegendHighlighted() || this_1.state.isSelectedLegend;
+                        var currentPointHidden = this_1._points[i].hideNonActiveDots && activePoint !== circleId;
+                        pointsForLine.push(React.createElement("path", tslib_1.__assign({ id: circleId, key: circleId, d: path, "data-is-focusable": true, onMouseOver: this_1._handleHover.bind(this_1, x1, y1, verticaLineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData), onMouseMove: this_1._handleHover.bind(this_1, x1, y1, verticaLineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData), onMouseOut: this_1._handleMouseOut, onFocus: function () { return _this_1._handleFocus(lineId, x1, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData); }, onBlur: this_1._handleMouseOut }, this_1._getClickHandler(this_1._points[i].data[j - 1].onDataPointClick), { opacity: isLegendSelected && !currentPointHidden ? 1 : 0.01, fill: this_1._getPointFill(lineColor, circleId, j, false), stroke: lineColor, strokeWidth: strokeWidth, role: "img", "aria-label": this_1._getAriaLabel(i, j - 1) })));
+                        if (j + 1 === this_1._points[i].data.length) {
+                            // If this is last point of the line segment.
+                            var lastCircleId_1 = "" + circleId + j + "L";
+                            var lastPointHidden = this_1._points[i].hideNonActiveDots && activePoint !== lastCircleId_1;
+                            path = this_1._getPath(this_1._xAxisScale(x2), this_1._yAxisScale(y2), lastCircleId_1, j, true, this_1._points[i].index);
+                            var _3 = this_1._points[i].data[j], lastCirlceXCallout_1 = _3.xAxisCalloutData, lastCirlceXCalloutAccessibilityData_1 = _3.xAxisCalloutAccessibilityData;
+                            pointsForLine.push(React.createElement("path", tslib_1.__assign({ id: lastCircleId_1, key: lastCircleId_1, d: path, "data-is-focusable": true, onMouseOver: this_1._handleHover.bind(this_1, x2, y2, verticaLineHeight, lastCirlceXCallout_1, lastCircleId_1, lastCirlceXCalloutAccessibilityData_1), onMouseMove: this_1._handleHover.bind(this_1, x2, y2, verticaLineHeight, lastCirlceXCallout_1, lastCircleId_1, lastCirlceXCalloutAccessibilityData_1), onMouseOut: this_1._handleMouseOut, onFocus: function () {
+                                    return _this_1._handleFocus(lineId, x2, lastCirlceXCallout_1, lastCircleId_1, lastCirlceXCalloutAccessibilityData_1);
+                                }, onBlur: this_1._handleMouseOut }, this_1._getClickHandler(this_1._points[i].data[j].onDataPointClick), { opacity: isLegendSelected && !lastPointHidden ? 1 : 0.01, fill: this_1._getPointFill(lineColor, lastCircleId_1, j, true), stroke: lineColor, strokeWidth: strokeWidth, role: "img", "aria-label": this_1._getAriaLabel(i, j) })));
+                            /* eslint-enable react/jsx-no-bind */
+                        }
+                        if (isLegendSelected) {
+                            // don't draw line if it is in a gap
+                            if (!isInGap) {
+                                var lineBorderWidth = ((_o = this_1._points[i].lineOptions) === null || _o === void 0 ? void 0 : _o.lineBorderWidth)
+                                    ? Number.parseFloat(this_1._points[i].lineOptions.lineBorderWidth.toString())
+                                    : 0;
+                                if (lineBorderWidth > 0) {
+                                    bordersForLine.push(React.createElement("line", { id: borderId, key: borderId, x1: this_1._xAxisScale(x1), y1: this_1._yAxisScale(y1), x2: this_1._xAxisScale(x2), y2: this_1._yAxisScale(y2), strokeLinecap: (_q = (_p = this_1._points[i].lineOptions) === null || _p === void 0 ? void 0 : _p.strokeLinecap) !== null && _q !== void 0 ? _q : 'round', strokeWidth: Number.parseFloat(strokeWidth.toString()) + lineBorderWidth, stroke: ((_r = this_1._points[i].lineOptions) === null || _r === void 0 ? void 0 : _r.lineBorderColor) || theme.palette.white, opacity: 1 }));
+                                }
+                                linesForLine.push(React.createElement("line", tslib_1.__assign({ id: lineId, key: lineId, x1: this_1._xAxisScale(x1), y1: this_1._yAxisScale(y1), x2: this_1._xAxisScale(x2), y2: this_1._yAxisScale(y2), strokeWidth: strokeWidth, ref: function (e) {
+                                        _this_1._refCallback(e, lineId);
+                                    }, onMouseOver: this_1._handleHover.bind(this_1, x1, y1, verticaLineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData), onMouseMove: this_1._handleHover.bind(this_1, x1, y1, verticaLineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData), onMouseOut: this_1._handleMouseOut, stroke: lineColor, strokeLinecap: (_t = (_s = this_1._points[i].lineOptions) === null || _s === void 0 ? void 0 : _s.strokeLinecap) !== null && _t !== void 0 ? _t : 'round', strokeDasharray: (_u = this_1._points[i].lineOptions) === null || _u === void 0 ? void 0 : _u.strokeDasharray, strokeDashoffset: (_v = this_1._points[i].lineOptions) === null || _v === void 0 ? void 0 : _v.strokeDashoffset, opacity: 1 }, this_1._getClickHandler(this_1._points[i].onLineClick))));
+                            }
+                        }
+                        else {
+                            if (!isInGap) {
+                                linesForLine.push(React.createElement("line", { id: lineId, key: lineId, x1: this_1._xAxisScale(x1), y1: this_1._yAxisScale(y1), x2: this_1._xAxisScale(x2), y2: this_1._yAxisScale(y2), strokeWidth: strokeWidth, stroke: lineColor, strokeLinecap: (_x = (_w = this_1._points[i].lineOptions) === null || _w === void 0 ? void 0 : _w.strokeLinecap) !== null && _x !== void 0 ? _x : 'round', strokeDasharray: (_y = this_1._points[i].lineOptions) === null || _y === void 0 ? void 0 : _y.strokeDasharray, strokeDashoffset: (_z = this_1._points[i].lineOptions) === null || _z === void 0 ? void 0 : _z.strokeDashoffset, opacity: 0.1 }));
+                            }
+                        }
+                    };
+                    for (var j = 1; j < this_1._points[i].data.length; j++) {
+                        _loop_2(j);
+                    }
+                }
+                lines.push.apply(lines, tslib_1.__spreadArray(tslib_1.__spreadArray(tslib_1.__spreadArray([], bordersForLine), linesForLine), pointsForLine));
+            };
+            var this_1 = this;
+            for (var i = this._points.length - 1; i >= 0; i--) {
+                _loop_1(i);
+            }
+            var classNames = getClassNames(this.props.styles, {
+                theme: this.props.theme,
+            });
+            // Removing un wanted tooltip div from DOM, when prop not provided.
+            if (!this.props.showXAxisLablesTooltip) {
+                try {
+                    document.getElementById(this._tooltipId) && document.getElementById(this._tooltipId).remove();
+                    // eslint-disable-next-line no-empty
+                }
+                catch (e) { }
+            }
+            // Used to display tooltip at x axis labels.
+            if (!this.props.wrapXAxisLables && this.props.showXAxisLablesTooltip) {
+                var xAxisElement = d3_selection_1.select(xElement).call(this._xAxisScale);
+                try {
+                    document.getElementById(this._tooltipId) && document.getElementById(this._tooltipId).remove();
+                    // eslint-disable-next-line no-empty
+                }
+                catch (e) { }
+                var tooltipProps = {
+                    tooltipCls: classNames.tooltip,
+                    id: this._tooltipId,
+                    xAxis: xAxisElement,
+                };
+                xAxisElement && index_3.tooltipOfXAxislabels(tooltipProps);
+            }
+            return lines;
+        };
+        LineChartBase.prototype._refCallback = function (element, legendTitle) {
+            this._refArray.push({ index: legendTitle, refElement: element });
+        };
+        return LineChartBase;
+    }(React.Component));
+    exports.LineChartBase = LineChartBase;
+});
+//# sourceMappingURL=LineChart.base.js.map