fix(react-charts): handling y object values for bar chart (microsoft#35115)

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

Author: Anush2303

change/@fluentui-react-charts-47962710-e13e-4bb8-bdb4-6366cc2bd138.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "handling y object values for bar chart",
+  "packageName": "@fluentui/react-charts",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

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

@@ -65,6 +65,8 @@ import {
   isYearArray,
   isInvalidValue,
   formatToLocaleString,
+  isNumber,
+  isObjectArray,
   getAxisIds,
   getAxisKey,
 } from '@fluentui/chart-utilities';
@@ -333,6 +335,139 @@ export const resolveXAxisPoint = (
   return x;
 };
 
+/**
+ * Checks if a key should be ignored during normalization
+ * @param key The key to check
+ * @returns true if the key should be ignored
+ */
+const shouldIgnoreKey = (key: string): boolean => {
+  const lowerKey = key.toLowerCase();
+  if (lowerKey.includes('style') || lowerKey === 'style') {
+    return true;
+  }
+  // Use regex to match common CSS property patterns
+  // (color, fill, stroke, border, background, font, shadow, outline, etc.)
+  const cssKeyRegex = new RegExp(
+    '^(color|fill|stroke|border|background|font|shadow|outline|margin|padding|gap|align|justify|display|flex|grid|' +
+      'text|line|letter|word|vertical|horizontal|overflow|position|top|right|bottom|left|zindex|z-index|opacity|' +
+      'filter|clip|cursor|resize|transition|animation|transform|box|column|row|direction|visibility|' +
+      'content|width|height|aspect|image|user|pointer|caret|scroll|%)|(-webkit-|-moz-|-ms-|-o-)',
+    'i',
+  );
+  if (cssKeyRegex.test(lowerKey)) {
+    return true;
+  }
+  return false;
+};
+
+/**
+ * Flattens a nested object into a single level object with dot notation keys
+ * @param obj Object to flatten
+ * @param prefix Optional prefix for keys
+ * @returns Flattened object
+ */
+const flattenObject = (obj: Record<string, unknown>, prefix: string = ''): Record<string, unknown> => {
+  const flattened: Record<string, unknown> = {};
+
+  for (const key in obj) {
+    if (Object.prototype.hasOwnProperty.call(obj, key)) {
+      const newKey = prefix ? `${prefix}.${key}` : key;
+      const value = obj[key];
+
+      if (typeof value === 'object' && value !== null && !Array.isArray(value) && !(value instanceof Date)) {
+        // Recursively flatten nested objects
+        Object.assign(flattened, flattenObject(value as Record<string, unknown>, newKey));
+      } else {
+        flattened[newKey] = value;
+      }
+    }
+  }
+
+  return flattened;
+};
+
+/**
+ * Normalizes an array of objects by flattening nested structures and creating grouped data
+ * Uses json_normalize approach with D3 color detection and filtering
+ * @param data Array of objects to normalize
+ * @returns Object containing traces for grouped vertical bar chart
+ */
+export const normalizeObjectArrayForGVBC = (
+  data: Array<Record<string, unknown>>,
+  xLabels?: string[],
+): { traces: Array<Record<string, unknown>>; x: string[] } => {
+  if (!data || data.length === 0) {
+    return { traces: [], x: [] };
+  }
+
+  // Use provided xLabels if available, otherwise default to Item 1, Item 2, ...
+  const x = xLabels && xLabels.length === data.length ? xLabels : data.map((_, index) => `Item ${index + 1}`);
+
+  // First, flatten all objects and collect all unique keys, excluding style keys
+  const flattenedObjects = data.map((item, index) => {
+    if (typeof item === 'object' && item !== null) {
+      const flattened = flattenObject(item);
+      // Only keep keys where the value is numeric (number or numeric string) and not a style key
+      const filtered: Record<string, unknown> = {};
+      Object.keys(flattened).forEach(key => {
+        const value = flattened[key];
+        if (!shouldIgnoreKey(key) && (typeof value === 'number' || (typeof value === 'string' && isNumber(value)))) {
+          filtered[key] = value;
+        }
+      });
+      return filtered;
+    } else if (typeof item === 'number' || (typeof item === 'string' && isNumber(item))) {
+      // Only keep primitive numeric values
+      return { [x[index] || `item_${index}`]: item };
+    } else {
+      // Non-numeric primitive, ignore by returning empty object
+      return {};
+    }
+  });
+
+  // Collect all unique keys across all objects
+  const allKeys = new Set<string>();
+  flattenedObjects.forEach(obj => {
+    Object.keys(obj).forEach(key => allKeys.add(key));
+  });
+
+  // Create traces for each key (property)
+  const traces: Array<Record<string, unknown>> = [];
+
+  allKeys.forEach(key => {
+    const yValues: number[] = [];
+    let hasValidData = false;
+    let isNumericData = false;
+
+    flattenedObjects.forEach((obj, index) => {
+      const value = obj[key];
+      if (typeof value === 'number') {
+        yValues.push(value);
+        hasValidData = true;
+        isNumericData = true;
+      } else if (typeof value === 'string' && isNumber(value)) {
+        yValues.push(parseFloat(value));
+        hasValidData = true;
+        isNumericData = true;
+      }
+    });
+
+    // Only create trace if we have valid numeric data
+    if (hasValidData && isNumericData) {
+      const trace: Record<string, unknown> = {
+        type: 'bar',
+        name: key,
+        x,
+        y: yValues,
+      };
+
+      traces.push(trace);
+    }
+  });
+
+  return { traces, x };
+};
+
 export const transformPlotlyJsonToDonutProps = (
   input: PlotlySchema,
   isMultiPlot: boolean,
@@ -536,17 +671,52 @@ export const transformPlotlyJsonToGVBCProps = (
   colorwayType: ColorwayType,
   isDarkTheme?: boolean,
 ): GroupedVerticalBarChartProps => {
+  // Handle object arrays in y values by normalizing the data first
+  let processedInput = { ...input };
+
+  // Check if any bar traces have object arrays as y values
+  const hasObjectArrayData = input.data.some(
+    (series: Partial<PlotData>) => series.type === 'bar' && isObjectArray(series.y),
+  );
+
+  if (hasObjectArrayData) {
+    // Process each trace that has object array y values
+    const processedData = input.data
+      .map((series: Partial<PlotData>, index: number) => {
+        if (series.type === 'bar' && isObjectArray(series.y)) {
+          // Normalize the object array to create multiple traces for GVBC
+          const { traces } = normalizeObjectArrayForGVBC(
+            series.y as unknown as Array<Record<string, unknown>>,
+            Array.isArray(series.x) ? (series.x as string[]) : undefined,
+          );
+
+          // Return all the new traces, each representing a property from the objects
+          return traces.map((trace: Record<string, unknown>) => ({
+            ...trace,
+            // Copy other properties from the original series if needed
+            marker: series.marker,
+          }));
+        }
+        return [series];
+      })
+      .flat();
+
+    processedInput = {
+      ...input,
+      data: processedData,
+    };
+  }
   const mapXToDataPoints: Record<string, GroupedVerticalBarChartData> = {};
-  const secondaryYAxisValues = getSecondaryYAxisValues(input.data, input.layout, 0, 0);
-  const { legends, hideLegend } = getLegendProps(input.data, input.layout, isMultiPlot);
+  const secondaryYAxisValues = getSecondaryYAxisValues(processedInput.data, processedInput.layout, 0, 0);
+  const { legends, hideLegend } = getLegendProps(processedInput.data, processedInput.layout, isMultiPlot);
 
   let colorScale: ((value: number) => string) | undefined = undefined;
-  const yAxisTickFormat = getYAxisTickFormat(input.data[0], input.layout);
-  input.data.forEach((series: Partial<PlotData>, index1: number) => {
-    colorScale = createColorScale(input.layout, series, colorScale);
+  const yAxisTickFormat = getYAxisTickFormat(processedInput.data[0], processedInput.layout);
+  processedInput.data.forEach((series: Partial<PlotData>, index1: number) => {
+    colorScale = createColorScale(processedInput.layout, series, colorScale);
     // extract colors for each series only once
     const extractedColors = extractColor(
-      input.layout?.template?.layout?.colorway,
+      processedInput.layout?.template?.layout?.colorway,
       colorwayType,
       series.marker?.color,
       colorMap,
@@ -579,7 +749,7 @@ export const transformPlotlyJsonToGVBCProps = (
           xAxisCalloutData: x as string,
           color: rgb(color).copy({ opacity }).formatHex8() ?? color,
           legend,
-          useSecondaryYScale: usesSecondaryYScale(series, input.layout),
+          useSecondaryYScale: usesSecondaryYScale(series, processedInput.layout),
           yAxisCalloutData: getFormattedCalloutYData(yVal, yAxisTickFormat),
         });
       }
@@ -590,21 +760,21 @@ export const transformPlotlyJsonToGVBCProps = (
 
   return {
     data: gvbcData,
-    width: input.layout?.width,
-    height: input.layout?.height ?? 350,
+    width: processedInput.layout?.width,
+    height: processedInput.layout?.height ?? 350,
     barWidth: 'auto',
     mode: 'plotly',
     ...secondaryYAxisValues,
     hideTickOverlap: true,
     wrapXAxisLables: typeof gvbcData[0]?.name === 'string',
     hideLegend,
     roundCorners: true,
-    ...getTitles(input.layout),
-    ...getYMinMaxValues(input.data[0], input.layout),
-    ...getXAxisTickFormat(input.data[0], input.layout),
+    ...getTitles(processedInput.layout),
+    ...getAxisCategoryOrderProps(processedInput.data, processedInput.layout),
+    ...getYMinMaxValues(processedInput.data[0], processedInput.layout),
+    ...getXAxisTickFormat(processedInput.data[0], processedInput.layout),
     ...yAxisTickFormat,
-    ...getAxisCategoryOrderProps(input.data, input.layout),
-    ...getBarProps(input.data, input.layout),
+    ...getBarProps(processedInput.data, processedInput.layout),
   };
 };
 

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

@@ -236,7 +236,7 @@ describe('transform Plotly Json To chart Props', () => {
         transformPlotlyJsonToGVBCProps(plotlySchema, false, { current: colorMap }, 'default', true),
       ).toMatchSnapshot();
     } catch (e) {
-      expect(e).toStrictEqual(TypeError("Cannot read properties of undefined (reading 'forEach')"));
+      expect(e).toStrictEqual(TypeError("Cannot read properties of undefined (reading 'some')"));
     }
   });