@fluentui/react-charting 5.16.20 → 5.16.21

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

@@ -323,7 +323,6 @@ var LineChartBase = /** @class */ (function (_super) {
             // if no points need to be called out then don't show vertical line and callout card
             if (found) {
                 var _this_2 = _this_1;
-                d3_selection_1.select('#' + circleId).attr('aria-labelledby', "toolTip" + _this_1._uniqueCallOutID);
                 d3_selection_1.select("#" + _this_1._verticalLine)
                     .attr('transform', function () { return "translate(" + _this_2._xAxisScale(x) + ", 0)"; })
                     .attr('visibility', 'visibility');
@@ -384,15 +383,17 @@ var LineChartBase = /** @class */ (function (_super) {
                 });
             }
         };
-        _this_1._onLineClick = function (func) {
-            if (func) {
-                func();
-            }
-        };
-        _this_1._onDataPointClick = function (func) {
+        /**
+         * Screen readers announce an element as clickable if the onClick attribute is set.
+         * This function sets the attribute only when a click event handler is provided.
+         */
+        _this_1._getClickHandler = function (func) {
             if (func) {
-                func();
+                return {
+                    onClick: func,
+                };
             }
+            return {};
         };
         _this_1._handleMouseOut = function () {
             d3_selection_1.select("#" + _this_1._verticalLine).attr('visibility', 'hidden');
@@ -515,6 +516,16 @@ var LineChartBase = /** @class */ (function (_super) {
         _this_1._getColorFillBarOpacity = function (colorFillBar) {
             return colorFillBar.applyPattern ? 1 : 0.4;
         };
+        _this_1._getAriaLabel = function (lineIndex, pointIndex) {
+            var _a;
+            var line = _this_1._points[lineIndex];
+            var point = line.data[pointIndex];
+            var formattedDate = point.x instanceof Date ? point.x.toLocaleString() : point.x;
+            var xValue = point.xAxisCalloutData || formattedDate;
+            var legend = line.legend;
+            var yValue = point.yAxisCalloutData || point.y;
+            return ((_a = point.callOutAccessibilityData) === null || _a === void 0 ? void 0 : _a.ariaLabel) || xValue + ". " + legend + ", " + yValue + ".";
+        };
         _this_1.state = {
             hoverXValue: '',
             activeLegend: '',
@@ -660,60 +671,62 @@ var LineChartBase = /** @class */ (function (_super) {
         else {
             this._points = this._injectIndexPropertyInLineChartData(this.props.data.lineChartData);
         }
-        for (var i = this._points.length - 1; i >= 0; i--) {
+        var _loop_1 = function (i) {
             var linesForLine = [];
             var bordersForLine = [];
             var pointsForLine = [];
-            var legendVal = this._points[i].legend;
-            var lineColor = this._points[i].color;
-            var activePoint = this.state.activePoint;
-            var theme = this.props.theme;
-            var verticaLineHeight = containerHeight - this.margins.bottom + 6;
-            if (this._points[i].data.length === 1) {
-                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: circleId, key: circleId, 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 legendVal = this_1._points[i].legend;
+            var lineColor = this_1._points[i].color;
+            var activePoint = this_1.state.activePoint;
+            var theme = this_1.props.theme;
+            var verticaLineHeight = containerHeight - this_1.margins.bottom + 6;
+            if (this_1._points[i].data.length === 1) {
+                var _0 = this_1._points[i].data[0], x1_1 = _0.x, y1 = _0.y, xAxisCalloutData_1 = _0.xAxisCalloutData, xAxisCalloutAccessibilityData_1 = _0.xAxisCalloutAccessibilityData;
+                var circleId_1 = this_1._circleId + "_" + i;
+                pointsForLine.push(React.createElement("circle", tslib_1.__assign({ id: circleId_1, key: circleId_1, r: activePoint === circleId_1 ? 5.5 : 3.5, cx: this_1._xAxisScale(x1_1), cy: this_1._yAxisScale(y1), fill: activePoint === circleId_1 ? theme.palette.white : lineColor, onMouseOver: this_1._handleHover.bind(this_1, x1_1, y1, verticaLineHeight, xAxisCalloutData_1, circleId_1, xAxisCalloutAccessibilityData_1), onMouseMove: this_1._handleHover.bind(this_1, x1_1, y1, verticaLineHeight, xAxisCalloutData_1, circleId_1, xAxisCalloutAccessibilityData_1), onMouseOut: this_1._handleMouseOut, strokeWidth: activePoint === circleId_1 ? DEFAULT_LINE_STROKE_SIZE : 0, stroke: activePoint === circleId_1 ? lineColor : '', role: "img", "aria-label": this_1._getAriaLabel(i, 0), "data-is-focusable": true, ref: function (e) {
+                        _this_1._refCallback(e, circleId_1);
+                    }, onFocus: function () { return _this_1._handleFocus(circleId_1, x1_1, xAxisCalloutData_1, circleId_1, xAxisCalloutAccessibilityData_1); }, onBlur: this_1._handleMouseOut }, this_1._getClickHandler(this_1._points[i].data[0].onDataPointClick))));
             }
             var gapIndex = 0;
-            var gaps = (_b = (_a = this._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 gaps = (_b = (_a = this_1._points[i].gaps) === null || _a === void 0 ? void 0 : _a.sort(function (a, b) { return a.startIndex - b.startIndex; })) !== null && _b !== void 0 ? _b : [];
             // Use path rendering technique for larger datasets to optimize performance.
-            if (this.props.optimizeLargeData) {
+            if (this_1.props.optimizeLargeData && this_1._points[i].data.length > 1) {
                 var line = d3_shape_1.line()
                     // eslint-disable-next-line @typescript-eslint/no-explicit-any
                     .x(function (d) { return _this_1._xAxisScale(d[0]); })
                     // eslint-disable-next-line @typescript-eslint/no-explicit-any
                     .y(function (d) { return _this_1._yAxisScale(d[1]); })
                     .curve(d3_shape_1.curveLinear);
-                var lineId = this._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._legendHighlighted(legendVal) || this._noLegendHighlighted() || this.state.isSelectedLegend;
+                var lineId = this_1._lineId + "_" + i;
+                var borderId = this_1._borderId + "_" + i;
+                var strokeWidth = ((_c = this_1._points[i].lineOptions) === null || _c === void 0 ? void 0 : _c.strokeWidth) || this_1.props.strokeWidth || DEFAULT_LINE_STROKE_SIZE;
+                var isLegendSelected = this_1._legendHighlighted(legendVal) || this_1._noLegendHighlighted() || this_1.state.isSelectedLegend;
                 var lineData = [];
-                for (var k = 0; k < this._points[i].data.length; k++) {
+                for (var k = 0; k < this_1._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,
+                        this_1._points[i].data[k].x instanceof Date
+                            ? this_1._points[i].data[k].x.getTime()
+                            : this_1._points[i].data[k].x,
+                        this_1._points[i].data[k].y,
                     ]);
                 }
                 if (isLegendSelected) {
-                    var lineBorderWidth = ((_d = this._points[i].lineOptions) === null || _d === void 0 ? void 0 : _d.lineBorderWidth)
-                        ? Number.parseFloat(this._points[i].lineOptions.lineBorderWidth.toString())
+                    var lineBorderWidth = ((_d = this_1._points[i].lineOptions) === null || _d === void 0 ? void 0 : _d.lineBorderWidth)
+                        ? Number.parseFloat(this_1._points[i].lineOptions.lineBorderWidth.toString())
                         : 0;
                     if (lineBorderWidth > 0) {
-                        bordersForLine.push(React.createElement("path", { id: borderId, key: borderId, d: line(lineData), fill: "transparent", strokeLinecap: (_f = (_e = this._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 }));
+                        bordersForLine.push(React.createElement("path", { id: borderId, key: borderId, d: line(lineData), fill: "transparent", strokeLinecap: (_f = (_e = this_1._points[i].lineOptions) === null || _e === void 0 ? void 0 : _e.strokeLinecap) !== null && _f !== void 0 ? _f : 'round', strokeWidth: Number.parseFloat(strokeWidth.toString()) + lineBorderWidth, stroke: ((_g = this_1._points[i].lineOptions) === null || _g === void 0 ? void 0 : _g.lineBorderColor) || theme.palette.white, opacity: 1 }));
                     }
-                    linesForLine.push(React.createElement("path", { 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 }));
+                    linesForLine.push(React.createElement("path", tslib_1.__assign({ id: lineId, key: lineId, d: line(lineData), fill: "transparent", "data-is-focusable": true, stroke: lineColor, strokeWidth: strokeWidth, strokeLinecap: (_j = (_h = this_1._points[i].lineOptions) === null || _h === void 0 ? void 0 : _h.strokeLinecap) !== null && _j !== void 0 ? _j : 'round', onMouseMove: this_1._onMouseOverLargeDataset.bind(this_1, i, verticaLineHeight), onMouseOver: this_1._onMouseOverLargeDataset.bind(this_1, i, verticaLineHeight), onMouseOut: this_1._handleMouseOut }, this_1._getClickHandler(this_1._points[i].onLineClick), { opacity: 1, role: "img", "aria-label": legendVal + ", series " + (i + 1) + " of " + this_1._points.length + " with " + this_1._points[i].data.length + " data points." })));
                 }
                 else {
-                    linesForLine.push(React.createElement("path", { id: lineId, key: lineId, d: line(lineData), fill: "transparent", "data-is-focusable": true, stroke: lineColor, strokeWidth: strokeWidth, strokeLinecap: (_l = (_k = this._points[i].lineOptions) === null || _k === void 0 ? void 0 : _k.strokeLinecap) !== null && _l !== void 0 ? _l : 'round', 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_1._points[i].lineOptions) === null || _k === void 0 ? void 0 : _k.strokeLinecap) !== null && _l !== void 0 ? _l : 'round', opacity: 0.1, role: "img", "aria-label": legendVal + ", series " + (i + 1) + " of " + this_1._points.length + " with " + this_1._points[i].data.length + " data points." }));
                 }
-                var isPointHighlighted = this.state.activeLine !== null && this.state.activeLine === i;
-                pointsForLine.push(React.createElement("circle", { id: this._staticHighlightCircle + "_" + i, key: this._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 }));
+                var isPointHighlighted = this_1.state.activeLine !== null && this_1.state.activeLine === i;
+                pointsForLine.push(React.createElement("circle", { id: this_1._staticHighlightCircle + "_" + i, key: this_1._staticHighlightCircle + "_" + i, r: 5.5, cx: 0, cy: 0, fill: theme.palette.white, strokeWidth: DEFAULT_LINE_STROKE_SIZE, stroke: lineColor, visibility: isPointHighlighted ? 'visibility' : 'hidden', onMouseMove: this_1._onMouseOverLargeDataset.bind(this_1, i, verticaLineHeight), onMouseOver: this_1._onMouseOverLargeDataset.bind(this_1, i, verticaLineHeight), onMouseOut: this_1._handleMouseOut }));
             }
-            else {
-                var _loop_1 = function (j) {
+            else if (!this_1.props.optimizeLargeData) {
+                var _loop_2 = function (j) {
                     var gapResult = this_1._checkInGap(j, gaps, gapIndex);
                     var isInGap = gapResult.isInGap;
                     gapIndex = gapResult.gapIndex;
@@ -726,16 +739,16 @@ var LineChartBase = /** @class */ (function (_super) {
                     var strokeWidth = ((_m = this_1._points[i].lineOptions) === null || _m === void 0 ? void 0 : _m.strokeWidth) || this_1.props.strokeWidth || DEFAULT_LINE_STROKE_SIZE;
                     var isLegendSelected = this_1._legendHighlighted(legendVal) || this_1._noLegendHighlighted() || this_1.state.isSelectedLegend;
                     var currentPointHidden = this_1._points[i].hideNonActiveDots && activePoint !== circleId;
-                    pointsForLine.push(React.createElement("path", { 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 }));
+                    pointsForLine.push(React.createElement("path", tslib_1.__assign({ id: circleId, key: circleId, d: path, "data-is-focusable": true, onMouseOver: this_1._handleHover.bind(this_1, x1, y1, verticaLineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData), onMouseMove: this_1._handleHover.bind(this_1, x1, y1, verticaLineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData), onMouseOut: this_1._handleMouseOut, onFocus: function () { return _this_1._handleFocus(lineId, x1, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData); }, onBlur: this_1._handleMouseOut }, this_1._getClickHandler(this_1._points[i].data[j - 1].onDataPointClick), { opacity: isLegendSelected && !currentPointHidden ? 1 : 0.01, fill: this_1._getPointFill(lineColor, circleId, j, false), stroke: lineColor, strokeWidth: strokeWidth, role: "img", "aria-label": this_1._getAriaLabel(i, j - 1) })));
                     if (j + 1 === this_1._points[i].data.length) {
                         // If this is last point of the line segment.
                         var lastCircleId_1 = "" + circleId + j + "L";
                         var lastPointHidden = this_1._points[i].hideNonActiveDots && activePoint !== lastCircleId_1;
                         path = this_1._getPath(this_1._xAxisScale(x2), this_1._yAxisScale(y2), lastCircleId_1, j, true, this_1._points[i].index);
                         var _3 = this_1._points[i].data[j], lastCirlceXCallout_1 = _3.xAxisCalloutData, lastCirlceXCalloutAccessibilityData_1 = _3.xAxisCalloutAccessibilityData;
-                        pointsForLine.push(React.createElement("path", { 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 () {
+                        pointsForLine.push(React.createElement("path", tslib_1.__assign({ id: lastCircleId_1, key: lastCircleId_1, d: path, "data-is-focusable": true, onMouseOver: this_1._handleHover.bind(this_1, x2, y2, verticaLineHeight, lastCirlceXCallout_1, lastCircleId_1, lastCirlceXCalloutAccessibilityData_1), onMouseMove: this_1._handleHover.bind(this_1, x2, y2, verticaLineHeight, lastCirlceXCallout_1, lastCircleId_1, lastCirlceXCalloutAccessibilityData_1), onMouseOut: this_1._handleMouseOut, onFocus: function () {
                                 return _this_1._handleFocus(lineId, x2, lastCirlceXCallout_1, lastCircleId_1, lastCirlceXCalloutAccessibilityData_1);
-                            }, onBlur: this_1._handleMouseOut, 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 }));
+                            }, onBlur: this_1._handleMouseOut }, this_1._getClickHandler(this_1._points[i].data[j].onDataPointClick), { opacity: isLegendSelected && !lastPointHidden ? 1 : 0.01, fill: this_1._getPointFill(lineColor, lastCircleId_1, j, true), stroke: lineColor, strokeWidth: strokeWidth, role: "img", "aria-label": this_1._getAriaLabel(i, j) })));
                         /* eslint-enable react/jsx-no-bind */
                     }
                     if (isLegendSelected) {
@@ -747,9 +760,9 @@ var LineChartBase = /** @class */ (function (_super) {
                             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) {
+                            linesForLine.push(React.createElement("line", tslib_1.__assign({ id: lineId, key: lineId, x1: this_1._xAxisScale(x1), y1: this_1._yAxisScale(y1), x2: this_1._xAxisScale(x2), y2: this_1._yAxisScale(y2), strokeWidth: strokeWidth, ref: function (e) {
                                     _this_1._refCallback(e, lineId);
-                                }, onMouseOver: this_1._handleHover.bind(this_1, x1, y1, verticaLineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData), onMouseMove: this_1._handleHover.bind(this_1, x1, y1, verticaLineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData), onMouseOut: this_1._handleMouseOut, stroke: lineColor, strokeLinecap: (_t = (_s = this_1._points[i].lineOptions) === null || _s === void 0 ? void 0 : _s.strokeLinecap) !== null && _t !== void 0 ? _t : 'round', strokeDasharray: (_u = this_1._points[i].lineOptions) === null || _u === void 0 ? void 0 : _u.strokeDasharray, strokeDashoffset: (_v = this_1._points[i].lineOptions) === null || _v === void 0 ? void 0 : _v.strokeDashoffset, opacity: 1, onClick: this_1._onLineClick.bind(this_1, this_1._points[i].onLineClick) }));
+                                }, onMouseOver: this_1._handleHover.bind(this_1, x1, y1, verticaLineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData), onMouseMove: this_1._handleHover.bind(this_1, x1, y1, verticaLineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData), onMouseOut: this_1._handleMouseOut, stroke: lineColor, strokeLinecap: (_t = (_s = this_1._points[i].lineOptions) === null || _s === void 0 ? void 0 : _s.strokeLinecap) !== null && _t !== void 0 ? _t : 'round', strokeDasharray: (_u = this_1._points[i].lineOptions) === null || _u === void 0 ? void 0 : _u.strokeDasharray, strokeDashoffset: (_v = this_1._points[i].lineOptions) === null || _v === void 0 ? void 0 : _v.strokeDashoffset, opacity: 1 }, this_1._getClickHandler(this_1._points[i].onLineClick))));
                         }
                     }
                     else {
@@ -758,12 +771,15 @@ var LineChartBase = /** @class */ (function (_super) {
                         }
                     }
                 };
-                var this_1 = this;
-                for (var j = 1; j < this._points[i].data.length; j++) {
-                    _loop_1(j);
+                for (var j = 1; j < this_1._points[i].data.length; j++) {
+                    _loop_2(j);
                 }
             }
             lines.push.apply(lines, tslib_1.__spreadArray(tslib_1.__spreadArray(tslib_1.__spreadArray([], bordersForLine), linesForLine), pointsForLine));
+        };
+        var this_1 = this;
+        for (var i = this._points.length - 1; i >= 0; i--) {
+            _loop_1(i);
         }
         var classNames = getClassNames(this.props.styles, {
             theme: this.props.theme,