@fluentui/react-charts 0.0.0-nightly-20251014-0406.1 → 0.0.0-nightly-20251015-0406.1

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

@@ -271,7 +271,7 @@ const getSecondaryYAxisValues = (data, layout, maxAllowedMinY, minAllowedMaxY)=>
 };
 const _getGaugeAxisColor = (colorway, colorwayType, color, colorMap, isDarkTheme)=>{
     const extractedColors = (0, _PlotlyColorAdapter.extractColor)(colorway, colorwayType, color, colorMap, isDarkTheme);
-    return (0, _PlotlyColorAdapter.resolveColor)(extractedColors, 0, '', colorMap, isDarkTheme);
+    return (0, _PlotlyColorAdapter.resolveColor)(extractedColors, 0, '', colorMap, colorway, isDarkTheme);
 };
 const resolveXAxisPoint = (x, isXYearCategory, isXString, isXDate, isXNumber)=>{
     if (x === null || x === undefined) {
@@ -408,54 +408,41 @@ const transformPlotlyJsonToDonutProps = (input, isMultiPlot, colorMap, colorwayT
     // extract colors for each series only once
     // use piecolorway if available
     // otherwise, default to colorway from template
-    const colors = (0, _PlotlyColorAdapter.extractColor)((_input_layout_piecolorway = (_input_layout = input.layout) === null || _input_layout === void 0 ? void 0 : _input_layout.piecolorway) !== null && _input_layout_piecolorway !== void 0 ? _input_layout_piecolorway : (_input_layout1 = input.layout) === null || _input_layout1 === void 0 ? void 0 : (_input_layout_template = _input_layout1.template) === null || _input_layout_template === void 0 ? void 0 : (_input_layout_template_layout = _input_layout_template.layout) === null || _input_layout_template_layout === void 0 ? void 0 : _input_layout_template_layout.colorway, colorwayType, (_input_layout_piecolorway1 = (_input_layout2 = input.layout) === null || _input_layout2 === void 0 ? void 0 : _input_layout2.piecolorway) !== null && _input_layout_piecolorway1 !== void 0 ? _input_layout_piecolorway1 : firstData === null || firstData === void 0 ? void 0 : (_firstData_marker = firstData.marker) === null || _firstData_marker === void 0 ? void 0 : _firstData_marker.colors, colorMap, isDarkTheme);
+    const colors = (0, _PlotlyColorAdapter.extractColor)((_input_layout_piecolorway = (_input_layout = input.layout) === null || _input_layout === void 0 ? void 0 : _input_layout.piecolorway) !== null && _input_layout_piecolorway !== void 0 ? _input_layout_piecolorway : (_input_layout1 = input.layout) === null || _input_layout1 === void 0 ? void 0 : (_input_layout_template = _input_layout1.template) === null || _input_layout_template === void 0 ? void 0 : (_input_layout_template_layout = _input_layout_template.layout) === null || _input_layout_template_layout === void 0 ? void 0 : _input_layout_template_layout.colorway, colorwayType, (_input_layout_piecolorway1 = (_input_layout2 = input.layout) === null || _input_layout2 === void 0 ? void 0 : _input_layout2.piecolorway) !== null && _input_layout_piecolorway1 !== void 0 ? _input_layout_piecolorway1 : firstData === null || firstData === void 0 ? void 0 : (_firstData_marker = firstData.marker) === null || _firstData_marker === void 0 ? void 0 : _firstData_marker.colors, colorMap, isDarkTheme, true);
     const mapLegendToDataPoint = {};
-    if (colors) {
-        var _firstData_labels;
-        (_firstData_labels = firstData.labels) === null || _firstData_labels === void 0 ? void 0 : _firstData_labels.forEach((label, index)=>{
-            const value = getNumberAtIndexOrDefault(firstData.values, index);
-            if ((0, _chartutilities.isInvalidValue)(value) || value < 0) {
-                return;
-            }
-            const legend = `${label}`;
-            // resolve color for each legend from the extracted colors
-            const color = (0, _PlotlyColorAdapter.resolveColor)(colors, index, legend, colorMap, isDarkTheme);
+    // clear colorMap for donut chart to reassign colors as the colorMap initially gets assigned by
+    // getAllupLegendsProps function without sorting labels by value
+    colorMap.current.clear();
+    // Sort labels by value descending before mapping
+    if (firstData.labels && firstData.values) {
+        var _firstData_marker1;
+        const markerColors = ((_firstData_marker1 = firstData.marker) === null || _firstData_marker1 === void 0 ? void 0 : _firstData_marker1.colors) || undefined;
+        const hasMarkerColors = Array.isArray(markerColors) && markerColors.length >= firstData.labels.length;
+        const labelValuePairs = firstData.labels.map((label, index)=>({
+                label,
+                value: getNumberAtIndexOrDefault(firstData.values, index),
+                index,
+                color: hasMarkerColors ? markerColors[index] : undefined
+            }));
+        // Filter out invalid values
+        const validPairs = labelValuePairs.filter((pair)=>!(0, _chartutilities.isInvalidValue)(pair.value));
+        // Sort descending by value; when marker colors are present, keep color attached to the label
+        validPairs.sort((a, b)=>b.value - a.value);
+        validPairs.forEach((pair, sortedIdx)=>{
+            var _input_layout, _input_layout_template_layout, _input_layout_template, _input_layout1;
+            const legend = `${pair.label}`;
+            var _input_layout_piecolorway, _pair_color;
+            const color = (_pair_color = pair.color) !== null && _pair_color !== void 0 ? _pair_color : (0, _PlotlyColorAdapter.resolveColor)(colors, sortedIdx, legend, colorMap, (_input_layout_piecolorway = (_input_layout = input.layout) === null || _input_layout === void 0 ? void 0 : _input_layout.piecolorway) !== null && _input_layout_piecolorway !== void 0 ? _input_layout_piecolorway : (_input_layout1 = input.layout) === null || _input_layout1 === void 0 ? void 0 : (_input_layout_template = _input_layout1.template) === null || _input_layout_template === void 0 ? void 0 : (_input_layout_template_layout = _input_layout_template.layout) === null || _input_layout_template_layout === void 0 ? void 0 : _input_layout_template_layout.colorway, isDarkTheme, true);
             if (!mapLegendToDataPoint[legend]) {
                 mapLegendToDataPoint[legend] = {
                     legend,
-                    data: value,
+                    data: pair.value,
                     color
                 };
             } else {
-                mapLegendToDataPoint[legend].data += value;
+                mapLegendToDataPoint[legend].data += pair.value;
             }
         });
-    } else {
-        // Sort labels by value descending before mapping
-        if (firstData.labels && firstData.values) {
-            const labelValuePairs = firstData.labels.map((label, index)=>({
-                    label,
-                    value: getNumberAtIndexOrDefault(firstData.values, index),
-                    index
-                }));
-            // Filter out invalid values
-            const validPairs = labelValuePairs.filter((pair)=>!(0, _chartutilities.isInvalidValue)(pair.value));
-            // Sort descending by value
-            validPairs.sort((a, b)=>b.value - a.value);
-            validPairs.forEach((pair, sortedIdx)=>{
-                const legend = `${pair.label}`;
-                const color = (0, _PlotlyColorAdapter.resolveColor)(colors, sortedIdx, legend, colorMap, isDarkTheme);
-                if (!mapLegendToDataPoint[legend]) {
-                    mapLegendToDataPoint[legend] = {
-                        legend,
-                        data: pair.value,
-                        color
-                    };
-                } else {
-                    mapLegendToDataPoint[legend].data += pair.value;
-                }
-            });
-        }
     }
     var _input_layout_width;
     const width = (_input_layout_width = (_input_layout3 = input.layout) === null || _input_layout3 === void 0 ? void 0 : _input_layout3.width) !== null && _input_layout_width !== void 0 ? _input_layout_width : 440;
@@ -470,10 +457,25 @@ const transformPlotlyJsonToDonutProps = (input, isMultiPlot, colorMap, colorwayT
     const donutMarginVertical = 40 + (hideLabels ? 0 : 40);
     const innerRadius = firstData.hole ? firstData.hole * (Math.min(width - donutMarginHorizontal, height - donutMarginVertical) / 2) : _utilities.MIN_DONUT_RADIUS;
     const { chartTitle } = getTitles(input.layout);
+    // Build anticlockwise order by keeping the first item, reversing the rest
+    const legends = Object.keys(mapLegendToDataPoint);
+    const reorderedEntries = legends.length > 1 ? [
+        [
+            legends[0],
+            mapLegendToDataPoint[legends[0]]
+        ],
+        ...legends.slice(1).reverse().map((key)=>[
+                key,
+                mapLegendToDataPoint[key]
+            ])
+    ] : legends.map((key)=>[
+            key,
+            mapLegendToDataPoint[key]
+        ]);
     return {
         data: {
             chartTitle,
-            chartData: Object.values(mapLegendToDataPoint)
+            chartData: reorderedEntries.map(([, v])=>v)
         },
         hideLegend: isMultiPlot || ((_input_layout5 = input.layout) === null || _input_layout5 === void 0 ? void 0 : _input_layout5.showlegend) === false,
         width: (_input_layout6 = input.layout) === null || _input_layout6 === void 0 ? void 0 : _input_layout6.width,
@@ -484,7 +486,8 @@ const transformPlotlyJsonToDonutProps = (input, isMultiPlot, colorMap, colorwayT
             'percent',
             'label+percent'
         ].includes(firstData.textinfo) : true,
-        roundCorners: true
+        roundCorners: true,
+        order: 'sorted'
     };
 };
 const transformPlotlyJsonToVSBCProps = (input, isMultiPlot, colorMap, colorwayType, isDarkTheme, fallbackVSBC)=>{
@@ -513,7 +516,7 @@ const transformPlotlyJsonToVSBCProps = (input, isMultiPlot, colorMap, colorwayTy
             const rangeXValues = series.x.slice(rangeStart, rangeEnd);
             const rangeYValues = series.y.slice(rangeStart, rangeEnd);
             rangeXValues.forEach((x, index2)=>{
-                var _series_marker, _series_marker1, _series_marker_color, _series_marker2;
+                var _series_marker, _series_marker1, _series_marker_color, _series_marker2, _input_layout_template_layout, _input_layout_template, _input_layout;
                 if (!mapXToDataPoints[x]) {
                     mapXToDataPoints[x] = {
                         xAxisPoint: resolveXAxisPoint(x, isXYearCategory, isXString, isXDate, isXNumber),
@@ -523,7 +526,7 @@ const transformPlotlyJsonToVSBCProps = (input, isMultiPlot, colorMap, colorwayTy
                 }
                 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)(extractedBarColors, index2, 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)(extractedBarColors, index2, legend, colorMap, (_input_layout = input.layout) === null || _input_layout === void 0 ? void 0 : (_input_layout_template = _input_layout.template) === null || _input_layout_template === void 0 ? void 0 : (_input_layout_template_layout = _input_layout_template.layout) === null || _input_layout_template_layout === void 0 ? void 0 : _input_layout_template_layout.colorway, isDarkTheme);
                 const opacity = (0, _PlotlyColorAdapter.getOpacity)(series, index2);
                 const yVal = rangeYValues[index2];
                 const yAxisCalloutData = getFormattedCalloutYData(yVal, yAxisTickFormat);
@@ -541,8 +544,8 @@ const transformPlotlyJsonToVSBCProps = (input, isMultiPlot, colorMap, colorwayTy
                         yMaxValue = Math.max(yMaxValue, yVal);
                     }
                 } else if (series.type === 'scatter' || !!fallbackVSBC) {
-                    var _series_mode;
-                    const lineColor = (0, _PlotlyColorAdapter.resolveColor)(extractedLineColors, index1, legend, colorMap, isDarkTheme);
+                    var _input_layout_template_layout1, _input_layout_template1, _input_layout1, _series_mode;
+                    const lineColor = (0, _PlotlyColorAdapter.resolveColor)(extractedLineColors, index1, legend, colorMap, (_input_layout1 = input.layout) === null || _input_layout1 === void 0 ? void 0 : (_input_layout_template1 = _input_layout1.template) === null || _input_layout_template1 === void 0 ? void 0 : (_input_layout_template_layout1 = _input_layout_template1.layout) === null || _input_layout_template_layout1 === void 0 ? void 0 : _input_layout_template_layout1.colorway, isDarkTheme);
                     const lineOptions = !((_series_mode = series.mode) === null || _series_mode === void 0 ? void 0 : _series_mode.includes('text')) ? getLineOptions(series.line) : undefined;
                     const legendShape = getLegendShape(series);
                     var _rgb_copy_formatHex81;
@@ -649,10 +652,10 @@ const transformPlotlyJsonToGVBCProps = (input, isMultiPlot, colorMap, colorwayTy
                 };
             }
             if (series.type === 'bar') {
-                var _series_marker, _series_marker1, _series_marker_color, _series_marker2;
+                var _series_marker, _series_marker1, _series_marker_color, _series_marker2, _processedInput_layout_template_layout, _processedInput_layout_template, _processedInput_layout;
                 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, index2, 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, (_processedInput_layout = processedInput.layout) === null || _processedInput_layout === void 0 ? void 0 : (_processedInput_layout_template = _processedInput_layout.template) === null || _processedInput_layout_template === void 0 ? void 0 : (_processedInput_layout_template_layout = _processedInput_layout_template.layout) === null || _processedInput_layout_template_layout === void 0 ? void 0 : _processedInput_layout_template_layout.colorway, isDarkTheme);
                 const opacity = (0, _PlotlyColorAdapter.getOpacity)(series, index2);
                 const yVal = series.y[index2];
                 var _rgb_copy_formatHex8;
@@ -733,10 +736,10 @@ const transformPlotlyJsonToVBCProps = (input, isMultiPlot, colorMap, colorwayTyp
             return yVal;
         });
         xBins.forEach((bin, index)=>{
-            var _series_marker, _series_marker1, _series_marker_color, _series_marker2;
+            var _series_marker, _series_marker1, _series_marker_color, _series_marker2, _input_layout_template_layout, _input_layout_template, _input_layout;
             const legend = legends[seriesIdx];
             // 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[index % ((_series_marker1 = series.marker) === null || _series_marker1 === void 0 ? void 0 : _series_marker1.color).length] : 0) : (0, _PlotlyColorAdapter.resolveColor)(extractedColors, index, 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[index % ((_series_marker1 = series.marker) === null || _series_marker1 === void 0 ? void 0 : _series_marker1.color).length] : 0) : (0, _PlotlyColorAdapter.resolveColor)(extractedColors, index, legend, colorMap, (_input_layout = input.layout) === null || _input_layout === void 0 ? void 0 : (_input_layout_template = _input_layout.template) === null || _input_layout_template === void 0 ? void 0 : (_input_layout_template_layout = _input_layout_template.layout) === null || _input_layout_template_layout === void 0 ? void 0 : _input_layout_template_layout.colorway, isDarkTheme);
             const opacity = (0, _PlotlyColorAdapter.getOpacity)(series, index);
             const yVal = calculateHistNorm(series.histnorm, y[index], total, isXString ? bin.length : getBinSize(bin));
             var _rgb_copy_formatHex8;
@@ -798,7 +801,7 @@ const transformPlotlyJsonToScatterTraceProps = (input, isMultiPlot, chartType, c
     const yAxisTickFormat = getYAxisTickFormat(input.data[0], input.layout);
     var shouldWrapLabels = false;
     const chartData = input.data.map((series, index)=>{
-        var _series_mode, _series_line, _series_marker, _series_line1, _input_layout_template_layout, _input_layout_template, _input_layout, _series_mode1;
+        var _series_mode, _series_line, _series_marker, _series_line1, _input_layout_template_layout, _input_layout_template, _input_layout, _input_layout_template_layout1, _input_layout_template1, _input_layout1, _series_mode1;
         const colors = isScatterMarkers ? (series === null || series === void 0 ? void 0 : (_series_mode = series.mode) === null || _series_mode === void 0 ? void 0 : _series_mode.includes('line')) ? (_series_line = series.line) === null || _series_line === void 0 ? void 0 : _series_line.color : (_series_marker = series.marker) === null || _series_marker === void 0 ? void 0 : _series_marker.color : (_series_line1 = series.line) === null || _series_line1 === void 0 ? void 0 : _series_line1.color;
         // extract colors for each series only once
         const extractedColors = (0, _PlotlyColorAdapter.extractColor)((_input_layout = input.layout) === null || _input_layout === void 0 ? void 0 : (_input_layout_template = _input_layout.template) === null || _input_layout_template === void 0 ? void 0 : (_input_layout_template_layout = _input_layout_template.layout) === null || _input_layout_template_layout === void 0 ? void 0 : _input_layout_template_layout.colorway, colorwayType, colors, colorMap, isDarkTheme);
@@ -810,7 +813,7 @@ const transformPlotlyJsonToScatterTraceProps = (input, isMultiPlot, chartType, c
         shouldWrapLabels = shouldWrapLabels || isXString && !isXDate;
         const legend = legends[index];
         // resolve color for each legend's lines from the extracted colors
-        const seriesColor = (0, _PlotlyColorAdapter.resolveColor)(extractedColors, index, legend, colorMap, isDarkTheme);
+        const seriesColor = (0, _PlotlyColorAdapter.resolveColor)(extractedColors, index, legend, colorMap, (_input_layout1 = input.layout) === null || _input_layout1 === void 0 ? void 0 : (_input_layout_template1 = _input_layout1.template) === null || _input_layout_template1 === void 0 ? void 0 : (_input_layout_template_layout1 = _input_layout_template1.layout) === null || _input_layout_template_layout1 === void 0 ? void 0 : _input_layout_template_layout1.colorway, isDarkTheme);
         const seriesOpacity = (0, _PlotlyColorAdapter.getOpacity)(series, index);
         mode = series.fill === 'tozeroy' ? 'tozeroy' : 'tonexty';
         // if mode contains 'text', we prioritize showing the text over curving the line
@@ -927,12 +930,12 @@ const transformPlotlyJsonToHorizontalBarWithAxisProps = (input, isMultiPlot, col
         const extractedColors = (0, _PlotlyColorAdapter.extractColor)((_input_layout = input.layout) === null || _input_layout === void 0 ? void 0 : (_input_layout_template = _input_layout.template) === null || _input_layout_template === void 0 ? void 0 : (_input_layout_template_layout = _input_layout_template.layout) === null || _input_layout_template_layout === void 0 ? void 0 : _input_layout_template_layout.colorway, colorwayType, (_series_marker = series.marker) === null || _series_marker === void 0 ? void 0 : _series_marker.color, colorMap, isDarkTheme);
         const legend = legends[index];
         return series.y.map((yValue, i)=>{
-            var _series_x, _series_marker, _series_marker1, _series_marker_color, _series_marker2;
+            var _series_x, _series_marker, _series_marker1, _series_marker_color, _series_marker2, _input_layout_template_layout, _input_layout_template, _input_layout;
             if ((0, _chartutilities.isInvalidValue)((_series_x = series.x) === null || _series_x === void 0 ? void 0 : _series_x[i]) || (0, _chartutilities.isInvalidValue)(yValue)) {
                 return null;
             }
             // 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[i % ((_series_marker1 = series.marker) === null || _series_marker1 === void 0 ? void 0 : _series_marker1.color).length] : 0) : (0, _PlotlyColorAdapter.resolveColor)(extractedColors, i, 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[i % ((_series_marker1 = series.marker) === null || _series_marker1 === void 0 ? void 0 : _series_marker1.color).length] : 0) : (0, _PlotlyColorAdapter.resolveColor)(extractedColors, i, legend, colorMap, (_input_layout = input.layout) === null || _input_layout === void 0 ? void 0 : (_input_layout_template = _input_layout.template) === null || _input_layout_template === void 0 ? void 0 : (_input_layout_template_layout = _input_layout_template.layout) === null || _input_layout_template_layout === void 0 ? void 0 : _input_layout_template_layout.colorway, isDarkTheme);
             const opacity = (0, _PlotlyColorAdapter.getOpacity)(series, i);
             var _rgb_copy_formatHex8;
             return {
@@ -990,12 +993,12 @@ const transformPlotlyJsonToGanttChartProps = (input, isMultiPlot, colorMap, colo
             return (0, _chartutilities.isInvalidValue)(value) ? 0 : isXDate ? +parseLocalDate(value) : +value;
         };
         return series.y.map((yVal, i)=>{
-            var _series_marker, _series_marker1, _series_marker_color, _series_marker2, _series_base, _series_x;
+            var _series_marker, _series_marker1, _series_marker_color, _series_marker2, _input_layout_template_layout, _input_layout_template, _input_layout, _series_base, _series_x;
             if ((0, _chartutilities.isInvalidValue)(yVal)) {
                 return null;
             }
             // 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[i % ((_series_marker1 = series.marker) === null || _series_marker1 === void 0 ? void 0 : _series_marker1.color).length] : 0) : (0, _PlotlyColorAdapter.resolveColor)(extractedColors, i, 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[i % ((_series_marker1 = series.marker) === null || _series_marker1 === void 0 ? void 0 : _series_marker1.color).length] : 0) : (0, _PlotlyColorAdapter.resolveColor)(extractedColors, i, legend, colorMap, (_input_layout = input.layout) === null || _input_layout === void 0 ? void 0 : (_input_layout_template = _input_layout.template) === null || _input_layout_template === void 0 ? void 0 : (_input_layout_template_layout = _input_layout_template.layout) === null || _input_layout_template_layout === void 0 ? void 0 : _input_layout_template_layout.colorway, isDarkTheme);
             const opacity = (0, _PlotlyColorAdapter.getOpacity)(series, i);
             const base = convertXValueToNumber((_series_base = series.base) === null || _series_base === void 0 ? void 0 : _series_base[i]);
             const xVal = convertXValueToNumber((_series_x = series.x) === null || _series_x === void 0 ? void 0 : _series_x[i]);
@@ -1183,7 +1186,8 @@ const transformPlotlyJsonToSankeyProps = (input, isMultiPlot, colorMap, colorway
     const extractedNodeColors = (0, _PlotlyColorAdapter.extractColor)((_input_layout = input.layout) === null || _input_layout === void 0 ? void 0 : (_input_layout_template = _input_layout.template) === null || _input_layout_template === void 0 ? void 0 : (_input_layout_template_layout = _input_layout_template.layout) === null || _input_layout_template_layout === void 0 ? void 0 : _input_layout_template_layout.colorway, colorwayType, node === null || node === void 0 ? void 0 : node.color, colorMap, isDarkTheme);
     const sankeyChartData = {
         nodes: (_node_label = node.label) === null || _node_label === void 0 ? void 0 : _node_label.map((label, index)=>{
-            const color = (0, _PlotlyColorAdapter.resolveColor)(extractedNodeColors, index, label, colorMap, isDarkTheme);
+            var _input_layout_template_layout, _input_layout_template, _input_layout;
+            const color = (0, _PlotlyColorAdapter.resolveColor)(extractedNodeColors, index, label, colorMap, (_input_layout = input.layout) === null || _input_layout === void 0 ? void 0 : (_input_layout_template = _input_layout.template) === null || _input_layout_template === void 0 ? void 0 : (_input_layout_template_layout = _input_layout_template.layout) === null || _input_layout_template_layout === void 0 ? void 0 : _input_layout_template_layout.colorway, isDarkTheme);
             return {
                 nodeId: index,
                 name: label,
@@ -1220,9 +1224,9 @@ const transformPlotlyJsonToGaugeProps = (input, isMultiPlot, colorMap, colorwayT
     const extractedColors = (0, _PlotlyColorAdapter.extractColor)((_input_layout = input.layout) === null || _input_layout === void 0 ? void 0 : (_input_layout_template = _input_layout.template) === null || _input_layout_template === void 0 ? void 0 : (_input_layout_template_layout = _input_layout_template.layout) === null || _input_layout_template_layout === void 0 ? void 0 : _input_layout_template_layout.colorway, colorwayType, stepsColors, colorMap, isDarkTheme);
     var _firstData_gauge_axis_range_, _firstData_value, _firstData_gauge_axis_range_1, _firstData_value1;
     const segments = ((_firstData_gauge1 = firstData.gauge) === null || _firstData_gauge1 === void 0 ? void 0 : (_firstData_gauge_steps = _firstData_gauge1.steps) === null || _firstData_gauge_steps === void 0 ? void 0 : _firstData_gauge_steps.length) ? firstData.gauge.steps.map((step, index)=>{
-        var _step_range, _step_range1;
+        var _input_layout_template_layout, _input_layout_template, _input_layout, _step_range, _step_range1;
         const legend = step.name || `Segment ${index + 1}`;
-        const color = (0, _PlotlyColorAdapter.resolveColor)(extractedColors, index, legend, colorMap, isDarkTheme);
+        const color = (0, _PlotlyColorAdapter.resolveColor)(extractedColors, index, legend, colorMap, (_input_layout = input.layout) === null || _input_layout === void 0 ? void 0 : (_input_layout_template = _input_layout.template) === null || _input_layout_template === void 0 ? void 0 : (_input_layout_template_layout = _input_layout_template.layout) === null || _input_layout_template_layout === void 0 ? void 0 : _input_layout_template_layout.colorway, isDarkTheme);
         return {
             legend,
             size: ((_step_range = step.range) === null || _step_range === void 0 ? void 0 : _step_range[1]) - ((_step_range1 = step.range) === null || _step_range1 === void 0 ? void 0 : _step_range1[0]),
@@ -1245,16 +1249,16 @@ const transformPlotlyJsonToGaugeProps = (input, isMultiPlot, colorMap, colorwayT
     if ((_firstData_delta = firstData.delta) === null || _firstData_delta === void 0 ? void 0 : _firstData_delta.reference) {
         const diff = firstData.value - firstData.delta.reference;
         if (diff >= 0) {
-            var _input_layout_template_layout2, _input_layout_template2, _input_layout4, _firstData_delta_increasing, _firstData_delta1;
+            var _input_layout_template_layout2, _input_layout_template2, _input_layout4, _firstData_delta_increasing, _firstData_delta1, _input_layout_template_layout3, _input_layout_template3, _input_layout5;
             sublabel = `\u25B2 ${diff}`;
             const extractedIncreasingDeltaColors = (0, _PlotlyColorAdapter.extractColor)((_input_layout4 = input.layout) === null || _input_layout4 === void 0 ? void 0 : (_input_layout_template2 = _input_layout4.template) === null || _input_layout_template2 === void 0 ? void 0 : (_input_layout_template_layout2 = _input_layout_template2.layout) === null || _input_layout_template_layout2 === void 0 ? void 0 : _input_layout_template_layout2.colorway, colorwayType, (_firstData_delta1 = firstData.delta) === null || _firstData_delta1 === void 0 ? void 0 : (_firstData_delta_increasing = _firstData_delta1.increasing) === null || _firstData_delta_increasing === void 0 ? void 0 : _firstData_delta_increasing.color, colorMap, isDarkTheme);
-            const color = (0, _PlotlyColorAdapter.resolveColor)(extractedIncreasingDeltaColors, 0, '', colorMap, isDarkTheme);
+            const color = (0, _PlotlyColorAdapter.resolveColor)(extractedIncreasingDeltaColors, 0, '', colorMap, (_input_layout5 = input.layout) === null || _input_layout5 === void 0 ? void 0 : (_input_layout_template3 = _input_layout5.template) === null || _input_layout_template3 === void 0 ? void 0 : (_input_layout_template_layout3 = _input_layout_template3.layout) === null || _input_layout_template_layout3 === void 0 ? void 0 : _input_layout_template_layout3.colorway, isDarkTheme);
             sublabelColor = color;
         } else {
-            var _input_layout_template_layout3, _input_layout_template3, _input_layout5, _firstData_delta_decreasing, _firstData_delta2;
+            var _input_layout_template_layout4, _input_layout_template4, _input_layout6, _firstData_delta_decreasing, _firstData_delta2, _input_layout_template_layout5, _input_layout_template5, _input_layout7;
             sublabel = `\u25BC ${Math.abs(diff)}`;
-            const extractedDecreasingDeltaColors = (0, _PlotlyColorAdapter.extractColor)((_input_layout5 = input.layout) === null || _input_layout5 === void 0 ? void 0 : (_input_layout_template3 = _input_layout5.template) === null || _input_layout_template3 === void 0 ? void 0 : (_input_layout_template_layout3 = _input_layout_template3.layout) === null || _input_layout_template_layout3 === void 0 ? void 0 : _input_layout_template_layout3.colorway, colorwayType, (_firstData_delta2 = firstData.delta) === null || _firstData_delta2 === void 0 ? void 0 : (_firstData_delta_decreasing = _firstData_delta2.decreasing) === null || _firstData_delta_decreasing === void 0 ? void 0 : _firstData_delta_decreasing.color, colorMap, isDarkTheme);
-            const color = (0, _PlotlyColorAdapter.resolveColor)(extractedDecreasingDeltaColors, 0, '', colorMap, isDarkTheme);
+            const extractedDecreasingDeltaColors = (0, _PlotlyColorAdapter.extractColor)((_input_layout6 = input.layout) === null || _input_layout6 === void 0 ? void 0 : (_input_layout_template4 = _input_layout6.template) === null || _input_layout_template4 === void 0 ? void 0 : (_input_layout_template_layout4 = _input_layout_template4.layout) === null || _input_layout_template_layout4 === void 0 ? void 0 : _input_layout_template_layout4.colorway, colorwayType, (_firstData_delta2 = firstData.delta) === null || _firstData_delta2 === void 0 ? void 0 : (_firstData_delta_decreasing = _firstData_delta2.decreasing) === null || _firstData_delta_decreasing === void 0 ? void 0 : _firstData_delta_decreasing.color, colorMap, isDarkTheme);
+            const color = (0, _PlotlyColorAdapter.resolveColor)(extractedDecreasingDeltaColors, 0, '', colorMap, (_input_layout7 = input.layout) === null || _input_layout7 === void 0 ? void 0 : (_input_layout_template5 = _input_layout7.template) === null || _input_layout_template5 === void 0 ? void 0 : (_input_layout_template_layout5 = _input_layout_template5.layout) === null || _input_layout_template_layout5 === void 0 ? void 0 : _input_layout_template_layout5.colorway, isDarkTheme);
             sublabelColor = color;
         }
     }
@@ -1507,13 +1511,13 @@ const transformPlotlyJsonToFunnelChartProps = (input, isMultiPlot, colorMap, col
         // Assign a color per series/category and use it for all subValues of that category
         const seriesColors = {};
         input.data.forEach((series, seriesIdx)=>{
-            var _input_layout_template_layout, _input_layout_template, _input_layout, _series_marker, _series_marker1;
+            var _input_layout_template_layout, _input_layout_template, _input_layout, _series_marker, _series_marker1, _input_layout_template_layout1, _input_layout_template1, _input_layout1;
             const category = series.name || `Category ${seriesIdx + 1}`;
             var _series_marker_colors;
             // Use the same color for this category across all stages
             const extractedColors = (0, _PlotlyColorAdapter.extractColor)((_input_layout = input.layout) === null || _input_layout === void 0 ? void 0 : (_input_layout_template = _input_layout.template) === null || _input_layout_template === void 0 ? void 0 : (_input_layout_template_layout = _input_layout_template.layout) === null || _input_layout_template_layout === void 0 ? void 0 : _input_layout_template_layout.colorway, colorwayType, (_series_marker_colors = (_series_marker = series.marker) === null || _series_marker === void 0 ? void 0 : _series_marker.colors) !== null && _series_marker_colors !== void 0 ? _series_marker_colors : (_series_marker1 = series.marker) === null || _series_marker1 === void 0 ? void 0 : _series_marker1.color, colorMap, isDarkTheme);
             // Always use the first color for the series/category
-            const color = (0, _PlotlyColorAdapter.resolveColor)(extractedColors, 0, category, colorMap, isDarkTheme);
+            const color = (0, _PlotlyColorAdapter.resolveColor)(extractedColors, 0, category, colorMap, (_input_layout1 = input.layout) === null || _input_layout1 === void 0 ? void 0 : (_input_layout_template1 = _input_layout1.template) === null || _input_layout_template1 === void 0 ? void 0 : (_input_layout_template_layout1 = _input_layout_template1.layout) === null || _input_layout_template_layout1 === void 0 ? void 0 : _input_layout_template_layout1.colorway, isDarkTheme);
             seriesColors[category] = color;
             var _series_labels, _ref;
             const labels = (_ref = (_series_labels = series.labels) !== null && _series_labels !== void 0 ? _series_labels : series.y) !== null && _ref !== void 0 ? _ref : series.stage;
@@ -1561,7 +1565,8 @@ const transformPlotlyJsonToFunnelChartProps = (input, isMultiPlot, colorMap, col
             var _series_marker_colors;
             const extractedColors = (0, _PlotlyColorAdapter.extractColor)((_input_layout = input.layout) === null || _input_layout === void 0 ? void 0 : (_input_layout_template = _input_layout.template) === null || _input_layout_template === void 0 ? void 0 : (_input_layout_template_layout = _input_layout_template.layout) === null || _input_layout_template_layout === void 0 ? void 0 : _input_layout_template_layout.colorway, colorwayType, (_series_marker_colors = (_series_marker = series.marker) === null || _series_marker === void 0 ? void 0 : _series_marker.colors) !== null && _series_marker_colors !== void 0 ? _series_marker_colors : (_series_marker1 = series.marker) === null || _series_marker1 === void 0 ? void 0 : _series_marker1.color, colorMap, isDarkTheme);
             categories.forEach((label, i)=>{
-                const color = (0, _PlotlyColorAdapter.resolveColor)(extractedColors, i, label, colorMap, isDarkTheme);
+                var _input_layout_template_layout, _input_layout_template, _input_layout;
+                const color = (0, _PlotlyColorAdapter.resolveColor)(extractedColors, i, label, colorMap, (_input_layout = input.layout) === null || _input_layout === void 0 ? void 0 : (_input_layout_template = _input_layout.template) === null || _input_layout_template === void 0 ? void 0 : (_input_layout_template_layout = _input_layout_template.layout) === null || _input_layout_template_layout === void 0 ? void 0 : _input_layout_template_layout.colorway, isDarkTheme);
                 const valueNum = Number(values[i]);
                 if (isNaN(valueNum)) {
                     return;
@@ -1895,11 +1900,13 @@ const getAllupLegendsProps = (input, colorMap, colorwayType, traceInfo, isDarkTh
                 var _input_layout, _input_layout_template_layout, _input_layout_template, _input_layout1, _input_layout2, _pieSeries_marker, _pieSeries_labels;
                 const pieSeries = series;
                 var _input_layout_piecolorway, _input_layout_piecolorway1;
-                const colors = (0, _PlotlyColorAdapter.extractColor)((_input_layout_piecolorway = (_input_layout = input.layout) === null || _input_layout === void 0 ? void 0 : _input_layout.piecolorway) !== null && _input_layout_piecolorway !== void 0 ? _input_layout_piecolorway : (_input_layout1 = input.layout) === null || _input_layout1 === void 0 ? void 0 : (_input_layout_template = _input_layout1.template) === null || _input_layout_template === void 0 ? void 0 : (_input_layout_template_layout = _input_layout_template.layout) === null || _input_layout_template_layout === void 0 ? void 0 : _input_layout_template_layout.colorway, colorwayType, (_input_layout_piecolorway1 = (_input_layout2 = input.layout) === null || _input_layout2 === void 0 ? void 0 : _input_layout2.piecolorway) !== null && _input_layout_piecolorway1 !== void 0 ? _input_layout_piecolorway1 : pieSeries === null || pieSeries === void 0 ? void 0 : (_pieSeries_marker = pieSeries.marker) === null || _pieSeries_marker === void 0 ? void 0 : _pieSeries_marker.colors, colorMap, isDarkTheme);
+                const colors = (0, _PlotlyColorAdapter.extractColor)((_input_layout_piecolorway = (_input_layout = input.layout) === null || _input_layout === void 0 ? void 0 : _input_layout.piecolorway) !== null && _input_layout_piecolorway !== void 0 ? _input_layout_piecolorway : (_input_layout1 = input.layout) === null || _input_layout1 === void 0 ? void 0 : (_input_layout_template = _input_layout1.template) === null || _input_layout_template === void 0 ? void 0 : (_input_layout_template_layout = _input_layout_template.layout) === null || _input_layout_template_layout === void 0 ? void 0 : _input_layout_template_layout.colorway, colorwayType, (_input_layout_piecolorway1 = (_input_layout2 = input.layout) === null || _input_layout2 === void 0 ? void 0 : _input_layout2.piecolorway) !== null && _input_layout_piecolorway1 !== void 0 ? _input_layout_piecolorway1 : pieSeries === null || pieSeries === void 0 ? void 0 : (_pieSeries_marker = pieSeries.marker) === null || _pieSeries_marker === void 0 ? void 0 : _pieSeries_marker.colors, colorMap, isDarkTheme, true);
                 (_pieSeries_labels = pieSeries.labels) === null || _pieSeries_labels === void 0 ? void 0 : _pieSeries_labels.forEach((label, labelIndex)=>{
+                    var _input_layout, _input_layout_template_layout, _input_layout_template, _input_layout1;
                     const legend = `${label}`;
+                    var _input_layout_piecolorway;
                     // resolve color for each legend from the extracted colors
-                    const color = (0, _PlotlyColorAdapter.resolveColor)(colors, labelIndex, legend, colorMap, isDarkTheme);
+                    const color = (0, _PlotlyColorAdapter.resolveColor)(colors, labelIndex, legend, colorMap, (_input_layout_piecolorway = (_input_layout = input.layout) === null || _input_layout === void 0 ? void 0 : _input_layout.piecolorway) !== null && _input_layout_piecolorway !== void 0 ? _input_layout_piecolorway : (_input_layout1 = input.layout) === null || _input_layout1 === void 0 ? void 0 : (_input_layout_template = _input_layout1.template) === null || _input_layout_template === void 0 ? void 0 : (_input_layout_template_layout = _input_layout_template.layout) === null || _input_layout_template_layout === void 0 ? void 0 : _input_layout_template_layout.colorway, isDarkTheme, true);
                     if (legend !== '' && allupLegends.some((group)=>group.title === legend) === false) {
                         allupLegends.push({
                             title: legend,
@@ -2171,6 +2178,7 @@ const getGridProperties = (schema, isMultiPlot, validTracesInfo)=>{
         });
         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) {
+            result[propName] = 'data';
             return;
         }
         const isValidArray = (0, _chartutilities.isArrayOrTypedArray)(ax === null || ax === void 0 ? void 0 : ax.categoryarray) && ax.categoryarray.length > 0;
@@ -2180,7 +2188,7 @@ const getGridProperties = (schema, isMultiPlot, validTracesInfo)=>{
         }
         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;
+            result[propName] = (ax === null || ax === void 0 ? void 0 : ax.autorange) === 'reversed' ? categoriesInTraceOrder.reverse() : categoriesInTraceOrder;
             return;
         }
         result[propName] = ax.categoryorder;