fix(react-charting): Fixing donut colors and segment orders (#35131)

Author: srmukher

change/@fluentui-react-charting-43e9af9f-0688-4320-bb12-7fa920daebf0.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix(react-charting): Fixing donut colors and segment orders",
+  "packageName": "@fluentui/react-charting",
+  "email": "120183316+srmukher@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

packages/charts/react-charting/etc/react-charting.api.md

@@ -608,6 +608,7 @@ export interface IDonutChartProps extends ICartesianChartProps {
     hideLabels?: boolean;
     innerRadius?: number;
     onRenderCalloutPerDataPoint?: IRenderFunction<IChartDataPoint>;
+    order?: 'default' | 'sorted';
     roundCorners?: boolean;
     showLabelsInPercent?: boolean;
     styles?: IStyleFunctionOrObject<IDonutChartStyleProps, IDonutChartStyles>;

packages/charts/react-charting/src/components/DeclarativeChart/DeclarativeChart.tsx

@@ -454,11 +454,21 @@ export const DeclarativeChart: React.FunctionComponent<DeclarativeChartProps> =
     gridProperties.templateRows === SINGLE_REPEAT &&
     gridProperties.templateColumns === SINGLE_REPEAT
   ) {
-    Object.keys(groupedTraces).forEach((key, index) => {
-      if (index > 0) {
-        delete groupedTraces[key];
-      }
-    });
+    if (chart.type === 'donut') {
+      // If there are multiple data traces for donut/pie, picking the last one similar to plotly
+      const keys = Object.keys(groupedTraces);
+      keys.forEach((key, index) => {
+        if (index < keys.length - 1) {
+          delete groupedTraces[key];
+        }
+      });
+    } else {
+      Object.keys(groupedTraces).forEach((key, index) => {
+        if (index > 0) {
+          delete groupedTraces[key];
+        }
+      });
+    }
     isMultiPlot.current = false;
   }
 

packages/charts/react-charting/src/components/DeclarativeChart/PlotlyColorAdapter.ts

@@ -6,7 +6,7 @@ import { areArraysEqual } from '../../utilities/utilities';
 import { DataVizPalette, getColorFromToken, getNextColor } from '../../utilities/colors';
 import { scaleLinear as d3ScaleLinear } from 'd3-scale';
 
-type PlotlyColorway = 'plotly' | 'others';
+type PlotlyColorway = 'plotly' | 'd3' | 'others';
 
 // The color sequences in plotly express are defined here:
 // https://plotly.com/python/discrete-color/#:~:text=Join%20now.-,Color%20Sequences%20in%20Plotly%20Express,-By%20default%2C%20Plotly
@@ -25,6 +25,21 @@ const DEFAULT_PLOTLY_COLORWAY = [
   '#fecb52', //10
 ];
 
+// Default D3 qualitative colorway (Category10), matching Plotly Express px.colors.qualitative.D3
+// Source: https://plotly.com/python/discrete-color/#:~:text=Join%20now.-,Color%20Sequences%20in%20Plotly%20Express,-By%20default%2C%20Plotly
+export const DEFAULT_D3_COLORWAY = [
+  '#1f77b4', //1
+  '#ff7f0e', //2
+  '#2ca02c', //3
+  '#d62728', //4
+  '#9467bd', //5
+  '#8c564b', //6
+  '#e377c2', //7
+  '#7f7f7f', //8
+  '#bcbd22', //9
+  '#17becf', //10
+];
+
 const PLOTLY_FLUENTVIZ_COLORWAY_MAPPING = [
   DataVizPalette.color1, //1
   DataVizPalette.warning, //2
@@ -38,38 +53,74 @@ const PLOTLY_FLUENTVIZ_COLORWAY_MAPPING = [
   DataVizPalette.color10, //10
 ];
 
-function getPlotlyColorway(colorway: string[] | undefined): PlotlyColorway {
-  const isPlotlyColorway =
-    isArrayOrTypedArray(colorway) &&
-    areArraysEqual(
-      colorway?.map(c => c.toLowerCase()),
-      DEFAULT_PLOTLY_COLORWAY,
-    );
+// Mapping from D3 Category10 order to Fluent DataViz tokens (light/dark handled via getColorFromToken)
+// D3: [blue, orange, green, red, purple, brown, pink, gray, olive, cyan]
+export const D3_FLUENTVIZ_COLORWAY_MAPPING: string[] = [
+  DataVizPalette.color26, // blue -> lightBlue.shade10
+  DataVizPalette.warning, // orange -> semantic warning
+  DataVizPalette.color5, // green -> lightGreen.primary
+  DataVizPalette.error, // red -> semantic error
+  DataVizPalette.color4, // purple -> orchid.tint10
+  DataVizPalette.color17, // brown -> pumpkin.shade20
+  DataVizPalette.color22, // pink -> hotPink.tint20
+  DataVizPalette.disabled, // gray -> semantic disabled
+  DataVizPalette.color10, // olive/yellow-green -> gold.shade10
+  DataVizPalette.color3, // cyan/teal -> teal.tint20
+];
 
-  return isPlotlyColorway ? 'plotly' : 'others';
+function getPlotlyColorway(colorway: string[] | undefined, isDonut: boolean = false): PlotlyColorway {
+  if (!colorway || !isArrayOrTypedArray(colorway)) {
+    return 'others';
+  }
+  const lower = colorway.map(c => c.toLowerCase());
+  if (isDonut && areArraysEqual(lower, D3_FLUENTVIZ_COLORWAY_MAPPING)) {
+    return 'd3';
+  }
+  if (areArraysEqual(lower, DEFAULT_PLOTLY_COLORWAY)) {
+    return 'plotly';
+  }
+  return 'others';
 }
 
-function tryMapFluentDataViz(hexColor: string, templateColorway: PlotlyColorway, isDarkTheme?: boolean): string {
+function tryMapFluentDataViz(
+  hexColor: string,
+  templateColorway: PlotlyColorway,
+  isDarkTheme?: boolean,
+  isDonut?: boolean,
+): string {
   if (templateColorway !== 'plotly') {
     return hexColor;
   }
-  const index = DEFAULT_PLOTLY_COLORWAY.indexOf(hexColor.toLowerCase());
-  if (index !== -1) {
-    return getColorFromToken(PLOTLY_FLUENTVIZ_COLORWAY_MAPPING[index], isDarkTheme);
+  let defaultColorway: string[] = DEFAULT_PLOTLY_COLORWAY;
+  let defaultMapping: string[] = PLOTLY_FLUENTVIZ_COLORWAY_MAPPING;
+  if (isDonut) {
+    defaultColorway = templateColorway === 'plotly' ? DEFAULT_PLOTLY_COLORWAY : DEFAULT_D3_COLORWAY;
+    defaultMapping = templateColorway === 'plotly' ? PLOTLY_FLUENTVIZ_COLORWAY_MAPPING : D3_FLUENTVIZ_COLORWAY_MAPPING;
+  }
+  const idx = defaultColorway.indexOf(hexColor.toLowerCase());
+  if (idx !== -1) {
+    return getColorFromToken(defaultMapping[idx], !!isDarkTheme);
   }
   return hexColor;
 }
 
 export const getColor = (
   legendLabel: string,
   colorMap: React.MutableRefObject<Map<string, string>>,
+  templateColorway: PlotlyColorway,
   isDarkTheme?: boolean,
+  isDonut?: boolean,
 ): string => {
   if (!colorMap.current.has(legendLabel)) {
     let nextColor: string;
-    if (colorMap.current.size < PLOTLY_FLUENTVIZ_COLORWAY_MAPPING.length) {
+    const defaultColorMapping = isDonut
+      ? templateColorway === 'plotly'
+        ? PLOTLY_FLUENTVIZ_COLORWAY_MAPPING
+        : D3_FLUENTVIZ_COLORWAY_MAPPING
+      : PLOTLY_FLUENTVIZ_COLORWAY_MAPPING;
+    if (colorMap.current.size < defaultColorMapping.length) {
       // Get first 10 colors from plotly-fluentviz colorway mapping
-      nextColor = getColorFromToken(PLOTLY_FLUENTVIZ_COLORWAY_MAPPING[colorMap.current.size], isDarkTheme);
+      nextColor = getColorFromToken(defaultColorMapping[colorMap.current.size], isDarkTheme);
     } else {
       nextColor = getNextColor(colorMap.current.size, 0, isDarkTheme);
     }
@@ -85,17 +136,18 @@ export const getSchemaColors = (
   colors: PieColors | Color | Color[] | string | null | undefined,
   colorMap: React.MutableRefObject<Map<string, string>>,
   isDarkTheme?: boolean,
+  isDonut?: boolean,
 ): string[] | string | undefined => {
   const hexColors: string[] = [];
   if (!colors) {
     return undefined;
   }
-  const templateColorway = getPlotlyColorway(colorway);
+  const templateColorway = getPlotlyColorway(colorway, isDonut);
   if (isArrayOrTypedArray(colors)) {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     (colors as any[]).forEach((element, index) => {
       const colorString = element?.toString().trim();
-      const nextFluentColor = getColor(`Label_${index}`, colorMap, isDarkTheme);
+      const nextFluentColor = getColor(`Label_${index}`, colorMap, templateColorway, isDarkTheme, isDonut);
       if (colorString) {
         const parsedColor = d3Color(colorString);
         hexColors.push(
@@ -109,7 +161,7 @@ export const getSchemaColors = (
     const parsedColor = d3Color(colors);
     return parsedColor
       ? tryMapFluentDataViz(parsedColor.formatHex(), templateColorway, isDarkTheme)
-      : getColor('Label_0', colorMap, isDarkTheme);
+      : getColor('Label_0', colorMap, templateColorway, isDarkTheme, isDonut);
   }
   return hexColors;
 };
@@ -120,24 +172,30 @@ export const extractColor = (
   colors: PieColors | Color | Color[] | string | null | undefined,
   colorMap: React.MutableRefObject<Map<string, string>>,
   isDarkTheme?: boolean,
+  isDonut?: boolean,
 ): string | string[] | undefined => {
-  return colorwayType === 'default' && colors ? getSchemaColors(colorway, colors, colorMap, isDarkTheme) : undefined;
+  return colorwayType === 'default' && colors
+    ? getSchemaColors(colorway, colors, colorMap, isDarkTheme, isDonut)
+    : undefined;
 };
 
 export const resolveColor = (
   extractedColors: string[] | string | null | undefined,
   index: number,
   legend: string,
   colorMap: React.MutableRefObject<Map<string, string>>,
+  colorway: string[] | undefined,
   isDarkTheme?: boolean,
+  isDonut?: boolean,
 ): string => {
   let color = '';
+  const templateColorway = getPlotlyColorway(colorway, isDonut);
   if (extractedColors && isArrayOrTypedArray(extractedColors) && extractedColors.length > 0) {
     color = extractedColors[index % extractedColors.length];
   } else if (typeof extractedColors === 'string') {
     color = extractedColors;
   } else {
-    color = getColor(legend, colorMap, isDarkTheme);
+    color = getColor(legend, colorMap, templateColorway, isDarkTheme, isDonut);
   }
   return color;
 };