@fluentui/react-charts 0.0.0-nightly-20251013-0407.1 → 0.0.0-nightly-20251015-0406.1

package/lib/components/DeclarativeChart/PlotlySchemaAdapter.js

@@ -178,7 +178,7 @@ const getSecondaryYAxisValues = (data, layout, maxAllowedMinY, minAllowedMaxY)=>
 };
 export const _getGaugeAxisColor = (colorway, colorwayType, color, colorMap, isDarkTheme)=>{
     const extractedColors = extractColor(colorway, colorwayType, color, colorMap, isDarkTheme);
-    return resolveColor(extractedColors, 0, '', colorMap, isDarkTheme);
+    return resolveColor(extractedColors, 0, '', colorMap, colorway, isDarkTheme);
 };
 export const resolveXAxisPoint = (x, isXYearCategory, isXString, isXDate, isXNumber)=>{
     if (x === null || x === undefined) {
@@ -320,54 +320,41 @@ export const transformPlotlyJsonToDonutProps = (input, isMultiPlot, colorMap, co
     // extract colors for each series only once
     // use piecolorway if available
     // otherwise, default to colorway from template
-    const colors = 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 = 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 (isInvalidValue(value) || value < 0) {
-                return;
-            }
-            const legend = `${label}`;
-            // resolve color for each legend from the extracted colors
-            const color = 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)=>!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 : 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)=>!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 = 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;
@@ -382,10 +369,25 @@ export const transformPlotlyJsonToDonutProps = (input, isMultiPlot, colorMap, co
     const donutMarginVertical = 40 + (hideLabels ? 0 : 40);
     const innerRadius = firstData.hole ? firstData.hole * (Math.min(width - donutMarginHorizontal, height - donutMarginVertical) / 2) : 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,
@@ -396,7 +398,8 @@ export const transformPlotlyJsonToDonutProps = (input, isMultiPlot, colorMap, co
             'percent',
             'label+percent'
         ].includes(firstData.textinfo) : true,
-        roundCorners: true
+        roundCorners: true,
+        order: 'sorted'
     };
 };
 export const transformPlotlyJsonToVSBCProps = (input, isMultiPlot, colorMap, colorwayType, isDarkTheme, fallbackVSBC)=>{
@@ -425,7 +428,7 @@ export const transformPlotlyJsonToVSBCProps = (input, isMultiPlot, colorMap, col
             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),
@@ -435,7 +438,7 @@ export const transformPlotlyJsonToVSBCProps = (input, isMultiPlot, colorMap, col
                 }
                 const legend = legends[index1];
                 // resolve color for each legend's bars from the colorscale or extracted colors
-                const color = colorScale ? colorScale(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) : resolveColor(extractedBarColors, index2, legend, colorMap, isDarkTheme);
+                const color = colorScale ? colorScale(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) : 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 = getOpacity(series, index2);
                 const yVal = rangeYValues[index2];
                 const yAxisCalloutData = getFormattedCalloutYData(yVal, yAxisTickFormat);
@@ -453,8 +456,8 @@ export const transformPlotlyJsonToVSBCProps = (input, isMultiPlot, colorMap, col
                         yMaxValue = Math.max(yMaxValue, yVal);
                     }
                 } else if (series.type === 'scatter' || !!fallbackVSBC) {
-                    var _series_mode;
-                    const lineColor = resolveColor(extractedLineColors, index1, legend, colorMap, isDarkTheme);
+                    var _input_layout_template_layout1, _input_layout_template1, _input_layout1, _series_mode;
+                    const lineColor = 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;
@@ -561,10 +564,10 @@ export const transformPlotlyJsonToGVBCProps = (input, isMultiPlot, colorMap, col
                 };
             }
             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(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) : resolveColor(extractedColors, index2, legend, colorMap, isDarkTheme);
+                const color = colorScale ? colorScale(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) : 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 = getOpacity(series, index2);
                 const yVal = series.y[index2];
                 var _rgb_copy_formatHex8;
@@ -645,10 +648,10 @@ export const transformPlotlyJsonToVBCProps = (input, isMultiPlot, colorMap, colo
             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(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) : resolveColor(extractedColors, index, legend, colorMap, isDarkTheme);
+            const color = colorScale ? colorScale(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) : 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 = getOpacity(series, index);
             const yVal = calculateHistNorm(series.histnorm, y[index], total, isXString ? bin.length : getBinSize(bin));
             var _rgb_copy_formatHex8;
@@ -710,7 +713,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 = 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);
@@ -722,7 +725,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 = resolveColor(extractedColors, index, legend, colorMap, isDarkTheme);
+        const seriesColor = 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 = getOpacity(series, index);
         mode = series.fill === 'tozeroy' ? 'tozeroy' : 'tonexty';
         // if mode contains 'text', we prioritize showing the text over curving the line
