@fluentui/react-charting 5.23.85 → 5.23.87

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

@@ -10,11 +10,6 @@ define(["require", "exports", "tslib", "react", "d3-array", "d3-selection", "d3-
     var barGapMultiplier = 0.2;
     var barGapMin = 1;
     var MIN_DOMAIN_MARGIN = 8;
-    var CircleVisbility;
-    (function (CircleVisbility) {
-        CircleVisbility["show"] = "visibility";
-        CircleVisbility["hide"] = "hidden";
-    })(CircleVisbility || (CircleVisbility = {}));
     var VerticalStackedBarChartBase = /** @class */ (function (_super) {
         tslib_1.__extends(VerticalStackedBarChartBase, _super);
         function VerticalStackedBarChartBase(props) {
@@ -124,23 +119,28 @@ define(["require", "exports", "tslib", "react", "d3-array", "d3-selection", "d3-
                         if (lineBorderWidth > 0) {
                             borderForLines.push(React.createElement("line", { key: "".concat(index, "-").concat(i, "-BorderLine"), x1: x1, y1: y1, x2: x2, y2: y2, opacity: shouldHighlight ? 1 : 0.1, strokeWidth: 3 + lineBorderWidth * 2, fill: "transparent", strokeLinecap: "round", stroke: theme.semanticColors.bodyBackground, transform: "translate(".concat(xScaleBandwidthTranslate, ", 0)") }));
                         }
-                        lines.push(React.createElement("line", tslib_1.__assign({ key: "".concat(index, "-").concat(i, "-line"), x1: x1, y1: y1, x2: x2, y2: y2, opacity: shouldHighlight ? 1 : 0.1, strokeWidth: (_b = (_a = lineObject[item][0].lineOptions) === null || _a === void 0 ? void 0 : _a.strokeWidth) !== null && _b !== void 0 ? _b : 3, strokeLinecap: (_d = (_c = lineObject[item][0].lineOptions) === null || _c === void 0 ? void 0 : _c.strokeLinecap) !== null && _d !== void 0 ? _d : 'round', strokeDasharray: (_e = lineObject[item][0].lineOptions) === null || _e === void 0 ? void 0 : _e.strokeDasharray, stroke: lineObject[item][i].color, transform: "translate(".concat(xScaleBandwidthTranslate, ", 0)") }, (_this._isLegendHighlighted(item) && {
-                            onMouseOver: _this._lineHover.bind(_this, lineObject[item][i - 1]),
-                            onMouseLeave: _this._lineHoverOut,
-                        }))));
+                        lines.push(React.createElement("line", { key: "".concat(index, "-").concat(i, "-line"), x1: x1, y1: y1, x2: x2, y2: y2, opacity: shouldHighlight ? 1 : 0.1, strokeWidth: (_b = (_a = lineObject[item][0].lineOptions) === null || _a === void 0 ? void 0 : _a.strokeWidth) !== null && _b !== void 0 ? _b : 3, strokeLinecap: (_d = (_c = lineObject[item][0].lineOptions) === null || _c === void 0 ? void 0 : _c.strokeLinecap) !== null && _d !== void 0 ? _d : 'round', strokeDasharray: (_e = lineObject[item][0].lineOptions) === null || _e === void 0 ? void 0 : _e.strokeDasharray, stroke: lineObject[item][i].color, transform: "translate(".concat(xScaleBandwidthTranslate, ", 0)"), onMouseOver: _this._lineHover.bind(_this, lineObject[item][i - 1]), onMouseLeave: _this._handleMouseOut }));
                     }
                 });
                 Object.keys(lineObject).forEach(function (item, index) {
                     lineObject[item].forEach(function (circlePoint, subIndex) {
                         // Create an object to store line point ref so that the object can be passed by reference to the focus handler
                         var circleRef = { refElement: null };
+                        var noBarsActive = circlePoint.xItem.chartData.filter(function (dataPoint) { return _this._noLegendHighlighted() || _this._isLegendHighlighted(dataPoint.legend); }).length === 0;
                         dots.push(React.createElement("circle", tslib_1.__assign({ key: "".concat(index, "-").concat(subIndex, "-dot"), cx: xScale(circlePoint.xItem.xAxisPoint), cy: circlePoint.useSecondaryYScale && yScaleSecondary
                                 ? yScaleSecondary(circlePoint.y)
-                                : yScalePrimary(circlePoint.y), onMouseOver: _this._isLegendHighlighted(item)
-                                ? _this._lineHover.bind(_this, circlePoint)
-                                : _this._onStackHover.bind(_this, circlePoint.xItem) }, (_this._isLegendHighlighted(item) && {
-                            onMouseLeave: _this._lineHoverOut,
-                        }), { r: _this._getCircleVisibilityAndRadius(circlePoint.xItem.xAxisPoint, circlePoint.legend).radius, stroke: circlePoint.color, fill: _this.props.theme.semanticColors.bodyBackground, strokeWidth: 3, visibility: _this._getCircleVisibilityAndRadius(circlePoint.xItem.xAxisPoint, circlePoint.legend).visibility, transform: "translate(".concat(xScaleBandwidthTranslate, ", 0)"), "data-is-focusable": _this._isLegendHighlighted(item), ref: function (e) { return (circleRef.refElement = e); }, onFocus: _this._lineFocus.bind(_this, circlePoint, circleRef), onBlur: _this._lineHoverOut })));
+                                : yScalePrimary(circlePoint.y), onMouseOver: _this._lineHover.bind(_this, circlePoint), onMouseLeave: _this._handleMouseOut, r: _this._getCircleOpacityAndRadius(circlePoint.xItem.xAxisPoint, circlePoint.legend).radius, stroke: circlePoint.color, fill: _this.props.theme.semanticColors.bodyBackground, strokeWidth: 3, 
+                            // Elements with visibility: hidden cannot receive focus, so use opacity: 0 instead to hide them.
+                            // For more information, see https://fuzzbomb.github.io/accessibility-demos/visually-hidden-focus-test.html
+                            opacity: _this._getCircleOpacityAndRadius(circlePoint.xItem.xAxisPoint, circlePoint.legend).opacity, transform: "translate(".concat(xScaleBandwidthTranslate, ", 0)"), ref: function (e) { return (circleRef.refElement = e); } }, (noBarsActive && (_this._noLegendHighlighted() || _this._isLegendHighlighted(item))
+                            ? {
+                                'data-is-focusable': !_this.props.hideTooltip,
+                                onFocus: _this._lineFocus.bind(_this, circlePoint, circleRef),
+                                onBlur: _this._handleMouseOut,
+                                role: 'img',
+                                'aria-label': _this._getAriaLabel(circlePoint.xItem, circlePoint, true),
+                            }
+                            : {}))));
                     });
                 });
                 return (React.createElement(React.Fragment, null,
@@ -148,22 +148,22 @@ define(["require", "exports", "tslib", "react", "d3-array", "d3-selection", "d3-
                     lines,
                     dots));
             };
-            _this._getCircleVisibilityAndRadius = function (xAxisPoint, legend) {
+            _this._getCircleOpacityAndRadius = function (xAxisPoint, legend) {
                 var activeXAxisDataPoint = _this.state.activeXAxisDataPoint;
                 if (!_this._noLegendHighlighted()) {
                     if (xAxisPoint === activeXAxisDataPoint && _this._isLegendHighlighted(legend)) {
-                        return { visibility: CircleVisbility.show, radius: 8 };
+                        return { opacity: 1, radius: 8 };
                     }
                     else if (_this._isLegendHighlighted(legend)) {
-                        return { visibility: CircleVisbility.show, radius: 0.3 };
+                        return { opacity: 1, radius: 0.3 };
                     }
                     else {
-                        return { visibility: CircleVisbility.hide, radius: 0 };
+                        return { opacity: 0, radius: 0 };
                     }
                 }
                 else {
                     return {
-                        visibility: activeXAxisDataPoint === xAxisPoint ? CircleVisbility.show : CircleVisbility.hide,
+                        opacity: activeXAxisDataPoint === xAxisPoint ? 1 : 0,
                         radius: 8,
                     };
                 }
@@ -183,30 +183,27 @@ define(["require", "exports", "tslib", "react", "d3-array", "d3-selection", "d3-
                 mouseEvent.persist();
                 _this._lineHoverFocus(lineData, mouseEvent);
             };
-            _this._lineHoverOut = function () {
-                _this.setState({
-                    refSelected: null,
-                    isCalloutVisible: false,
-                    xCalloutValue: '',
-                    yCalloutValue: '',
-                    activeXAxisDataPoint: '',
-                    color: '',
-                });
-            };
             _this._lineFocus = function (lineData, ref) {
                 if (ref.refElement) {
                     _this._lineHoverFocus(lineData, ref.refElement);
                 }
             };
             _this._lineHoverFocus = function (lineData, refSelected) {
-                _this.setState({
-                    refSelected: refSelected,
-                    isCalloutVisible: true,
-                    xCalloutValue: "".concat(lineData.xItem.xAxisPoint),
-                    yCalloutValue: "".concat(lineData.yAxisCalloutData || lineData.data || lineData.y),
-                    activeXAxisDataPoint: lineData.xItem.xAxisPoint,
-                    color: lineData.color,
-                });
+                if (_this._getHighlightedLegend().length === 1) {
+                    if (_this._noLegendHighlighted() || _this._isLegendHighlighted(lineData.legend)) {
+                        _this.setState({
+                            refSelected: refSelected,
+                            isCalloutVisible: true,
+                            xCalloutValue: "".concat(lineData.xItem.xAxisPoint),
+                            yCalloutValue: "".concat(lineData.yAxisCalloutData || lineData.data || lineData.y),
+                            activeXAxisDataPoint: lineData.xItem.xAxisPoint,
+                            color: lineData.color,
+                        });
+                    }
+                }
+                else {
+                    _this._onStackHoverFocus(lineData.xItem, refSelected);
+                }
             };
             _this._handleMouseOut = function () {
                 /**/
@@ -267,8 +264,9 @@ define(["require", "exports", "tslib", "react", "d3-array", "d3-selection", "d3-
                             shouldHighlight: shouldHighlight,
                             href: _this.props.href,
                         });
-                        var rectFocusProps = !shouldFocusWholeStack && {
-                            'data-is-focusable': !_this.props.hideTooltip && shouldHighlight,
+                        var rectFocusProps = !shouldFocusWholeStack &&
+                            shouldHighlight && {
+                            'data-is-focusable': !_this.props.hideTooltip,
                             'aria-label': _this._getAriaLabel(singleChartData, point),
                             onMouseOver: _this._onRectHover.bind(_this, singleChartData.xAxisPoint, point, startColor),
                             onMouseMove: _this._onRectHover.bind(_this, singleChartData.xAxisPoint, point, startColor),
@@ -315,7 +313,12 @@ define(["require", "exports", "tslib", "react", "d3-array", "d3-selection", "d3-
                             React.createElement("rect", tslib_1.__assign({ className: _this._classNames.opacityChangeOnHover, x: xPoint, y: yPoint, width: _this._barWidth, height: barHeight, fill: _this.props.enableGradient ? "url(#".concat(gradientId, ")") : startColor, rx: _this.props.roundCorners ? 3 : 0, ref: function (e) { return (ref.refElement = e); } }, rectFocusProps, { transform: "translate(".concat(xScaleBandwidthTranslate, ", 0)") }))));
                     });
                     var groupRef = {};
-                    var stackFocusProps = shouldFocusWholeStack && {
+                    var someBarsActive = singleChartData.chartData.filter(function (dataPoint) { return _this._noLegendHighlighted() || _this._isLegendHighlighted(dataPoint.legend); }).length > 0;
+                    // FIXME: Making the entire stack focusable when stack callout is enabled adds unnecessary complexity
+                    // and can reduce usability in certain scenarios. Instead, each individual element within the stack
+                    // should be focusable on its own, with its own aria-label. This behavior is also seen in Highcharts.
+                    var stackFocusProps = shouldFocusWholeStack &&
+                        someBarsActive && {
                         'data-is-focusable': !_this.props.hideTooltip,
                         'aria-label': _this._getAriaLabel(singleChartData),
                         onMouseOver: _this._onStackHover.bind(_this, singleChartData),
@@ -367,9 +370,9 @@ define(["require", "exports", "tslib", "react", "d3-array", "d3-selection", "d3-
                     var tooltipProps = {
                         tooltipCls: _this._classNames.tooltip,
                         id: _this._tooltipId,
-                        xAxis: xAxisElement,
+                        axis: xAxisElement,
                     };
-                    xAxisElement && (0, index_3.tooltipOfXAxislabels)(tooltipProps);
+                    xAxisElement && (0, index_3.tooltipOfAxislabels)(tooltipProps);
                 }
                 return bars.filter(function (bar) { return !!bar; });
             };
@@ -444,7 +447,7 @@ define(["require", "exports", "tslib", "react", "d3-array", "d3-selection", "d3-
             _this._noLegendHighlighted = function () {
                 return _this._getHighlightedLegend().length === 0;
             };
-            _this._getAriaLabel = function (singleChartData, point) {
+            _this._getAriaLabel = function (singleChartData, point, isLinePoint) {
                 var _a, _b, _c;
                 if (!point) {
                     /** if shouldFocusWholeStack is true */
@@ -456,26 +459,29 @@ define(["require", "exports", "tslib", "react", "d3-array", "d3-selection", "d3-
                         .map(function (pt) {
                         var legend = pt.legend;
                         var yValue = pt.yAxisCalloutData || pt.data;
-                        return "".concat(legend, ", ").concat(yValue, ".");
+                        return _this._noLegendHighlighted() || _this._isLegendHighlighted(legend) ? "".concat(legend, ", ").concat(yValue, ".") : '';
                     })
+                        .filter(function (str) { return str !== ''; })
                         .join(' ');
                     var lineValues = (_a = singleChartData.lineData) === null || _a === void 0 ? void 0 : _a.map(function (ln) {
                         var legend = ln.legend;
                         var yValue = ln.yAxisCalloutData || ln.data || ln.y;
-                        return "".concat(legend, ", ").concat(yValue, ".");
-                    }).join(' ');
+                        return _this._noLegendHighlighted() || _this._isLegendHighlighted(legend) ? "".concat(legend, ", ").concat(yValue, ".") : '';
+                    }).filter(function (str) { return str !== ''; }).join(' ');
                     return (((_b = singleChartData.stackCallOutAccessibilityData) === null || _b === void 0 ? void 0 : _b.ariaLabel) ||
                         "".concat(xValue_1, ". ").concat(pointValues) + (lineValues ? " ".concat(lineValues) : ''));
                 }
                 /** if shouldFocusWholeStack is false */
                 var xValue = singleChartData.xAxisCalloutData ||
-                    point.xAxisCalloutData ||
+                    (!isLinePoint && point.xAxisCalloutData) ||
                     (singleChartData.xAxisPoint instanceof Date
                         ? (0, index_3.formatDate)(singleChartData.xAxisPoint)
                         : singleChartData.xAxisPoint);
                 var legend = point.legend;
-                var yValue = point.yAxisCalloutData || point.data;
-                return ((_c = point.callOutAccessibilityData) === null || _c === void 0 ? void 0 : _c.ariaLabel) || "".concat(xValue, ". ").concat(legend, ", ").concat(yValue, ".");
+                var yValue = point.yAxisCalloutData ||
+                    (isLinePoint ? point.data || point.y : point.data);
+                return ((!isLinePoint && ((_c = point.callOutAccessibilityData) === null || _c === void 0 ? void 0 : _c.ariaLabel)) ||
+                    "".concat(xValue, ". ").concat(legend, ", ").concat(yValue, "."));
             };
             _this._getDomainMargins = function (containerWidth) {
                 var _a;