@fluentui/react-charts 9.3.6 → 9.3.8

package/lib/components/VerticalStackedBarChart/VerticalStackedBarChart.js

@@ -1,15 +1,14 @@
 '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 { 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 { toImage } from '../../utilities/image-export-utils';
-import { formatDateToLocaleString } from '@fluentui/chart-utilities';
+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;
 const barGapMin = 1;
 const MIN_DOMAIN_MARGIN = 8;
@@ -23,7 +22,6 @@ 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');
     let _points = [];
     let _dataset;
@@ -40,9 +38,8 @@ export const VerticalStackedBarChart = /*#__PURE__*/ React.forwardRef((_props, f
     let _domainMargin = MIN_DOMAIN_MARGIN;
     let _xAxisInnerPadding = 0;
     let _xAxisOuterPadding = 0;
-    const cartesianChartRef = React.useRef(null);
+    const { cartesianChartRef, legendsRef: _legendsRef } = useImageExport(props.componentRef, props.hideLegend);
     const Y_ORIGIN = 0;
-    const _legendsRef = React.useRef(null);
     let _yAxisType;
     let _yAxisLabels = [];
     const [selectedLegends, setSelectedLegends] = React.useState(((_props_legendProps = props.legendProps) === null || _props_legendProps === void 0 ? void 0 : _props_legendProps.selectedLegends) || []);
@@ -81,17 +78,6 @@ export const VerticalStackedBarChart = /*#__PURE__*/ React.forwardRef((_props, f
     }, [
         props
     ]);
-    React.useImperativeHandle(props.componentRef, ()=>{
-        var _cartesianChartRef_current;
-        var _cartesianChartRef_current_chartContainer;
-        return {
-            chartContainer: (_cartesianChartRef_current_chartContainer = (_cartesianChartRef_current = cartesianChartRef.current) === null || _cartesianChartRef_current === void 0 ? void 0 : _cartesianChartRef_current.chartContainer) !== null && _cartesianChartRef_current_chartContainer !== void 0 ? _cartesianChartRef_current_chartContainer : null,
-            toImage: (opts)=>{
-                var _cartesianChartRef_current, _legendsRef_current;
-                return toImage((_cartesianChartRef_current = cartesianChartRef.current) === null || _cartesianChartRef_current === void 0 ? void 0 : _cartesianChartRef_current.chartContainer, (_legendsRef_current = _legendsRef.current) === null || _legendsRef_current === void 0 ? void 0 : _legendsRef_current.toSVG, _isRtl, opts);
-            }
-        };
-    }, []);
     function _getLegendData(data, lineLegends) {
         if (props.hideLegend) {
             return /*#__PURE__*/ React.createElement(React.Fragment, null);
@@ -140,7 +126,7 @@ export const VerticalStackedBarChart = /*#__PURE__*/ React.forwardRef((_props, f
                 legendsOfLine.push(legend);
             });
         }
-        const totalLegends = legendsOfLine.concat(actions);
+        const totalLegends = actions.concat(legendsOfLine);
         return /*#__PURE__*/ React.createElement(Legends, {
             legends: totalLegends,
             enabledWrapLines: props.enabledLegendsWrapLines,
@@ -179,16 +165,17 @@ export const VerticalStackedBarChart = /*#__PURE__*/ React.forwardRef((_props, f
             _onStackHoverFocus(lineData.xItem, event);
         }
     }
-    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;
         }
@@ -231,6 +218,7 @@ export const VerticalStackedBarChart = /*#__PURE__*/ React.forwardRef((_props, f
         props.href ? window.location.href = props.href : '';
     };
     function _adjustProps() {
+        var _points_;
         _points = props.data || [];
         _barWidth = getBarWidth(props.barWidth, props.maxBarWidth);
         const defaultColors = [
@@ -241,7 +229,8 @@ export const VerticalStackedBarChart = /*#__PURE__*/ React.forwardRef((_props, f
             getColorFromToken(DataVizPalette.color10)
         ];
         _colors = defaultColors;
-        _xAxisType = getTypeOfAxis(props.data[0].xAxisPoint, true);
+        const firstXValue = (_points_ = _points[0]) === null || _points_ === void 0 ? void 0 : _points_.xAxisPoint;
+        _xAxisType = isInvalidValue(firstXValue) ? XAxisTypes.StringAxis : getTypeOfAxis(firstXValue, true);
         _lineObject = _getFormattedLineData(props.data);
         _xAxisInnerPadding = getScalePadding(props.xAxisInnerPadding, props.xAxisPadding, _xAxisType === XAxisTypes.StringAxis ? 2 / 3 : 1 / 2);
         _xAxisOuterPadding = getScalePadding(props.xAxisOuterPadding, props.xAxisPadding, 0);
@@ -873,17 +862,26 @@ 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)));
+                if (barLabelsToDisplay.length > 0) {
+                    customBarLabel = barLabelsToDisplay[barLabelsToDisplay.length - 1].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", {
@@ -897,7 +895,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}`,
@@ -907,27 +905,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) {