@fluentui/react-charts 0.0.0-nightly-20250820-0406.1 → 0.0.0-nightly-20250821-0406.1

package/lib-commonjs/components/DeclarativeChart/PlotlySchemaAdapter.js

@@ -389,7 +389,8 @@ const transformPlotlyJsonToVSBCProps = (input, isMultiPlot, colorMap, colorwayTy
         roundCorners: true,
         showYAxisLables: true,
         noOfCharsToTruncate: 20,
-        showYAxisLablesTooltip: true
+        showYAxisLablesTooltip: true,
+        ...getAxisCategoryOrderProps(input.data, input.layout)
     };
 };
 const createColorScale = (layout, series)=>{
@@ -434,7 +435,7 @@ const transformPlotlyJsonToGVBCProps = (input, isMultiPlot, colorMap, colorwayTy
                 var _series_marker, _series_marker1, _series_marker_color, _series_marker2;
                 const legend = legends[index1];
                 // resolve color for each legend's bars from the colorscale or extracted colors
-                const color = colorScale ? colorScale((0, _chartutilities.isArrayOrTypedArray)((_series_marker = series.marker) === null || _series_marker === void 0 ? void 0 : _series_marker.color) ? (_series_marker2 = series.marker) === null || _series_marker2 === void 0 ? void 0 : (_series_marker_color = _series_marker2.color) === null || _series_marker_color === void 0 ? void 0 : _series_marker_color[index2 % ((_series_marker1 = series.marker) === null || _series_marker1 === void 0 ? void 0 : _series_marker1.color).length] : 0) : (0, _PlotlyColorAdapter.resolveColor)(extractedColors, index1, legend, colorMap, isDarkTheme);
+                const color = colorScale ? colorScale((0, _chartutilities.isArrayOrTypedArray)((_series_marker = series.marker) === null || _series_marker === void 0 ? void 0 : _series_marker.color) ? (_series_marker2 = series.marker) === null || _series_marker2 === void 0 ? void 0 : (_series_marker_color = _series_marker2.color) === null || _series_marker_color === void 0 ? void 0 : _series_marker_color[index2 % ((_series_marker1 = series.marker) === null || _series_marker1 === void 0 ? void 0 : _series_marker1.color).length] : 0) : (0, _PlotlyColorAdapter.resolveColor)(extractedColors, index2, legend, colorMap, isDarkTheme);
                 const opacity = (0, _PlotlyColorAdapter.getOpacity)(series, index2);
                 var _rgb_copy_formatHex8;
                 mapXToDataPoints[x].series.push({
@@ -466,7 +467,8 @@ const transformPlotlyJsonToGVBCProps = (input, isMultiPlot, colorMap, colorwayTy
         hideTickOverlap: true,
         wrapXAxisLables: typeof ((_gvbcData_ = gvbcData[0]) === null || _gvbcData_ === void 0 ? void 0 : _gvbcData_.name) === 'string',
         hideLegend,
-        roundCorners: true
+        roundCorners: true,
+        ...getAxisCategoryOrderProps(input.data, input.layout)
     };
 };
 const transformPlotlyJsonToVBCProps = (input, isMultiPlot, colorMap, colorwayType, isDarkTheme)=>{
@@ -546,7 +548,8 @@ const transformPlotlyJsonToVBCProps = (input, isMultiPlot, colorMap, colorwayTyp
         wrapXAxisLables: typeof ((_vbcData_ = vbcData[0]) === null || _vbcData_ === void 0 ? void 0 : _vbcData_.x) === 'string',
         maxBarWidth: 50,
         hideLegend,
-        roundCorners: true
+        roundCorners: true,
+        ...getAxisCategoryOrderProps(input.data, input.layout)
     };
 };
 const transformPlotlyJsonToAreaChartProps = (input, isMultiPlot, colorMap, colorwayType, isDarkTheme)=>{
@@ -706,8 +709,7 @@ const transformPlotlyJsonToHorizontalBarWithAxisProps = (input, isMultiPlot, col
                 }).formatHex8()) !== null && _rgb_copy_formatHex8 !== void 0 ? _rgb_copy_formatHex8 : color
             };
         }).filter((point)=>point !== null);
