fix(react-charting): Use schema colors for all bar charts - VBC, VSBC, GVBC, HBC (#34447)

Author: srmukher

change/@fluentui-react-charting-74b63a70-af34-4bdc-adb1-a3f6544cf7b4.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix(react-charting): Use schema colors for all bar charts",
+  "packageName": "@fluentui/react-charting",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

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

@@ -128,8 +128,8 @@ export const DeclarativeChart: React_2.FunctionComponent<DeclarativeChartProps>;
 export interface DeclarativeChartProps extends React_2.RefAttributes<HTMLDivElement> {
     chartSchema: Schema;
     componentRef?: IRefObject<IDeclarativeChart>;
+    fluentDataVizColorPalette?: 'default' | 'builtin' | 'override';
     onSchemaChange?: (eventData: Schema) => void;
-    useFluentVizColorPalette?: boolean;
 }
 
 // @public

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

@@ -85,10 +85,13 @@ export interface DeclarativeChartProps extends React.RefAttributes<HTMLDivElemen
   componentRef?: IRefObject<IDeclarativeChart>;
 
   /**
-   * Optional prop to use Fluent UI color palette for the chart or not.
-   * @default true
+   * Optional prop to specify the color palette for the chart.
+   * - 'default': Do not use Fluent UI color palette.
+   * - 'builtin': Use Fluent UI color palette.
+   * - 'override': Reserved for future use.
+   * @default 'builtin'
    */
-  useFluentVizColorPalette?: boolean;
+  fluentDataVizColorPalette?: 'default' | 'builtin' | 'override';
 }
 
 /**
@@ -165,14 +168,16 @@ export const DeclarativeChart: React.FunctionComponent<DeclarativeChartProps> =
     calloutProps: { layerProps: { eventBubblingEnabled: true } },
   };
 
+  const useFluentVizColorPalette = props.fluentDataVizColorPalette === 'builtin';
+
   const renderLineArea = (plotlyData: Data[], isAreaChart: boolean): JSX.Element => {
     const isScatterMarkers = ['markers', 'text+markers', 'markers+text'].includes((plotlyData[0] as PlotData)?.mode);
     const chartProps: ILineChartProps | IAreaChartProps = {
       ...transformPlotlyJsonToScatterChartProps(
         { data: plotlyData, layout: plotlyInput.layout },
         isAreaChart,
         colorMap,
-        props.useFluentVizColorPalette!,
+        useFluentVizColorPalette!,
         isDarkTheme,
       ),
       ...commonProps,
@@ -212,7 +217,13 @@ export const DeclarativeChart: React.FunctionComponent<DeclarativeChartProps> =
     }
     return (
       <ResponsiveVerticalStackedBarChart
-        {...transformPlotlyJsonToVSBCProps(plotlyInputWithValidData, colorMap, isDarkTheme, fallbackVSBC)}
+        {...transformPlotlyJsonToVSBCProps(
+          plotlyInputWithValidData,
+          colorMap,
+          useFluentVizColorPalette,
+          isDarkTheme,
+          fallbackVSBC,
+        )}
         {...commonProps}
       />
     );
@@ -253,7 +264,7 @@ export const DeclarativeChart: React.FunctionComponent<DeclarativeChartProps> =
           {...transformPlotlyJsonToDonutProps(
             plotlyInputWithValidData,
             colorMap,
-            props.useFluentVizColorPalette!,
+            useFluentVizColorPalette,
             isDarkTheme,
           )}
           {...commonProps}
@@ -262,21 +273,26 @@ export const DeclarativeChart: React.FunctionComponent<DeclarativeChartProps> =
     case 'horizontalbar':
       return (
         <ResponsiveHorizontalBarChartWithAxis
-          {...transformPlotlyJsonToHorizontalBarWithAxisProps(plotlyInputWithValidData, colorMap, isDarkTheme)}
+          {...transformPlotlyJsonToHorizontalBarWithAxisProps(
+            plotlyInputWithValidData,
+            colorMap,
+            useFluentVizColorPalette,
+            isDarkTheme,
+          )}
           {...commonProps}
         />
       );
     case 'groupedverticalbar':
       return (
         <ResponsiveGroupedVerticalBarChart
-          {...transformPlotlyJsonToGVBCProps(plotlyInputWithValidData, colorMap, isDarkTheme)}
+          {...transformPlotlyJsonToGVBCProps(plotlyInputWithValidData, colorMap, useFluentVizColorPalette, isDarkTheme)}
           {...commonProps}
         />
       );
     case 'verticalstackedbar':
       return (
         <ResponsiveVerticalStackedBarChart
-          {...transformPlotlyJsonToVSBCProps(plotlyInputWithValidData, colorMap, isDarkTheme)}
+          {...transformPlotlyJsonToVSBCProps(plotlyInputWithValidData, colorMap, useFluentVizColorPalette, isDarkTheme)}
           {...commonProps}
         />
       );
@@ -305,7 +321,7 @@ export const DeclarativeChart: React.FunctionComponent<DeclarativeChartProps> =
     case 'verticalbar':
       return (
         <ResponsiveVerticalBarChart
-          {...transformPlotlyJsonToVBCProps(plotlyInputWithValidData, colorMap, isDarkTheme)}
+          {...transformPlotlyJsonToVBCProps(plotlyInputWithValidData, colorMap, useFluentVizColorPalette, isDarkTheme)}
           {...commonProps}
         />
       );
@@ -328,5 +344,5 @@ export const DeclarativeChart: React.FunctionComponent<DeclarativeChartProps> =
 });
 DeclarativeChart.displayName = 'DeclarativeChart';
 DeclarativeChart.defaultProps = {
-  useFluentVizColorPalette: true,
+  fluentDataVizColorPalette: 'builtin',
 };

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

@@ -222,7 +222,7 @@ const getSecondaryYAxisValues = (
 };
 
 export const getSchemaColors = (
-  colors: PieColors | Color | null | undefined,
+  colors: PieColors | Color | Color[] | string | null | undefined,
   colorMap: React.MutableRefObject<Map<string, string>>,
   isDarkTheme?: boolean,
 ): string[] | string | undefined => {
@@ -248,28 +248,52 @@ export const getSchemaColors = (
   return hexColors;
 };
 
+export const _extractColor = (
+  useFluentVizColorPalette: boolean,
+  colors: PieColors | Color | Color[] | string | null | undefined,
+  colorMap: React.MutableRefObject<Map<string, string>>,
+  isDarkTheme?: boolean,
+): string | string[] | undefined => {
+  return !useFluentVizColorPalette && colors ? getSchemaColors(colors, colorMap, isDarkTheme) : undefined;
+};
+
+export const _resolveColor = (
+  extractedColors: string[] | string | null | undefined,
+  index: number,
+  legend: string,
+  colorMap: React.MutableRefObject<Map<string, string>>,
+  isDarkTheme?: boolean,
+): string => {
+  let color = '';
+  if (extractedColors && isArrayOrTypedArray(extractedColors) && extractedColors[index]) {
+    color = extractedColors[index % extractedColors.length];
+  } else if (typeof extractedColors === 'string') {
+    color = extractedColors;
+  } else {
+    color = getColor(legend, colorMap, isDarkTheme);
+  }
+  return color;
+};
+
 export const transformPlotlyJsonToDonutProps = (
   input: PlotlySchema,
   colorMap: React.MutableRefObject<Map<string, string>>,
   useFluentVizColorPalette: boolean,
   isDarkTheme?: boolean,
 ): IDonutChartProps => {
   const firstData = input.data[0] as PieData;
-  let colors: string[] | string | null | undefined = undefined;
-  if (!useFluentVizColorPalette) {
-    colors = firstData.marker?.colors ? getSchemaColors(firstData?.marker?.colors, colorMap, isDarkTheme) : undefined;
-  }
+  // extract colors for each series only once
+  const colors: string[] | string | null | undefined = _extractColor(
+    useFluentVizColorPalette,
+    firstData?.marker?.colors,
+    colorMap,
+    isDarkTheme,
+  );
 
   const mapLegendToDataPoint: Record<string, IChartDataPoint> = {};
   firstData.labels?.forEach((label: string, index: number) => {
-    let color: string = '';
-    if (colors && isStringArray(colors)) {
-      color = colors[index % colors.length];
-    } else if (typeof colors === 'string') {
-      color = colors;
-    } else {
-      color = getColor(label, colorMap, isDarkTheme);
-    }
+    // resolve color for each legend from the extracted colors
+    const color: string = _resolveColor(colors, index, label, colorMap, isDarkTheme);
     //ToDo how to handle string data?
     const value = typeof firstData.values?.[index] === 'number' ? (firstData.values[index] as number) : 1;
 
@@ -313,6 +337,7 @@ export const transformPlotlyJsonToDonutProps = (
 export const transformPlotlyJsonToVSBCProps = (
   input: PlotlySchema,
   colorMap: React.MutableRefObject<Map<string, string>>,
+  useFluentVizColorPalette: boolean,
   isDarkTheme?: boolean,
   fallbackVSBC?: boolean,
 ): IVerticalStackedBarChartProps => {
@@ -322,22 +347,33 @@ export const transformPlotlyJsonToVSBCProps = (
   const { legends, hideLegend } = getLegendProps(input.data, input.layout);
   input.data.forEach((series: PlotData, index1: number) => {
     const isXYearCategory = isYearArray(series.x); // Consider year as categorical not numeric continuous axis
+    // extract bar colors for each series only once
+    const extractedBarColors = _extractColor(useFluentVizColorPalette, series.marker?.color, colorMap, isDarkTheme) as
+      | string[]
+      | string
+      | undefined;
+    // extract line colors for each series only once
+    const extractedLineColors = _extractColor(useFluentVizColorPalette, series.line?.color, colorMap, isDarkTheme) as
+      | string[]
+      | string
+      | undefined;
     (series.x as Datum[])?.forEach((x: string | number, index2: number) => {
       if (!mapXToDataPoints[x]) {
         mapXToDataPoints[x] = { xAxisPoint: isXYearCategory ? x.toString() : x, chartData: [], lineData: [] };
       }
       const legend: string = legends[index1];
+      // resolve color for each legend's bars from the extracted colors
+      const color = _resolveColor(extractedBarColors, index1, legend, colorMap, isDarkTheme);
       const yVal: number = (series.y?.[index2] as number) ?? 0;
       if (series.type === 'bar') {
-        const color = getColor(legend, colorMap, isDarkTheme);
         mapXToDataPoints[x].chartData.push({
           legend,
           data: yVal,
           color,
         });
         yMaxValue = Math.max(yMaxValue, yVal);
       } else if (series.type === 'scatter' || !!fallbackVSBC) {
-        const color = getColor(legend, colorMap, isDarkTheme);
+        const lineColor = _resolveColor(extractedLineColors, index1, legend, colorMap, isDarkTheme);
         const lineOptions = getLineOptions(series.line);
         const dashType = series.line?.dash || 'solid';
         const legendShape =
@@ -346,7 +382,7 @@ export const transformPlotlyJsonToVSBCProps = (
           legend,
           legendShape,
           y: yVal,
-          color,
+          color: lineColor,
           ...(lineOptions ? { lineOptions } : {}),
           useSecondaryYScale: usesSecondaryYScale(series),
         });
@@ -378,22 +414,28 @@ export const transformPlotlyJsonToVSBCProps = (
 export const transformPlotlyJsonToGVBCProps = (
   input: PlotlySchema,
   colorMap: React.MutableRefObject<Map<string, string>>,
+  useFluentVizColorPalette: boolean,
   isDarkTheme?: boolean,
 ): IGroupedVerticalBarChartProps => {
   const mapXToDataPoints: Record<string, IGroupedVerticalBarChartData> = {};
   const secondaryYAxisValues = getSecondaryYAxisValues(input.data, input.layout, 0, 0);
   const { legends, hideLegend } = getLegendProps(input.data, input.layout);
 
   input.data.forEach((series: PlotData, index1: number) => {
+    // extract colors for each series only once
+    const extractedColors = _extractColor(useFluentVizColorPalette, series.marker?.color, colorMap, isDarkTheme) as
+      | string[]
+      | string
+      | undefined;
     (series.x as Datum[])?.forEach((x: string | number, xIndex: number) => {
       if (!mapXToDataPoints[x]) {
         mapXToDataPoints[x] = { name: x.toString(), series: [] };
       }
 
       if (series.type === 'bar') {
         const legend: string = legends[index1];
-        const color = getColor(legend, colorMap, isDarkTheme);
-
+        // resolve color for each legend's bars from the extracted colors
+        const color = _resolveColor(extractedColors, index1, legend, colorMap, isDarkTheme);
         mapXToDataPoints[x].series.push({
           key: legend,
           data: (series.y?.[xIndex] as number) ?? 0,
@@ -426,6 +468,7 @@ export const transformPlotlyJsonToGVBCProps = (
 export const transformPlotlyJsonToVBCProps = (
   input: PlotlySchema,
   colorMap: React.MutableRefObject<Map<string, string>>,
+  useFluentVizColorPalette: boolean,
   isDarkTheme?: boolean,
 ): IVerticalBarChartProps => {
   const vbcData: IVerticalBarChartDataPoint[] = [];
@@ -435,7 +478,11 @@ export const transformPlotlyJsonToVBCProps = (
     if (!series.x) {
       return;
     }
-
+    // extract colors for each series only once
+    const extractedColors = _extractColor(useFluentVizColorPalette, series.marker?.color, colorMap, isDarkTheme) as
+      | string[]
+      | string
+      | undefined;
     const isXString = isStringArray(series.x);
     // TODO: In case of a single bin, add an empty bin of the same size to prevent the
     // default bar width from being used and ensure the bar spans the full intended range.
@@ -458,7 +505,8 @@ export const transformPlotlyJsonToVBCProps = (
 
     xBins.forEach((bin, index) => {
       const legend: string = legends[seriesIdx];
-      const color: string = getColor(legend, colorMap, isDarkTheme);
+      // resolve color for each legend's bars from the extracted colors
+      const color = _resolveColor(extractedColors, seriesIdx, legend, colorMap, isDarkTheme);
       const yVal = calculateHistNorm(
         series.histnorm,
         y[index],
@@ -511,15 +559,18 @@ export const transformPlotlyJsonToScatterChartProps = (
   let mode: string = 'tonexty';
   const { legends, hideLegend } = getLegendProps(input.data, input.layout);
   const chartData: ILineChartPoints[] = input.data.map((series: PlotData, index: number) => {
+    // extract colors for each series only once
+    const extractedColors = _extractColor(useFluentVizColorPalette, series.line?.color, colorMap, isDarkTheme) as
+      | string[]
+      | string
+      | undefined;
     const xValues = series.x as Datum[];
     const isString = typeof xValues[0] === 'string';
     const isXDate = isDateArray(xValues);
     const isXNumber = isNumberArray(xValues);
     const legend: string = legends[index];
-    const lineColor =
-      !useFluentVizColorPalette && series.line?.color
-        ? getSchemaColors(series.line?.color, colorMap, isDarkTheme)
-        : getColor(legend, colorMap, isDarkTheme);
+    // resolve color for each legend's lines from the extracted colors
+    const lineColor = _resolveColor(extractedColors, index, legend, colorMap, isDarkTheme);
     mode = series.fill === 'tozeroy' ? 'tozeroy' : 'tonexty';
     const lineOptions = getLineOptions(series.line);
     const dashType = series.line?.dash || 'solid';
@@ -588,13 +639,20 @@ export const transformPlotlyJsonToScatterChartProps = (
 export const transformPlotlyJsonToHorizontalBarWithAxisProps = (
   input: PlotlySchema,
   colorMap: React.MutableRefObject<Map<string, string>>,
+  useFluentVizColorPalette: boolean,
   isDarkTheme?: boolean,
 ): IHorizontalBarChartWithAxisProps => {
   const { legends, hideLegend } = getLegendProps(input.data, input.layout);
   const chartData: IHorizontalBarChartWithAxisDataPoint[] = input.data
     .map((series: PlotData, index: number) => {
+      // extract colors for each series only once
+      const extractedColors = _extractColor(useFluentVizColorPalette, series.marker?.color, colorMap, isDarkTheme) as
+        | string[]
+        | string
+        | undefined;
       const legend = legends[index];
-      const color = getColor(legend, colorMap, isDarkTheme);
+      // resolve color for each legend's bars from the extracted colors
+      const color = _resolveColor(extractedColors, index, legend, colorMap, isDarkTheme);
       return (series.y as Datum[]).map((yValue: string, i: number) => {
         return {
           x: series.x[i],
@@ -768,7 +826,6 @@ export const transformPlotlyJsonToSankeyProps = (
       source: link?.source![index],
       target: link?.target![index],
     }))
-    // eslint-disable-next-line @typescript-eslint/no-shadow
     // Filter out negative nodes, unequal nodes and self-references (circular links)
     .filter(x => x.source >= 0 && x.target >= 0 && x.source !== x.target);