npm - @fluentui/react-charting - Versions diffs - 5.24.25 → 5.24.27 - Mend

@fluentui/react-charting 5.24.25 → 5.24.27

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-amd/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-amd/components/DeclarativeChart/PlotlySchemaAdapter.js CHANGED Viewed

@@ -177,7 +177,7 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "d3-format", "../
     };
     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) {
@@ -325,27 +325,41 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "d3-format", "../
         // 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 = {};
-        (_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);
-            if (!mapLegendToDataPoint[legend]) {
-                mapLegendToDataPoint[legend] = {
-                    legend: legend,
-                    data: value,
-                    color: color,
-                };
-            }
-            else {
-                mapLegendToDataPoint[legend].data += value;
-            }
-        });
+        // 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: 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
@@ -357,10 +371,23 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "d3-format", "../
             ? 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,
@@ -369,6 +396,7 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "d3-format", "../
             hideLabels: hideLabels,
             showLabelsInPercent: firstData.textinfo ? ['percent', 'label+percent'].includes(firstData.textinfo) : true,
             roundCorners: true,
+            order: 'sorted',
         };
     };
     exports.transformPlotlyJsonToDonutProps = transformPlotlyJsonToDonutProps;
@@ -399,7 +427,7 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "d3-format", "../
                 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),
@@ -413,7 +441,7 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "d3-format", "../
                         ? 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);
@@ -421,7 +449,7 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "d3-format", "../
                         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') {
@@ -429,14 +457,14 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "d3-format", "../
                         }
                     }
                     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,
@@ -487,7 +515,7 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "d3-format", "../
             // 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;
                 }
@@ -501,14 +529,14 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "d3-format", "../
                         ? 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),
@@ -561,17 +589,17 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "d3-format", "../
                 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, ")") })));
             });
@@ -611,7 +639,7 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "d3-format", "../
         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
@@ -626,11 +654,11 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "d3-format", "../
             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) {
@@ -704,7 +732,7 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "d3-format", "../
             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;
                 }
@@ -713,13 +741,13 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "d3-format", "../
                     ? 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; });
@@ -756,7 +784,7 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "d3-format", "../
             };
             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;
                 }
@@ -765,10 +793,10 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "d3-format", "../
                     ? 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,
@@ -776,7 +804,7 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "d3-format", "../
                     },
                     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; });
@@ -920,7 +948,8 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "d3-format", "../
         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,
@@ -949,19 +978,19 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "d3-format", "../
     };
     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,
                     };
                 })
@@ -984,13 +1013,13 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "d3-format", "../
             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;
             }
         }
@@ -1002,17 +1031,17 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "d3-format", "../
         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,
         };
     };
@@ -1223,15 +1252,15 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "d3-format", "../
             // 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;
                 }
@@ -1265,7 +1294,8 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "d3-format", "../
                 }
                 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;
@@ -1601,11 +1631,12 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "d3-format", "../
                 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,