npm - @fluentui/react-charting - Versions diffs - 5.24.26 → 5.24.28 - Mend

@fluentui/react-charting 5.24.26 → 5.24.28

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (41) hide show

package/lib-commonjs/components/DeclarativeChart/PlotlyColorAdapter.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"PlotlyColorAdapter.js","sourceRoot":"../src/","sources":["components/DeclarativeChart/PlotlyColorAdapter.ts"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { color as d3Color } from 'd3-color';\nimport type { PieColors, Color, PlotData, Layout } from '@fluentui/chart-utilities';\nimport { isArrayOrTypedArray } from '@fluentui/chart-utilities';\nimport { areArraysEqual } from '../../utilities/utilities';\nimport { DataVizPalette, getColorFromToken, getNextColor } from '../../utilities/colors';\nimport { scaleLinear as d3ScaleLinear } from 'd3-scale';\n\ntype PlotlyColorway = 'plotly' \| 'others';\n\n// The color sequences in plotly express are defined here:\n// https://plotly.com/python/discrete-color/#:~:text=Join%20now.-,Color%20Sequences%20in%20Plotly%20Express,-By%20default%2C%20Plotly\nexport type ColorwayType = 'default' \| 'builtin' \| 'others' \| undefined;\n\nconst DEFAULT_PLOTLY_COLORWAY = [\n '#636efa', //1\n '#ef553b', //2\n '#00cc96', //3\n '#ab63fa', //4\n '#ffa15a', //5\n '#19d3f3', //6\n '#ff6692', //7\n '#b6e880', //8\n '#ff97ff', //9\n '#fecb52', //10\n];\n\nconst PLOTLY_FLUENTVIZ_COLORWAY_MAPPING = [\n DataVizPalette.color1, //1\n DataVizPalette.warning, //2\n DataVizPalette.color8, //3\n DataVizPalette.color4, //4\n DataVizPalette.color7, //5\n DataVizPalette.color6, //6\n DataVizPalette.color2, //7\n DataVizPalette.color5, //8\n DataVizPalette.color9, //9\n DataVizPalette.color10, //10\n];\n\nfunction getPlotlyColorway(colorway: string[] \| undefined): PlotlyColorway {\n const isPlotlyColorway =\n isArrayOrTypedArray(colorway) &&\n areArraysEqual(\n colorway?.map(c => c.toLowerCase()),\n DEFAULT_PLOTLY_COLORWAY,\n );\n\n return isPlotlyColorway ? 'plotly' : 'others';\n}\n\nfunction tryMapFluentDataViz(hexColor: string, templateColorway: PlotlyColorway, isDarkTheme?: boolean): string {\n if (templateColorway !== 'plotly') {\n return hexColor;\n }\n const index = DEFAULT_PLOTLY_COLORWAY.indexOf(hexColor.toLowerCase());\n if (index !== -1) {\n return getColorFromToken(PLOTLY_FLUENTVIZ_COLORWAY_MAPPING[index], isDarkTheme);\n }\n return hexColor;\n}\n\nexport const getColor = (\n legendLabel: string,\n colorMap: React.MutableRefObject<Map<string, string>>,\n isDarkTheme?: boolean,\n): string => {\n if (!colorMap.current.has(legendLabel)) {\n let nextColor: string;\n if (colorMap.current.size < PLOTLY_FLUENTVIZ_COLORWAY_MAPPING.length) {\n // Get first 10 colors from plotly-fluentviz colorway mapping\n nextColor = getColorFromToken(PLOTLY_FLUENTVIZ_COLORWAY_MAPPING[colorMap.current.size], isDarkTheme);\n } else {\n nextColor = getNextColor(colorMap.current.size, 0, isDarkTheme);\n }\n colorMap.current.set(legendLabel, nextColor);\n return nextColor;\n }\n\n return colorMap.current.get(legendLabel) as string;\n};\n\nexport const getSchemaColors = (\n colorway: string[] \| undefined,\n colors: PieColors \| Color \| Color[] \| string \| null \| undefined,\n colorMap: React.MutableRefObject<Map<string, string>>,\n isDarkTheme?: boolean,\n): string[] \| string \| undefined => {\n const hexColors: string[] = [];\n if (!colors) {\n return undefined;\n }\n const templateColorway = getPlotlyColorway(colorway);\n if (isArrayOrTypedArray(colors)) {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n (colors as any[]).forEach((element, index) => {\n const colorString = element?.toString().trim();\n const nextFluentColor = getColor(`Label_${index}`, colorMap, isDarkTheme);\n if (colorString) {\n const parsedColor = d3Color(colorString);\n hexColors.push(\n parsedColor ? tryMapFluentDataViz(parsedColor.formatHex(), templateColorway, isDarkTheme) : nextFluentColor,\n );\n } else {\n hexColors.push(nextFluentColor);\n }\n });\n } else if (typeof colors === 'string') {\n const parsedColor = d3Color(colors);\n return parsedColor\n ? tryMapFluentDataViz(parsedColor.formatHex(), templateColorway, isDarkTheme)\n : getColor('Label_0', colorMap, isDarkTheme);\n }\n return hexColors;\n};\n\nexport const extractColor = (\n colorway: string[] \| undefined,\n colorwayType: ColorwayType,\n colors: PieColors \| Color \| Color[] \| string \| null \| undefined,\n colorMap: React.MutableRefObject<Map<string, string>>,\n isDarkTheme?: boolean,\n): string \| string[] \| undefined => {\n return colorwayType === 'default' && colors ? getSchemaColors(colorway, colors, colorMap, isDarkTheme) : undefined;\n};\n\nexport const resolveColor = (\n extractedColors: string[] \| string \| null \| undefined,\n index: number,\n legend: string,\n colorMap: React.MutableRefObject<Map<string, string>>,\n isDarkTheme?: boolean,\n): string => {\n let color = '';\n if (extractedColors && isArrayOrTypedArray(extractedColors) && extractedColors.length > 0) {\n color = extractedColors[index % extractedColors.length];\n } else if (typeof extractedColors === 'string') {\n color = extractedColors;\n } else {\n color = getColor(legend, colorMap, isDarkTheme);\n }\n return color;\n};\n\nexport const getOpacity = (series: Partial<PlotData>, index: number): number => {\n return series.marker?.opacity\n ? isArrayOrTypedArray(series.marker?.opacity)\n ? (series.marker?.opacity as number[])[index % (series.marker?.opacity as number[]).length]\n : (series.marker?.opacity as number)\n : series.opacity ?? 1;\n};\n\nexport const createColorScale = (\n layout: Partial<Layout> \| undefined,\n series: Partial<PlotData>,\n currentColorScale: ((value: number) => string) \| undefined,\n) => {\n if (\n layout?.coloraxis?.colorscale?.length &&\n isArrayOrTypedArray(series.marker?.color) &&\n (series.marker?.color as Color[]).length > 0 &&\n typeof (series.marker?.color as Color[])?.[0] === 'number'\n ) {\n const scale = layout?.coloraxis?.colorscale as Array<[number, string]>;\n const colorValues = series.marker?.color as number[];\n const [dMin, dMax] = [\n layout?.coloraxis?.cmin ?? Math.min(...colorValues),\n layout?.coloraxis?.cmax ?? Math.max(...colorValues),\n ];\n\n // Normalize colorscale domain to actual data domain\n const scaleDomain = scale.map(([pos]) => dMin + pos * (dMax - dMin));\n const scaleColors = scale.map(item => item[1]);\n\n return d3ScaleLinear<string>().domain(scaleDomain).range(scaleColors);\n }\n return currentColorScale;\n};\n"]}
1	+ {"version":3,"file":"PlotlyColorAdapter.js","sourceRoot":"../src/","sources":["components/DeclarativeChart/PlotlyColorAdapter.ts"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { color as d3Color } from 'd3-color';\nimport type { PieColors, Color, PlotData, Layout } from '@fluentui/chart-utilities';\nimport { isArrayOrTypedArray } from '@fluentui/chart-utilities';\nimport { areArraysEqual } from '../../utilities/utilities';\nimport { DataVizPalette, getColorFromToken, getNextColor } from '../../utilities/colors';\nimport { scaleLinear as d3ScaleLinear } from 'd3-scale';\n\ntype PlotlyColorway = 'plotly' \| 'd3' \| 'others';\n\n// The color sequences in plotly express are defined here:\n// https://plotly.com/python/discrete-color/#:~:text=Join%20now.-,Color%20Sequences%20in%20Plotly%20Express,-By%20default%2C%20Plotly\nexport type ColorwayType = 'default' \| 'builtin' \| 'others' \| undefined;\n\nconst DEFAULT_PLOTLY_COLORWAY = [\n '#636efa', //1\n '#ef553b', //2\n '#00cc96', //3\n '#ab63fa', //4\n '#ffa15a', //5\n '#19d3f3', //6\n '#ff6692', //7\n '#b6e880', //8\n '#ff97ff', //9\n '#fecb52', //10\n];\n\n// Default D3 qualitative colorway (Category10), matching Plotly Express px.colors.qualitative.D3\n// Source: https://plotly.com/python/discrete-color/#:~:text=Join%20now.-,Color%20Sequences%20in%20Plotly%20Express,-By%20default%2C%20Plotly\nexport const DEFAULT_D3_COLORWAY = [\n '#1f77b4', //1\n '#ff7f0e', //2\n '#2ca02c', //3\n '#d62728', //4\n '#9467bd', //5\n '#8c564b', //6\n '#e377c2', //7\n '#7f7f7f', //8\n '#bcbd22', //9\n '#17becf', //10\n];\n\nconst PLOTLY_FLUENTVIZ_COLORWAY_MAPPING = [\n DataVizPalette.color1, //1\n DataVizPalette.warning, //2\n DataVizPalette.color8, //3\n DataVizPalette.color4, //4\n DataVizPalette.color7, //5\n DataVizPalette.color6, //6\n DataVizPalette.color2, //7\n DataVizPalette.color5, //8\n DataVizPalette.color9, //9\n DataVizPalette.color10, //10\n];\n\n// Mapping from D3 Category10 order to Fluent DataViz tokens (light/dark handled via getColorFromToken)\n// D3: [blue, orange, green, red, purple, brown, pink, gray, olive, cyan]\nexport const D3_FLUENTVIZ_COLORWAY_MAPPING: string[] = [\n DataVizPalette.color26, // blue -> lightBlue.shade10\n DataVizPalette.warning, // orange -> semantic warning\n DataVizPalette.color5, // green -> lightGreen.primary\n DataVizPalette.error, // red -> semantic error\n DataVizPalette.color4, // purple -> orchid.tint10\n DataVizPalette.color17, // brown -> pumpkin.shade20\n DataVizPalette.color22, // pink -> hotPink.tint20\n DataVizPalette.disabled, // gray -> semantic disabled\n DataVizPalette.color10, // olive/yellow-green -> gold.shade10\n DataVizPalette.color3, // cyan/teal -> teal.tint20\n];\n\nfunction getPlotlyColorway(colorway: string[] \| undefined, isDonut: boolean = false): PlotlyColorway {\n if (!colorway \|\| !isArrayOrTypedArray(colorway)) {\n return 'others';\n }\n const lower = colorway.map(c => c.toLowerCase());\n if (isDonut && areArraysEqual(lower, D3_FLUENTVIZ_COLORWAY_MAPPING)) {\n return 'd3';\n }\n if (areArraysEqual(lower, DEFAULT_PLOTLY_COLORWAY)) {\n return 'plotly';\n }\n return 'others';\n}\n\nfunction tryMapFluentDataViz(\n hexColor: string,\n templateColorway: PlotlyColorway,\n isDarkTheme?: boolean,\n isDonut?: boolean,\n): string {\n if (templateColorway !== 'plotly') {\n return hexColor;\n }\n let defaultColorway: string[] = DEFAULT_PLOTLY_COLORWAY;\n let defaultMapping: string[] = PLOTLY_FLUENTVIZ_COLORWAY_MAPPING;\n if (isDonut) {\n defaultColorway = templateColorway === 'plotly' ? DEFAULT_PLOTLY_COLORWAY : DEFAULT_D3_COLORWAY;\n defaultMapping = templateColorway === 'plotly' ? PLOTLY_FLUENTVIZ_COLORWAY_MAPPING : D3_FLUENTVIZ_COLORWAY_MAPPING;\n }\n const idx = defaultColorway.indexOf(hexColor.toLowerCase());\n if (idx !== -1) {\n return getColorFromToken(defaultMapping[idx], !!isDarkTheme);\n }\n return hexColor;\n}\n\nexport const getColor = (\n legendLabel: string,\n colorMap: React.MutableRefObject<Map<string, string>>,\n templateColorway: PlotlyColorway,\n isDarkTheme?: boolean,\n isDonut?: boolean,\n): string => {\n if (!colorMap.current.has(legendLabel)) {\n let nextColor: string;\n const defaultColorMapping = isDonut\n ? templateColorway === 'plotly'\n ? PLOTLY_FLUENTVIZ_COLORWAY_MAPPING\n : D3_FLUENTVIZ_COLORWAY_MAPPING\n : PLOTLY_FLUENTVIZ_COLORWAY_MAPPING;\n if (colorMap.current.size < defaultColorMapping.length) {\n // Get first 10 colors from plotly-fluentviz colorway mapping\n nextColor = getColorFromToken(defaultColorMapping[colorMap.current.size], isDarkTheme);\n } else {\n nextColor = getNextColor(colorMap.current.size, 0, isDarkTheme);\n }\n colorMap.current.set(legendLabel, nextColor);\n return nextColor;\n }\n\n return colorMap.current.get(legendLabel) as string;\n};\n\nexport const getSchemaColors = (\n colorway: string[] \| undefined,\n colors: PieColors \| Color \| Color[] \| string \| null \| undefined,\n colorMap: React.MutableRefObject<Map<string, string>>,\n isDarkTheme?: boolean,\n isDonut?: boolean,\n): string[] \| string \| undefined => {\n const hexColors: string[] = [];\n if (!colors) {\n return undefined;\n }\n const templateColorway = getPlotlyColorway(colorway, isDonut);\n if (isArrayOrTypedArray(colors)) {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n (colors as any[]).forEach((element, index) => {\n const colorString = element?.toString().trim();\n const nextFluentColor = getColor(`Label_${index}`, colorMap, templateColorway, isDarkTheme, isDonut);\n if (colorString) {\n const parsedColor = d3Color(colorString);\n hexColors.push(\n parsedColor ? tryMapFluentDataViz(parsedColor.formatHex(), templateColorway, isDarkTheme) : nextFluentColor,\n );\n } else {\n hexColors.push(nextFluentColor);\n }\n });\n } else if (typeof colors === 'string') {\n const parsedColor = d3Color(colors);\n return parsedColor\n ? tryMapFluentDataViz(parsedColor.formatHex(), templateColorway, isDarkTheme)\n : getColor('Label_0', colorMap, templateColorway, isDarkTheme, isDonut);\n }\n return hexColors;\n};\n\nexport const extractColor = (\n colorway: string[] \| undefined,\n colorwayType: ColorwayType,\n colors: PieColors \| Color \| Color[] \| string \| null \| undefined,\n colorMap: React.MutableRefObject<Map<string, string>>,\n isDarkTheme?: boolean,\n isDonut?: boolean,\n): string \| string[] \| undefined => {\n return colorwayType === 'default' && colors\n ? getSchemaColors(colorway, colors, colorMap, isDarkTheme, isDonut)\n : undefined;\n};\n\nexport const resolveColor = (\n extractedColors: string[] \| string \| null \| undefined,\n index: number,\n legend: string,\n colorMap: React.MutableRefObject<Map<string, string>>,\n colorway: string[] \| undefined,\n isDarkTheme?: boolean,\n isDonut?: boolean,\n): string => {\n let color = '';\n const templateColorway = getPlotlyColorway(colorway, isDonut);\n if (extractedColors && isArrayOrTypedArray(extractedColors) && extractedColors.length > 0) {\n color = extractedColors[index % extractedColors.length];\n } else if (typeof extractedColors === 'string') {\n color = extractedColors;\n } else {\n color = getColor(legend, colorMap, templateColorway, isDarkTheme, isDonut);\n }\n return color;\n};\n\nexport const getOpacity = (series: Partial<PlotData>, index: number): number => {\n return series.marker?.opacity\n ? isArrayOrTypedArray(series.marker?.opacity)\n ? (series.marker?.opacity as number[])[index % (series.marker?.opacity as number[]).length]\n : (series.marker?.opacity as number)\n : series.opacity ?? 1;\n};\n\nexport const createColorScale = (\n layout: Partial<Layout> \| undefined,\n series: Partial<PlotData>,\n currentColorScale: ((value: number) => string) \| undefined,\n) => {\n if (\n layout?.coloraxis?.colorscale?.length &&\n isArrayOrTypedArray(series.marker?.color) &&\n (series.marker?.color as Color[]).length > 0 &&\n typeof (series.marker?.color as Color[])?.[0] === 'number'\n ) {\n const scale = layout?.coloraxis?.colorscale as Array<[number, string]>;\n const colorValues = series.marker?.color as number[];\n const [dMin, dMax] = [\n layout?.coloraxis?.cmin ?? Math.min(...colorValues),\n layout?.coloraxis?.cmax ?? Math.max(...colorValues),\n ];\n\n // Normalize colorscale domain to actual data domain\n const scaleDomain = scale.map(([pos]) => dMin + pos * (dMax - dMin));\n const scaleColors = scale.map(item => item[1]);\n\n return d3ScaleLinear<string>().domain(scaleDomain).range(scaleColors);\n }\n return currentColorScale;\n};\n"]}

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

@@ -188,7 +188,7 @@ var getSecondaryYAxisValues = function (data, layout, maxAllowedMinY, minAllowed
 };
 var _getGaugeAxisColor = function (colorway, colorwayType, color, colorMap, isDarkTheme) {
     var extractedColors = (0, PlotlyColorAdapter_1.extractColor)(colorway, colorwayType, color, colorMap, isDarkTheme);
-    return (0, PlotlyColorAdapter_1.resolveColor)(extractedColors, 0, '', colorMap, isDarkTheme);
+    return (0, PlotlyColorAdapter_1.resolveColor)(extractedColors, 0, '', colorMap, colorway, isDarkTheme);
 };
 exports._getGaugeAxisColor = _getGaugeAxisColor;
 var resolveXAxisPoint = function (x, isXYearCategory, isXString, isXDate, isXNumber) {
@@ -336,57 +336,41 @@ var transformPlotlyJsonToDonutProps = function (input, isMultiPlot, colorMap, co
     // extract colors for each series only once
     // use piecolorway if available
     // otherwise, default to colorway from template
-    var colors = (0, PlotlyColorAdapter_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 = firstData === null || firstData === void 0 ? void 0 : firstData.marker) === null || _h === void 0 ? void 0 : _h.colors, colorMap, isDarkTheme);
+    var colors = (0, PlotlyColorAdapter_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 = 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 = (0, exports.getNumberAtIndexOrDefault)(firstData.values, index);
-            if ((0, chart_utilities_1.isInvalidValue)(value) || value < 0) {
-                return;
-            }
-            var legend = "".concat(label);
-            // resolve color for each legend from the extracted colors
-            var color = (0, PlotlyColorAdapter_1.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: (0, exports.getNumberAtIndexOrDefault)(firstData.values, index),
+            index: index,
+            color: hasMarkerColors_1 ? markerColors_1[index] : undefined,
+        }); });
+        // Filter out invalid values
+        var validPairs = labelValuePairs.filter(function (pair) { return !(0, chart_utilities_1.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 : (0, PlotlyColorAdapter_1.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: (0, exports.getNumberAtIndexOrDefault)(firstData.values, index),
-                index: index,
-            }); });
-            // Filter out invalid values
-            var validPairs = labelValuePairs.filter(function (pair) { return !(0, chart_utilities_1.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 = (0, PlotlyColorAdapter_1.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
@@ -398,10 +382,23 @@ var transformPlotlyJsonToDonutProps = function (input, isMultiPlot, colorMap, co
         ? firstData.hole * (Math.min(width - donutMarginHorizontal, height - donutMarginVertical) / 2)
         : utilities_1.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
+        ? tslib_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,
@@ -410,6 +407,7 @@ var transformPlotlyJsonToDonutProps = function (input, isMultiPlot, colorMap, co
         hideLabels: hideLabels,
         showLabelsInPercent: firstData.textinfo ? ['percent', 'label+percent'].includes(firstData.textinfo) : true,
         roundCorners: true,
+        order: 'sorted',
     };
 };
 exports.transformPlotlyJsonToDonutProps = transformPlotlyJsonToDonutProps;
@@ -440,7 +438,7 @@ var transformPlotlyJsonToVSBCProps = function (input, isMultiPlot, colorMap, col
             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: (0, exports.resolveXAxisPoint)(x, isXYearCategory, isXString, isXDate, isXNumber),
@@ -454,7 +452,7 @@ var transformPlotlyJsonToVSBCProps = function (input, isMultiPlot, colorMap, col
                     ? colorScale((0, chart_utilities_1.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)
-                    : (0, PlotlyColorAdapter_1.resolveColor)(extractedBarColors, index2, legend, colorMap, isDarkTheme);
+                    : (0, PlotlyColorAdapter_1.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 = (0, PlotlyColorAdapter_1.getOpacity)(series, index2);
                 var yVal = rangeYValues[index2];
                 var yAxisCalloutData = getFormattedCalloutYData(yVal, yAxisTickFormat);
@@ -462,7 +460,7 @@ var transformPlotlyJsonToVSBCProps = function (input, isMultiPlot, colorMap, col
                     mapXToDataPoints[x].chartData.push({
                         legend: legend,
                         data: yVal,
-                        color: (_e = (0, d3_color_1.rgb)(color).copy({ opacity: opacity }).formatHex8()) !== null && _e !== void 0 ? _e : color,
+                        color: (_h = (0, d3_color_1.rgb)(color).copy({ opacity: opacity }).formatHex8()) !== null && _h !== void 0 ? _h : color,
                         yAxisCalloutData: yAxisCalloutData,
                     });
                     if (typeof yVal === 'number') {
@@ -470,14 +468,14 @@ var transformPlotlyJsonToVSBCProps = function (input, isMultiPlot, colorMap, col
                     }
                 }
                 else if (series.type === 'scatter' || !!fallbackVSBC) {
-                    var lineColor = (0, PlotlyColorAdapter_1.resolveColor)(extractedLineColors, index1, legend, colorMap, isDarkTheme);
+                    var lineColor = (0, PlotlyColorAdapter_1.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 = (0, d3_color_1.rgb)(lineColor).copy({ opacity: opacity }).formatHex8()) !== null && _f !== void 0 ? _f : color,
+                        color: (_m = (0, d3_color_1.rgb)(lineColor).copy({ opacity: opacity }).formatHex8()) !== null && _m !== void 0 ? _m : color,
                         lineOptions: tslib_1.__assign(tslib_1.__assign({}, (lineOptions !== null && lineOptions !== void 0 ? lineOptions : {})), { mode: series.mode }),
                         useSecondaryYScale: usesSecondaryYScale(series, input.layout),
                         yAxisCalloutData: yAxisCalloutData,
@@ -528,7 +526,7 @@ var transformPlotlyJsonToGVBCProps = function (input, isMultiPlot, colorMap, col
         // extract colors for each series only once
         var extractedColors = (0, PlotlyColorAdapter_1.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 ((0, chart_utilities_1.isInvalidValue)(x) || (0, chart_utilities_1.isInvalidValue)((_a = series.y) === null || _a === void 0 ? void 0 : _a[xIndex])) {
                 return;
             }
@@ -542,14 +540,14 @@ var transformPlotlyJsonToGVBCProps = function (input, isMultiPlot, colorMap, col
                     ? colorScale((0, chart_utilities_1.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)
-                    : (0, PlotlyColorAdapter_1.resolveColor)(extractedColors, xIndex, legend, colorMap, isDarkTheme);
+                    : (0, PlotlyColorAdapter_1.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 = (0, PlotlyColorAdapter_1.getOpacity)(series, xIndex);
                 var yVal = series.y[xIndex];
                 mapXToDataPoints[x].series.push({
                     key: legend,
                     data: yVal,
                     xAxisCalloutData: x,
-                    color: (_f = (0, d3_color_1.rgb)(color).copy({ opacity: opacity }).formatHex8()) !== null && _f !== void 0 ? _f : color,
+                    color: (_j = (0, d3_color_1.rgb)(color).copy({ opacity: opacity }).formatHex8()) !== null && _j !== void 0 ? _j : color,
                     legend: legend,
                     useSecondaryYScale: usesSecondaryYScale(series, processedInput.layout),
                     yAxisCalloutData: getFormattedCalloutYData(yVal, yAxisTickFormat),
@@ -602,17 +600,17 @@ var transformPlotlyJsonToVBCProps = function (input, isMultiPlot, colorMap, colo
             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((0, chart_utilities_1.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)
-                : (0, PlotlyColorAdapter_1.resolveColor)(extractedColors, index, legend, colorMap, isDarkTheme);
+                : (0, PlotlyColorAdapter_1.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 = (0, PlotlyColorAdapter_1.getOpacity)(series, index);
             var yVal = calculateHistNorm(series.histnorm, y[index], total, isXString ? bin.length : getBinSize(bin));
-            vbcData.push(tslib_1.__assign({ x: isXString ? bin.join(', ') : getBinCenter(bin), y: yVal, legend: legend, color: (_e = (0, d3_color_1.rgb)(color).copy({ opacity: opacity }).formatHex8()) !== null && _e !== void 0 ? _e : color }, (isXString
+            vbcData.push(tslib_1.__assign({ x: isXString ? bin.join(', ') : getBinCenter(bin), y: yVal, legend: legend, color: (_h = (0, d3_color_1.rgb)(color).copy({ opacity: opacity }).formatHex8()) !== null && _h !== void 0 ? _h : color }, (isXString
                 ? {}
                 : { xAxisCalloutData: "[".concat(bin.x0, " - ").concat(bin.x1, ")") })));
         });
@@ -652,7 +650,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
@@ -667,11 +665,11 @@ var transformPlotlyJsonToScatterTraceProps = function (input, isMultiPlot, chart
         var isXYearCategory = (0, chart_utilities_1.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 = (0, PlotlyColorAdapter_1.resolveColor)(extractedColors, index, legend, colorMap, isDarkTheme);
+        var seriesColor = (0, PlotlyColorAdapter_1.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 = (0, PlotlyColorAdapter_1.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 = (0, exports.getValidXYRanges)(series);
         return validXYRanges.map(function (_a, rangeIdx) {
@@ -745,7 +743,7 @@ var transformPlotlyJsonToHorizontalBarWithAxisProps = function (input, isMultiPl
         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 ((0, chart_utilities_1.isInvalidValue)((_a = series.x) === null || _a === void 0 ? void 0 : _a[i]) || (0, chart_utilities_1.isInvalidValue)(yValue)) {
                 return null;
             }
@@ -754,13 +752,13 @@ var transformPlotlyJsonToHorizontalBarWithAxisProps = function (input, isMultiPl
                 ? colorScale((0, chart_utilities_1.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)
-                : (0, PlotlyColorAdapter_1.resolveColor)(extractedColors, i, legend, colorMap, isDarkTheme);
+                : (0, PlotlyColorAdapter_1.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 = (0, PlotlyColorAdapter_1.getOpacity)(series, i);
             return {
                 x: series.x[i],
                 y: yValue,
                 legend: legend,
-                color: (_f = (0, d3_color_1.rgb)(color).copy({ opacity: opacity }).formatHex8()) !== null && _f !== void 0 ? _f : color,
+                color: (_j = (0, d3_color_1.rgb)(color).copy({ opacity: opacity }).formatHex8()) !== null && _j !== void 0 ? _j : color,
             };
         })
             .filter(function (point) { return point !== null; });
@@ -797,7 +795,7 @@ var transformPlotlyJsonToGanttChartProps = function (input, isMultiPlot, colorMa
         };
         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 ((0, chart_utilities_1.isInvalidValue)(yVal)) {
                 return null;
             }
@@ -806,10 +804,10 @@ var transformPlotlyJsonToGanttChartProps = function (input, isMultiPlot, colorMa
                 ? colorScale((0, chart_utilities_1.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)
-                : (0, PlotlyColorAdapter_1.resolveColor)(extractedColors, i, legend, colorMap, isDarkTheme);
+                : (0, PlotlyColorAdapter_1.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 = (0, PlotlyColorAdapter_1.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,
@@ -817,7 +815,7 @@ var transformPlotlyJsonToGanttChartProps = function (input, isMultiPlot, colorMa
                 },
                 y: yVal,
                 legend: legend,
-                color: (_g = (0, d3_color_1.rgb)(color).copy({ opacity: opacity }).formatHex8()) !== null && _g !== void 0 ? _g : color,
+                color: (_k = (0, d3_color_1.rgb)(color).copy({ opacity: opacity }).formatHex8()) !== null && _k !== void 0 ? _k : color,
             };
         })
             .filter(function (point) { return point !== null; });
@@ -961,7 +959,8 @@ var transformPlotlyJsonToSankeyProps = function (input, isMultiPlot, colorMap, c
     var extractedNodeColors = (0, PlotlyColorAdapter_1.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 = (0, PlotlyColorAdapter_1.resolveColor)(extractedNodeColors, index, label, colorMap, isDarkTheme);
+            var _a, _b, _c;
+            var color = (0, PlotlyColorAdapter_1.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,
@@ -990,19 +989,19 @@ var transformPlotlyJsonToSankeyProps = function (input, isMultiPlot, colorMap, c
 };
 exports.transformPlotlyJsonToSankeyProps = transformPlotlyJsonToSankeyProps;
 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 = (0, PlotlyColorAdapter_1.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 = (0, PlotlyColorAdapter_1.resolveColor)(extractedColors, index, legend, colorMap, isDarkTheme);
+                var color = (0, PlotlyColorAdapter_1.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,
                 };
             })
@@ -1025,13 +1024,13 @@ var transformPlotlyJsonToGaugeProps = function (input, isMultiPlot, colorMap, co
         if (diff >= 0) {
             sublabel = "\u25B2 ".concat(diff);
             var extractedIncreasingDeltaColors = (0, PlotlyColorAdapter_1.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 = (0, PlotlyColorAdapter_1.resolveColor)(extractedIncreasingDeltaColors, 0, '', colorMap, isDarkTheme);
+            var color = (0, PlotlyColorAdapter_1.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 = (0, PlotlyColorAdapter_1.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 = (0, PlotlyColorAdapter_1.resolveColor)(extractedDecreasingDeltaColors, 0, '', colorMap, isDarkTheme);
+            var extractedDecreasingDeltaColors = (0, PlotlyColorAdapter_1.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 = (0, PlotlyColorAdapter_1.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;
         }
     }
@@ -1043,17 +1042,17 @@ var transformPlotlyJsonToGaugeProps = function (input, isMultiPlot, colorMap, co
     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) ? index_1.GaugeChartVariant.MultipleSegments : index_1.GaugeChartVariant.SingleSegment,
+        variant: ((_31 = (_30 = firstData.gauge) === null || _30 === void 0 ? void 0 : _30.steps) === null || _31 === void 0 ? void 0 : _31.length) ? index_1.GaugeChartVariant.MultipleSegments : index_1.GaugeChartVariant.SingleSegment,
         roundCorners: true,
     };
 };
@@ -1089,6 +1088,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;
+}
 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];
@@ -1102,41 +1112,13 @@ var transformPlotlyJsonToChartTableProps = function (input, isMultiPlot, colorMa
             })
             : 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 = tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({}, (typeof fontColor === 'string' ? { color: fontColor } : {})), (typeof fontSize === 'number' ? { fontSize: fontSize } : {})), (typeof backgroundColor === 'string' ? { backgroundColor: backgroundColor } : {})), (textAlign ? { textAlign: textAlign } : {}));
             return { value: value, style: style };
         });
@@ -1147,45 +1129,16 @@ var transformPlotlyJsonToChartTableProps = function (input, isMultiPlot, colorMa
         : (_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 = tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({}, (fontColor ? { color: fontColor } : {})), (typeof fontSize === 'number' ? { fontSize: fontSize } : {})), (backgroundColor ? { backgroundColor: backgroundColor } : {})), (textAlign ? { textAlign: textAlign } : {}));
             return {
                 value: formattedValue,
@@ -1264,15 +1217,15 @@ var transformPlotlyJsonToFunnelChartProps = function (input, isMultiPlot, colorM
         // 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 = (0, PlotlyColorAdapter_1.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 = (0, PlotlyColorAdapter_1.resolveColor)(extractedColors, 0, category, colorMap, isDarkTheme);
+            var color = (0, PlotlyColorAdapter_1.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 (!(0, chart_utilities_1.isArrayOrTypedArray)(labels) || !(0, chart_utilities_1.isArrayOrTypedArray)(values)) {
                 return;
             }
@@ -1306,7 +1259,8 @@ var transformPlotlyJsonToFunnelChartProps = function (input, isMultiPlot, colorM
             }
             var extractedColors = (0, PlotlyColorAdapter_1.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 = (0, PlotlyColorAdapter_1.resolveColor)(extractedColors, i, label, colorMap, isDarkTheme);
+                var _a, _b, _c;
+                var color = (0, PlotlyColorAdapter_1.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;
@@ -1642,11 +1596,12 @@ var getAllupLegendsProps = function (input, colorMap, colorwayType, traceInfo, i
             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_2 = (0, PlotlyColorAdapter_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_2 = (0, PlotlyColorAdapter_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 = (0, PlotlyColorAdapter_1.resolveColor)(colors_2, labelIndex, legend, colorMap, isDarkTheme);
+                    var color = (0, PlotlyColorAdapter_1.resolveColor)(colors_2, 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,