fix(gaugechart): fix gauge chart style hook to merge style from props (#34604)

Author: spacewj0424

change/@fluentui-react-charts-25fbe741-5ba7-4997-b827-0c8d2b3547ae.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Fix GaugeChart so it can merge customer provided styles to the chart",
+  "packageName": "@fluentui/react-charts",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/charts/react-charts/library/src/components/GaugeChart/useGaugeChartStyles.styles.ts

@@ -118,25 +118,54 @@ export const useGaugeChartStyles = (props: GaugeChartProps): GaugeChartStyles =>
   const baseStyles = useStyles();
 
   return {
-    root: mergeClasses(gaugeChartClassNames.root, baseStyles.root),
-    chart: mergeClasses(gaugeChartClassNames.chart, baseStyles.chart),
-    limits: mergeClasses(gaugeChartClassNames.limits, baseStyles.limits),
-    chartValue: mergeClasses(gaugeChartClassNames.chartValue, baseStyles.chartValue),
-    sublabel: mergeClasses(gaugeChartClassNames.sublabel, baseStyles.sublabel),
-    needle: mergeClasses(gaugeChartClassNames.needle, baseStyles.needle),
-    chartTitle: mergeClasses(gaugeChartClassNames.chartTitle, baseStyles.chartTitle),
-    segment: mergeClasses(gaugeChartClassNames.segment, baseStyles.segment),
-    gradientSegment: mergeClasses(gaugeChartClassNames.gradientSegment, baseStyles.gradientSegment),
-    calloutContentRoot: mergeClasses(gaugeChartClassNames.calloutContentRoot, baseStyles.calloutContentRoot),
+    root: mergeClasses(gaugeChartClassNames.root, baseStyles.root, props.styles?.root),
+    chart: mergeClasses(gaugeChartClassNames.chart, baseStyles.chart, props.styles?.chart),
+    limits: mergeClasses(gaugeChartClassNames.limits, baseStyles.limits, props.styles?.limits),
+    chartValue: mergeClasses(gaugeChartClassNames.chartValue, baseStyles.chartValue, props.styles?.chartValue),
+    sublabel: mergeClasses(gaugeChartClassNames.sublabel, baseStyles.sublabel, props.styles?.sublabel),
+    needle: mergeClasses(gaugeChartClassNames.needle, baseStyles.needle, props.styles?.needle),
+    chartTitle: mergeClasses(gaugeChartClassNames.chartTitle, baseStyles.chartTitle, props.styles?.chartTitle),
+    segment: mergeClasses(gaugeChartClassNames.segment, baseStyles.segment, props.styles?.segment),
+    gradientSegment: mergeClasses(
+      gaugeChartClassNames.gradientSegment,
+      baseStyles.gradientSegment,
+      props.styles?.gradientSegment,
+    ),
+    calloutContentRoot: mergeClasses(
+      gaugeChartClassNames.calloutContentRoot,
+      baseStyles.calloutContentRoot,
+      props.styles?.calloutContentRoot,
+    ),
     calloutDateTimeContainer: mergeClasses(
       gaugeChartClassNames.calloutDateTimeContainer,
       baseStyles.calloutDateTimeContainer,
+      props.styles?.calloutDateTimeContainer,
+    ),
+    calloutContentX: mergeClasses(
+      gaugeChartClassNames.calloutContentX,
+      baseStyles.calloutContentX,
+      props.styles?.calloutContentX,
+    ),
+    calloutBlockContainer: mergeClasses(
+      gaugeChartClassNames.calloutBlockContainer,
+      baseStyles.calloutBlockContainer,
+      props.styles?.calloutBlockContainer,
+    ),
+    shapeStyles: mergeClasses(gaugeChartClassNames.shapeStyles, baseStyles.shapeStyles, props.styles?.shapeStyles),
+    calloutlegendText: mergeClasses(
+      gaugeChartClassNames.calloutlegendText,
+      baseStyles.calloutlegendText,
+      props.styles?.calloutlegendText,
+    ),
+    calloutContentY: mergeClasses(
+      gaugeChartClassNames.calloutContentY,
+      baseStyles.calloutContentY,
+      props.styles?.calloutContentY,
+    ),
+    descriptionMessage: mergeClasses(
+      gaugeChartClassNames.descriptionMessage,
+      baseStyles.descriptionMessage,
+      props.styles?.descriptionMessage,
     ),
-    calloutContentX: mergeClasses(gaugeChartClassNames.calloutContentX, baseStyles.calloutContentX),
-    calloutBlockContainer: mergeClasses(gaugeChartClassNames.calloutBlockContainer, baseStyles.calloutBlockContainer),
-    shapeStyles: mergeClasses(gaugeChartClassNames.shapeStyles, baseStyles.shapeStyles),
-    calloutlegendText: mergeClasses(gaugeChartClassNames.calloutlegendText, baseStyles.calloutlegendText),
-    calloutContentY: mergeClasses(gaugeChartClassNames.calloutContentY, baseStyles.calloutContentY),
-    descriptionMessage: mergeClasses(gaugeChartClassNames.descriptionMessage, baseStyles.descriptionMessage),
   };
 };