@fluentui/react-charting 5.24.25 → 5.24.26

package/lib/components/DeclarativeChart/PlotlySchemaAdapter.js

@@ -330,25 +330,55 @@ export var transformPlotlyJsonToDonutProps = function (input, isMultiPlot, color
     // otherwise, default to colorway from template
     var colors = extractColor((_b = (_a = input.layout) === null || _a === void 0 ? void 0 : _a.piecolorway) !== null && _b !== void 0 ? _b : (_e = (_d = (_c = input.layout) === null || _c === void 0 ? void 0 : _c.template) === null || _d === void 0 ? void 0 : _d.layout) === null || _e === void 0 ? void 0 : _e.colorway, colorwayType, (_g = (_f = input.layout) === null || _f === void 0 ? void 0 : _f.piecolorway) !== null && _g !== void 0 ? _g : (_h = firstData === null || firstData === void 0 ? void 0 : firstData.marker) === null || _h === void 0 ? void 0 : _h.colors, colorMap, isDarkTheme);
     var mapLegendToDataPoint = {};
-    (_j = firstData.labels) === null || _j === void 0 ? void 0 : _j.forEach(function (label, index) {
-        var value = getNumberAtIndexOrDefault(firstData.values, index);
-        if (isInvalidValue(value) || value < 0) {
-            return;
-        }
-        var legend = "".concat(label);
-        // resolve color for each legend from the extracted colors
-        var color = resolveColor(colors, index, legend, colorMap, isDarkTheme);
-        if (!mapLegendToDataPoint[legend]) {
-            mapLegendToDataPoint[legend] = {
-                legend: legend,
-                data: value,
-                color: color,
-            };
-        }
-        else {
-            mapLegendToDataPoint[legend].data += value;
+    if (colors) {
+        (_j = firstData.labels) === null || _j === void 0 ? void 0 : _j.forEach(function (label, index) {
+            var value = getNumberAtIndexOrDefault(firstData.values, index);
+            if (isInvalidValue(value) || value < 0) {
+                return;
+            }
+            var legend = "".concat(label);
+            // resolve color for each legend from the extracted colors
+            var color = resolveColor(colors, index, legend, colorMap, isDarkTheme);
+            if (!mapLegendToDataPoint[legend]) {
+                mapLegendToDataPoint[legend] = {
+                    legend: legend,
+                    data: value,
+                    color: color,
+                };
+            }
+            else {
+                mapLegendToDataPoint[legend].data += value;
+            }
+        });
+    }
+    else {
+        // Sort labels by value descending before mapping
+        if (firstData.labels && firstData.values) {
+            var labelValuePairs = firstData.labels.map(function (label, index) { return ({
+                label: label,
+                value: getNumberAtIndexOrDefault(firstData.values, index),
+                index: index,
+            }); });
+            // Filter out invalid values
+            var validPairs = labelValuePairs.filter(function (pair) { return !isInvalidValue(pair.value); });
+            // Sort descending by value
+            validPairs.sort(function (a, b) { return b.value - a.value; });
+            validPairs.forEach(function (pair, sortedIdx) {
+                var legend = "".concat(pair.label);
+                var color = resolveColor(colors, sortedIdx, legend, colorMap, isDarkTheme);
+                if (!mapLegendToDataPoint[legend]) {
+                    mapLegendToDataPoint[legend] = {
+                        legend: legend,
+                        data: pair.value,
+                        color: color,
+                    };
+                }
+                else {
+                    mapLegendToDataPoint[legend].data += pair.value;
+                }
+            });
         }
-    });
+    }
     var width = (_l = (_k = input.layout) === null || _k === void 0 ? void 0 : _k.width) !== null && _l !== void 0 ? _l : 440;
     var height = (_o = (_m = input.layout) === null || _m === void 0 ? void 0 : _m.height) !== null && _o !== void 0 ? _o : 220;
     var hideLabels = firstData.textinfo