fix(react-charts): update segment color in donut chart (microsoft#35122)

Co-authored-by: Anush <[email protected]>

Author: Anush2303

change/@fluentui-react-charts-55f20992-9563-4a92-97b5-143b5b2bb48b.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "update segment colors of donut chart",
+  "packageName": "@fluentui/react-charts",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/charts/react-charts/library/src/components/DeclarativeChart/PlotlySchemaAdapter.ts

@@ -497,26 +497,54 @@ export const transformPlotlyJsonToDonutProps = (
     isDarkTheme,
   );
   const mapLegendToDataPoint: Record<string, ChartDataPoint> = {};
-  firstData.labels?.forEach((label, index: number) => {
-    const value = getNumberAtIndexOrDefault(firstData.values, index);
-    if (isInvalidValue(value) || (value as number) < 0) {
-      return;
-    }
+  if (colors) {
+    firstData.labels?.forEach((label, index: number) => {
+      const value = getNumberAtIndexOrDefault(firstData.values, index);
+      if (isInvalidValue(value) || (value as number) < 0) {
+        return;
+      }
 
-    const legend = `${label}`;
-    // resolve color for each legend from the extracted colors
-    const color: string = resolveColor(colors, index, legend, colorMap, isDarkTheme);
+      const legend = `${label}`;
+      // resolve color for each legend from the extracted colors
+      const color: string = resolveColor(colors, index, legend, colorMap, isDarkTheme);
 
-    if (!mapLegendToDataPoint[legend]) {
-      mapLegendToDataPoint[legend] = {
-        legend,
-        data: value,
-        color,
-      };
-    } else {
-      mapLegendToDataPoint[legend].data! += value as number;
+      if (!mapLegendToDataPoint[legend]) {
+        mapLegendToDataPoint[legend] = {
+          legend,
+          data: value,
+          color,
+        };
+      } else {
+        mapLegendToDataPoint[legend].data! += value as number;
+      }
+    });
+  } else {
+    // Sort labels by value descending before mapping
+    if (firstData.labels && firstData.values) {
+      const labelValuePairs = firstData.labels.map((label, index) => ({
+        label,
+        value: getNumberAtIndexOrDefault(firstData.values, index),
+        index,
+      }));
+      // Filter out invalid values
+      const validPairs = labelValuePairs.filter(pair => !isInvalidValue(pair.value));
+      // Sort descending by value
+      validPairs.sort((a, b) => (b.value as number) - (a.value as number));
+      validPairs.forEach((pair, sortedIdx) => {
+        const legend = `${pair.label}`;
+        const color: string = resolveColor(colors, sortedIdx, legend, colorMap, isDarkTheme);
+        if (!mapLegendToDataPoint[legend]) {
+          mapLegendToDataPoint[legend] = {
+            legend,
+            data: pair.value,
+            color,
+          };
+        } else {
+          mapLegendToDataPoint[legend].data! += pair.value as number;
+        }
+      });
     }
-  });
+  }
 
   const width: number = input.layout?.width ?? 440;
   const height: number = input.layout?.height ?? 220;

packages/charts/react-charts/library/src/components/DeclarativeChart/__snapshots__/PlotlySchemaAdapterUT.test.tsx.snap

@@ -87,103 +87,103 @@ Object {
     "chartData": Array [
       Object {
         "color": "#57811b",
-        "data": 1,
-        "legend": "AMC",
+        "data": 7,
+        "legend": "Merc",
       },
       Object {
         "color": "#9373c0",
-        "data": 1,
-        "legend": "Cadillac",
+        "data": 2,
+        "legend": "Fiat",
       },
       Object {
         "color": "#ca5010",
-        "data": 1,
-        "legend": "Camaro",
+        "data": 2,
+        "legend": "Hornet",
       },
       Object {
         "color": "#3a96dd",
-        "data": 1,
-        "legend": "Chrysler",
+        "data": 2,
+        "legend": "Mazda",
       },
       Object {
         "color": "#e3008c",
-        "data": 1,
-        "legend": "Datsun",
+        "data": 2,
+        "legend": "Toyota",
       },
       Object {
         "color": "#13a10e",
         "data": 1,
-        "legend": "Dodge",
+        "legend": "AMC",
       },
       Object {
         "color": "#b146c2",
         "data": 1,
-        "legend": "Duster",
+        "legend": "Cadillac",
       },
       Object {
         "color": "#ae8c00",
         "data": 1,
-        "legend": "Ferrari",
+        "legend": "Camaro",
       },
       Object {
         "color": "#93a4f4",
-        "data": 2,
-        "legend": "Fiat",
+        "data": 1,
+        "legend": "Chrysler",
       },
       Object {
         "color": "#ee5fb7",
         "data": 1,
-        "legend": "Ford",
+        "legend": "Datsun",
       },
       Object {
         "color": "#4cb4b7",
         "data": 1,
-        "legend": "Honda",
+        "legend": "Dodge",
       },
       Object {
         "color": "#a083c9",
-        "data": 2,
-        "legend": "Hornet",
+        "data": 1,
+        "legend": "Duster",
       },
       Object {
         "color": "#27ac22",
         "data": 1,
-        "legend": "Lincoln",
+        "legend": "Ferrari",
       },
       Object {
         "color": "#4fa1e1",
         "data": 1,
-        "legend": "Lotus",
+        "legend": "Ford",
       },
       Object {
         "color": "#d77440",
         "data": 1,
-        "legend": "Maserati",
+        "legend": "Honda",
       },
       Object {
         "color": "#73aa24",
-        "data": 2,
-        "legend": "Mazda",
+        "data": 1,
+        "legend": "Lincoln",
       },
       Object {
         "color": "#c36bd1",
-        "data": 7,
-        "legend": "Merc",
+        "data": 1,
+        "legend": "Lotus",
       },
       Object {
         "color": "#d0b232",
         "data": 1,
-        "legend": "Pontiac",
+        "legend": "Maserati",
       },
       Object {
         "color": "#4f6bed",
         "data": 1,
-        "legend": "Porsche",
+        "legend": "Pontiac",
       },
       Object {
         "color": "#ea38a6",
-        "data": 2,
-        "legend": "Toyota",
+        "data": 1,
+        "legend": "Porsche",
       },
       Object {
         "color": "#038387",