@fluentui/react-charting 5.24.1 → 5.24.3

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

@@ -843,7 +843,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, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8;
+        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, _9, _10;
         var lines = [];
         if (this.state.isSelectedLegend) {
             this._points = this.state.selectedLegendPoints;
@@ -856,6 +856,9 @@ var LineChartBase = /** @class */ (function (_super) {
                 return item.markerSize;
             });
         });
+        var classNames = getClassNames(this.props.styles, {
+            theme: this.props.theme,
+        });
         var _loop_1 = function (i) {
             var linesForLine = [];
             var bordersForLine = [];
@@ -869,7 +872,7 @@ var LineChartBase = /** @class */ (function (_super) {
             var yPadding = this_1._points[i].useSecondaryYScale && this_1._yScaleSecondary ? this_1._yPaddingSecondary : this_1._yPaddingPrimary;
             var extraMaxPixels = this_1._hasMarkersMode ? this_1._getRangeForScatterMarkerSize(yScale, yPadding) : 0;
             if (this_1._points[i].data.length === 1) {
-                var _9 = this_1._points[i].data[0], x1_1 = _9.x, y1 = _9.y, xAxisCalloutData_1 = _9.xAxisCalloutData, xAxisCalloutAccessibilityData_1 = _9.xAxisCalloutAccessibilityData;
+                var _11 = this_1._points[i].data[0], x1_1 = _11.x, y1 = _11.y, xAxisCalloutData_1 = _11.xAxisCalloutData, xAxisCalloutAccessibilityData_1 = _11.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;
@@ -928,48 +931,54 @@ var LineChartBase = /** @class */ (function (_super) {
                     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 _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 _12 = this_1._points[i].data[j - 1], x1 = _12.x, y1 = _12.y, xAxisCalloutData = _12.xAxisCalloutData, xAxisCalloutAccessibilityData = _12.xAxisCalloutAccessibilityData;
+                    var _13 = this_1._points[i].data[j], x2 = _13.x, y2 = _13.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(((_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", __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", __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(React.Fragment, null,
+                        React.createElement("circle", __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": (_t = this_1._points[i].data[j - 1].text) !== null && _t !== void 0 ? _t : this_1._getAriaLabel(i, j - 1) })),
+                        this_1._points[i].data[j - 1].text && (React.createElement("text", { key: "".concat(circleId, "-label"), x: this_1._xAxisScale(x1), y: yScale(y1) + 35, fontSize: 12, fill: theme === null || theme === void 0 ? void 0 : theme.semanticColors.bodyText, textAnchor: "middle", className: classNames.markerLabel }, this_1._points[i].data[j - 1].text)))) : (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, 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 _12 = this_1._points[i].data[j], lastCirlceXCallout_1 = _12.xAxisCalloutData, lastCirlceXCalloutAccessibilityData_1 = _12.xAxisCalloutAccessibilityData;
+                        var _14 = this_1._points[i].data[j], lastCirlceXCallout_1 = _14.xAxisCalloutData, lastCirlceXCalloutAccessibilityData_1 = _14.xAxisCalloutAccessibilityData;
                         currentMarkerSize = this_1._points[i].data[j].markerSize;
                         pointsForLine.push(React.createElement(React.Fragment, { key: "".concat(lastCircleId_1, "_container") },
-                            ((_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", __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", __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 () {
+                            ((_v = (_u = this_1._points[i].lineOptions) === null || _u === void 0 ? void 0 : _u.mode) === null || _v === void 0 ? void 0 : _v.includes('markers')) ? (React.createElement(React.Fragment, null,
+                                React.createElement("circle", __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": (_w = this_1._points[i].data[j].text) !== null && _w !== void 0 ? _w : this_1._getAriaLabel(i, j) })),
+                                this_1._points[i].data[j].text && (React.createElement("text", { key: "".concat(lastCircleId_1, "-label"), x: this_1._xAxisScale(x2), y: yScale(y2) + 35, fontSize: 12, fill: theme === null || theme === void 0 ? void 0 : theme.semanticColors.bodyText, textAnchor: "middle", className: classNames.markerLabel }, this_1._points[i].data[j].text)))) : (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, 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._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 (!this_1._hasMarkersMode || ((_y = (_x = this_1._points[i].lineOptions) === null || _x === void 0 ? void 0 : _x.mode) === null || _y === void 0 ? void 0 : _y.includes('lines'))) {
                         if (isLegendSelected) {
                             // don't draw line if it is in a gap
                             if (!isInGap) {
-                                var lineBorderWidth = ((_x = this_1._points[i].lineOptions) === null || _x === void 0 ? void 0 : _x.lineBorderWidth)
+                                var lineBorderWidth = ((_z = this_1._points[i].lineOptions) === null || _z === void 0 ? void 0 : _z.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: (_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 }));
+                                    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: (_1 = (_0 = this_1._points[i].lineOptions) === null || _0 === void 0 ? void 0 : _0.strokeLinecap) !== null && _1 !== void 0 ? _1 : 'round', strokeWidth: Number.parseFloat(strokeWidth.toString()) + lineBorderWidth, stroke: ((_2 = this_1._points[i].lineOptions) === null || _2 === void 0 ? void 0 : _2.lineBorderColor) || theme.semanticColors.bodyBackground, opacity: 1 }));
                                 }
                                 linesForLine.push(React.createElement("line", __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: (_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))));
+                                    }, 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: (_4 = (_3 = this_1._points[i].lineOptions) === null || _3 === void 0 ? void 0 : _3.strokeLinecap) !== null && _4 !== void 0 ? _4 : 'round', strokeDasharray: (_5 = this_1._points[i].lineOptions) === null || _5 === void 0 ? void 0 : _5.strokeDasharray, strokeDashoffset: (_6 = this_1._points[i].lineOptions) === null || _6 === void 0 ? void 0 : _6.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: (_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 }));
+                                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: (_8 = (_7 = this_1._points[i].lineOptions) === null || _7 === void 0 ? void 0 : _7.strokeLinecap) !== null && _8 !== void 0 ? _8 : 'round', strokeDasharray: (_9 = this_1._points[i].lineOptions) === null || _9 === void 0 ? void 0 : _9.strokeDasharray, strokeDashoffset: (_10 = this_1._points[i].lineOptions) === null || _10 === void 0 ? void 0 : _10.strokeDashoffset, opacity: 0.1 }));
                             }
                         }
                     }
@@ -987,9 +996,6 @@ var LineChartBase = /** @class */ (function (_super) {
         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 {