@fluentui/react-charts 9.2.0 → 9.2.2

package/lib/components/VerticalStackedBarChart/VerticalStackedBarChart.js

@@ -6,16 +6,11 @@ import { scaleLinear as d3ScaleLinear, scaleBand as d3ScaleBand, scaleUtc as d3S
 import { useId } from '@fluentui/react-utilities';
 import { tokens } from '@fluentui/react-theme';
 import { CartesianChart, ChartPopover, Legends } from '../../index';
-import { ChartTypes, getAccessibleDataObject, XAxisTypes, getTypeOfAxis, tooltipOfAxislabels, formatScientificLimitWidth, getBarWidth, getScalePadding, isScalePaddingDefined, calculateAppropriateBarWidth, formatDate, areArraysEqual, calculateLongestLabelWidth, useRtl, DataVizPalette, getColorFromToken, findVSBCNumericMinMaxOfY, createNumericYAxis, domainRangeOfDateForAreaLineVerticalBarChart, domainRangeOfVSBCNumeric, domainRangeOfXStringAxis, createStringYAxis } from '../../utilities/index';
+import { ChartTypes, getAccessibleDataObject, XAxisTypes, getTypeOfAxis, tooltipOfAxislabels, formatScientificLimitWidth, getBarWidth, getScalePadding, isScalePaddingDefined, calculateAppropriateBarWidth, formatDate, areArraysEqual, calculateLongestLabelWidth, useRtl, DataVizPalette, getColorFromToken, findVSBCNumericMinMaxOfY, createNumericYAxis, domainRangeOfDateForAreaLineVerticalBarChart, domainRangeOfVSBCNumeric, domainRangeOfXStringAxis, createStringYAxis, calcTotalWidth, calcBandwidth, calcRequiredWidth } from '../../utilities/index';
 import { toImage } from '../../utilities/image-export-utils';
 const barGapMultiplier = 0.2;
 const barGapMin = 1;
 const MIN_DOMAIN_MARGIN = 8;
-var CircleVisbility = /*#__PURE__*/ function(CircleVisbility) {
-    CircleVisbility["show"] = "visibility";
-    CircleVisbility["hide"] = "hidden";
-    return CircleVisbility;
-}(CircleVisbility || {});
 export const VerticalStackedBarChart = (props)=>{
     var _props_legendProps;
     const _isRtl = useRtl();
@@ -150,19 +145,29 @@ export const VerticalStackedBarChart = (props)=>{
             activeLegend
         ] : [];
     }
-    function _lineHoverOut() {
-        setPopoverOpen(false);
-        setXCalloutValue('');
-        setYCalloutValue('');
-        setActiveXAxisDataPoint('');
-        setColor('');
-    }
-    function _lineHoverFocus(lineData) {
-        setPopoverOpen(true);
-        setXCalloutValue(`${lineData.xItem.xAxisPoint}`);
-        setYCalloutValue(`${lineData.yAxisCalloutData || lineData.data || lineData.y}`);
-        setActiveXAxisDataPoint(lineData.xItem.xAxisPoint);
-        setColor(lineData.color);
+    function _lineHoverFocus(lineData, event) {
+        let clientX = 0;
+        let clientY = 0;
+        if ('clientX' in event) {
+            clientX = event.clientX;
+            clientY = event.clientY;
+        } else {
+            const boundingRect = event.target.getBoundingClientRect();
+            clientX = boundingRect.left + boundingRect.width / 2;
+            clientY = boundingRect.top + boundingRect.height / 2;
+        }
+        if (_getHighlightedLegend().length === 1) {
+            if (_noLegendHighlighted() || _isLegendHighlighted(lineData.legend)) {
+                _updatePosition(clientX, clientY);
+                setPopoverOpen(true);
+                setXCalloutValue(`${lineData.xItem.xAxisPoint}`);
+                setYCalloutValue(`${lineData.yAxisCalloutData || lineData.data || lineData.y}`);
+                setActiveXAxisDataPoint(lineData.xItem.xAxisPoint);
+                setColor(lineData.color);
+            }
+        } else {
+            _onStackHoverFocus(lineData.xItem, event);
+        }
     }
     function _onStackHoverFocus(stack, mouseEvent) {
         var _stack_lineData;
@@ -291,7 +296,7 @@ export const VerticalStackedBarChart = (props)=>{
    */ function _noLegendHighlighted() {
         return _getHighlightedLegend().length === 0;
     }
-    function _getAriaLabel(singleChartData, point) {
+    function _getAriaLabel(singleChartData, point, isLinePoint) {
         var _point_callOutAccessibilityData;
         if (!point) {
             var _singleChartData_lineData, _singleChartData_stackCallOutAccessibilityData;
@@ -299,19 +304,19 @@ export const VerticalStackedBarChart = (props)=>{
             const pointValues = singleChartData.chartData.map((pt)=>{
                 const legend = pt.legend;
                 const yValue = pt.yAxisCalloutData || pt.data;
-                return `${legend}, ${yValue}.`;
-            }).join(' ');
+                return _noLegendHighlighted() || _isLegendHighlighted(legend) ? `${legend}, ${yValue}.` : '';
+            }).filter((str)=>str !== '').join(' ');
             const lineValues = (_singleChartData_lineData = singleChartData.lineData) === null || _singleChartData_lineData === void 0 ? void 0 : _singleChartData_lineData.map((ln)=>{
                 const legend = ln.legend;
                 const yValue = ln.yAxisCalloutData || ln.data || ln.y;
-                return `${legend}, ${yValue}.`;
-            }).join(' ');
+                return _noLegendHighlighted() || _isLegendHighlighted(legend) ? `${legend}, ${yValue}.` : '';
+            }).filter((str)=>str !== '').join(' ');
             return ((_singleChartData_stackCallOutAccessibilityData = singleChartData.stackCallOutAccessibilityData) === null || _singleChartData_stackCallOutAccessibilityData === void 0 ? void 0 : _singleChartData_stackCallOutAccessibilityData.ariaLabel) || `${xValue}. ${pointValues}` + (lineValues ? ` ${lineValues}` : '');
         }
-        /** if shouldFocusWholeStack is false */ const xValue = singleChartData.xAxisCalloutData || point.xAxisCalloutData || (singleChartData.xAxisPoint instanceof Date ? formatDate(singleChartData.xAxisPoint) : singleChartData.xAxisPoint);
+        /** if shouldFocusWholeStack is false */ const xValue = singleChartData.xAxisCalloutData || !isLinePoint && point.xAxisCalloutData || (singleChartData.xAxisPoint instanceof Date ? formatDate(singleChartData.xAxisPoint) : singleChartData.xAxisPoint);
         const legend = point.legend;
-        const yValue = point.yAxisCalloutData || point.data;
-        return ((_point_callOutAccessibilityData = point.callOutAccessibilityData) === null || _point_callOutAccessibilityData === void 0 ? void 0 : _point_callOutAccessibilityData.ariaLabel) || `${xValue}. ${legend}, ${yValue}.`;
+        const yValue = point.yAxisCalloutData || (isLinePoint ? point.data || point.y : point.data);
+        return !isLinePoint && ((_point_callOutAccessibilityData = point.callOutAccessibilityData) === null || _point_callOutAccessibilityData === void 0 ? void 0 : _point_callOutAccessibilityData.ariaLabel) || `${xValue}. ${legend}, ${yValue}.`;
     }
     function _getCustomizedCallout() {
         const _isHavingLines = props.data.some((item)=>item.lineData && item.lineData.length > 0);
@@ -424,10 +429,8 @@ export const VerticalStackedBarChart = (props)=>{
                     strokeDasharray: (_lineObject_item__lineOptions2 = lineObject[item][0].lineOptions) === null || _lineObject_item__lineOptions2 === void 0 ? void 0 : _lineObject_item__lineOptions2.strokeDasharray,
                     stroke: lineObject[item][i].color,
                     transform: `translate(${xScaleBandwidthTranslate}, 0)`,
-                    ..._isLegendHighlighted(item) && {
-                        onMouseOver: _lineHover.bind(lineObject[item][i - 1]),
-                        onMouseLeave: _lineHoverOut
-                    }
+                    onMouseOver: (event)=>_lineHover(lineObject[item][i - 1], event),
+                    onMouseLeave: _handleMouseOut
                 }));
             }
         });
