@fluentui/react-charts 0.0.0-nightly-20260108-0406.1 → 0.0.0-nightly-20260112-0407.1

package/lib-commonjs/components/VerticalStackedBarChart/VerticalStackedBarChart.js

@@ -16,6 +16,7 @@ const _useVerticalStackedBarChartStylesstyles = require("./useVerticalStackedBar
 const _d3scale = require("d3-scale");
 const _reactutilities = require("@fluentui/react-utilities");
 const _reacttheme = require("@fluentui/react-theme");
+const _reacttabster = require("@fluentui/react-tabster");
 const _index = require("../../index");
 const _index1 = require("../../utilities/index");
 const _chartutilities = require("@fluentui/chart-utilities");
@@ -34,6 +35,10 @@ const VerticalStackedBarChart = /*#__PURE__*/ _react.forwardRef((_props, forward
     const _isRtl = (0, _index1.useRtl)();
     const _createLegendsForLine = (data)=>_getLineLegends(data);
     const _emptyChartId = (0, _reactutilities.useId)('_VSBC_empty');
+    const _arrowNavigationAttributes = (0, _reacttabster.useArrowNavigationGroup)({
+        axis: 'vertical',
+        circular: true
+    });
     let _points = [];
     let _dataset;
     let _xAxisLabels = [];
@@ -163,17 +168,14 @@ const VerticalStackedBarChart = /*#__PURE__*/ _react.forwardRef((_props, forward
             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);
+        if (_noLegendHighlighted() || _isLegendHighlighted(lineData.legend)) {
+            _updatePosition(clientX, clientY);
+            setPopoverOpen(true);
+            setXCalloutValue(`${lineData.xItem.xAxisPoint}`);
+            setYCalloutValue(`${lineData.yAxisCalloutData || lineData.data || lineData.y}`);
+            setCalloutLegend(lineData.legend);
+            setActiveXAxisDataPoint(lineData.xItem.xAxisPoint);
+            setColor(lineData.color);
         }
     }
     function _onStackHoverFocus(stack, event) {
@@ -337,19 +339,9 @@ const VerticalStackedBarChart = /*#__PURE__*/ _react.forwardRef((_props, forward
         const _isHavingLines = props.data.some((item)=>item.lineData && item.lineData.length > 0);
         return props.onRenderCalloutPerStack ? props.onRenderCalloutPerStack(stackCalloutProps) : props.onRenderCalloutPerDataPoint && !_isHavingLines ? props.onRenderCalloutPerDataPoint(dataPointCalloutProps, _renderCallout) : null;
     }
-    function _toFocusWholeStack(_isHavingLines) {
+    function _toFocusWholeStack() {
         const { isCalloutForStack = false } = props;
-        let shouldFocusStackOnly = false;
-        if (_isHavingLines) {
-            if (_getHighlightedLegend().length === 1) {
-                shouldFocusStackOnly = false;
-            } else {
-                shouldFocusStackOnly = true;
-            }
-        } else {
-            shouldFocusStackOnly = isCalloutForStack;
-        }
-        return shouldFocusStackOnly;
+        return isCalloutForStack;
     }
     function _getDomainNRangeValues(points, margins, width, chartType, isRTL, xAxisType, barWidth, tickValues) {
         let domainNRangeValue;
@@ -455,8 +447,8 @@ const VerticalStackedBarChart = /*#__PURE__*/ _react.forwardRef((_props, forward
                 const circleRef = {
                     refElement: null
                 };
-                const noBarsAndLinesActive = circlePoint.xItem.chartData.filter((dataPoint)=>_noLegendHighlighted() || _isLegendHighlighted(dataPoint.legend)).length === 0;
                 const yScaleBandwidthTranslate = !circlePoint.useSecondaryYScale && _yAxisType === _index1.YAxisType.StringAxis ? yScalePrimary.bandwidth() / 2 : 0;
+                const shouldHighlight = _isLegendHighlighted(circlePoint.legend) || _noLegendHighlighted() ? true : false;
                 dots.push(/*#__PURE__*/ _react.createElement("circle", {
                     key: `${index}-${subIndex}-dot`,
                     cx: xScale(circlePoint.xItem.xAxisPoint),
@@ -474,13 +466,11 @@ const VerticalStackedBarChart = /*#__PURE__*/ _react.forwardRef((_props, forward
                     ref: (e)=>{
                         circleRef.refElement = e;
                     },
-                    ...noBarsAndLinesActive ? {
-                        tabIndex: !props.hideTooltip ? 0 : undefined,
-                        onFocus: (event)=>_lineFocus(event, circlePoint, circleRef),
-                        onBlur: _handleMouseOut,
-                        role: 'img',
-                        'aria-label': _getAriaLabel(circlePoint.xItem, circlePoint)
-                    } : {}
+                    tabIndex: !props.hideTooltip && shouldHighlight ? 0 : undefined,
+                    onFocus: (event)=>_lineFocus(event, circlePoint, circleRef),
+                    onBlur: _handleMouseOut,
+                    role: "img",
+                    "aria-label": _getAriaLabel(circlePoint.xItem, circlePoint, true)
                 }));
             });
         });
@@ -747,8 +737,7 @@ const VerticalStackedBarChart = /*#__PURE__*/ _react.forwardRef((_props, forward
     const classes = (0, _useVerticalStackedBarChartStylesstyles.useVerticalStackedBarChartStyles)(props);
     function _createBar(xBarScale, yBarScale, containerHeight, xElement) {
         const { barCornerRadius = 0, barMinimumHeight = 0 } = props;
-        const _isHavingLines = props.data.some((item)=>item.lineData && item.lineData.length > 0);
-        const shouldFocusWholeStack = _toFocusWholeStack(_isHavingLines);
+        const shouldFocusWholeStack = _toFocusWholeStack();
         if (_xAxisType === _index1.XAxisTypes.StringAxis) {
             _barWidth = (0, _index1.getBarWidth)(props.barWidth, props.maxBarWidth, xBarScale.bandwidth());
         }
@@ -1021,7 +1010,7 @@ const VerticalStackedBarChart = /*#__PURE__*/ _react.forwardRef((_props, forward
     if (!_isChartEmpty()) {
         _adjustProps();
         const _isHavingLines = props.data.some((item)=>item.lineData && item.lineData.length > 0);
-        const shouldFocusWholeStack = _toFocusWholeStack(_isHavingLines);
+        const shouldFocusWholeStack = _toFocusWholeStack();
         _dataset = _createDataSetLayer();
         const legendBars = _getLegendData(_points, _createLegendsForLine(props.data));
         const calloutProps = {
@@ -1035,7 +1024,7 @@ const VerticalStackedBarChart = /*#__PURE__*/ _react.forwardRef((_props, forward
             ...(0, _index1.getAccessibleDataObject)(callOutAccessibilityData),
             clickPosition: clickPosition,
             isPopoverOpen: isPopoverOpen,
-            isCalloutForStack: props.isCalloutForStack || _isHavingLines && (_noLegendHighlighted() || _getHighlightedLegend().length > 1),
+            isCalloutForStack: shouldFocusWholeStack,
             isCartesian: true,
             customCallout: {
                 customizedCallout: _getCustomizedCallout() !== null ? _getCustomizedCallout() : undefined,
@@ -1080,7 +1069,7 @@ const VerticalStackedBarChart = /*#__PURE__*/ _react.forwardRef((_props, forward
             ],
             getYDomainMargins: _getYDomainMargins,
             /* eslint-disable react/jsx-no-bind */ children: (props)=>{
-                return /*#__PURE__*/ _react.createElement(_react.Fragment, null, /*#__PURE__*/ _react.createElement("g", null, _bars), /*#__PURE__*/ _react.createElement("g", null, _isHavingLines && _createLines(props.xScale, props.yScalePrimary, props.containerHeight, props.containerWidth, props.yScaleSecondary)));
+                return /*#__PURE__*/ _react.createElement(_react.Fragment, null, /*#__PURE__*/ _react.createElement("g", _arrowNavigationAttributes, _bars), /*#__PURE__*/ _react.createElement("g", null, _isHavingLines && _createLines(props.xScale, props.yScalePrimary, props.containerHeight, props.containerWidth, props.yScaleSecondary)));
             }
         });
     }