@fluentui/react-charts 9.3.7 → 9.3.9

package/lib/components/VerticalStackedBarChart/VerticalStackedBarChart.js

@@ -1,13 +1,13 @@
 'use client';
 import * as React from 'react';
 import { max as d3Max, min as d3Min } from 'd3-array';
-import { select as d3Select } from 'd3-selection';
 import { useVerticalStackedBarChartStyles } from './useVerticalStackedBarChartStyles.styles';
 import { scaleLinear as d3ScaleLinear, scaleBand as d3ScaleBand, scaleUtc as d3ScaleUtc, scaleTime as d3ScaleTime } from 'd3-scale';
 import { useId } from '@fluentui/react-utilities';
 import { tokens } from '@fluentui/react-theme';
+import { useArrowNavigationGroup } from '@fluentui/react-tabster';
 import { CartesianChart, ChartPopover, Legends } from '../../index';
-import { ChartTypes, getAccessibleDataObject, XAxisTypes, getTypeOfAxis, tooltipOfAxislabels, formatScientificLimitWidth, getBarWidth, getScalePadding, isScalePaddingDefined, calculateAppropriateBarWidth, areArraysEqual, calculateLongestLabelWidth, useRtl, DataVizPalette, getColorFromToken, findVSBCNumericMinMaxOfY, YAxisType, createNumericYAxis, domainRangeOfDateForAreaLineScatterVerticalBarCharts, domainRangeOfVSBCNumeric, domainRangeOfXStringAxis, createStringYAxis, calcTotalWidth, calcBandwidth, calcRequiredWidth, sortAxisCategories } from '../../utilities/index';
+import { ChartTypes, getAccessibleDataObject, XAxisTypes, getTypeOfAxis, formatScientificLimitWidth, getBarWidth, getScalePadding, isScalePaddingDefined, calculateAppropriateBarWidth, areArraysEqual, calculateLongestLabelWidth, useRtl, DataVizPalette, getColorFromToken, findVSBCNumericMinMaxOfY, YAxisType, createNumericYAxis, domainRangeOfDateForAreaLineScatterVerticalBarCharts, domainRangeOfVSBCNumeric, domainRangeOfXStringAxis, createStringYAxis, calcTotalWidth, calcBandwidth, calcRequiredWidth, sortAxisCategories } from '../../utilities/index';
 import { formatDateToLocaleString, isInvalidValue } from '@fluentui/chart-utilities';
 import { useImageExport } from '../../utilities/hooks';
 const barGapMultiplier = 0.2;