@@ -441,15 +444,15 @@ export const VerticalStackedBarChart = (props)=>{
                     key: `${index}-${subIndex}-dot`,
                     cx: xScale(circlePoint.xItem.xAxisPoint),
                     cy: circlePoint.useSecondaryYScale && yScaleSecondary ? yScaleSecondary(circlePoint.y) : yScalePrimary(circlePoint.y),
-                    onMouseOver: _isLegendHighlighted(item) ? (event)=>_lineHover(circlePoint, event) : (event)=>_onStackHover(circlePoint.xItem, event),
-                    ..._isLegendHighlighted(item) && {
-                        onMouseLeave: _lineHoverOut
-                    },
-                    r: _getCircleVisibilityAndRadius(circlePoint.xItem.xAxisPoint, circlePoint.legend).radius,
+                    onMouseOver: (event)=>_lineHover(circlePoint, event),
+                    onMouseLeave: _handleMouseOut,
+                    r: _getCircleOpacityAndRadius(circlePoint.xItem.xAxisPoint, circlePoint.legend).radius,
                     stroke: circlePoint.color,
                     fill: tokens.colorNeutralBackground1,
                     strokeWidth: 3,
-                    visibility: _getCircleVisibilityAndRadius(circlePoint.xItem.xAxisPoint, circlePoint.legend).visibility,
+                    // 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: _getCircleOpacityAndRadius(circlePoint.xItem.xAxisPoint, circlePoint.legend).opacity,
                     transform: `translate(${xScaleBandwidthTranslate}, 0)`,
                     ref: (e)=>circleRef.refElement = e,
                     ...noBarsAndLinesActive ? {
@@ -464,27 +467,27 @@ export const VerticalStackedBarChart = (props)=>{
         });
         return /*#__PURE__*/ React.createElement(React.Fragment, null, borderForLines, lines, dots);
     }
