@fluentui/react-charts 9.2.4 → 9.3.1

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

@@ -1,3 +1,4 @@
+'use client';
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true
@@ -23,12 +24,14 @@ const _chartutilities = require("@fluentui/chart-utilities");
 const barGapMultiplier = 0.2;
 const barGapMin = 1;
 const MIN_DOMAIN_MARGIN = 8;
-const VerticalStackedBarChart = /*#__PURE__*/ _react.forwardRef((props = {
-    xAxisCategoryOrder: 'default',
-    yAxisCategoryOrder: 'default',
-    data: []
-}, forwardedRef)=>{
+const VerticalStackedBarChart = /*#__PURE__*/ _react.forwardRef((_props, forwardedRef)=>{
     var _props_legendProps;
+    const props = {
+        xAxisCategoryOrder: 'default',
+        yAxisCategoryOrder: 'default',
+        maxBarWidth: 24,
+        ..._props
+    };
     const _isRtl = (0, _index1.useRtl)();
     const _createLegendsForLine = (data)=>_getLineLegends(data);
     const _tooltipId = (0, _reactutilities.useId)('VSBCTooltipId_');
@@ -223,7 +226,7 @@ const VerticalStackedBarChart = /*#__PURE__*/ _react.forwardRef((props = {
             ...lineData.sort((a, b)=>a.data < b.data ? 1 : -1),
             ...stack.chartData.slice().reverse()
         ] : stack.chartData.slice().reverse());
-        setHoverXValue(stack.xAxisPoint instanceof Date ? (0, _index1.formatDate)(stack.xAxisPoint, props.useUTC) : stack.xAxisPoint);
+        setHoverXValue(stack.xAxisPoint instanceof Date ? (0, _chartutilities.formatDateToLocaleString)(stack.xAxisPoint, props.culture, props.useUTC) : stack.xAxisPoint);
         setStackCalloutProps(stack);
         setActiveXAxisDataPoint(stack.xAxisPoint);
         setCallOutAccessibilityData(stack.stackCallOutAccessibilityData);
@@ -307,23 +310,23 @@ const VerticalStackedBarChart = /*#__PURE__*/ _react.forwardRef((props = {
         }
     }
     /**
-     * This function checks if the given legend is highlighted or not.
-     * A legend can be highlighted in 2 ways:
-     * 1. selection: if the user clicks on it
-     * 2. hovering: if there is no selected legend and the user hovers over it
-     */ function _isLegendHighlighted(legendTitle) {
+   * This function checks if the given legend is highlighted or not.
+   * A legend can be highlighted in 2 ways:
+   * 1. selection: if the user clicks on it
+   * 2. hovering: if there is no selected legend and the user hovers over it
+   */ function _isLegendHighlighted(legendTitle) {
         return _getHighlightedLegend().includes(legendTitle);
     }
     /**
-     * This function checks if none of the legends is selected or hovered.
-     */ function _noLegendHighlighted() {
+   * This function checks if none of the legends is selected or hovered.
+   */ function _noLegendHighlighted() {
         return _getHighlightedLegend().length === 0;
     }
     function _getAriaLabel(singleChartData, point, isLinePoint) {
         var _point_callOutAccessibilityData;
         if (!point) {
             var _singleChartData_lineData, _singleChartData_stackCallOutAccessibilityData;
-            /** if shouldFocusWholeStack is true */ const xValue = singleChartData.xAxisCalloutData || (singleChartData.xAxisPoint instanceof Date ? (0, _index1.formatDate)(singleChartData.xAxisPoint) : singleChartData.xAxisPoint);
+            /** if shouldFocusWholeStack is true */ const xValue = singleChartData.xAxisCalloutData || (singleChartData.xAxisPoint instanceof Date ? (0, _chartutilities.formatDateToLocaleString)(singleChartData.xAxisPoint, props.culture, props.useUTC) : singleChartData.xAxisPoint);
             const pointValues = singleChartData.chartData.map((pt)=>{
                 const legend = pt.legend;
                 const yValue = pt.yAxisCalloutData || pt.data;
@@ -336,7 +339,7 @@ const VerticalStackedBarChart = /*#__PURE__*/ _react.forwardRef((props = {
             }).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 || !isLinePoint && point.xAxisCalloutData || (singleChartData.xAxisPoint instanceof Date ? (0, _index1.formatDate)(singleChartData.xAxisPoint) : singleChartData.xAxisPoint);
+        /** if shouldFocusWholeStack is false */ const xValue = singleChartData.xAxisCalloutData || !isLinePoint && point.xAxisCalloutData || (singleChartData.xAxisPoint instanceof Date ? (0, _chartutilities.formatDateToLocaleString)(singleChartData.xAxisPoint, props.culture, props.useUTC) : singleChartData.xAxisPoint);
         const legend = point.legend;
         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}.`;
@@ -518,9 +521,8 @@ const VerticalStackedBarChart = /*#__PURE__*/ _react.forwardRef((props = {
         }
     }
     function _renderCallout(props) {
-        var _props_culture;
         return props ? /*#__PURE__*/ _react.createElement(_index.ChartPopover, {
-            culture: (_props_culture = props.culture) !== null && _props_culture !== void 0 ? _props_culture : 'en-us',
+            culture: props.culture,
             XValue: props.xAxisCalloutData,
             xCalloutValue: xCalloutValue,
             yCalloutValue: yCalloutValue,
@@ -588,8 +590,7 @@ const VerticalStackedBarChart = /*#__PURE__*/ _react.forwardRef((props = {
         }
     }
     function _handleMouseOut() {
-        setPopoverOpen(false);
-    }
+    /**/ }
     function _getBarGapAndScale(bars, yBarScale, defaultTotalHeight) {
         const { barGapMax = 0 } = props;
         let totalData = 0;
@@ -904,7 +905,11 @@ const VerticalStackedBarChart = /*#__PURE__*/ _react.forwardRef((props = {
                 className: classes.barLabel,
                 "aria-label": `Total: ${barLabel}`,
                 role: "img",
-                transform: `translate(${xScaleBandwidthTranslate}, 0)`
+                transform: `translate(${xScaleBandwidthTranslate}, 0)`,
+                style: {
+                    direction: 'ltr',
+                    unicodeBidi: 'isolate'
+                }
             }, typeof props.yAxisTickFormat === 'function' ? props.yAxisTickFormat(barLabel) : (0, _index1.formatScientificLimitWidth)(barLabel)));
         });
         if (!props.showXAxisLablesTooltip) {
@@ -961,9 +966,9 @@ const VerticalStackedBarChart = /*#__PURE__*/ _react.forwardRef((props = {
     }
     function _getYDomainMargins(containerHeight) {
         /**
-       * Specifies the extra top margin to apply above the highest y-axis tick label.
-       * Useful when stacked bars extend beyond the combined height of all y-axis labels (or categories).
-       */ let yAxisTickMarginTop = 0;
+     * Specifies the extra top margin to apply above the highest y-axis tick label.
+     * Useful when stacked bars extend beyond the combined height of all y-axis labels (or categories).
+     */ let yAxisTickMarginTop = 0;
         /** Total height available to render the bars */ const totalHeight = containerHeight - _margins.bottom - _margins.top;
         if (_yAxisType === _index1.YAxisType.StringAxis) {
             /** Maximum height of the stacked bars, expressed in multiples of the height of a y-axis label (or category) */ let maxBarHeightInLabels = 0;