@fluentui/react-charts 9.2.4 → 9.3.0

package/lib/components/VerticalStackedBarChart/VerticalStackedBarChart.js

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import { max as d3Max, min as d3Min } from 'd3-array';
 import { select as d3Select } from 'd3-selection';
@@ -6,18 +7,20 @@ import { scaleLinear as d3ScaleLinear, scaleBand as d3ScaleBand, scaleUtc as d3S
 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, formatDate, areArraysEqual, calculateLongestLabelWidth, useRtl, DataVizPalette, getColorFromToken, findVSBCNumericMinMaxOfY, YAxisType, createNumericYAxis, domainRangeOfDateForAreaLineScatterVerticalBarCharts, domainRangeOfVSBCNumeric, domainRangeOfXStringAxis, createStringYAxis, calcTotalWidth, calcBandwidth, calcRequiredWidth, sortAxisCategories } from '../../utilities/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';
 const barGapMultiplier = 0.2;
 const barGapMin = 1;
 const MIN_DOMAIN_MARGIN = 8;
-export const VerticalStackedBarChart = /*#__PURE__*/ React.forwardRef((props = {
-    xAxisCategoryOrder: 'default',
-    yAxisCategoryOrder: 'default',
-    data: []
-}, forwardedRef)=>{
+export const VerticalStackedBarChart = /*#__PURE__*/ React.forwardRef((_props, forwardedRef)=>{
     var _props_legendProps;
+    const props = {
+        xAxisCategoryOrder: 'default',
+        yAxisCategoryOrder: 'default',
+        maxBarWidth: 24,
+        ..._props
+    };
     const _isRtl = useRtl();
     const _createLegendsForLine = (data)=>_getLineLegends(data);
     const _tooltipId = useId('VSBCTooltipId_');
@@ -212,7 +215,7 @@ export 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 ? formatDate(stack.xAxisPoint, props.useUTC) : stack.xAxisPoint);
+        setHoverXValue(stack.xAxisPoint instanceof Date ? formatDateToLocaleString(stack.xAxisPoint, props.culture, props.useUTC) : stack.xAxisPoint);
         setStackCalloutProps(stack);
         setActiveXAxisDataPoint(stack.xAxisPoint);
         setCallOutAccessibilityData(stack.stackCallOutAccessibilityData);
@@ -296,23 +299,23 @@ export 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 ? formatDate(singleChartData.xAxisPoint) : singleChartData.xAxisPoint);
+            /** if shouldFocusWholeStack is true */ const xValue = singleChartData.xAxisCalloutData || (singleChartData.xAxisPoint instanceof Date ? 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;
@@ -325,7 +328,7 @@ export 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 ? formatDate(singleChartData.xAxisPoint) : singleChartData.xAxisPoint);
+        /** if shouldFocusWholeStack is false */ const xValue = singleChartData.xAxisCalloutData || !isLinePoint && point.xAxisCalloutData || (singleChartData.xAxisPoint instanceof Date ? 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}.`;
@@ -507,9 +510,8 @@ export const VerticalStackedBarChart = /*#__PURE__*/ React.forwardRef((props = {
         }
     }
     function _renderCallout(props) {
-        var _props_culture;
         return props ? /*#__PURE__*/ React.createElement(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,
@@ -577,8 +579,7 @@ export const VerticalStackedBarChart = /*#__PURE__*/ React.forwardRef((props = {
         }
     }
     function _handleMouseOut() {
-        setPopoverOpen(false);
-    }
+    /**/ }
     function _getBarGapAndScale(bars, yBarScale, defaultTotalHeight) {
         const { barGapMax = 0 } = props;
         let totalData = 0;
@@ -893,7 +894,11 @@ export 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) : formatScientificLimitWidth(barLabel)));
         });
         if (!props.showXAxisLablesTooltip) {
@@ -950,9 +955,9 @@ export 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 === YAxisType.StringAxis) {
             /** Maximum height of the stacked bars, expressed in multiples of the height of a y-axis label (or category) */ let maxBarHeightInLabels = 0;