fix(react-charts): fix chart bugs and callout text size issue (#35171)

Co-authored-by: Anush <anushgupta@microsoft.com>

Author: Anush2303

change/@fluentui-chart-utilities-a526e984-f914-419b-a5a8-53bc63820565.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix chart table bugs in v9",
+  "packageName": "@fluentui/chart-utilities",
+  "email": "anushgupta@microsoft.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-charts-d95f3f99-0eda-4959-a735-fa39b71adcfa.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix chart table bugs in v9",
+  "packageName": "@fluentui/react-charts",
+  "email": "anushgupta@microsoft.com",
+  "dependentChangeType": "patch"
+}

packages/charts/chart-utilities/etc/chart-utilities.api.md

@@ -1972,9 +1972,9 @@ export interface TableData {
             color?: Color | Color[];
         };
         values: (string | number | boolean | null)[][];
-        format: string | string[];
-        prefix: string | string[];
-        suffix: string | string[];
+        format?: string | string[];
+        prefix?: string | string[];
+        suffix?: string | string[];
     };
     // (undocumented)
     header?: {

packages/charts/chart-utilities/src/PlotlySchema.ts

@@ -1405,9 +1405,9 @@ export interface TableData {
       color?: Color | Color[];
     };
     values: (string | number | boolean | null)[][];
-    format: string | string[];
-    prefix: string | string[];
-    suffix: string | string[];
+    format?: string | string[];
+    prefix?: string | string[];
+    suffix?: string | string[];
   };
 }
 

packages/charts/react-charts/library/src/components/ChartTable/ChartTable.tsx

@@ -114,7 +114,6 @@ export const ChartTable: React.FunctionComponent<ChartTableProps> = React.forwar
                 className={classes.table}
                 style={{
                   width: width ? `${width}px` : '100%',
-                  height: height ? `${height}px` : '650px',
                 }}
               >
                 <thead>

packages/charts/react-charts/library/src/components/ChartTable/useChartTableStyles.styles.ts

