@fluentui/react-charting 5.24.26 → 5.24.28

package/lib/components/DeclarativeChart/PlotlySchemaAdapter.js

@@ -183,7 +183,7 @@ var getSecondaryYAxisValues = function (data, layout, maxAllowedMinY, minAllowed
 };
 export var _getGaugeAxisColor = function (colorway, colorwayType, color, colorMap, isDarkTheme) {
     var extractedColors = extractColor(colorway, colorwayType, color, colorMap, isDarkTheme);
-    return resolveColor(extractedColors, 0, '', colorMap, isDarkTheme);
+    return resolveColor(extractedColors, 0, '', colorMap, colorway, isDarkTheme);
 };
 export var resolveXAxisPoint = function (x, isXYearCategory, isXString, isXDate, isXNumber) {
     if (x === null || x === undefined) {
@@ -328,57 +328,41 @@ export var transformPlotlyJsonToDonutProps = function (input, isMultiPlot, color
     // extract colors for each series only once
     // use piecolorway if available
     // otherwise, default to colorway from template
-    var colors = extractColor((_b = (_a = input.layout) === null || _a === void 0 ? void 0 : _a.piecolorway) !== null && _b !== void 0 ? _b : (_e = (_d = (_c = input.layout) === null || _c === void 0 ? void 0 : _c.template) === null || _d === void 0 ? void 0 : _d.layout) === null || _e === void 0 ? void 0 : _e.colorway, colorwayType, (_g = (_f = input.layout) === null || _f === void 0 ? void 0 : _f.piecolorway) !== null && _g !== void 0 ? _g : (_h = firstData === null || firstData === void 0 ? void 0 : firstData.marker) === null || _h === void 0 ? void 0 : _h.colors, colorMap, isDarkTheme);
+    var colors = extractColor((_b = (_a = input.layout) === null || _a === void 0 ? void 0 : _a.piecolorway) !== null && _b !== void 0 ? _b : (_e = (_d = (_c = input.layout) === null || _c === void 0 ? void 0 : _c.template) === null || _d === void 0 ? void 0 : _d.layout) === null || _e === void 0 ? void 0 : _e.colorway, colorwayType, (_g = (_f = input.layout) === null || _f === void 0 ? void 0 : _f.piecolorway) !== null && _g !== void 0 ? _g : (_h = firstData === null || firstData === void 0 ? void 0 : firstData.marker) === null || _h === void 0 ? void 0 : _h.colors, colorMap, isDarkTheme, true);
     var mapLegendToDataPoint = {};
-    if (colors) {
-        (_j = firstData.labels) === null || _j === void 0 ? void 0 : _j.forEach(function (label, index) {
-            var value = getNumberAtIndexOrDefault(firstData.values, index);
-            if (isInvalidValue(value) || value < 0) {
-                return;
-            }
-            var legend = "".concat(label);
-            // resolve color for each legend from the extracted colors
-            var 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 markerColors_1 = ((_j = firstData.marker) === null || _j === void 0 ? void 0 : _j.colors) || undefined;
+        var hasMarkerColors_1 = Array.isArray(markerColors_1) && markerColors_1.length >= firstData.labels.length;
+        var labelValuePairs = firstData.labels.map(function (label, index) { return ({
+            label: label,
+            value: getNumberAtIndexOrDefault(firstData.values, index),
+            index: index,
+            color: hasMarkerColors_1 ? markerColors_1[index] : undefined,
+        }); });
+        // Filter out invalid values
+        var validPairs = labelValuePairs.filter(function (pair) { return !isInvalidValue(pair.value); });
+        // Sort descending by value; when marker colors are present, keep color attached to the label
+        validPairs.sort(function (a, b) { return b.value - a.value; });
+        validPairs.forEach(function (pair, sortedIdx) {
+            var _a, _b, _c, _d, _e, _f;
+            var legend = "".concat(pair.label);
+            var color = (_a = pair.color) !== null && _a !== void 0 ? _a : resolveColor(colors, sortedIdx, legend, colorMap, (_c = (_b = input.layout) === null || _b === void 0 ? void 0 : _b.piecolorway) !== null && _c !== void 0 ? _c : (_f = (_e = (_d = input.layout) === null || _d === void 0 ? void 0 : _d.template) === null || _e === void 0 ? void 0 : _e.layout) === null || _f === void 0 ? void 0 : _f.colorway, isDarkTheme, true);
             if (!mapLegendToDataPoint[legend]) {
                 mapLegendToDataPoint[legend] = {
                     legend: legend,
-                    data: value,
+                    data: pair.value,
                     color: color,
                 };
             }
             else {
-                mapLegendToDataPoint[legend].data += value;
+                mapLegendToDataPoint[legend].data += pair.value;
             }
         });
     }
-    else {
-        // Sort labels by value descending before mapping
-        if (firstData.labels && firstData.values) {
-            var labelValuePairs = firstData.labels.map(function (label, index) { return ({
-                label: label,
-                value: getNumberAtIndexOrDefault(firstData.values, index),
-                index: index,
-            }); });
-            // Filter out invalid values
-            var validPairs = labelValuePairs.filter(function (pair) { return !isInvalidValue(pair.value); });
-            // Sort descending by value
-            validPairs.sort(function (a, b) { return b.value - a.value; });
-            validPairs.forEach(function (pair, sortedIdx) {
-                var legend = "".concat(pair.label);
-                var color = resolveColor(colors, sortedIdx, legend, colorMap, isDarkTheme);
-                if (!mapLegendToDataPoint[legend]) {
-                    mapLegendToDataPoint[legend] = {
-                        legend: legend,
-                        data: pair.value,
-                        color: color,
-                    };
-                }
-                else {
-                    mapLegendToDataPoint[legend].data += pair.value;
-                }
-            });
-        }
-    }
     var width = (_l = (_k = input.layout) === null || _k === void 0 ? void 0 : _k.width) !== null && _l !== void 0 ? _l : 440;
     var height = (_o = (_m = input.layout) === null || _m === void 0 ? void 0 : _m.height) !== null && _o !== void 0 ? _o : 220;
     var hideLabels = firstData.textinfo
@@ -390,10 +374,23 @@ export var transformPlotlyJsonToDonutProps = function (input, isMultiPlot, color
         ? firstData.hole * (Math.min(width - donutMarginHorizontal, height - donutMarginVertical) / 2)
         : MIN_DONUT_RADIUS;
     var chartTitle = getTitles(input.layout).chartTitle;
+    // Build anticlockwise order by keeping the first item, reversing the rest
+    var legends = Object.keys(mapLegendToDataPoint);
+    var reorderedEntries = legends.length > 1
+        ? __spreadArray([
+            [legends[0], mapLegendToDataPoint[legends[0]]]
+        ], legends
+            .slice(1)
+            .reverse()
+            .map(function (key) { return [key, mapLegendToDataPoint[key]]; }), true)
+        : legends.map(function (key) { return [key, mapLegendToDataPoint[key]]; });
     return {
         data: {
             chartTitle: chartTitle,
-            chartData: Object.values(mapLegendToDataPoint),
+            chartData: reorderedEntries.map(function (_a) {
+                var v = _a[1];
+                return v;
+            }),
         },
         hideLegend: isMultiPlot || ((_p = input.layout) === null || _p === void 0 ? void 0 : _p.showlegend) === false,
         width: (_q = input.layout) === null || _q === void 0 ? void 0 : _q.width,
@@ -402,6 +399,7 @@ export var transformPlotlyJsonToDonutProps = function (input, isMultiPlot, color
         hideLabels: hideLabels,
         showLabelsInPercent: firstData.textinfo ? ['percent', 'label+percent'].includes(firstData.textinfo) : true,
         roundCorners: true,
+        order: 'sorted',
     };
 };
 export var transformPlotlyJsonToVSBCProps = function (input, isMultiPlot, colorMap, colorwayType, isDarkTheme, fallbackVSBC) {
@@ -431,7 +429,7 @@ export var transformPlotlyJsonToVSBCProps = function (input, isMultiPlot, colorM
             var rangeXValues = series.x.slice(rangeStart, rangeEnd);
             var rangeYValues = series.y.slice(rangeStart, rangeEnd);
             rangeXValues.forEach(function (x, index2) {
-                var _a, _b, _c, _d, _e, _f;
+                var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
                 if (!mapXToDataPoints[x]) {
                     mapXToDataPoints[x] = {
                         xAxisPoint: resolveXAxisPoint(x, isXYearCategory, isXString, isXDate, isXNumber),
@@ -445,7 +443,7 @@ export var transformPlotlyJsonToVSBCProps = function (input, isMultiPlot, colorM
                     ? colorScale(isArrayOrTypedArray((_a = series.marker) === null || _a === void 0 ? void 0 : _a.color)
                         ? (_c = (_b = series.marker) === null || _b === void 0 ? void 0 : _b.color) === null || _c === void 0 ? void 0 : _c[index2 % ((_d = series.marker) === null || _d === void 0 ? void 0 : _d.color).length]
                         : 0)
-                    : resolveColor(extractedBarColors, index2, legend, colorMap, isDarkTheme);
+                    : resolveColor(extractedBarColors, index2, legend, colorMap, (_g = (_f = (_e = input.layout) === null || _e === void 0 ? void 0 : _e.template) === null || _f === void 0 ? void 0 : _f.layout) === null || _g === void 0 ? void 0 : _g.colorway, isDarkTheme);
                 var opacity = getOpacity(series, index2);
                 var yVal = rangeYValues[index2];
                 var yAxisCalloutData = getFormattedCalloutYData(yVal, yAxisTickFormat);
@@ -453,7 +451,7 @@ export var transformPlotlyJsonToVSBCProps = function (input, isMultiPlot, colorM
                     mapXToDataPoints[x].chartData.push({
                         legend: legend,
                         data: yVal,
-                        color: (_e = rgb(color).copy({ opacity: opacity }).formatHex8()) !== null && _e !== void 0 ? _e : color,
+                        color: (_h = rgb(color).copy({ opacity: opacity }).formatHex8()) !== null && _h !== void 0 ? _h : color,
                         yAxisCalloutData: yAxisCalloutData,
                     });
                     if (typeof yVal === 'number') {
@@ -461,14 +459,14 @@ export var transformPlotlyJsonToVSBCProps = function (input, isMultiPlot, colorM
                     }
                 }
                 else if (series.type === 'scatter' || !!fallbackVSBC) {
-                    var lineColor = resolveColor(extractedLineColors, index1, legend, colorMap, isDarkTheme);
+                    var lineColor = resolveColor(extractedLineColors, index1, legend, colorMap, (_l = (_k = (_j = input.layout) === null || _j === void 0 ? void 0 : _j.template) === null || _k === void 0 ? void 0 : _k.layout) === null || _l === void 0 ? void 0 : _l.colorway, isDarkTheme);
                     var lineOptions = getLineOptions(series.line);
                     var legendShape = getLegendShape(series);
                     mapXToDataPoints[x].lineData.push({
                         legend: legend + (validXYRanges.length > 1 ? ".".concat(rangeIdx + 1) : ''),
                         legendShape: legendShape,
                         y: yVal,
-                        color: (_f = rgb(lineColor).copy({ opacity: opacity }).formatHex8()) !== null && _f !== void 0 ? _f : color,
+                        color: (_m = rgb(lineColor).copy({ opacity: opacity }).formatHex8()) !== null && _m !== void 0 ? _m : color,
                         lineOptions: __assign(__assign({}, (lineOptions !== null && lineOptions !== void 0 ? lineOptions : {})), { mode: series.mode }),
                         useSecondaryYScale: usesSecondaryYScale(series, input.layout),
                         yAxisCalloutData: yAxisCalloutData,
@@ -518,7 +516,7 @@ export var transformPlotlyJsonToGVBCProps = function (input, isMultiPlot, colorM
         // extract colors for each series only once
         var extractedColors = extractColor((_c = (_b = (_a = processedInput.layout) === null || _a === void 0 ? void 0 : _a.template) === null || _b === void 0 ? void 0 : _b.layout) === null || _c === void 0 ? void 0 : _c.colorway, colorwayType, (_d = series.marker) === null || _d === void 0 ? void 0 : _d.color, colorMap, isDarkTheme);
         (_e = series.x) === null || _e === void 0 ? void 0 : _e.forEach(function (x, xIndex) {
-            var _a, _b, _c, _d, _e, _f;
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j;
             if (isInvalidValue(x) || isInvalidValue((_a = series.y) === null || _a === void 0 ? void 0 : _a[xIndex])) {
                 return;
             }
@@ -532,14 +530,14 @@ export var transformPlotlyJsonToGVBCProps = function (input, isMultiPlot, colorM
                     ? colorScale(isArrayOrTypedArray((_b = series.marker) === null || _b === void 0 ? void 0 : _b.color)
                         ? (_d = (_c = series.marker) === null || _c === void 0 ? void 0 : _c.color) === null || _d === void 0 ? void 0 : _d[xIndex % ((_e = series.marker) === null || _e === void 0 ? void 0 : _e.color).length]
                         : 0)
-                    : resolveColor(extractedColors, xIndex, legend, colorMap, isDarkTheme);
+                    : resolveColor(extractedColors, xIndex, legend, colorMap, (_h = (_g = (_f = processedInput.layout) === null || _f === void 0 ? void 0 : _f.template) === null || _g === void 0 ? void 0 : _g.layout) === null || _h === void 0 ? void 0 : _h.colorway, isDarkTheme);
                 var opacity = getOpacity(series, xIndex);
                 var yVal = series.y[xIndex];
                 mapXToDataPoints[x].series.push({
                     key: legend,
                     data: yVal,
                     xAxisCalloutData: x,
-                    color: (_f = rgb(color).copy({ opacity: opacity }).formatHex8()) !== null && _f !== void 0 ? _f : color,
+                    color: (_j = rgb(color).copy({ opacity: opacity }).formatHex8()) !== null && _j !== void 0 ? _j : color,
                     legend: legend,
                     useSecondaryYScale: usesSecondaryYScale(series, processedInput.layout),
                     yAxisCalloutData: getFormattedCalloutYData(yVal, yAxisTickFormat),
@@ -591,17 +589,17 @@ export var transformPlotlyJsonToVBCProps = function (input, isMultiPlot, colorMa
             return yVal;
         });
         xBins.forEach(function (bin, index) {
-            var _a, _b, _c, _d, _e;
+            var _a, _b, _c, _d, _e, _f, _g, _h;
             var legend = legends[seriesIdx];
             // resolve color for each legend's bars from the colorscale or extracted colors
             var color = colorScale
                 ? colorScale(isArrayOrTypedArray((_a = series.marker) === null || _a === void 0 ? void 0 : _a.color)
                     ? (_c = (_b = series.marker) === null || _b === void 0 ? void 0 : _b.color) === null || _c === void 0 ? void 0 : _c[index % ((_d = series.marker) === null || _d === void 0 ? void 0 : _d.color).length]
                     : 0)
-                : resolveColor(extractedColors, index, legend, colorMap, isDarkTheme);
+                : resolveColor(extractedColors, index, legend, colorMap, (_g = (_f = (_e = input.layout) === null || _e === void 0 ? void 0 : _e.template) === null || _f === void 0 ? void 0 : _f.layout) === null || _g === void 0 ? void 0 : _g.colorway, isDarkTheme);
             var opacity = getOpacity(series, index);
             var yVal = calculateHistNorm(series.histnorm, y[index], total, isXString ? bin.length : getBinSize(bin));
-            vbcData.push(__assign({ x: isXString ? bin.join(', ') : getBinCenter(bin), y: yVal, legend: legend, color: (_e = rgb(color).copy({ opacity: opacity }).formatHex8()) !== null && _e !== void 0 ? _e : color }, (isXString
+            vbcData.push(__assign({ x: isXString ? bin.join(', ') : getBinCenter(bin), y: yVal, legend: legend, color: (_h = rgb(color).copy({ opacity: opacity }).formatHex8()) !== null && _h !== void 0 ? _h : color }, (isXString
                 ? {}
                 : { xAxisCalloutData: "[".concat(bin.x0, " - ").concat(bin.x1, ")") })));
         });
@@ -637,7 +635,7 @@ var transformPlotlyJsonToScatterTraceProps = function (input, isMultiPlot, chart
     var yAxisTickFormat = getYAxisTickFormat(input.data[0], input.layout);
     var chartData = input.data
         .map(function (series, index) {
-        var _a, _b, _c, _d, _e, _f, _g, _h;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
         var colors = isScatterMarkers
             ? ((_a = series === null || series === void 0 ? void 0 : series.mode) === null || _a === void 0 ? void 0 : _a.includes('line'))
                 ? (_b = series.line) === null || _b === void 0 ? void 0 : _b.color
@@ -652,11 +650,11 @@ var transformPlotlyJsonToScatterTraceProps = function (input, isMultiPlot, chart
         var isXYearCategory = isYearArray(series.x); // Consider year as categorical not numeric continuous axis
         var legend = legends[index];
         // resolve color for each legend's lines from the extracted colors
-        var seriesColor = resolveColor(extractedColors, index, legend, colorMap, isDarkTheme);
+        var seriesColor = resolveColor(extractedColors, index, legend, colorMap, (_k = (_j = (_h = input.layout) === null || _h === void 0 ? void 0 : _h.template) === null || _j === void 0 ? void 0 : _j.layout) === null || _k === void 0 ? void 0 : _k.colorway, isDarkTheme);
         var seriesOpacity = getOpacity(series, index);
         mode = series.fill === 'tozeroy' ? 'tozeroy' : 'tonexty';
         // if mode contains 'text', we prioritize showing the text over curving the line
-        var lineOptions = !((_h = series.mode) === null || _h === void 0 ? void 0 : _h.includes('text')) && series.type !== 'scatterpolar' ? getLineOptions(series.line) : undefined;
+        var lineOptions = !((_l = series.mode) === null || _l === void 0 ? void 0 : _l.includes('text')) && series.type !== 'scatterpolar' ? getLineOptions(series.line) : undefined;
         var legendShape = getLegendShape(series);
         var validXYRanges = getValidXYRanges(series);
         return validXYRanges.map(function (_a, rangeIdx) {
@@ -730,7 +728,7 @@ export var transformPlotlyJsonToHorizontalBarWithAxisProps = function (input, is
         var legend = legends[index];
         return series.y
             .map(function (yValue, i) {
-            var _a, _b, _c, _d, _e, _f;
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j;
             if (isInvalidValue((_a = series.x) === null || _a === void 0 ? void 0 : _a[i]) || isInvalidValue(yValue)) {
                 return null;
             }
@@ -739,13 +737,13 @@ export var transformPlotlyJsonToHorizontalBarWithAxisProps = function (input, is
                 ? colorScale(isArrayOrTypedArray((_b = series.marker) === null || _b === void 0 ? void 0 : _b.color)
                     ? (_d = (_c = series.marker) === null || _c === void 0 ? void 0 : _c.color) === null || _d === void 0 ? void 0 : _d[i % ((_e = series.marker) === null || _e === void 0 ? void 0 : _e.color).length]
                     : 0)
-                : resolveColor(extractedColors, i, legend, colorMap, isDarkTheme);
+                : resolveColor(extractedColors, i, legend, colorMap, (_h = (_g = (_f = input.layout) === null || _f === void 0 ? void 0 : _f.template) === null || _g === void 0 ? void 0 : _g.layout) === null || _h === void 0 ? void 0 : _h.colorway, isDarkTheme);
             var opacity = getOpacity(series, i);
             return {
                 x: series.x[i],
                 y: yValue,
                 legend: legend,
-                color: (_f = rgb(color).copy({ opacity: opacity }).formatHex8()) !== null && _f !== void 0 ? _f : color,
+                color: (_j = rgb(color).copy({ opacity: opacity }).formatHex8()) !== null && _j !== void 0 ? _j : color,
             };
         })
             .filter(function (point) { return point !== null; });
@@ -781,7 +779,7 @@ export var transformPlotlyJsonToGanttChartProps = function (input, isMultiPlot,
         };
         return series.y
             .map(function (yVal, i) {
-            var _a, _b, _c, _d, _e, _f, _g;
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
             if (isInvalidValue(yVal)) {
                 return null;
             }
@@ -790,10 +788,10 @@ export var transformPlotlyJsonToGanttChartProps = function (input, isMultiPlot,
                 ? colorScale(isArrayOrTypedArray((_a = series.marker) === null || _a === void 0 ? void 0 : _a.color)
                     ? (_c = (_b = series.marker) === null || _b === void 0 ? void 0 : _b.color) === null || _c === void 0 ? void 0 : _c[i % ((_d = series.marker) === null || _d === void 0 ? void 0 : _d.color).length]
                     : 0)
-                : resolveColor(extractedColors, i, legend, colorMap, isDarkTheme);
+                : resolveColor(extractedColors, i, legend, colorMap, (_g = (_f = (_e = input.layout) === null || _e === void 0 ? void 0 : _e.template) === null || _f === void 0 ? void 0 : _f.layout) === null || _g === void 0 ? void 0 : _g.colorway, isDarkTheme);
             var opacity = getOpacity(series, i);
-            var base = convertXValueToNumber((_e = series.base) === null || _e === void 0 ? void 0 : _e[i]);
-            var xVal = convertXValueToNumber((_f = series.x) === null || _f === void 0 ? void 0 : _f[i]);
+            var base = convertXValueToNumber((_h = series.base) === null || _h === void 0 ? void 0 : _h[i]);
+            var xVal = convertXValueToNumber((_j = series.x) === null || _j === void 0 ? void 0 : _j[i]);
             return {
                 x: {
                     start: isXDate ? new Date(base) : base,
@@ -801,7 +799,7 @@ export var transformPlotlyJsonToGanttChartProps = function (input, isMultiPlot,
                 },
                 y: yVal,
                 legend: legend,
-                color: (_g = rgb(color).copy({ opacity: opacity }).formatHex8()) !== null && _g !== void 0 ? _g : color,
+                color: (_k = rgb(color).copy({ opacity: opacity }).formatHex8()) !== null && _k !== void 0 ? _k : color,
             };
         })
             .filter(function (point) { return point !== null; });
@@ -943,7 +941,8 @@ export var transformPlotlyJsonToSankeyProps = function (input, isMultiPlot, colo
     var extractedNodeColors = extractColor((_d = (_c = (_b = input.layout) === null || _b === void 0 ? void 0 : _b.template) === null || _c === void 0 ? void 0 : _c.layout) === null || _d === void 0 ? void 0 : _d.colorway, colorwayType, node === null || node === void 0 ? void 0 : node.color, colorMap, isDarkTheme);
     var sankeyChartData = {
         nodes: (_e = node.label) === null || _e === void 0 ? void 0 : _e.map(function (label, index) {
-            var color = resolveColor(extractedNodeColors, index, label, colorMap, isDarkTheme);
+            var _a, _b, _c;
+            var color = resolveColor(extractedNodeColors, index, label, colorMap, (_c = (_b = (_a = input.layout) === null || _a === void 0 ? void 0 : _a.template) === null || _b === void 0 ? void 0 : _b.layout) === null || _c === void 0 ? void 0 : _c.colorway, isDarkTheme);
             return {
                 nodeId: index,
                 name: label,
@@ -971,19 +970,19 @@ export var transformPlotlyJsonToSankeyProps = function (input, isMultiPlot, colo
     };
 };
 export var transformPlotlyJsonToGaugeProps = function (input, isMultiPlot, colorMap, colorwayType, isDarkTheme) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14, _15, _16, _17, _18, _19, _20, _21, _22, _23, _24, _25;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14, _15, _16, _17, _18, _19, _20, _21, _22, _23, _24, _25, _26, _27, _28, _29, _30, _31;
     var firstData = input.data[0];
     var stepsColors = ((_a = firstData.gauge) === null || _a === void 0 ? void 0 : _a.steps) ? firstData.gauge.steps.map(function (step) { return step.color; }) : undefined;
     var extractedColors = extractColor((_d = (_c = (_b = input.layout) === null || _b === void 0 ? void 0 : _b.template) === null || _c === void 0 ? void 0 : _c.layout) === null || _d === void 0 ? void 0 : _d.colorway, colorwayType, stepsColors, colorMap, isDarkTheme);
     var segments = ((_f = (_e = firstData.gauge) === null || _e === void 0 ? void 0 : _e.steps) === null || _f === void 0 ? void 0 : _f.length)
         ? // eslint-disable-next-line @typescript-eslint/no-explicit-any
             firstData.gauge.steps.map(function (step, index) {
-                var _a, _b;
+                var _a, _b, _c, _d, _e;
                 var legend = step.name || "Segment ".concat(index + 1);
-                var color = resolveColor(extractedColors, index, legend, colorMap, isDarkTheme);
+                var color = resolveColor(extractedColors, index, legend, colorMap, (_c = (_b = (_a = input.layout) === null || _a === void 0 ? void 0 : _a.template) === null || _b === void 0 ? void 0 : _b.layout) === null || _c === void 0 ? void 0 : _c.colorway, isDarkTheme);
                 return {
                     legend: legend,
-                    size: ((_a = step.range) === null || _a === void 0 ? void 0 : _a[1]) - ((_b = step.range) === null || _b === void 0 ? void 0 : _b[0]),
+                    size: ((_d = step.range) === null || _d === void 0 ? void 0 : _d[1]) - ((_e = step.range) === null || _e === void 0 ? void 0 : _e[0]),
                     color: color,
                 };
             })
@@ -1006,13 +1005,13 @@ export var transformPlotlyJsonToGaugeProps = function (input, isMultiPlot, color
         if (diff >= 0) {
             sublabel = "\u25B2 ".concat(diff);
             var extractedIncreasingDeltaColors = extractColor((_0 = (_z = (_y = input.layout) === null || _y === void 0 ? void 0 : _y.template) === null || _z === void 0 ? void 0 : _z.layout) === null || _0 === void 0 ? void 0 : _0.colorway, colorwayType, (_2 = (_1 = firstData.delta) === null || _1 === void 0 ? void 0 : _1.increasing) === null || _2 === void 0 ? void 0 : _2.color, colorMap, isDarkTheme);
-            var color = resolveColor(extractedIncreasingDeltaColors, 0, '', colorMap, isDarkTheme);
+            var color = resolveColor(extractedIncreasingDeltaColors, 0, '', colorMap, (_5 = (_4 = (_3 = input.layout) === null || _3 === void 0 ? void 0 : _3.template) === null || _4 === void 0 ? void 0 : _4.layout) === null || _5 === void 0 ? void 0 : _5.colorway, isDarkTheme);
             sublabelColor = color;
         }
         else {
             sublabel = "\u25BC ".concat(Math.abs(diff));
-            var extractedDecreasingDeltaColors = extractColor((_5 = (_4 = (_3 = input.layout) === null || _3 === void 0 ? void 0 : _3.template) === null || _4 === void 0 ? void 0 : _4.layout) === null || _5 === void 0 ? void 0 : _5.colorway, colorwayType, (_7 = (_6 = firstData.delta) === null || _6 === void 0 ? void 0 : _6.decreasing) === null || _7 === void 0 ? void 0 : _7.color, colorMap, isDarkTheme);
-            var color = resolveColor(extractedDecreasingDeltaColors, 0, '', colorMap, isDarkTheme);
+            var extractedDecreasingDeltaColors = extractColor((_8 = (_7 = (_6 = input.layout) === null || _6 === void 0 ? void 0 : _6.template) === null || _7 === void 0 ? void 0 : _7.layout) === null || _8 === void 0 ? void 0 : _8.colorway, colorwayType, (_10 = (_9 = firstData.delta) === null || _9 === void 0 ? void 0 : _9.decreasing) === null || _10 === void 0 ? void 0 : _10.color, colorMap, isDarkTheme);
+            var color = resolveColor(extractedDecreasingDeltaColors, 0, '', colorMap, (_13 = (_12 = (_11 = input.layout) === null || _11 === void 0 ? void 0 : _11.template) === null || _12 === void 0 ? void 0 : _12.layout) === null || _13 === void 0 ? void 0 : _13.colorway, isDarkTheme);
             sublabelColor = color;
         }
     }
@@ -1024,17 +1023,17 @@ export var transformPlotlyJsonToGaugeProps = function (input, isMultiPlot, color
     var chartTitle = getTitles(input.layout).chartTitle;
     return {
         segments: segments,
-        chartValue: (_8 = firstData.value) !== null && _8 !== void 0 ? _8 : 0,
+        chartValue: (_14 = firstData.value) !== null && _14 !== void 0 ? _14 : 0,
         chartTitle: chartTitle,
         sublabel: sublabel,
         // range values can be null
-        minValue: typeof ((_11 = (_10 = (_9 = firstData.gauge) === null || _9 === void 0 ? void 0 : _9.axis) === null || _10 === void 0 ? void 0 : _10.range) === null || _11 === void 0 ? void 0 : _11[0]) === 'number' ? (_14 = (_13 = (_12 = firstData.gauge) === null || _12 === void 0 ? void 0 : _12.axis) === null || _13 === void 0 ? void 0 : _13.range) === null || _14 === void 0 ? void 0 : _14[0] : undefined,
-        maxValue: typeof ((_17 = (_16 = (_15 = firstData.gauge) === null || _15 === void 0 ? void 0 : _15.axis) === null || _16 === void 0 ? void 0 : _16.range) === null || _17 === void 0 ? void 0 : _17[1]) === 'number' ? (_20 = (_19 = (_18 = firstData.gauge) === null || _18 === void 0 ? void 0 : _18.axis) === null || _19 === void 0 ? void 0 : _19.range) === null || _20 === void 0 ? void 0 : _20[1] : undefined,
+        minValue: typeof ((_17 = (_16 = (_15 = firstData.gauge) === null || _15 === void 0 ? void 0 : _15.axis) === null || _16 === void 0 ? void 0 : _16.range) === null || _17 === void 0 ? void 0 : _17[0]) === 'number' ? (_20 = (_19 = (_18 = firstData.gauge) === null || _18 === void 0 ? void 0 : _18.axis) === null || _19 === void 0 ? void 0 : _19.range) === null || _20 === void 0 ? void 0 : _20[0] : undefined,
+        maxValue: typeof ((_23 = (_22 = (_21 = firstData.gauge) === null || _21 === void 0 ? void 0 : _21.axis) === null || _22 === void 0 ? void 0 : _22.range) === null || _23 === void 0 ? void 0 : _23[1]) === 'number' ? (_26 = (_25 = (_24 = firstData.gauge) === null || _24 === void 0 ? void 0 : _24.axis) === null || _25 === void 0 ? void 0 : _25.range) === null || _26 === void 0 ? void 0 : _26[1] : undefined,
         chartValueFormat: function () { var _a, _b; return (_b = (_a = firstData.value) === null || _a === void 0 ? void 0 : _a.toString()) !== null && _b !== void 0 ? _b : ''; },
-        width: (_21 = input.layout) === null || _21 === void 0 ? void 0 : _21.width,
-        height: (_23 = (_22 = input.layout) === null || _22 === void 0 ? void 0 : _22.height) !== null && _23 !== void 0 ? _23 : 220,
+        width: (_27 = input.layout) === null || _27 === void 0 ? void 0 : _27.width,
+        height: (_29 = (_28 = input.layout) === null || _28 === void 0 ? void 0 : _28.height) !== null && _29 !== void 0 ? _29 : 220,
         styles: styles,
-        variant: ((_25 = (_24 = firstData.gauge) === null || _24 === void 0 ? void 0 : _24.steps) === null || _25 === void 0 ? void 0 : _25.length) ? GaugeChartVariant.MultipleSegments : GaugeChartVariant.SingleSegment,
+        variant: ((_31 = (_30 = firstData.gauge) === null || _30 === void 0 ? void 0 : _30.steps) === null || _31 === void 0 ? void 0 : _31.length) ? GaugeChartVariant.MultipleSegments : GaugeChartVariant.SingleSegment,
         roundCorners: true,
     };
 };
@@ -1069,6 +1068,17 @@ var formatValue = function (value, colIndex, cells) {
     }
     return "".concat(prefix !== null && prefix !== void 0 ? prefix : '').concat(formatted).concat(suffix !== null && suffix !== void 0 ? suffix : '');
 };
+function resolveCellStyle(raw, rowIndex, colIndex) {
+    var _a, _b;
+    if (Array.isArray(raw)) {
+        var rowEntry = (_a = raw[colIndex]) !== null && _a !== void 0 ? _a : raw[0];
+        if (Array.isArray(rowEntry)) {
+            return (_b = rowEntry[rowIndex]) !== null && _b !== void 0 ? _b : rowEntry[0];
+        }
+        return rowEntry;
+    }
+    return raw;
+}
 export var transformPlotlyJsonToChartTableProps = function (input, isMultiPlot, colorMap, colorwayType, isDarkTheme) {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
     var tableData = input.data[0];
@@ -1082,41 +1092,13 @@ export var transformPlotlyJsonToChartTableProps = function (input, isMultiPlot,
             })
             : values.map(function (cell) { return cleanText(cell); });
         return cleanedValues.map(function (value, colIndex) {
-            var _a, _b, _c, _d, _e, _f, _g, _h;
-            var fontColorRaw = (_a = header === null || header === void 0 ? void 0 : header.font) === null || _a === void 0 ? void 0 : _a.color;
-            var fontColor;
-            if (Array.isArray(fontColorRaw)) {
-                var colorEntry = (_b = fontColorRaw[colIndex]) !== null && _b !== void 0 ? _b : fontColorRaw[0];
-                if (Array.isArray(colorEntry)) {
-                    fontColor = typeof colorEntry[0] === 'string' ? colorEntry[0] : undefined;
-                }
-                else if (typeof colorEntry === 'string') {
-                    fontColor = colorEntry;
-                }
-            }
-            else if (typeof fontColorRaw === 'string') {
-                fontColor = fontColorRaw;
-            }
-            var fontSizeRaw = (_c = header === null || header === void 0 ? void 0 : header.font) === null || _c === void 0 ? void 0 : _c.size;
-            var fontSize;
-            if (Array.isArray(fontSizeRaw)) {
-                var fontSizeEntry = (_d = fontSizeRaw[colIndex]) !== null && _d !== void 0 ? _d : fontSizeRaw[0];
-                fontSize = Array.isArray(fontSizeRaw[0])
-                    ? (_e = fontSizeRaw[0][colIndex]) !== null && _e !== void 0 ? _e : fontSizeRaw[0][0]
-                    : typeof fontSizeEntry === 'number'
-                        ? fontSizeEntry
-                        : undefined;
-            }
-            else if (typeof fontSizeRaw === 'number') {
-                fontSize = fontSizeRaw;
-            }
-            var updatedColIndex = colIndex >= 1 ? 1 : 0;
-            var fillColorRaw = (_f = header === null || header === void 0 ? void 0 : header.fill) === null || _f === void 0 ? void 0 : _f.color;
-            var backgroundColor = Array.isArray(fillColorRaw)
-                ? (_g = fillColorRaw[updatedColIndex]) !== null && _g !== void 0 ? _g : fillColorRaw[0]
-                : fillColorRaw;
-            var textAlignRaw = header === null || header === void 0 ? void 0 : header.align;
-            var textAlign = Array.isArray(textAlignRaw) ? (_h = textAlignRaw[colIndex]) !== null && _h !== void 0 ? _h : textAlignRaw[0] : textAlignRaw;
+            var _a, _b, _c;
+            //headers are at first row only
+            var rowIndex = 0;
+            var fontColor = resolveCellStyle((_a = header === null || header === void 0 ? void 0 : header.font) === null || _a === void 0 ? void 0 : _a.color, rowIndex, colIndex);
+            var fontSize = resolveCellStyle((_b = header === null || header === void 0 ? void 0 : header.font) === null || _b === void 0 ? void 0 : _b.size, rowIndex, colIndex);
+            var backgroundColor = resolveCellStyle((_c = header === null || header === void 0 ? void 0 : header.fill) === null || _c === void 0 ? void 0 : _c.color, rowIndex, colIndex);
+            var textAlign = resolveCellStyle(header === null || header === void 0 ? void 0 : header.align, rowIndex, colIndex);
             var style = __assign(__assign(__assign(__assign({}, (typeof fontColor === 'string' ? { color: fontColor } : {})), (typeof fontSize === 'number' ? { fontSize: fontSize } : {})), (typeof backgroundColor === 'string' ? { backgroundColor: backgroundColor } : {})), (textAlign ? { textAlign: textAlign } : {}));
             return { value: value, style: style };
         });
@@ -1127,45 +1109,16 @@ export var transformPlotlyJsonToChartTableProps = function (input, isMultiPlot,
         : (_g = (_f = (_e = (_d = (_c = input.layout) === null || _c === void 0 ? void 0 : _c.template) === null || _d === void 0 ? void 0 : _d.data) === null || _e === void 0 ? void 0 : _e.table) === null || _f === void 0 ? void 0 : _f[0]) === null || _g === void 0 ? void 0 : _g.cells;
     var rows = columns[0].map(function (_, rowIndex) {
         return columns.map(function (col, colIndex) {
-            var _a, _b, _c, _d, _e, _f, _g;
+            var _a, _b, _c;
             var cellValue = col[rowIndex];
             var cleanValue = typeof cellValue === 'string' ? cleanText(cellValue) : cellValue;
             var formattedValue = typeof cleanValue === 'string' || typeof cleanValue === 'number'
                 ? formatValue(cleanValue, colIndex, cells)
                 : cleanValue;
-            var rawFontColor = (_a = cells === null || cells === void 0 ? void 0 : cells.font) === null || _a === void 0 ? void 0 : _a.color;
-            var fontColor;
-            if (Array.isArray(rawFontColor)) {
-                var entry = (_b = rawFontColor[colIndex]) !== null && _b !== void 0 ? _b : rawFontColor[0];
-                var colorValue = Array.isArray(entry) ? entry[rowIndex] : entry;
-                fontColor = typeof colorValue === 'string' ? colorValue : undefined;
-            }
-            else if (typeof rawFontColor === 'string') {
-                fontColor = rawFontColor;
-            }
-            var rawFontSize = (_c = cells === null || cells === void 0 ? void 0 : cells.font) === null || _c === void 0 ? void 0 : _c.size;
-            var fontSize;
-            if (Array.isArray(rawFontSize)) {
-                var entry = (_d = rawFontSize[colIndex]) !== null && _d !== void 0 ? _d : rawFontSize[0];
-                var fontSizeValue = Array.isArray(entry) ? entry[rowIndex] : entry;
-                fontSize = typeof fontSizeValue === 'number' ? fontSizeValue : undefined;
-            }
-            else if (typeof rawFontSize === 'number') {
-                fontSize = rawFontSize;
-            }
-            var updatedColIndex = colIndex >= 1 ? 1 : 0;
-            var rawBackgroundColor = (_e = cells === null || cells === void 0 ? void 0 : cells.fill) === null || _e === void 0 ? void 0 : _e.color;
-            var backgroundColor;
-            if (Array.isArray(rawBackgroundColor)) {
-                var entry = (_f = rawBackgroundColor[updatedColIndex]) !== null && _f !== void 0 ? _f : rawBackgroundColor[0];
-                var colorValue = Array.isArray(entry) ? entry[rowIndex] : entry;
-                backgroundColor = typeof colorValue === 'string' ? colorValue : undefined;
-            }
-            else if (typeof rawBackgroundColor === 'string') {
-                backgroundColor = rawBackgroundColor;
-            }
-            var rawTextAlign = Array.isArray(cells === null || cells === void 0 ? void 0 : cells.align) ? (_g = cells.align[colIndex]) !== null && _g !== void 0 ? _g : cells.align[0] : cells === null || cells === void 0 ? void 0 : cells.align;
-            var textAlign = rawTextAlign;
+            var fontColor = resolveCellStyle((_a = cells === null || cells === void 0 ? void 0 : cells.font) === null || _a === void 0 ? void 0 : _a.color, rowIndex, colIndex);
+            var fontSize = resolveCellStyle((_b = cells === null || cells === void 0 ? void 0 : cells.font) === null || _b === void 0 ? void 0 : _b.size, rowIndex, colIndex);
+            var backgroundColor = resolveCellStyle((_c = cells === null || cells === void 0 ? void 0 : cells.fill) === null || _c === void 0 ? void 0 : _c.color, rowIndex, colIndex);
+            var textAlign = resolveCellStyle(cells === null || cells === void 0 ? void 0 : cells.align, rowIndex, colIndex);
             var style = __assign(__assign(__assign(__assign({}, (fontColor ? { color: fontColor } : {})), (typeof fontSize === 'number' ? { fontSize: fontSize } : {})), (backgroundColor ? { backgroundColor: backgroundColor } : {})), (textAlign ? { textAlign: textAlign } : {}));
             return {
                 value: formattedValue,
@@ -1243,15 +1196,15 @@ export var transformPlotlyJsonToFunnelChartProps = function (input, isMultiPlot,
         // Assign a color per series/category and use it for all subValues of that category
         var seriesColors_1 = {};
         input.data.forEach(function (series, seriesIdx) {
-            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
             var category = series.name || "Category ".concat(seriesIdx + 1);
             // Use the same color for this category across all stages
             var extractedColors = extractColor((_c = (_b = (_a = input.layout) === null || _a === void 0 ? void 0 : _a.template) === null || _b === void 0 ? void 0 : _b.layout) === null || _c === void 0 ? void 0 : _c.colorway, colorwayType, (_e = (_d = series.marker) === null || _d === void 0 ? void 0 : _d.colors) !== null && _e !== void 0 ? _e : (_f = series.marker) === null || _f === void 0 ? void 0 : _f.color, colorMap, isDarkTheme);
             // Always use the first color for the series/category
-            var color = resolveColor(extractedColors, 0, category, colorMap, isDarkTheme);
+            var color = resolveColor(extractedColors, 0, category, colorMap, (_j = (_h = (_g = input.layout) === null || _g === void 0 ? void 0 : _g.template) === null || _h === void 0 ? void 0 : _h.layout) === null || _j === void 0 ? void 0 : _j.colorway, isDarkTheme);
             seriesColors_1[category] = color;
-            var labels = (_h = (_g = series.labels) !== null && _g !== void 0 ? _g : series.y) !== null && _h !== void 0 ? _h : series.stage;
-            var values = (_k = (_j = series.values) !== null && _j !== void 0 ? _j : series.x) !== null && _k !== void 0 ? _k : series.value;
+            var labels = (_l = (_k = series.labels) !== null && _k !== void 0 ? _k : series.y) !== null && _l !== void 0 ? _l : series.stage;
+            var values = (_o = (_m = series.values) !== null && _m !== void 0 ? _m : series.x) !== null && _o !== void 0 ? _o : series.value;
             if (!isArrayOrTypedArray(labels) || !isArrayOrTypedArray(values)) {
                 return;
             }
@@ -1285,7 +1238,8 @@ export var transformPlotlyJsonToFunnelChartProps = function (input, isMultiPlot,
             }
             var extractedColors = extractColor((_c = (_b = (_a = input.layout) === null || _a === void 0 ? void 0 : _a.template) === null || _b === void 0 ? void 0 : _b.layout) === null || _c === void 0 ? void 0 : _c.colorway, colorwayType, (_e = (_d = series.marker) === null || _d === void 0 ? void 0 : _d.colors) !== null && _e !== void 0 ? _e : (_f = series.marker) === null || _f === void 0 ? void 0 : _f.color, colorMap, isDarkTheme);
             categories.forEach(function (label, i) {
-                var color = resolveColor(extractedColors, i, label, colorMap, isDarkTheme);
+                var _a, _b, _c;
+                var color = resolveColor(extractedColors, i, label, colorMap, (_c = (_b = (_a = input.layout) === null || _a === void 0 ? void 0 : _a.template) === null || _b === void 0 ? void 0 : _b.layout) === null || _c === void 0 ? void 0 : _c.colorway, isDarkTheme);
                 var valueNum = Number(values[i]);
                 if (isNaN(valueNum)) {
                     return;
@@ -1619,11 +1573,12 @@ export var getAllupLegendsProps = function (input, colorMap, colorwayType, trace
             var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
             if (traceInfo[index].type === 'donut') {
                 var pieSeries = series;
-                var colors_1 = extractColor((_b = (_a = input.layout) === null || _a === void 0 ? void 0 : _a.piecolorway) !== null && _b !== void 0 ? _b : (_e = (_d = (_c = input.layout) === null || _c === void 0 ? void 0 : _c.template) === null || _d === void 0 ? void 0 : _d.layout) === null || _e === void 0 ? void 0 : _e.colorway, colorwayType, (_g = (_f = input.layout) === null || _f === void 0 ? void 0 : _f.piecolorway) !== null && _g !== void 0 ? _g : (_h = pieSeries === null || pieSeries === void 0 ? void 0 : pieSeries.marker) === null || _h === void 0 ? void 0 : _h.colors, colorMap, isDarkTheme);
+                var colors_1 = extractColor((_b = (_a = input.layout) === null || _a === void 0 ? void 0 : _a.piecolorway) !== null && _b !== void 0 ? _b : (_e = (_d = (_c = input.layout) === null || _c === void 0 ? void 0 : _c.template) === null || _d === void 0 ? void 0 : _d.layout) === null || _e === void 0 ? void 0 : _e.colorway, colorwayType, (_g = (_f = input.layout) === null || _f === void 0 ? void 0 : _f.piecolorway) !== null && _g !== void 0 ? _g : (_h = pieSeries === null || pieSeries === void 0 ? void 0 : pieSeries.marker) === null || _h === void 0 ? void 0 : _h.colors, colorMap, isDarkTheme, true);
                 (_j = pieSeries.labels) === null || _j === void 0 ? void 0 : _j.forEach(function (label, labelIndex) {
+                    var _a, _b, _c, _d, _e;
                     var legend = "".concat(label);
                     // resolve color for each legend from the extracted colors
-                    var color = resolveColor(colors_1, labelIndex, legend, colorMap, isDarkTheme);
+                    var color = resolveColor(colors_1, labelIndex, legend, colorMap, (_b = (_a = input.layout) === null || _a === void 0 ? void 0 : _a.piecolorway) !== null && _b !== void 0 ? _b : (_e = (_d = (_c = input.layout) === null || _c === void 0 ? void 0 : _c.template) === null || _d === void 0 ? void 0 : _d.layout) === null || _e === void 0 ? void 0 : _e.colorway, isDarkTheme, true);
                     if (legend !== '' && allupLegends.some(function (group) { return group.title === legend; }) === false) {
                         allupLegends.push({
                             title: legend,