-    }).reverse().flat() //reversing the order to invert the Y bars order as required by plotly.
-    .reverse();
+    }).flat();
     var _input_layout_height;
     const chartHeight = (_input_layout_height = (_input_layout = input.layout) === null || _input_layout === void 0 ? void 0 : _input_layout.height) !== null && _input_layout_height !== void 0 ? _input_layout_height : 450;
     var _input_layout_margin_l;
@@ -734,7 +736,8 @@ const transformPlotlyJsonToHorizontalBarWithAxisProps = (input, isMultiPlot, col
         noOfCharsToTruncate: 20,
         showYAxisLablesTooltip: true,
         hideLegend,
-        roundCorners: true
+        roundCorners: true,
+        ...getAxisCategoryOrderProps(input.data, input.layout)
     };
 };
 const transformPlotlyJsonToHeatmapProps = (input, isMultiPlot, colorMap, colorwayType, isDarkTheme)=>{
@@ -866,7 +869,10 @@ const transformPlotlyJsonToHeatmapProps = (input, isMultiPlot, colorMap, colorwa
         hideTickOverlap: true,
         noOfCharsToTruncate: 20,
         showYAxisLablesTooltip: true,
-        wrapXAxisLables: true
+        wrapXAxisLables: true,
+        ...getAxisCategoryOrderProps([
+            firstData
+        ], input.layout)
     };
 };
 const transformPlotlyJsonToSankeyProps = (input, isMultiPlot, colorMap, colorwayType, isDarkTheme)=>{
@@ -1587,3 +1593,42 @@ const getGridProperties = (layout, isMultiPlot)=>{
         layout: reversedGridLayout
     };
 };
+/**
+ * @see {@link https://github.com/plotly/plotly.js/blob/master/src/plots/cartesian/category_order_defaults.js#L50}
+ */ const getAxisCategoryOrderProps = (data, layout)=>{
+    const result = {};
+    const axesById = {
+        x: layout === null || layout === void 0 ? void 0 : layout.xaxis,
+        y: layout === null || layout === void 0 ? void 0 : layout.yaxis
+    };
+    Object.keys(axesById).forEach((axId)=>{
+        const ax = axesById[axId];
+        const axLetter = axId[0];
+        const propName = `${axLetter}AxisCategoryOrder`;
+        const values = [];
+        data.forEach((series)=>{
+            var _series_axLetter;
+            (_series_axLetter = series[axLetter]) === null || _series_axLetter === void 0 ? void 0 : _series_axLetter.forEach((val)=>{
+                if (!(0, _chartutilities.isInvalidValue)(val)) {
+                    values.push(val);
+                }
+            });
+        });
+        const isAxisTypeCategory = (ax === null || ax === void 0 ? void 0 : ax.type) === 'category' || (0, _chartutilities.isStringArray)(values) && !(0, _chartutilities.isNumberArray)(values) && !(0, _chartutilities.isDateArray)(values);
+        if (!isAxisTypeCategory) {
+            return;
+        }
+        const isValidArray = (0, _chartutilities.isArrayOrTypedArray)(ax === null || ax === void 0 ? void 0 : ax.categoryarray) && ax.categoryarray.length > 0;
+        if (isValidArray && (!(ax === null || ax === void 0 ? void 0 : ax.categoryorder) || ax.categoryorder === 'array')) {
+            result[propName] = ax.categoryarray;
+            return;
+        }
+        if (!(ax === null || ax === void 0 ? void 0 : ax.categoryorder) || ax.categoryorder === 'trace' || ax.categoryorder === 'array') {
+            const categoriesInTraceOrder = Array.from(new Set(values));
+            result[propName] = categoriesInTraceOrder;
+            return;
+        }
+        result[propName] = ax.categoryorder;
+    });
+    return result;
+};