@@ -26,7 +26,7 @@ const useStyles = makeStyles({
     ...typographyStyles.caption1,
     fontWeight: tokens.fontWeightSemibold,
     backgroundColor: tokens.colorNeutralBackground3,
-    color: tokens.colorNeutralForeground1,
+    color: 'black',
     ...shorthands.padding(tokens.spacingHorizontalS),
     textAlign: 'left',
     ...shorthands.border(tokens.strokeWidthThick, 'solid', tokens.colorNeutralStroke2),
@@ -39,7 +39,7 @@ const useStyles = makeStyles({
     ...typographyStyles.caption1,
     ...shorthands.padding(tokens.spacingHorizontalS),
     ...shorthands.border(tokens.strokeWidthThick, 'solid', tokens.colorNeutralStroke2),
-    color: tokens.colorNeutralForeground1,
+    color: 'black',
     textAlign: 'left',
     '@media (forced-colors: active)': {
       color: 'WindowText',

packages/charts/react-charts/library/src/components/CommonComponents/ChartPopover.tsx

@@ -73,7 +73,10 @@ export const ChartPopover: React.FunctionComponent<ChartPopoverProps> = React.fo
                   </div>
                   <div
                     className={classes.calloutContentY}
-                    style={{ color: props.color ? props.color : tokens.colorNeutralForeground1 }}
+                    style={{
+                      color: props.color ? props.color : tokens.colorNeutralForeground1,
+                      fontSize: tokens.fontSizeHero700,
+                    }}
                   >
                     {formatToLocaleString(YValue, props.culture) as React.ReactNode}
                   </div>
@@ -190,7 +193,6 @@ export const ChartPopover: React.FunctionComponent<ChartPopoverProps> = React.fo
             id={`${index}_${xValue.y}`}
             className={classes.calloutBlockContainer}
             style={{
-              marginTop: props.XValue ? '13px' : 'unset',
               ...(!toDrawShape
                 ? {
                     borderInlineStart: `4px solid ${xValue.color}`,
@@ -214,6 +216,7 @@ export const ChartPopover: React.FunctionComponent<ChartPopoverProps> = React.fo
                   ? classes.calloutBlockContainertoDrawShapetrue
                   : classes.calloutBlockContainertoDrawShapefalse,
               )}
+              style={{ marginTop: xValue ? '13px' : 'unset' }}
             >
               <div className={classes.calloutlegendText}> {xValue.legend}</div>
               <div className={classes.calloutContentY} style={{ direction: 'ltr', unicodeBidi: 'isolate' }}>

packages/charts/react-charts/library/src/components/CommonComponents/useChartPopoverStyles.styles.ts

@@ -50,7 +50,6 @@ const useStyles = makeStyles({
   },
   calloutBlockContainerCartesian: {
     ...typographyStyles.caption1,
-    marginTop: '13px',
     forcedColorAdjust: 'none',
   },
   calloutBlockContainerNonCartesian: {
@@ -70,6 +69,7 @@ const useStyles = makeStyles({
     ...typographyStyles.caption1,
     color: tokens.colorNeutralForeground2,
     forcedColorAdjust: 'auto',
+    marginBottom: tokens.spacingVerticalXS,
   },
   calloutContentY: {
     forcedColorAdjust: 'auto',

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

@@ -1668,6 +1668,27 @@ function resolveCellStyle<T>(raw: T | T[] | T[][] | undefined, rowIndex: number,
   return raw;
 }
 
+function mergeCells(tableCells?: TableData['cells'], templateCells?: TableData['cells']): TableData['cells'] {
+  return {
+    values: tableCells?.values ?? templateCells?.values ?? [],
+    align: tableCells?.align ?? templateCells?.align,
+
+    fill: {
+      ...(templateCells?.fill ?? {}),
+      ...(tableCells?.fill ?? {}),
+    },
+
+    font: {
+      ...(templateCells?.font ?? {}),
+      ...(tableCells?.font ?? {}),
+    },
+
+    format: tableCells?.format ?? templateCells?.format,
+    prefix: tableCells?.prefix ?? templateCells?.prefix,
+    suffix: tableCells?.suffix ?? templateCells?.suffix,
+  };
+}
+
 export const transformPlotlyJsonToChartTableProps = (
   input: PlotlySchema,
   isMultiPlot: boolean,
@@ -1711,10 +1732,7 @@ export const transformPlotlyJsonToChartTableProps = (
     });
   };
   const columns = tableData.cells?.values ?? [];
-  const cells =
-    tableData.cells && Object.keys(tableData.cells).length > 0
-      ? tableData.cells
-      : input.layout?.template?.data?.table?.[0]?.cells;
+  const cells = mergeCells(tableData.cells, input.layout?.template?.data?.table?.[0]?.cells);
   const rows = columns[0].map((_, rowIndex: number) =>
     columns.map((col, colIndex) => {
       const cellValue = col[rowIndex];
@@ -1752,13 +1770,24 @@ export const transformPlotlyJsonToChartTableProps = (
     },
   };
 
+  const templateHeader = input.layout?.template?.data?.table?.[0]?.header;
+  const tableHeader = tableData.header;
+
+  const header = {
+    align: tableHeader?.align ?? templateHeader?.align,
+    fill: {
+      ...(templateHeader?.fill ?? {}),
+      ...(tableHeader?.fill ?? {}),
+    },
+    font: {
+      ...(templateHeader?.font ?? {}),
+      ...(tableHeader?.font ?? {}),
+    },
+    values: tableHeader?.values ?? templateHeader?.values ?? [],
+  };
+
   return {
-    headers: normalizeHeaders(
-      tableData.header?.values ?? [],
-      tableData.header && Object.keys(tableData.header).length > 0
-        ? tableData.header
-        : input.layout?.template?.data?.table![0].header,
-    ),
+    headers: normalizeHeaders(tableData.header?.values ?? [], header),
     rows,
     width: input.layout?.width,
     height: input.layout?.height,