@@ -23,8 +23,11 @@ export const VerticalStackedBarChart = /*#__PURE__*/ React.forwardRef((_props, f
     };
     const _isRtl = useRtl();
     const _createLegendsForLine = (data)=>_getLineLegends(data);
-    const _tooltipId = useId('VSBCTooltipId_');
     const _emptyChartId = useId('_VSBC_empty');
+    const _arrowNavigationAttributes = useArrowNavigationGroup({
+        axis: 'vertical',
+        circular: true
+    });
     let _points = [];
     let _dataset;
     let _xAxisLabels = [];
@@ -154,29 +157,27 @@ export const VerticalStackedBarChart = /*#__PURE__*/ React.forwardRef((_props, f
             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, mouseEvent) {
+    function _onStackHoverFocus(stack, event) {
         var _stack_lineData;
         let clientX = 0;
         let clientY = 0;
-        if ('clientX' in mouseEvent) {
-            clientX = mouseEvent.clientX;
-            clientY = mouseEvent.clientY;
+        if ('clientX' in event) {
+            clientX = event.clientX;
+            clientY = event.clientY;
         } else {
-            // Handle case where mouseEvent is an SVGGElement
-            const boundingRect = mouseEvent.getBoundingClientRect();
+            // Handle React FocusEvent or SVGGElement
+            const element = 'target' in event ? event.target : event;
+            const boundingRect = element.getBoundingClientRect();
             clientX = boundingRect.left + boundingRect.width / 2;
             clientY = boundingRect.top + boundingRect.height / 2;
         }
@@ -327,19 +328,9 @@ export const VerticalStackedBarChart = /*#__PURE__*/ React.forwardRef((_props, f
         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;
@@ -445,8 +436,8 @@ export const VerticalStackedBarChart = /*#__PURE__*/ React.forwardRef((_props, f
                 const circleRef = {
                     refElement: null
                 };
-                const noBarsAndLinesActive = circlePoint.xItem.chartData.filter((dataPoint)=>_noLegendHighlighted() || _isLegendHighlighted(dataPoint.legend)).length === 0;
                 const yScaleBandwidthTranslate = !circlePoint.useSecondaryYScale && _yAxisType === 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),
@@ -464,13 +455,11 @@ export const VerticalStackedBarChart = /*#__PURE__*/ React.forwardRef((_props, f
                     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)
                 }));
             });
         });
@@ -737,8 +726,7 @@ export const VerticalStackedBarChart = /*#__PURE__*/ React.forwardRef((_props, f
     const classes = 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 === XAxisTypes.StringAxis) {
             _barWidth = getBarWidth(props.barWidth, props.maxBarWidth, xBarScale.bandwidth());
         }
@@ -863,17 +851,28 @@ export const VerticalStackedBarChart = /*#__PURE__*/ React.forwardRef((_props, f
             };
             let showLabel = false;
             let barLabel = 0;
+            let selectedBarTotalValue = 0;
+            let customBarLabel = undefined;
             if (!props.hideLabels && _yAxisType !== YAxisType.StringAxis) {
+                // Collect all bars with barLabel that match the legend filter
+                const barLabelsToDisplay = barsToDisplay.filter((point)=>point.barLabel && (_noLegendHighlighted() || _isLegendHighlighted(point.legend)));
+                // For stacked bars, we want to show the total of the stack, not individual bar labels
+                // Only use customBarLabel if there's exactly one bar with a label in the stack
+                if (barLabelsToDisplay.length === 1) {
+                    customBarLabel = barLabelsToDisplay[0].barLabel;
+                }
                 if (_noLegendHighlighted()) {
                     showLabel = true;
-                    barLabel = barTotalValue;
+                    barLabel = customBarLabel !== null && customBarLabel !== void 0 ? customBarLabel : barTotalValue;
+                    selectedBarTotalValue = barTotalValue;
                 } else {
                     barsToDisplay.forEach((point)=>{
                         if (_isLegendHighlighted(point.legend)) {
                             showLabel = true;
-                            barLabel += point.data;
+                            selectedBarTotalValue += point.data;
                         }
                     });
+                    barLabel = customBarLabel !== null && customBarLabel !== void 0 ? customBarLabel : selectedBarTotalValue;
                 }
             }
             return /*#__PURE__*/ React.createElement("g", {
@@ -887,7 +886,7 @@ export const VerticalStackedBarChart = /*#__PURE__*/ React.forwardRef((_props, f
             }, singleBar), !props.hideLabels && _barWidth >= 16 && showLabel && /*#__PURE__*/ React.createElement("text", {
                 x: xPoint + _barWidth / 2,
                 //if total bar value >=0, show label above top bar, otherwise below bottom bar
-                y: barLabel >= Y_ORIGIN ? yPoint - 6 : yPoint + heightOfLastBar + 12,
+                y: selectedBarTotalValue >= Y_ORIGIN ? yPoint - 6 : yPoint + heightOfLastBar + 12,
                 textAnchor: "middle",
                 className: classes.barLabel,
                 "aria-label": `Total: ${barLabel}`,
@@ -897,27 +896,8 @@ export const VerticalStackedBarChart = /*#__PURE__*/ React.forwardRef((_props, f
                     direction: 'ltr',
                     unicodeBidi: 'isolate'
                 }
-            }, typeof props.yAxisTickFormat === 'function' ? props.yAxisTickFormat(barLabel) : formatScientificLimitWidth(barLabel)));
+            }, typeof barLabel === 'string' ? barLabel : typeof props.yAxisTickFormat === 'function' ? props.yAxisTickFormat(barLabel) : formatScientificLimitWidth(barLabel)));
         });
-        if (!props.showXAxisLablesTooltip) {
-            try {
-                document.getElementById(_tooltipId) && document.getElementById(_tooltipId).remove();
-            // eslint-disable-next-line no-empty
-            } catch (e) {}
-        }
-        if (!props.wrapXAxisLables && props.showXAxisLablesTooltip) {
-            const xAxisElement = d3Select(xElement).call(xBarScale);
-            try {
-                document.getElementById(_tooltipId) && document.getElementById(_tooltipId).remove();
-            // eslint-disable-next-line no-empty
-            } catch (e) {}
-            const tooltipProps = {
-                tooltipCls: classes.tooltip,
-                id: _tooltipId,
-                axis: xAxisElement
-            };
-            xAxisElement && tooltipOfAxislabels(tooltipProps);
-        }
         return bars.filter((bar)=>!!bar);
     }
     function _getMinMaxOfYAxis(dataset, yAxisType, useSecondaryYScale) {
@@ -1019,7 +999,7 @@ export const VerticalStackedBarChart = /*#__PURE__*/ React.forwardRef((_props, f
     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 = {
@@ -1033,7 +1013,7 @@ export const VerticalStackedBarChart = /*#__PURE__*/ React.forwardRef((_props, f
             ...getAccessibleDataObject(callOutAccessibilityData),
             clickPosition: clickPosition,
             isPopoverOpen: isPopoverOpen,
-            isCalloutForStack: props.isCalloutForStack || _isHavingLines && (_noLegendHighlighted() || _getHighlightedLegend().length > 1),
+            isCalloutForStack: shouldFocusWholeStack,
             isCartesian: true,
             customCallout: {
                 customizedCallout: _getCustomizedCallout() !== null ? _getCustomizedCallout() : undefined,
@@ -1078,7 +1058,7 @@ export const VerticalStackedBarChart = /*#__PURE__*/ React.forwardRef((_props, f
             ],
             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)));
             }
         });
     }