-    function _getCircleVisibilityAndRadius(xAxisPoint, legend) {
+    function _getCircleOpacityAndRadius(xAxisPoint, legend) {
         if (!_noLegendHighlighted()) {
             if (xAxisPoint === activeXAxisDataPoint && _isLegendHighlighted(legend)) {
                 return {
-                    visibility: "visibility",
+                    opacity: 1,
                     radius: 8
                 };
             } else if (_isLegendHighlighted(legend)) {
                 return {
-                    visibility: "visibility",
+                    opacity: 1,
                     radius: 0.3
                 };
             } else {
                 return {
-                    visibility: "hidden",
+                    opacity: 0,
                     radius: 0
                 };
             }
         } else {
             return {
-                visibility: activeXAxisDataPoint === xAxisPoint ? "visibility" : "hidden",
+                opacity: activeXAxisDataPoint === xAxisPoint ? 1 : 0,
                 radius: 8
             };
         }
@@ -537,11 +540,11 @@ export const VerticalStackedBarChart = (props)=>{
     }
     function _lineHover(lineData, mouseEvent) {
         mouseEvent.persist();
-        _lineHoverFocus(lineData);
+        _lineHoverFocus(lineData, mouseEvent);
     }
     function _lineFocus(event, lineData, ref) {
         if (ref.refElement) {
-            _lineHoverFocus(lineData);
+            _lineHoverFocus(lineData, event);
         }
     }
     function _onStackHover(stack, mouseEvent) {
@@ -669,8 +672,7 @@ export const VerticalStackedBarChart = (props)=>{
     }
     function _getDomainMargins(containerWidth) {
         _domainMargin = MIN_DOMAIN_MARGIN;
-        /** Total width available to render the bars */ const totalWidth = containerWidth - (_margins.left + MIN_DOMAIN_MARGIN) - (_margins.right + MIN_DOMAIN_MARGIN);
-        /** Rate at which the space between the bars changes wrt the bar width */ const barGapRate = _xAxisInnerPadding / (1 - _xAxisInnerPadding);
+        const totalWidth = calcTotalWidth(containerWidth, _margins, MIN_DOMAIN_MARGIN);
         if (_xAxisType === XAxisTypes.StringAxis) {
             if (isScalePaddingDefined(props.xAxisOuterPadding, props.xAxisPadding)) {
                 // Setting the domain margin for string x-axis to 0 because the xAxisOuterPadding prop is now available
@@ -680,16 +682,16 @@ export const VerticalStackedBarChart = (props)=>{
                 // Update the bar width so that when CartesianChart rerenders,
                 // the following calculations don't use the previous bar width.
                 _barWidth = getBarWidth(props.barWidth, props.maxBarWidth);
-                /** Total width required to render the bars. Directly proportional to bar width */ const reqWidth = (_xAxisLabels.length + (_xAxisLabels.length - 1) * barGapRate) * _barWidth;
+                /** Total width required to render the bars. Directly proportional to bar width */ const reqWidth = calcRequiredWidth(_barWidth, _xAxisLabels.length, _xAxisInnerPadding);
                 if (totalWidth >= reqWidth) {
                     // Center align the chart by setting equal left and right margins for domain
                     _domainMargin = MIN_DOMAIN_MARGIN + (totalWidth - reqWidth) / 2;
                 }
             } else if (props.mode === 'plotly' && _xAxisLabels.length > 1) {
                 // Calculate the remaining width after rendering bars at their maximum allowable width
-                const bandwidth = totalWidth / (_xAxisLabels.length + (_xAxisLabels.length - 1) * barGapRate);
+                const bandwidth = calcBandwidth(totalWidth, _xAxisLabels.length, _xAxisInnerPadding);
                 const barWidth = getBarWidth(props.barWidth, props.maxBarWidth, bandwidth);
-                let reqWidth = (_xAxisLabels.length + (_xAxisLabels.length - 1) * barGapRate) * barWidth;
+                let reqWidth = calcRequiredWidth(barWidth, _xAxisLabels.length, _xAxisInnerPadding);
                 const margin1 = (totalWidth - reqWidth) / 2;
                 let margin2 = Number.POSITIVE_INFINITY;
                 if (!props.hideTickOverlap) {
@@ -746,7 +748,7 @@ export const VerticalStackedBarChart = (props)=>{
                 const startColor = point.color ? point.color : _colors[index];
                 const ref = {};
                 const shouldHighlight = _isLegendHighlighted(point.legend) || _noLegendHighlighted() ? true : false;
-                const rectFocusProps = !shouldFocusWholeStack && {
+                const rectFocusProps = !shouldFocusWholeStack && shouldHighlight && {
                     'aria-label': _getAriaLabel(singleChartData, point),
                     onMouseOver: (event)=>_onRectHover(singleChartData.xAxisPoint, point, startColor, event),
                     onMouseMove: (event)=>_onRectHover(singleChartData.xAxisPoint, point, startColor, event),
@@ -818,7 +820,11 @@ export const VerticalStackedBarChart = (props)=>{
                 }));
             });
             const groupRef = {};
-            const stackFocusProps = shouldFocusWholeStack && {
+            const someBarsActive = singleChartData.chartData.filter((dataPoint)=>_noLegendHighlighted() || _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.
+            const stackFocusProps = shouldFocusWholeStack && someBarsActive && {
                 'aria-label': _getAriaLabel(singleChartData),
                 onMouseOver: (event)=>_onStackHover(singleChartData, event),
                 onMouseMove: (event)=>_onStackHover(singleChartData, event),