@fluentui/react-charts 0.0.0-nightly-20250826-2140.1 → 0.0.0-nightly-20250827-0407.1

package/lib/components/VerticalStackedBarChart/VerticalStackedBarChart.js

@@ -6,13 +6,17 @@ 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 } 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, 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 = (props)=>{
+export const VerticalStackedBarChart = /*#__PURE__*/ React.forwardRef((props = {
+    xAxisCategoryOrder: 'default',
+    yAxisCategoryOrder: 'default',
+    data: []
+}, forwardedRef)=>{
     var _props_legendProps;
     const _isRtl = useRtl();
     const _createLegendsForLine = (data)=>_getLineLegends(data);
@@ -241,9 +245,7 @@ export const VerticalStackedBarChart = (props)=>{
         _initYAxisParams();
     }
     function _createDataSetLayer() {
-        const tempArr = [];
         const dataset = _points.map((singlePointData)=>{
-            tempArr.push(singlePointData.xAxisPoint);
             if (_yAxisType === YAxisType.StringAxis) {
                 return {
                     x: singlePointData.xAxisPoint,
@@ -259,7 +261,7 @@ export const VerticalStackedBarChart = (props)=>{
                 y: total
             };
         });
-        _xAxisLabels = tempArr;
+        _xAxisLabels = _getOrderedXAxisLabels();
         return dataset;
     }
     function _onLegendHover(legendTitle) {
@@ -294,16 +296,16 @@ export const VerticalStackedBarChart = (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) {
@@ -944,40 +946,13 @@ export const VerticalStackedBarChart = (props)=>{
                 }
             });
         }
-        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);
-        }
+        _yAxisLabels = _getOrderedYAxisLabels();
     }
     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;
@@ -996,6 +971,48 @@ export const VerticalStackedBarChart = (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);
@@ -1070,5 +1087,5 @@ export const VerticalStackedBarChart = (props)=>{
         },
         "aria-label": 'Graph has no data to display'
     });
-};
+});
 VerticalStackedBarChart.displayName = 'VerticalStackedBarChart';