@@ -771,7 +774,8 @@ const transformPlotlyJsonToScatterTraceProps = (input, isMultiPlot, chartType, c
                         originXOffset: (_input_layout = input.layout) === null || _input_layout === void 0 ? void 0 : _input_layout.__polarOriginX,
                         direction: (_input_layout1 = input.layout) === null || _input_layout1 === void 0 ? void 0 : (_input_layout_polar = _input_layout1.polar) === null || _input_layout_polar === void 0 ? void 0 : (_input_layout_polar_angularaxis = _input_layout_polar.angularaxis) === null || _input_layout_polar_angularaxis === void 0 ? void 0 : _input_layout_polar_angularaxis.direction,
                         rotation: (_input_layout2 = input.layout) === null || _input_layout2 === void 0 ? void 0 : (_input_layout_polar1 = _input_layout2.polar) === null || _input_layout_polar1 === void 0 ? void 0 : (_input_layout_polar_angularaxis1 = _input_layout_polar1.angularaxis) === null || _input_layout_polar_angularaxis1 === void 0 ? void 0 : _input_layout_polar_angularaxis1.rotation,
-                        axisLabel: series.__axisLabel ? series.__axisLabel : {}
+                        axisLabel: series.__axisLabel ? series.__axisLabel : {},
+                        fill: series.fill
                     } : {}
                 },
                 useSecondaryYScale: usesSecondaryYScale(series, input.layout)
@@ -838,12 +842,12 @@ export const transformPlotlyJsonToHorizontalBarWithAxisProps = (input, isMultiPl
         const extractedColors = 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 (isInvalidValue((_series_x = series.x) === null || _series_x === void 0 ? void 0 : _series_x[i]) || isInvalidValue(yValue)) {
                 return null;
             }
             // resolve color for each legend's bars from the colorscale or extracted colors
-            const color = colorScale ? colorScale(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) : resolveColor(extractedColors, i, legend, colorMap, isDarkTheme);
+            const color = colorScale ? colorScale(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) : 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 = getOpacity(series, i);
             var _rgb_copy_formatHex8;
             return {
@@ -901,12 +905,12 @@ export const transformPlotlyJsonToGanttChartProps = (input, isMultiPlot, colorMa
             return 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 (isInvalidValue(yVal)) {
                 return null;
             }
             // resolve color for each legend's bars from the colorscale or extracted colors
-            const color = colorScale ? colorScale(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) : resolveColor(extractedColors, i, legend, colorMap, isDarkTheme);
+            const color = colorScale ? colorScale(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) : 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 = 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]);
@@ -1095,7 +1099,8 @@ export const transformPlotlyJsonToSankeyProps = (input, isMultiPlot, colorMap, c
     const extractedNodeColors = 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 = resolveColor(extractedNodeColors, index, label, colorMap, isDarkTheme);
+            var _input_layout_template_layout, _input_layout_template, _input_layout;
+            const color = 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,
@@ -1132,9 +1137,9 @@ export const transformPlotlyJsonToGaugeProps = (input, isMultiPlot, colorMap, co
     const extractedColors = 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 = resolveColor(extractedColors, index, legend, colorMap, isDarkTheme);
+        const color = 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]),
@@ -1157,16 +1162,16 @@ export const transformPlotlyJsonToGaugeProps = (input, isMultiPlot, colorMap, co
     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 = 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 = resolveColor(extractedIncreasingDeltaColors, 0, '', colorMap, isDarkTheme);
+            const color = 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 = 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 = resolveColor(extractedDecreasingDeltaColors, 0, '', colorMap, isDarkTheme);
+            const extractedDecreasingDeltaColors = 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 = 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;
         }
     }
@@ -1419,13 +1424,13 @@ export const transformPlotlyJsonToFunnelChartProps = (input, isMultiPlot, colorM
         // 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 = 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 = resolveColor(extractedColors, 0, category, colorMap, isDarkTheme);
+            const color = 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;
@@ -1473,7 +1478,8 @@ export const transformPlotlyJsonToFunnelChartProps = (input, isMultiPlot, colorM
             var _series_marker_colors;
             const extractedColors = 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 = resolveColor(extractedColors, i, label, colorMap, isDarkTheme);
+                var _input_layout_template_layout, _input_layout_template, _input_layout;
+                const color = 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;
@@ -1812,11 +1818,13 @@ export const getAllupLegendsProps = (input, colorMap, colorwayType, traceInfo, i
                 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 = 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 = 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 = resolveColor(colors, labelIndex, legend, colorMap, isDarkTheme);
+                    const color = 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,
@@ -2088,6 +2096,7 @@ export const getGridProperties = (schema, isMultiPlot, validTracesInfo)=>{
         });
         const isAxisTypeCategory = (ax === null || ax === void 0 ? void 0 : ax.type) === 'category' || isStringArray(values) && !isNumberArray(values) && !isDateArray(values);
         if (!isAxisTypeCategory) {
+            result[propName] = 'data';
             return;
         }
         const isValidArray = isArrayOrTypedArray(ax === null || ax === void 0 ? void 0 : ax.categoryarray) && ax.categoryarray.length > 0;
@@ -2097,7 +2106,7 @@ export 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;