@fluentui/react-charting 5.23.91 → 5.23.92

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

@@ -57,15 +57,19 @@ define(["require", "exports", "tslib", "react", "d3-selection", "d3-array", "../
             _this_1._xPadding = 0;
             _this_1._yPaddingPrimary = 0;
             _this_1._yPaddingSecondary = 0;
+            _this_1._hasMarkersMode = false;
             _this_1.toImage = function (opts) {
                 var _a, _b;
                 return (0, image_export_utils_1.toImage)((_a = _this_1._cartesianChartRef.current) === null || _a === void 0 ? void 0 : _a.chartContainer, (_b = _this_1._legendsRef.current) === null || _b === void 0 ? void 0 : _b.toSVG, _this_1._isRTL, opts);
             };
             _this_1._getDomainNRangeValues = function (points, margins, width, chartType, isRTL, xAxisType, barWidth, tickValues, shiftX) {
                 var domainNRangeValue;
-                if (_this_1.props.lineMode === 'scatter' && xAxisType === index_3.XAxisTypes.NumericAxis) {
+                if (_this_1._hasMarkersMode && xAxisType === index_3.XAxisTypes.NumericAxis) {
                     domainNRangeValue = _this_1._getDomainNRangeValuesWithPadding(points, margins, width, isRTL);
                 }
+                else if (_this_1._hasMarkersMode && xAxisType === index_3.XAxisTypes.DateAxis) {
+                    domainNRangeValue = _this_1._getDomainNRangeValuesOfDateWithPadding(points, margins, width, isRTL, tickValues, chartType, barWidth);
+                }
                 else if (xAxisType === index_3.XAxisTypes.NumericAxis) {
                     domainNRangeValue = (0, index_3.domainRangeOfNumericForAreaChart)(points, margins, width, isRTL);
                 }
@@ -78,8 +82,9 @@ define(["require", "exports", "tslib", "react", "d3-selection", "d3-array", "../
                 return domainNRangeValue;
             };
             _this_1._injectIndexPropertyInLineChartData = function (lineChartData, isFilterSelectedLegends) {
+                var _a;
                 if (isFilterSelectedLegends === void 0) { isFilterSelectedLegends = false; }
-                var _a = _this_1.props.allowMultipleShapesForPoints, allowMultipleShapesForPoints = _a === void 0 ? false : _a;
+                var _b = _this_1.props.allowMultipleShapesForPoints, allowMultipleShapesForPoints = _b === void 0 ? false : _b;
                 // Apply filter only if isPropChange is true
                 var filteredData = isFilterSelectedLegends
                     ? lineChartData === null || lineChartData === void 0 ? void 0 : lineChartData.filter(function (item) {
@@ -88,6 +93,8 @@ define(["require", "exports", "tslib", "react", "d3-selection", "d3-array", "../
                             ((_c = _this_1.props.legendProps) === null || _c === void 0 ? void 0 : _c.selectedLegend) === item.legend;
                     })
                     : lineChartData;
+                _this_1._hasMarkersMode =
+                    (_a = filteredData === null || filteredData === void 0 ? void 0 : filteredData.some(function (item) { var _a, _b, _c; return (_c = (_b = (_a = item.lineOptions) === null || _a === void 0 ? void 0 : _a.mode) === null || _b === void 0 ? void 0 : _b.includes) === null || _c === void 0 ? void 0 : _c.call(_b, 'markers'); })) !== null && _a !== void 0 ? _a : false;
                 return filteredData
                     ? filteredData.map(function (item, index) {
                         var _a, _b;
@@ -114,7 +121,7 @@ define(["require", "exports", "tslib", "react", "d3-selection", "d3-array", "../
                 // eslint-disable-next-line @typescript-eslint/no-shadow
                 var _a = (0, index_3.findNumericMinMaxOfY)(points, yAxisType, useSecondaryYScale), startValue = _a.startValue, endValue = _a.endValue;
                 var yPadding = 0;
-                if (_this_1.props.lineMode === 'scatter') {
+                if (_this_1._hasMarkersMode) {
                     yPadding = (endValue - startValue) * 0.1;
                     if (useSecondaryYScale) {
                         _this_1._yPaddingSecondary = yPadding;
@@ -574,6 +581,40 @@ define(["require", "exports", "tslib", "react", "d3-selection", "d3-array", "../
                 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._getDomainNRangeValuesOfDateWithPadding = function (points, margins, width, isRTL, tickValues, chartType, barWidth) {
+                if (tickValues === void 0) { tickValues = []; }
+                var sDate;
+                var lDate;
+                sDate = (0, d3_array_2.min)(points, function (point) {
+                    return (0, d3_array_2.min)(point.data, function (item) { return item.x; });
+                });
+                lDate = (0, d3_array_2.max)(points, function (point) {
+                    return (0, d3_array_2.max)(point.data, function (item) { return item.x; });
+                });
+                // Include tickValues if present
+                sDate = (0, d3_array_2.min)(tslib_1.__spreadArray(tslib_1.__spreadArray([], tickValues, true), [sDate], false));
+                lDate = (0, d3_array_2.max)(tslib_1.__spreadArray(tslib_1.__spreadArray([], tickValues, true), [lDate], false));
+                // Calculate time-based padding (e.g. 10% of the date range)
+                var dateRange = lDate.getTime() - sDate.getTime();
+                var datePadding = _this_1._hasMarkersMode ? dateRange * 0.1 : 0;
+                var paddedSDate = new Date(sDate.getTime() - datePadding);
+                var paddedLDate = new Date(lDate.getTime() + datePadding);
+                var rStartValue = margins.left;
+                var rEndValue = width - margins.right;
+                return isRTL
+                    ? {
+                        dStartValue: paddedLDate,
+                        dEndValue: paddedSDate,
+                        rStartValue: rStartValue,
+                        rEndValue: rEndValue,
+                    }
+                    : {
+                        dStartValue: paddedSDate,
+                        dEndValue: paddedLDate,
+                        rStartValue: rStartValue,
+                        rEndValue: rEndValue,
+                    };
+            };
             _this_1._getDomainNRangeValuesWithPadding = function (points, margins, width, isRTL) {
                 _this_1._xMin = (0, d3_array_2.min)(points, function (point) {
                     return (0, d3_array_2.min)(point.data, function (item) { return item.x; });
@@ -583,7 +624,7 @@ define(["require", "exports", "tslib", "react", "d3-selection", "d3-array", "../
                         return item.x;
                     });
                 });
-                if (_this_1.props.lineMode === 'scatter') {
+                if (_this_1._hasMarkersMode) {
                     _this_1._xPadding = (_this_1._xMax - _this_1._xMin) * 0.1;
                 }
                 var rStartValue = margins.left;
@@ -790,7 +831,7 @@ define(["require", "exports", "tslib", "react", "d3-selection", "d3-array", "../
         };
         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, _2;
+            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, _2, _3, _4, _5, _6, _7, _8;
             var lines = [];
             if (this.state.isSelectedLegend) {
                 this._points = this.state.selectedLegendPoints;
@@ -814,9 +855,9 @@ define(["require", "exports", "tslib", "react", "d3-selection", "d3-array", "../
                 var verticaLineHeight = containerHeight - this_1.margins.bottom + 6;
                 var yScale = this_1._points[i].useSecondaryYScale && this_1._yScaleSecondary ? this_1._yScaleSecondary : this_1._yScalePrimary;
                 var yPadding = this_1._points[i].useSecondaryYScale && this_1._yScaleSecondary ? this_1._yPaddingSecondary : this_1._yPaddingPrimary;
-                var extraMaxPixels = this_1.props.lineMode === 'scatter' ? this_1._getRangeForScatterMarkerSize(yScale, yPadding) : 0;
+                var extraMaxPixels = this_1._hasMarkersMode ? this_1._getRangeForScatterMarkerSize(yScale, yPadding) : 0;
                 if (this_1._points[i].data.length === 1) {
-                    var _3 = this_1._points[i].data[0], x1_1 = _3.x, y1 = _3.y, xAxisCalloutData_1 = _3.xAxisCalloutData, xAxisCalloutAccessibilityData_1 = _3.xAxisCalloutAccessibilityData;
+                    var _9 = this_1._points[i].data[0], x1_1 = _9.x, y1 = _9.y, xAxisCalloutData_1 = _9.xAxisCalloutData, xAxisCalloutAccessibilityData_1 = _9.xAxisCalloutAccessibilityData;
                     var circleId_1 = "".concat(this_1._circleId, "_").concat(i);
                     var isLegendSelected = this_1._legendHighlighted(legendVal) || this_1._noLegendHighlighted() || this_1.state.isSelectedLegend;
                     var currentMarkerSize = this_1._points[i].data[0].markerSize;
@@ -875,48 +916,48 @@ define(["require", "exports", "tslib", "react", "d3-selection", "d3-array", "../
                         var lineId = "".concat(this_1._lineId, "_").concat(i, "_").concat(j);
                         var borderId = "".concat(this_1._borderId, "_").concat(i, "_").concat(j);
                         var circleId = "".concat(this_1._circleId, "_").concat(i, "_").concat(j);
-                        var _4 = this_1._points[i].data[j - 1], x1 = _4.x, y1 = _4.y, xAxisCalloutData = _4.xAxisCalloutData, xAxisCalloutAccessibilityData = _4.xAxisCalloutAccessibilityData;
-                        var _5 = this_1._points[i].data[j], x2 = _5.x, y2 = _5.y;
+                        var _10 = this_1._points[i].data[j - 1], x1 = _10.x, y1 = _10.y, xAxisCalloutData = _10.xAxisCalloutData, xAxisCalloutAccessibilityData = _10.xAxisCalloutAccessibilityData;
+                        var _11 = this_1._points[i].data[j], x2 = _11.x, y2 = _11.y;
                         var path = this_1._getPath(this_1._xAxisScale(x1), yScale(y1), circleId, j, false, this_1._points[i].index);
                         var strokeWidth = ((_q = this_1._points[i].lineOptions) === null || _q === void 0 ? void 0 : _q.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;
                         var currentMarkerSize = this_1._points[i].data[j - 1].markerSize;
-                        pointsForLine.push(this_1.props.lineMode === 'scatter' ? (React.createElement("circle", tslib_1.__assign({ id: circleId, key: circleId, r: currentMarkerSize ? (currentMarkerSize * extraMaxPixels) / maxMarkerSize : 4, cx: this_1._xAxisScale(x1), cy: yScale(y1), "data-is-focusable": isLegendSelected, onMouseOver: this_1._handleHover.bind(this_1, x1, y1, verticaLineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData, yScale), onMouseMove: this_1._handleHover.bind(this_1, x1, y1, verticaLineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData, yScale), 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", tslib_1.__assign({ id: circleId, key: circleId, d: path, "data-is-focusable": isLegendSelected, onMouseOver: this_1._handleHover.bind(this_1, x1, y1, verticaLineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData, yScale), onMouseMove: this_1._handleHover.bind(this_1, x1, y1, verticaLineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData, yScale), 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) }))));
+                        pointsForLine.push(((_s = (_r = this_1._points[i].lineOptions) === null || _r === void 0 ? void 0 : _r.mode) === null || _s === void 0 ? void 0 : _s.includes('markers')) ? (React.createElement("circle", tslib_1.__assign({ id: circleId, key: circleId, r: currentMarkerSize ? (currentMarkerSize * extraMaxPixels) / maxMarkerSize : 4, cx: this_1._xAxisScale(x1), cy: yScale(y1), "data-is-focusable": isLegendSelected, onMouseOver: this_1._handleHover.bind(this_1, x1, y1, verticaLineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData, yScale), onMouseMove: this_1._handleHover.bind(this_1, x1, y1, verticaLineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData, yScale), 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", tslib_1.__assign({ id: circleId, key: circleId, d: path, "data-is-focusable": isLegendSelected, onMouseOver: this_1._handleHover.bind(this_1, x1, y1, verticaLineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData, yScale), onMouseMove: this_1._handleHover.bind(this_1, x1, y1, verticaLineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData, yScale), 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");
                             var hiddenHoverCircleId = "".concat(circleId).concat(j, "D");
                             var lastPointHidden = this_1._points[i].hideNonActiveDots && activePoint !== lastCircleId_1;
                             path = this_1._getPath(this_1._xAxisScale(x2), yScale(y2), lastCircleId_1, j, true, this_1._points[i].index);
-                            var _6 = this_1._points[i].data[j], lastCirlceXCallout_1 = _6.xAxisCalloutData, lastCirlceXCalloutAccessibilityData_1 = _6.xAxisCalloutAccessibilityData;
+                            var _12 = this_1._points[i].data[j], lastCirlceXCallout_1 = _12.xAxisCalloutData, lastCirlceXCalloutAccessibilityData_1 = _12.xAxisCalloutAccessibilityData;
                             currentMarkerSize = this_1._points[i].data[j].markerSize;
                             pointsForLine.push(React.createElement(React.Fragment, { key: "".concat(lastCircleId_1, "_container") },
-                                this_1.props.lineMode === 'scatter' ? (React.createElement("circle", tslib_1.__assign({ id: lastCircleId_1, key: lastCircleId_1, r: currentMarkerSize ? (currentMarkerSize * extraMaxPixels) / maxMarkerSize : 4, cx: this_1._xAxisScale(x2), cy: yScale(y2), "data-is-focusable": isLegendSelected, onMouseOver: this_1._handleHover.bind(this_1, x2, y2, verticaLineHeight, lastCirlceXCallout_1, lastCircleId_1, lastCirlceXCalloutAccessibilityData_1, yScale), onMouseMove: this_1._handleHover.bind(this_1, x2, y2, verticaLineHeight, lastCirlceXCallout_1, lastCircleId_1, lastCirlceXCalloutAccessibilityData_1, yScale), onMouseOut: this_1._handleMouseOut, onFocus: function () {
+                                ((_u = (_t = this_1._points[i].lineOptions) === null || _t === void 0 ? void 0 : _t.mode) === null || _u === void 0 ? void 0 : _u.includes('markers')) ? (React.createElement("circle", tslib_1.__assign({ id: lastCircleId_1, key: lastCircleId_1, r: currentMarkerSize ? (currentMarkerSize * extraMaxPixels) / maxMarkerSize : 4, cx: this_1._xAxisScale(x2), cy: yScale(y2), "data-is-focusable": isLegendSelected, onMouseOver: this_1._handleHover.bind(this_1, x2, y2, verticaLineHeight, lastCirlceXCallout_1, lastCircleId_1, lastCirlceXCalloutAccessibilityData_1, yScale), onMouseMove: this_1._handleHover.bind(this_1, x2, y2, verticaLineHeight, lastCirlceXCallout_1, lastCircleId_1, lastCirlceXCalloutAccessibilityData_1, yScale), 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", tslib_1.__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, yScale), onMouseMove: this_1._handleHover.bind(this_1, x2, y2, verticaLineHeight, lastCirlceXCallout_1, lastCircleId_1, lastCirlceXCalloutAccessibilityData_1, yScale), 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("circle", { id: hiddenHoverCircleId, key: hiddenHoverCircleId, r: 8, cx: this_1._xAxisScale(x2), cy: yScale(y2), opacity: 0, width: 0, onMouseOver: this_1._handleHover.bind(this_1, x2, y2, verticaLineHeight, lastCirlceXCallout_1, lastCircleId_1, lastCirlceXCalloutAccessibilityData_1, yScale), onMouseMove: this_1._handleHover.bind(this_1, x2, y2, verticaLineHeight, lastCirlceXCallout_1, lastCircleId_1, lastCirlceXCalloutAccessibilityData_1, yScale), onMouseOut: this_1._handleMouseOut, strokeWidth: 0, focusable: false, onBlur: this_1._handleMouseOut })));
                         }
-                        if (this_1.props.lineMode !== 'scatter') {
+                        if (!this_1._hasMarkersMode || ((_w = (_v = this_1._points[i].lineOptions) === null || _v === void 0 ? void 0 : _v.mode) === null || _w === void 0 ? void 0 : _w.includes('lines'))) {
                             if (isLegendSelected) {
                                 // don't draw line if it is in a gap
                                 if (!isInGap) {
-                                    var lineBorderWidth = ((_r = this_1._points[i].lineOptions) === null || _r === void 0 ? void 0 : _r.lineBorderWidth)
+                                    var lineBorderWidth = ((_x = this_1._points[i].lineOptions) === null || _x === void 0 ? void 0 : _x.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: yScale(y1), x2: this_1._xAxisScale(x2), y2: yScale(y2), strokeLinecap: (_t = (_s = this_1._points[i].lineOptions) === null || _s === void 0 ? void 0 : _s.strokeLinecap) !== null && _t !== void 0 ? _t : 'round', strokeWidth: Number.parseFloat(strokeWidth.toString()) + lineBorderWidth, stroke: ((_u = this_1._points[i].lineOptions) === null || _u === void 0 ? void 0 : _u.lineBorderColor) || theme.semanticColors.bodyBackground, opacity: 1 }));
+                                        bordersForLine.push(React.createElement("line", { id: borderId, key: borderId, x1: this_1._xAxisScale(x1), y1: yScale(y1), x2: this_1._xAxisScale(x2), y2: yScale(y2), strokeLinecap: (_z = (_y = this_1._points[i].lineOptions) === null || _y === void 0 ? void 0 : _y.strokeLinecap) !== null && _z !== void 0 ? _z : 'round', strokeWidth: Number.parseFloat(strokeWidth.toString()) + lineBorderWidth, stroke: ((_0 = this_1._points[i].lineOptions) === null || _0 === void 0 ? void 0 : _0.lineBorderColor) || theme.semanticColors.bodyBackground, opacity: 1 }));
                                     }
                                     linesForLine.push(React.createElement("line", tslib_1.__assign({ id: lineId, key: lineId, x1: this_1._xAxisScale(x1), y1: yScale(y1), x2: this_1._xAxisScale(x2), y2: yScale(y2), strokeWidth: strokeWidth, ref: function (e) {
                                             _this_1._refCallback(e, lineId);
-                                        }, onMouseOver: this_1._handleHover.bind(this_1, x1, y1, verticaLineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData, yScale), onMouseMove: this_1._handleHover.bind(this_1, x1, y1, verticaLineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData, yScale), onMouseOut: this_1._handleMouseOut, stroke: lineColor, strokeLinecap: (_w = (_v = this_1._points[i].lineOptions) === null || _v === void 0 ? void 0 : _v.strokeLinecap) !== null && _w !== void 0 ? _w : 'round', strokeDasharray: (_x = this_1._points[i].lineOptions) === null || _x === void 0 ? void 0 : _x.strokeDasharray, strokeDashoffset: (_y = this_1._points[i].lineOptions) === null || _y === void 0 ? void 0 : _y.strokeDashoffset, opacity: 1 }, this_1._getClickHandler(this_1._points[i].onLineClick))));
+                                        }, onMouseOver: this_1._handleHover.bind(this_1, x1, y1, verticaLineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData, yScale), onMouseMove: this_1._handleHover.bind(this_1, x1, y1, verticaLineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData, yScale), onMouseOut: this_1._handleMouseOut, stroke: lineColor, strokeLinecap: (_2 = (_1 = this_1._points[i].lineOptions) === null || _1 === void 0 ? void 0 : _1.strokeLinecap) !== null && _2 !== void 0 ? _2 : 'round', strokeDasharray: (_3 = this_1._points[i].lineOptions) === null || _3 === void 0 ? void 0 : _3.strokeDasharray, strokeDashoffset: (_4 = this_1._points[i].lineOptions) === null || _4 === void 0 ? void 0 : _4.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: yScale(y1), x2: this_1._xAxisScale(x2), y2: yScale(y2), strokeWidth: strokeWidth, stroke: lineColor, strokeLinecap: (_0 = (_z = this_1._points[i].lineOptions) === null || _z === void 0 ? void 0 : _z.strokeLinecap) !== null && _0 !== void 0 ? _0 : 'round', strokeDasharray: (_1 = this_1._points[i].lineOptions) === null || _1 === void 0 ? void 0 : _1.strokeDasharray, strokeDashoffset: (_2 = this_1._points[i].lineOptions) === null || _2 === void 0 ? void 0 : _2.strokeDashoffset, opacity: 0.1 }));
+                                    linesForLine.push(React.createElement("line", { id: lineId, key: lineId, x1: this_1._xAxisScale(x1), y1: yScale(y1), x2: this_1._xAxisScale(x2), y2: yScale(y2), strokeWidth: strokeWidth, stroke: lineColor, strokeLinecap: (_6 = (_5 = this_1._points[i].lineOptions) === null || _5 === void 0 ? void 0 : _5.strokeLinecap) !== null && _6 !== void 0 ? _6 : 'round', strokeDasharray: (_7 = this_1._points[i].lineOptions) === null || _7 === void 0 ? void 0 : _7.strokeDasharray, strokeDashoffset: (_8 = this_1._points[i].lineOptions) === null || _8 === void 0 ? void 0 : _8.strokeDashoffset, opacity: 0.1 }));
                                 }
                             }
                         }