@fluentui/react-charting 5.12.8 → 5.12.9

package/lib/components/LineChart/LineChart.base.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { IAccessibilityProps, IBasestate, ILineChartProps, ILineChartPoints, ICustomizedCalloutData, IColorFillBarsProps } from '../../index';
+import { IAccessibilityProps, IBasestate, ILineChartProps, ILineChartPoints, ICustomizedCalloutData, IColorFillBarsProps, ILineChartDataPoint } from '../../index';
 declare type LineChartDataWithIndex = ILineChartPoints & {
     index: number;
 };
@@ -11,6 +11,8 @@ export interface ILineChartState extends IBasestate {
     stackCalloutProps?: ICustomizedCalloutData;
     activePoint?: string;
     xAxisCalloutAccessibilityData?: IAccessibilityProps;
+    nearestCircleToHighlight: ILineChartDataPoint | null;
+    activeLine: number | null;
 }
 export declare class LineChartBase extends React.Component<ILineChartProps, ILineChartState> {
     private _points;
@@ -50,6 +52,7 @@ export declare class LineChartBase extends React.Component<ILineChartProps, ILin
     private _getStripePattern;
     private _checkInGap;
     private _refCallback;
+    private _onMouseOverLargeDataset;
     private _handleFocus;
     private _handleHover;
     private _onLineClick;

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

@@ -1,18 +1,22 @@
 import { __assign, __extends, __spreadArray } from "tslib";
 import * as React from 'react';
 import { select as d3Select } from 'd3-selection';
+import { bisector } from 'd3-array';
 import { Legends } from '../Legends/index';
+import { line as d3Line, curveLinear as d3curveLinear } from 'd3-shape';
 import { classNamesFunction, getId, find } from '@fluentui/react/lib/Utilities';
 import { CartesianChart, } from '../../index';
 import { DirectionalHint } from '@fluentui/react/lib/Callout';
 import { EventsAnnotation } from './eventAnnotation/EventAnnotation';
-import { calloutData, ChartTypes, getXAxisType, XAxisTypes, tooltipOfXAxislabels, Points, pointTypes, getMinMaxOfYAxis, } from '../../utilities/index';
+import { calloutData, ChartTypes, getXAxisType, XAxisTypes, tooltipOfXAxislabels, Points, pointTypes, getMinMaxOfYAxis, getTypeOfAxis, } from '../../utilities/index';
 var getClassNames = 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 = 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;
@@ -209,6 +213,97 @@ var LineChartBase = /** @class */ (function (_super) {
             }
             return { isInGap: isInGap, gapIndex: gapIndex };
         };
+        _this_1._onMouseOverLargeDataset = function (linenumber, lineHeight, mouseEvent) {
+            // Run this code for different scenarios. For data and numeric data. Try to satisfy undefined d0/d1 scenario.
+            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(mouseEvent.pageX - 15); //Todo - fix this
+            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 = getTypeOfAxis(lineChartData[linenumber].data[0].x, true);
+                var x0 = void 0;
+                var point0 = void 0;
+                var point1 = void 0;
+                switch (axisType) {
+                    case 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 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 = 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 = "#staticHighlightCircle_" + linenumber;
+                d3Select("#staticHighlightCircle_" + linenumber)
+                    .attr('cx', "" + _this_1._xAxisScale(pointToHighlight.x))
+                    .attr('cy', "" + _this_1._yAxisScale(pointToHighlight.y))
+                    .attr('visibility', 'visibility');
+                d3Select("#" + _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: "#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;
@@ -265,12 +360,16 @@ var LineChartBase = /** @class */ (function (_super) {
                         dataPointCalloutProps: found,
                         activePoint: circleId,
                         xAxisCalloutAccessibilityData: xAxisCalloutAccessibilityData,
+                        nearestCircleToHighlight: null,
+                        activeLine: null,
                     });
                 }
             }
             else {
                 _this_1.setState({
                     activePoint: circleId,
+                    nearestCircleToHighlight: null,
+                    activeLine: null,
                 });
             }
         };
@@ -292,6 +391,7 @@ var LineChartBase = /** @class */ (function (_super) {
             _this_1.setState({
                 isCalloutVisible: false,
                 activePoint: '',
+                activeLine: null,
             });
         };
         _this_1._handleLegendClick = function (lineChartItem, selectedLegend) {
@@ -397,6 +497,8 @@ var LineChartBase = /** @class */ (function (_super) {
             selectedColorBarLegend: [],
             isSelectedLegend: false,
             activePoint: '',
+            nearestCircleToHighlight: null,
+            activeLine: null,
         };
         _this_1._refArray = [];
         _this_1._points = _this_1._injectIndexPropertyInLineChartData(_this_1.props.data.lineChartData);
@@ -514,7 +616,7 @@ var LineChartBase = /** @class */ (function (_super) {
     };
     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;
+        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;
@@ -522,7 +624,7 @@ var LineChartBase = /** @class */ (function (_super) {
         else {
             this._points = this._injectIndexPropertyInLineChartData(this.props.data.lineChartData);
         }
-        for (var i = 0; i < this._points.length; i++) {
+        for (var i = this._points.length - 1; i >= 0; i--) {
             var linesForLine = [];
             var bordersForLine = [];
             var pointsForLine = [];
@@ -532,59 +634,98 @@ var LineChartBase = /** @class */ (function (_super) {
             var theme = this.props.theme;
             var verticaLineHeight = containerHeight - this.margins.bottom + 6;
             if (this._points[i].data.length === 1) {
-                var _r = this._points[i].data[0], x1 = _r.x, y1 = _r.y, xAxisCalloutData = _r.xAxisCalloutData, xAxisCalloutAccessibilityData = _r.xAxisCalloutAccessibilityData;
+                var _0 = this._points[i].data[0], x1 = _0.x, y1 = _0.y, xAxisCalloutData = _0.xAxisCalloutData, xAxisCalloutAccessibilityData = _0.xAxisCalloutAccessibilityData;
                 var circleId = "" + this._circleId + i;
                 pointsForLine.push(React.createElement("circle", { id: "" + this._circleId + i, key: "" + this._circleId + i, r: activePoint === circleId ? 5.5 : 3.5, cx: this._xAxisScale(x1), cy: this._yAxisScale(y1), fill: activePoint === circleId ? theme.palette.white : lineColor, onMouseOver: this._handleHover.bind(this, x1, y1, verticaLineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData), onMouseMove: this._handleHover.bind(this, x1, y1, verticaLineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData), onMouseOut: this._handleMouseOut, strokeWidth: activePoint === circleId ? DEFAULT_LINE_STROKE_SIZE : 0, stroke: activePoint === circleId ? lineColor : '' }));
             }
             var gapIndex = 0;
             var gaps = (_b = (_a = this._points[i].gaps) === null || _a === void 0 ? void 0 : _a.sort(function (a, b) { return a.startIndex - b.startIndex; })) !== null && _b !== void 0 ? _b : [];
-            var _loop_1 = 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 _s = this_1._points[i].data[j - 1], x1 = _s.x, y1 = _s.y, xAxisCalloutData = _s.xAxisCalloutData, xAxisCalloutAccessibilityData = _s.xAxisCalloutAccessibilityData;
-                var _t = this_1._points[i].data[j], x2 = _t.x, y2 = _t.y;
-                var path = this_1._getPath(this_1._xAxisScale(x1), this_1._yAxisScale(y1), circleId, j, false, this_1._points[i].index);
-                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.state.activeLegend === legendVal || this_1.state.activeLegend === '' || this_1.state.isSelectedLegend;
-                var currentPointHidden = this_1._points[i].hideNonActiveDots && activePoint !== circleId;
-                pointsForLine.push(React.createElement("path", { 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, onClick: this_1._onDataPointClick.bind(this_1, 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 }));
-                if (j + 1 === this_1._points[i].data.length) {
-                    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 _u = this_1._points[i].data[j], lastCirlceXCallout_1 = _u.xAxisCalloutData, lastCirlceXCalloutAccessibilityData_1 = _u.xAxisCalloutAccessibilityData;
-                    pointsForLine.push(React.createElement("path", { 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, onClick: this_1._onDataPointClick.bind(this_1, 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 }));
-                    /* eslint-enable react/jsx-no-bind */
+            // Use path rendering technique for larger datasets to optimize performance.
+            if (this._points[i].data.length >= 1000 || this.props.optimizeLargeData) {
+                var line = d3Line()
+                    // 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(d3curveLinear);
+                var lineId = "" + this._lineId + i;
+                var borderId = "" + this._borderId + i;
+                var strokeWidth = ((_c = this._points[i].lineOptions) === null || _c === void 0 ? void 0 : _c.strokeWidth) || this.props.strokeWidth || DEFAULT_LINE_STROKE_SIZE;
+                var isLegendSelected = this.state.activeLegend === legendVal || this.state.activeLegend === '' || this.state.isSelectedLegend;
+                var lineData = [];
+                for (var k = 0; k < this._points[i].data.length; k++) {
+                    lineData.push([
+                        this._points[i].data[k].x instanceof Date
+                            ? this._points[i].data[k].x.getTime()
+                            : this._points[i].data[k].x,
+                        this._points[i].data[k].y,
+                    ]);
                 }
                 if (isLegendSelected) {
-                    // don't draw line if it is in a gap
-                    if (!isInGap) {
-                        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("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: (_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("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, 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: (_j = (_h = this_1._points[i].lineOptions) === null || _h === void 0 ? void 0 : _h.strokeLinecap) !== null && _j !== void 0 ? _j : 'round', strokeDasharray: (_k = this_1._points[i].lineOptions) === null || _k === void 0 ? void 0 : _k.strokeDasharray, strokeDashoffset: (_l = this_1._points[i].lineOptions) === null || _l === void 0 ? void 0 : _l.strokeDashoffset, opacity: 1, onClick: this_1._onLineClick.bind(this_1, this_1._points[i].onLineClick) }));
+                    var lineBorderWidth = ((_d = this._points[i].lineOptions) === null || _d === void 0 ? void 0 : _d.lineBorderWidth)
+                        ? Number.parseFloat(this._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._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._points[i].lineOptions) === null || _g === void 0 ? void 0 : _g.lineBorderColor) || theme.palette.white, opacity: 1 }));
                     }
+                    linesForLine.push(React.createElement("path", { id: lineId, key: lineId, d: line(lineData), fill: "transparent", "data-is-focusable": true, stroke: lineColor, strokeWidth: strokeWidth, strokeLinecap: (_j = (_h = this._points[i].lineOptions) === null || _h === void 0 ? void 0 : _h.strokeLinecap) !== null && _j !== void 0 ? _j : 'round', onMouseMove: this._onMouseOverLargeDataset.bind(this, i, verticaLineHeight), onMouseOver: this._onMouseOverLargeDataset.bind(this, i, verticaLineHeight), onMouseOut: this._handleMouseOut, onClick: this._onLineClick.bind(this, this._points[i].onLineClick), opacity: 1 }));
                 }
                 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: (_o = (_m = this_1._points[i].lineOptions) === null || _m === void 0 ? void 0 : _m.strokeLinecap) !== null && _o !== void 0 ? _o : 'round', strokeDasharray: (_p = this_1._points[i].lineOptions) === null || _p === void 0 ? void 0 : _p.strokeDasharray, strokeDashoffset: (_q = this_1._points[i].lineOptions) === null || _q === void 0 ? void 0 : _q.strokeDashoffset, opacity: 0.1 }));
+                    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._points[i].lineOptions) === null || _k === void 0 ? void 0 : _k.strokeLinecap) !== null && _l !== void 0 ? _l : 'round', opacity: 0.1 }));
+                }
+                var isPointHighlighted = this.state.activeLine !== null && this.state.activeLine === i;
+                pointsForLine.push(React.createElement("circle", { id: "staticHighlightCircle_" + i, key: "staticHighlightCircle_" + i, r: 5.5, cx: 0, cy: 0, fill: theme.palette.white, "data-is-focusable": true, strokeWidth: DEFAULT_LINE_STROKE_SIZE, stroke: lineColor, visibility: isPointHighlighted ? 'visibility' : 'hidden', onMouseMove: this._onMouseOverLargeDataset.bind(this, i, verticaLineHeight), onMouseOver: this._onMouseOverLargeDataset.bind(this, i, verticaLineHeight), onMouseOut: this._handleMouseOut }));
+            }
+            else {
+                var _loop_1 = 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.state.activeLegend === legendVal || this_1.state.activeLegend === '' || this_1.state.isSelectedLegend;
+                    var currentPointHidden = this_1._points[i].hideNonActiveDots && activePoint !== circleId;
+                    pointsForLine.push(React.createElement("path", { 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, onClick: this_1._onDataPointClick.bind(this_1, 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 }));
+                    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", { 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, onClick: this_1._onDataPointClick.bind(this_1, 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 }));
+                        /* 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", { 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, onClick: this_1._onLineClick.bind(this_1, 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 }));
+                        }
+                    }
+                };
+                var this_1 = this;
+                for (var j = 1; j < this._points[i].data.length; j++) {
+                    _loop_1(j);
                 }
-            };
-            var this_1 = this;
-            for (var j = 1; j < this._points[i].data.length; j++) {
-                _loop_1(j);
             }
             lines.push.apply(lines, __spreadArray(__spreadArray(__spreadArray([], bordersForLine), linesForLine), pointsForLine));
         }