@fluentui/react-charts 0.0.0-nightly-20250826-0412.1 → 0.0.0-nightly-20250826-2140.1

package/lib/components/VerticalStackedBarChart/VerticalStackedBarChart.js

@@ -6,17 +6,13 @@ 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, domainRangeOfDateForAreaLineVerticalBarChart, domainRangeOfVSBCNumeric, domainRangeOfXStringAxis, createStringYAxis, calcTotalWidth, calcBandwidth, calcRequiredWidth, sortAxisCategories } from '../../utilities/index';
+import { ChartTypes, getAccessibleDataObject, XAxisTypes, getTypeOfAxis, tooltipOfAxislabels, formatScientificLimitWidth, getBarWidth, getScalePadding, isScalePaddingDefined, calculateAppropriateBarWidth, formatDate, areArraysEqual, calculateLongestLabelWidth, useRtl, DataVizPalette, getColorFromToken, findVSBCNumericMinMaxOfY, YAxisType, createNumericYAxis, domainRangeOfDateForAreaLineVerticalBarChart, domainRangeOfVSBCNumeric, domainRangeOfXStringAxis, createStringYAxis, calcTotalWidth, calcBandwidth, calcRequiredWidth } 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 = (props)=>{
     var _props_legendProps;
     const _isRtl = useRtl();
     const _createLegendsForLine = (data)=>_getLineLegends(data);
@@ -245,7 +241,9 @@ export const VerticalStackedBarChart = /*#__PURE__*/ React.forwardRef((props = {
         _initYAxisParams();
     }
     function _createDataSetLayer() {
+        const tempArr = [];
         const dataset = _points.map((singlePointData)=>{
+            tempArr.push(singlePointData.xAxisPoint);
             if (_yAxisType === YAxisType.StringAxis) {
                 return {
                     x: singlePointData.xAxisPoint,
@@ -261,7 +259,7 @@ export const VerticalStackedBarChart = /*#__PURE__*/ React.forwardRef((props = {
                 y: total
             };
         });
-        _xAxisLabels = _getOrderedXAxisLabels();
+        _xAxisLabels = tempArr;
         return dataset;
     }
     function _onLegendHover(legendTitle) {
@@ -296,16 +294,16 @@ 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) {
@@ -946,13 +944,40 @@ export const VerticalStackedBarChart = /*#__PURE__*/ React.forwardRef((props = {
                 }
             });
         }
-        _yAxisLabels = _getOrderedYAxisLabels();
+        if (_yAxisType === YAxisType.StringAxis) {
+            const legendToYValues = {};
+            _points.forEach((xPoint)=>{
+                xPoint.chartData.forEach((bar)=>{
+                    if (!legendToYValues[bar.legend]) {
+                        legendToYValues[bar.legend] = [
+                            `${bar.data}`
+                        ];
+                    } else {
+                        legendToYValues[bar.legend].push(`${bar.data}`);
+                    }
+                });
+            });
+            const yAxisLabels = new Set();
+            Object.values(legendToYValues).forEach((yValues)=>{
+                yValues.forEach((yVal)=>{
+                    yAxisLabels.add(yVal);
+                });
+            });
+            Object.values(_lineObject).forEach((linePoints)=>{
+                linePoints.forEach((linePoint)=>{
+                    if (!linePoint.useSecondaryYScale) {
+                        yAxisLabels.add(`${linePoint.y}`);
+                    }
+                });
+            });
+            _yAxisLabels = Array.from(yAxisLabels);
+        }
     }
     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;
@@ -971,48 +996,6 @@ export const VerticalStackedBarChart = /*#__PURE__*/ React.forwardRef((props = {
             top: _margins.top + yAxisTickMarginTop
         };
     }
-    function _getOrderedXAxisLabels() {
-        if (_xAxisType !== XAxisTypes.StringAxis) {
-            return [];
-        }
-        return sortAxisCategories(_mapCategoryToValues(), props.xAxisCategoryOrder);
-    }
-    function _getOrderedYAxisLabels() {
-        if (_yAxisType !== YAxisType.StringAxis) {
-            return [];
-        }
-        return sortAxisCategories(_mapCategoryToValues(true), props.yAxisCategoryOrder);
-    }
-    function _mapCategoryToValues(isYAxis = false) {
-        const categoryToValues = {};
-        _points.forEach((point)=>{
-            var _point_lineData;
-            point.chartData.forEach((bar)=>{
-                const category = isYAxis ? bar.data : point.xAxisPoint;
-                const value = isYAxis ? point.xAxisPoint : bar.data;
-                if (!categoryToValues[category]) {
-                    categoryToValues[category] = [];
-                }
-                if (typeof value === 'number') {
-                    categoryToValues[category].push(value);
-                }
-            });
-            (_point_lineData = point.lineData) === null || _point_lineData === void 0 ? void 0 : _point_lineData.forEach((linePoint)=>{
-                if (isYAxis && linePoint.useSecondaryYScale) {
-                    return;
-                }
-                const category = isYAxis ? linePoint.y : point.xAxisPoint;
-                const value = isYAxis ? point.xAxisPoint : linePoint.y;
-                if (!categoryToValues[category]) {
-                    categoryToValues[category] = [];
-                }
-                if (typeof value === 'number') {
-                    categoryToValues[category].push(value);
-                }
-            });
-        });
-        return categoryToValues;
-    }
     if (!_isChartEmpty()) {
         _adjustProps();
         const _isHavingLines = props.data.some((item)=>item.lineData && item.lineData.length > 0);
@@ -1087,5 +1070,5 @@ export const VerticalStackedBarChart = /*#__PURE__*/ React.forwardRef((props = {
         },
         "aria-label": 'Graph has no data to display'
     });
-});
+};
 VerticalStackedBarChart.displayName = 'VerticalStackedBarChart';