@fluentui/react-charting 5.23.58 → 5.23.59

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

@@ -4,6 +4,7 @@ import { select as d3Select, pointer } from 'd3-selection';
 import { bisector } from 'd3-array';
 import { Legends } from '../Legends/index';
 import { line as d3Line, curveLinear as d3curveLinear } from 'd3-shape';
+import { max as d3Max, min as d3Min } from 'd3-array';
 import { classNamesFunction, getId, find, memoizeFunction, getRTL, initializeComponentRef, } from '@fluentui/react/lib/Utilities';
 import { CartesianChart, } from '../../index';
 import { DirectionalHint } from '@fluentui/react/lib/Callout';
@@ -59,9 +60,17 @@ var LineChartBase = /** @class */ (function (_super) {
         _this_1._yAxisScale = '';
         _this_1.eventLabelHeight = 36;
         _this_1._isRTL = getRTL();
+        _this_1._xMin = Number.NEGATIVE_INFINITY;
+        _this_1._yMin = Number.NEGATIVE_INFINITY;
+        _this_1._xMax = Number.POSITIVE_INFINITY;
+        _this_1._xPadding = 0;
+        _this_1._yPadding = 0;
         _this_1._getDomainNRangeValues = function (points, margins, width, chartType, isRTL, xAxisType, barWidth, tickValues, shiftX) {
             var domainNRangeValue;
-            if (xAxisType === XAxisTypes.NumericAxis) {
+            if (_this_1.props.lineMode === 'scatter' && xAxisType === XAxisTypes.NumericAxis) {
+                domainNRangeValue = _this_1._getDomainNRangeValuesWithPadding(points, margins, width, isRTL);
+            }
+            else if (xAxisType === XAxisTypes.NumericAxis) {
                 domainNRangeValue = domainRangeOfNumericForAreaChart(points, margins, width, isRTL);
             }
             else if (xAxisType === XAxisTypes.DateAxis) {
@@ -105,6 +114,18 @@ var LineChartBase = /** @class */ (function (_super) {
                     ? _this_1.props.onRenderCalloutPerDataPoint(_this_1.state.dataPointCalloutProps)
                     : null;
         };
+        _this_1._getNumericMinMaxOfY = function (points) {
+            // eslint-disable-next-line @typescript-eslint/no-shadow
+            var _a = findNumericMinMaxOfY(points), startValue = _a.startValue, endValue = _a.endValue;
+            _this_1._yMin = startValue;
+            if (_this_1.props.lineMode === 'scatter') {
+                _this_1._yPadding = (endValue - startValue) * 0.1;
+            }
+            return {
+                startValue: startValue - _this_1._yPadding,
+                endValue: endValue + _this_1._yPadding,
+            };
+        };
         _this_1._getMargins = function (margins) {
             _this_1.margins = margins;
         };
@@ -548,6 +569,34 @@ var LineChartBase = /** @class */ (function (_super) {
             var yValue = point.yAxisCalloutData || point.y;
             return ((_a = point.callOutAccessibilityData) === null || _a === void 0 ? void 0 : _a.ariaLabel) || "".concat(xValue, ". ").concat(legend, ", ").concat(yValue, ".");
         };
+        _this_1._getDomainNRangeValuesWithPadding = function (points, margins, width, isRTL) {
+            _this_1._xMin = d3Min(points, function (point) {
+                return d3Min(point.data, function (item) { return item.x; });
+            });
+            _this_1._xMax = d3Max(points, function (point) {
+                return d3Max(point.data, function (item) {
+                    return item.x;
+                });
+            });
+            if (_this_1.props.lineMode === 'scatter') {
+                _this_1._xPadding = (_this_1._xMax - _this_1._xMin) * 0.1;
+            }
+            var rStartValue = margins.left;
+            var rEndValue = width - margins.right;
+            return isRTL
+                ? {
+                    dStartValue: _this_1._xMax + _this_1._xPadding,
+                    dEndValue: _this_1._xMin - _this_1._xPadding,
+                    rStartValue: rStartValue,
+                    rEndValue: rEndValue,
+                }
+                : {
+                    dStartValue: _this_1._xMin - _this_1._xPadding,
+                    dEndValue: _this_1._xMax + _this_1._xPadding,
+                    rStartValue: rStartValue,
+                    rEndValue: rEndValue,
+                };
+        };
         _this_1._getChartTitle = function () {
             var _a = _this_1.props.data, chartTitle = _a.chartTitle, lineChartData = _a.lineChartData;
             return (chartTitle ? "".concat(chartTitle, ". ") : '') + "Line chart with ".concat((lineChartData === null || lineChartData === void 0 ? void 0 : lineChartData.length) || 0, " lines. ");
@@ -632,7 +681,7 @@ var LineChartBase = /** @class */ (function (_super) {
             tickValues: tickValues,
             tickFormat: tickFormat,
         };
-        return !this._isChartEmpty() ? (React.createElement(CartesianChart, __assign({}, this.props, { chartTitle: this._getChartTitle(), points: points, chartType: ChartTypes.LineChart, isCalloutForStack: true, calloutProps: calloutProps, tickParams: tickParams, legendBars: legendBars, createYAxis: createNumericYAxis, getmargins: this._getMargins, getMinMaxOfYAxis: findNumericMinMaxOfY, getGraphData: this._initializeLineChartData, xAxisType: isXAxisDateType ? XAxisTypes.DateAxis : XAxisTypes.NumericAxis, customizedCallout: this._getCustomizedCallout(), getDomainNRangeValues: this._getDomainNRangeValues, createStringYAxis: createStringYAxis, onChartMouseLeave: this._handleChartMouseLeave, enableFirstRenderOptimization: this.props.enablePerfOptimization && this._firstRenderOptimization, ref: this._cartesianChartRef, 
+        return !this._isChartEmpty() ? (React.createElement(CartesianChart, __assign({}, this.props, { chartTitle: this._getChartTitle(), points: points, chartType: ChartTypes.LineChart, isCalloutForStack: true, calloutProps: calloutProps, tickParams: tickParams, legendBars: legendBars, createYAxis: createNumericYAxis, getmargins: this._getMargins, getMinMaxOfYAxis: this._getNumericMinMaxOfY, getGraphData: this._initializeLineChartData, xAxisType: isXAxisDateType ? XAxisTypes.DateAxis : XAxisTypes.NumericAxis, customizedCallout: this._getCustomizedCallout(), getDomainNRangeValues: this._getDomainNRangeValues, createStringYAxis: createStringYAxis, onChartMouseLeave: this._handleChartMouseLeave, enableFirstRenderOptimization: this.props.enablePerfOptimization && this._firstRenderOptimization, ref: this._cartesianChartRef, 
             /* eslint-disable react/jsx-no-bind */
             // eslint-disable-next-line react/no-children-prop
             children: function (props) {
@@ -714,6 +763,13 @@ var LineChartBase = /** @class */ (function (_super) {
             : [];
         return (React.createElement(Legends, __assign({ legends: __spreadArray(__spreadArray([], legendDataItems, true), colorFillBarsLegendDataItems, true), enabledWrapLines: this.props.enabledLegendsWrapLines, overflowProps: this.props.legendsOverflowProps, focusZonePropsInHoverCard: this.props.focusZonePropsForLegendsInHoverCard, overflowText: this.props.legendsOverflowText }, (isLegendMultiSelectEnabled && { onLegendHoverCardLeave: this._onHoverCardHide }), this.props.legendProps)));
     };
+    LineChartBase.prototype._getRangeForScatterMarkerSize = function () {
+        var extraXPixels = this._isRTL
+            ? this._xAxisScale(this._xMax - this._xPadding) - this._xAxisScale(this._xMax)
+            : this._xAxisScale(this._xMin + this._xPadding) - this._xAxisScale(this._xMin);
+        var extraYPixels = this._yAxisScale(this._yMin) - this._yAxisScale(this._yMin + this._yPadding);
+        return Math.min(extraXPixels, extraYPixels);
+    };
     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, _0, _1;
@@ -724,6 +780,12 @@ var LineChartBase = /** @class */ (function (_super) {
         else {
             this._points = this._injectIndexPropertyInLineChartData(this.props.data.lineChartData);
         }
+        var extraMaxPixels = this.props.lineMode === 'scatter' ? this._getRangeForScatterMarkerSize() : 0;
+        var maxMarkerSize = d3Max(this._points, function (point) {
+            return d3Max(point.data, function (item) {
+                return item.markerSize;
+            });
+        });
         var _loop_1 = function (i) {
             var linesForLine = [];
             var bordersForLine = [];
@@ -737,7 +799,12 @@ var LineChartBase = /** @class */ (function (_super) {
                 var _2 = this_1._points[i].data[0], x1_1 = _2.x, y1 = _2.y, xAxisCalloutData_1 = _2.xAxisCalloutData, xAxisCalloutAccessibilityData_1 = _2.xAxisCalloutAccessibilityData;
                 var circleId_1 = "".concat(this_1._circleId, "_").concat(i);
                 var isLegendSelected = this_1._legendHighlighted(legendVal) || this_1._noLegendHighlighted() || this_1.state.isSelectedLegend;
-                pointsForLine.push(React.createElement("circle", __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.semanticColors.bodyBackground : lineColor, opacity: isLegendSelected ? 1 : 0.1, 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": isLegendSelected, ref: function (e) {
+                var currentMarkerSize = this_1._points[i].data[0].markerSize;
+                pointsForLine.push(React.createElement("circle", __assign({ id: circleId_1, key: circleId_1, r: currentMarkerSize
+                        ? (currentMarkerSize * extraMaxPixels) / maxMarkerSize
+                        : activePoint === circleId_1
+                            ? 5.5
+                            : 3.5, cx: this_1._xAxisScale(x1_1), cy: this_1._yAxisScale(y1), fill: activePoint === circleId_1 ? theme.semanticColors.bodyBackground : lineColor, opacity: isLegendSelected ? 1 : 0.1, 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": isLegendSelected, 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))));
             }
@@ -793,7 +860,8 @@ var LineChartBase = /** @class */ (function (_super) {
                     var strokeWidth = ((_p = this_1._points[i].lineOptions) === null || _p === void 0 ? void 0 : _p.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", __assign({ id: circleId, key: circleId, d: path, "data-is-focusable": isLegendSelected, 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) })));
+                    var currentMarkerSize = this_1._points[i].data[j - 1].markerSize;
+                    pointsForLine.push(this_1.props.lineMode === 'scatter' ? (React.createElement("circle", __assign({ id: circleId, key: circleId, r: currentMarkerSize ? (currentMarkerSize * extraMaxPixels) / maxMarkerSize : 4, cx: this_1._xAxisScale(x1), cy: this_1._yAxisScale(y1), "data-is-focusable": isLegendSelected, 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) }))) : (React.createElement("path", __assign({ id: circleId, key: circleId, d: path, "data-is-focusable": isLegendSelected, 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 = "".concat(circleId).concat(j, "L");
@@ -801,30 +869,34 @@ var LineChartBase = /** @class */ (function (_super) {
                         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 _5 = this_1._points[i].data[j], lastCirlceXCallout_1 = _5.xAxisCalloutData, lastCirlceXCalloutAccessibilityData_1 = _5.xAxisCalloutAccessibilityData;
+                        currentMarkerSize = this_1._points[i].data[j].markerSize;
                         pointsForLine.push(React.createElement(React.Fragment, { key: "".concat(lastCircleId_1, "_container") },
-                            React.createElement("path", __assign({ id: lastCircleId_1, key: lastCircleId_1, d: path, "data-is-focusable": isLegendSelected, 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 () {
+                            this_1.props.lineMode === 'scatter' ? (React.createElement("circle", __assign({ id: lastCircleId_1, key: lastCircleId_1, r: currentMarkerSize ? (currentMarkerSize * extraMaxPixels) / maxMarkerSize : 4, cx: this_1._xAxisScale(x2), cy: this_1._yAxisScale(y2), "data-is-focusable": isLegendSelected, 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) }))) : (React.createElement("path", __assign({ id: lastCircleId_1, key: lastCircleId_1, d: path, "data-is-focusable": isLegendSelected, 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) })),
+                                }, 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) }))),
                             React.createElement("circle", { id: hiddenHoverCircleId, key: hiddenHoverCircleId, r: 8, cx: this_1._xAxisScale(x2), cy: this_1._yAxisScale(y2), opacity: 0, width: 0, 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, strokeWidth: 0, focusable: false, onBlur: this_1._handleMouseOut })));
-                        /* eslint-enable react/jsx-no-bind */
                     }
-                    if (isLegendSelected) {
-                        // don't draw line if it is in a gap
-                        if (!isInGap) {
-                            var lineBorderWidth = ((_q = this_1._points[i].lineOptions) === null || _q === void 0 ? void 0 : _q.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: (_s = (_r = this_1._points[i].lineOptions) === null || _r === void 0 ? void 0 : _r.strokeLinecap) !== null && _s !== void 0 ? _s : 'round', strokeWidth: Number.parseFloat(strokeWidth.toString()) + lineBorderWidth, stroke: ((_t = this_1._points[i].lineOptions) === null || _t === void 0 ? void 0 : _t.lineBorderColor) || theme.semanticColors.bodyBackground, opacity: 1 }));
+                    if (this_1.props.lineMode !== 'scatter') {
+                        if (isLegendSelected) {
+                            // don't draw line if it is in a gap
+                            if (!isInGap) {
+                                var lineBorderWidth = ((_q = this_1._points[i].lineOptions) === null || _q === void 0 ? void 0 : _q.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: (_s = (_r = this_1._points[i].lineOptions) === null || _r === void 0 ? void 0 : _r.strokeLinecap) !== null && _s !== void 0 ? _s : 'round', strokeWidth: Number.parseFloat(strokeWidth.toString()) + lineBorderWidth, stroke: ((_t = this_1._points[i].lineOptions) === null || _t === void 0 ? void 0 : _t.lineBorderColor) || theme.semanticColors.bodyBackground, opacity: 1 }));
+                                }
+                                linesForLine.push(React.createElement("line", __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: (_v = (_u = this_1._points[i].lineOptions) === null || _u === void 0 ? void 0 : _u.strokeLinecap) !== null && _v !== void 0 ? _v : 'round', strokeDasharray: (_w = this_1._points[i].lineOptions) === null || _w === void 0 ? void 0 : _w.strokeDasharray, strokeDashoffset: (_x = this_1._points[i].lineOptions) === null || _x === void 0 ? void 0 : _x.strokeDashoffset, opacity: 1 }, this_1._getClickHandler(this_1._points[i].onLineClick))));
                             }
-                            linesForLine.push(React.createElement("line", __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: (_v = (_u = this_1._points[i].lineOptions) === null || _u === void 0 ? void 0 : _u.strokeLinecap) !== null && _v !== void 0 ? _v : 'round', strokeDasharray: (_w = this_1._points[i].lineOptions) === null || _w === void 0 ? void 0 : _w.strokeDasharray, strokeDashoffset: (_x = this_1._points[i].lineOptions) === null || _x === void 0 ? void 0 : _x.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: (_z = (_y = this_1._points[i].lineOptions) === null || _y === void 0 ? void 0 : _y.strokeLinecap) !== null && _z !== void 0 ? _z : 'round', strokeDasharray: (_0 = this_1._points[i].lineOptions) === null || _0 === void 0 ? void 0 : _0.strokeDasharray, strokeDashoffset: (_1 = this_1._points[i].lineOptions) === null || _1 === void 0 ? void 0 : _1.strokeDashoffset, opacity: 0.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: (_z = (_y = this_1._points[i].lineOptions) === null || _y === void 0 ? void 0 : _y.strokeLinecap) !== null && _z !== void 0 ? _z : 'round', strokeDasharray: (_0 = this_1._points[i].lineOptions) === null || _0 === void 0 ? void 0 : _0.strokeDasharray, strokeDashoffset: (_1 = this_1._points[i].lineOptions) === null || _1 === void 0 ? void 0 : _1.strokeDashoffset, opacity: 0.1 }));
+                            }
                         }
                     }
                 };