@fluentui/react-charts 9.3.6 → 9.3.8

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

@@ -12,15 +12,14 @@ Object.defineProperty(exports, "VerticalStackedBarChart", {
 const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
 const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 const _d3array = require("d3-array");
-const _d3selection = require("d3-selection");
 const _useVerticalStackedBarChartStylesstyles = require("./useVerticalStackedBarChartStyles.styles");
 const _d3scale = require("d3-scale");
 const _reactutilities = require("@fluentui/react-utilities");
 const _reacttheme = require("@fluentui/react-theme");
 const _index = require("../../index");
 const _index1 = require("../../utilities/index");
-const _imageexportutils = require("../../utilities/image-export-utils");
 const _chartutilities = require("@fluentui/chart-utilities");
+const _hooks = require("../../utilities/hooks");
 const barGapMultiplier = 0.2;
 const barGapMin = 1;
 const MIN_DOMAIN_MARGIN = 8;
@@ -34,7 +33,6 @@ const VerticalStackedBarChart = /*#__PURE__*/ _react.forwardRef((_props, forward
     };
     const _isRtl = (0, _index1.useRtl)();
     const _createLegendsForLine = (data)=>_getLineLegends(data);
-    const _tooltipId = (0, _reactutilities.useId)('VSBCTooltipId_');
     const _emptyChartId = (0, _reactutilities.useId)('_VSBC_empty');
     let _points = [];
     let _dataset;
@@ -51,9 +49,8 @@ const VerticalStackedBarChart = /*#__PURE__*/ _react.forwardRef((_props, forward
     let _domainMargin = MIN_DOMAIN_MARGIN;
     let _xAxisInnerPadding = 0;
     let _xAxisOuterPadding = 0;
-    const cartesianChartRef = _react.useRef(null);
+    const { cartesianChartRef, legendsRef: _legendsRef } = (0, _hooks.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) || []);
@@ -92,17 +89,6 @@ const VerticalStackedBarChart = /*#__PURE__*/ _react.forwardRef((_props, forward
     }, [
         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 (0, _imageexportutils.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);
@@ -151,7 +137,7 @@ const VerticalStackedBarChart = /*#__PURE__*/ _react.forwardRef((_props, forward
                 legendsOfLine.push(legend);
             });
         }
-        const totalLegends = legendsOfLine.concat(actions);
+        const totalLegends = actions.concat(legendsOfLine);
         return /*#__PURE__*/ _react.createElement(_index.Legends, {
             legends: totalLegends,
             enabledWrapLines: props.enabledLegendsWrapLines,
@@ -190,16 +176,17 @@ const VerticalStackedBarChart = /*#__PURE__*/ _react.forwardRef((_props, forward
             _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;
         }
@@ -242,6 +229,7 @@ const VerticalStackedBarChart = /*#__PURE__*/ _react.forwardRef((_props, forward
         props.href ? window.location.href = props.href : '';
     };
     function _adjustProps() {
+        var _points_;
         _points = props.data || [];
         _barWidth = (0, _index1.getBarWidth)(props.barWidth, props.maxBarWidth);
         const defaultColors = [
@@ -252,7 +240,8 @@ const VerticalStackedBarChart = /*#__PURE__*/ _react.forwardRef((_props, forward
             (0, _index1.getColorFromToken)(_index1.DataVizPalette.color10)
         ];
         _colors = defaultColors;
-        _xAxisType = (0, _index1.getTypeOfAxis)(props.data[0].xAxisPoint, true);
+        const firstXValue = (_points_ = _points[0]) === null || _points_ === void 0 ? void 0 : _points_.xAxisPoint;
+        _xAxisType = (0, _chartutilities.isInvalidValue)(firstXValue) ? _index1.XAxisTypes.StringAxis : (0, _index1.getTypeOfAxis)(firstXValue, true);
         _lineObject = _getFormattedLineData(props.data);
         _xAxisInnerPadding = (0, _index1.getScalePadding)(props.xAxisInnerPadding, props.xAxisPadding, _xAxisType === _index1.XAxisTypes.StringAxis ? 2 / 3 : 1 / 2);
         _xAxisOuterPadding = (0, _index1.getScalePadding)(props.xAxisOuterPadding, props.xAxisPadding, 0);
@@ -884,17 +873,26 @@ const VerticalStackedBarChart = /*#__PURE__*/ _react.forwardRef((_props, forward
             };
             let showLabel = false;
             let barLabel = 0;
+            let selectedBarTotalValue = 0;
+            let customBarLabel = undefined;
             if (!props.hideLabels && _yAxisType !== _index1.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", {
@@ -908,7 +906,7 @@ const VerticalStackedBarChart = /*#__PURE__*/ _react.forwardRef((_props, forward
             }, 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}`,
@@ -918,27 +916,8 @@ const VerticalStackedBarChart = /*#__PURE__*/ _react.forwardRef((_props, forward
                     direction: 'ltr',
                     unicodeBidi: 'isolate'
                 }
-            }, typeof props.yAxisTickFormat === 'function' ? props.yAxisTickFormat(barLabel) : (0, _index1.formatScientificLimitWidth)(barLabel)));
+            }, typeof barLabel === 'string' ? barLabel : typeof props.yAxisTickFormat === 'function' ? props.yAxisTickFormat(barLabel) : (0, _index1.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 = (0, _d3selection.select)(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 && (0, _index1.tooltipOfAxislabels)(tooltipProps);
-        }
         return bars.filter((bar)=>!!bar);
     }
     function _getMinMaxOfYAxis(dataset, yAxisType, useSecondaryYScale) {