refactor(react-charting): set max-width for heatmap callout without using subComponentStyles (#34992)

Author: krkshitij

change/@fluentui-react-charting-932d5c19-480d-4f4d-9da6-44cdb667d9d2.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "refactor: set max-width for heatmap callout without using subComponentStyles",
+  "packageName": "@fluentui/react-charting",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

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

@@ -913,8 +913,8 @@ export interface IHeatMapChartStyles {
     root?: IStyle;
     // (undocumented)
     subComponentStyles: {
-        cartesianStyles: IStyleFunctionOrObject<ICartesianChartStyleProps, ICartesianChartStyles>;
-        calloutStyles: IStyleFunctionOrObject<ICalloutContentStyleProps, ICalloutContentStyles>;
+        cartesianStyles?: IStyleFunctionOrObject<ICartesianChartStyleProps, ICartesianChartStyles>;
+        calloutStyles?: IStyleFunctionOrObject<ICalloutContentStyleProps, ICalloutContentStyles>;
     };
     // (undocumented)
     text?: IStyle;

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

@@ -54,6 +54,7 @@ const ResponsiveVerticalStackedBarChart = withResponsiveContainer(VerticalStacke
 const ResponsiveLineChart = withResponsiveContainer(LineChart);
 const ResponsiveHorizontalBarChartWithAxis = withResponsiveContainer(HorizontalBarChartWithAxis);
 const ResponsiveAreaChart = withResponsiveContainer(AreaChart);
+const ResponsiveHeatMapChart = withResponsiveContainer(HeatMapChart);
 const ResponsiveSankeyChart = withResponsiveContainer(SankeyChart);
 const ResponsiveGaugeChart = withResponsiveContainer(GaugeChart);
 const ResponsiveGroupedVerticalBarChart = withResponsiveContainer(GroupedVerticalBarChart);
@@ -195,7 +196,7 @@ type ChartTypeMap = {
   } & PreTransformHooks;
   heatmap: {
     transformer: typeof transformPlotlyJsonToHeatmapProps;
-    renderer: typeof HeatMapChart;
+    renderer: typeof ResponsiveHeatMapChart;
   } & PreTransformHooks;
   gauge: {
     transformer: typeof transformPlotlyJsonToGaugeProps;
@@ -262,7 +263,7 @@ const chartMap: ChartTypeMap = {
   },
   heatmap: {
     transformer: transformPlotlyJsonToHeatmapProps,
-    renderer: HeatMapChart,
+    renderer: ResponsiveHeatMapChart,
   },
   gauge: {
     transformer: transformPlotlyJsonToGaugeProps,