fix(react-charting): Fixed tooltip position and background on Gauge a…

…nd Pie charts (#33773)
microsoft · Feb 4, 2025 · 5f1fb06 · 5f1fb06
1 parent 1c7b0ad
commit 5f1fb06
Show file tree

Hide file tree

Showing 8 changed files with 86 additions and 49 deletions.
diff --git a/change/@fluentui-react-charting-d69a12ae-b57b-4dcf-8df0-fb8ed5aef81d.json b/change/@fluentui-react-charting-d69a12ae-b57b-4dcf-8df0-fb8ed5aef81d.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix(react-charting): Fixed tooltip position and background on Gauge and Pie charts",
+  "packageName": "@fluentui/react-charting",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/...-charting/src/components/DeclarativeChart/__snapshots__/DeclarativeChartRTL.test.tsx.snap b/...-charting/src/components/DeclarativeChart/__snapshots__/DeclarativeChartRTL.test.tsx.snap
@@ -4168,6 +4168,7 @@ exports[`DeclarativeChart Should render gaugechart in DeclarativeChart 1`] = `
           </g>
           <g>
             <rect
+              fill="#ffffff"
               height="8"
               width="8"
               x="-4"

diff --git a/packages/charts/react-charting/src/components/GaugeChart/GaugeChart.base.tsx b/packages/charts/react-charting/src/components/GaugeChart/GaugeChart.base.tsx
@@ -317,6 +317,7 @@ export class GaugeChartBase extends React.Component<IGaugeChartProps, IGaugeChar
                   }}
                   maxWidth={this._innerRadius * 2 - 24}
                   wrapContent={this._wrapContent}
+                  theme={this.props.theme}
                 />
               </g>
               {this.props.sublabel && (

diff --git a/...es/charts/react-charting/src/components/GaugeChart/__snapshots__/GaugeChart.test.tsx.snap b/...es/charts/react-charting/src/components/GaugeChart/__snapshots__/GaugeChart.test.tsx.snap
@@ -150,6 +150,7 @@ exports[`GaugeChart interaction and accessibility tests should show a callout wh
           </g>
           <g>
             <rect
+              fill="#ffffff"
               height="8"
               width="8"
               x="-4"
@@ -965,6 +966,7 @@ exports[`GaugeChart snapshot tests should not render min and max values of the g
         >
           Array [
             <rect
+              fill="#ffffff"
               height={8}
               width={8}
               x={-4}
@@ -1552,6 +1554,7 @@ exports[`GaugeChart snapshot tests should not render the legends when the hideLe
         >
           Array [
             <rect
+              fill="#ffffff"
               height={8}
               width={8}
               x={-4}
@@ -1754,6 +1757,7 @@ exports[`GaugeChart snapshot tests should render GaugeChart correctly 1`] = `
         >
           Array [
             <rect
+              fill="#ffffff"
               height={8}
               width={8}
               x={-4}
@@ -2354,6 +2358,7 @@ exports[`GaugeChart snapshot tests should render GaugeChart correctly in dark th
           >
             Array [
               <rect
+                fill="#1b1a19"
                 height={8}
                 width={8}
                 x={-4}
@@ -2942,6 +2947,7 @@ exports[`GaugeChart snapshot tests should render GaugeChart correctly when the l
         >
           Array [
             <rect
+              fill="#ffffff"
               height={8}
               width={8}
               x={-4}
@@ -3510,6 +3516,7 @@ exports[`GaugeChart snapshot tests should render a color from DataVizPalette for
         >
           Array [
             <rect
+              fill="#ffffff"
               height={8}
               width={8}
               x={-4}
@@ -3974,6 +3981,7 @@ exports[`GaugeChart snapshot tests should render a placeholder segment when the
         >
           Array [
             <rect
+              fill="#ffffff"
               height={8}
               width={8}
               x={-4}
@@ -4470,6 +4478,7 @@ exports[`GaugeChart snapshot tests should render the chart title correctly 1`] =
         >
           Array [
             <rect
+              fill="#ffffff"
               height={8}
               width={8}
               x={-4}
@@ -5057,6 +5066,7 @@ exports[`GaugeChart snapshot tests should render the chart value in fraction for
         >
           Array [
             <rect
+              fill="#ffffff"
               height={8}
               width={8}
               x={-4}
@@ -5644,6 +5654,7 @@ exports[`GaugeChart snapshot tests should render the sublabel correctly 1`] = `
         >
           Array [
             <rect
+              fill="#ffffff"
               height={8}
               width={8}
               x={-4}

diff --git a/packages/charts/react-charting/src/components/PieChart/Arc/Arc.tsx b/packages/charts/react-charting/src/components/PieChart/Arc/Arc.tsx
@@ -96,8 +96,8 @@ export class LabeledArc extends Arc {
         <SVGTooltipText
           content={content}
           textProps={{
-            x: labelX,
-            y: labelY,
+            x: labelX + (angle > Math.PI ? -10 : 10),
+            y: labelY + (angle > Math.PI / 2 && angle < (3 * Math.PI) / 2 ? 10 : -10),
             dominantBaseline: angle > Math.PI / 2 && angle < (3 * Math.PI) / 2 ? 'hanging' : 'auto',
             textAnchor: (!this._isRTL && angle > Math.PI) || (this._isRTL && angle < Math.PI) ? 'end' : 'start',
             'aria-label': `${data?.data.x}-${convertToLocaleString(data?.data.y, culture)}`,
@@ -107,6 +107,7 @@ export class LabeledArc extends Arc {
           shouldReceiveFocus={false}
           maxWidth={40}
           wrapContent={wrapContent}
+          theme={this.props.theme}
         />
       </g>
     );

diff --git a/packages/charts/react-charting/src/components/PieChart/PieChart.base.tsx b/packages/charts/react-charting/src/components/PieChart/PieChart.base.tsx
@@ -33,6 +33,7 @@ export class PieChartBase extends React.Component<IPieChartProps, {}> {
 
     const TEXT_MAX_WIDTH = 40;
     const TEXT_LINE_HEIGHT = 16;
+    const PADDING = 4;
 
     /**
      * The radius for the pie chart is computed based on the space available inside the svg
@@ -47,8 +48,8 @@ export class PieChartBase extends React.Component<IPieChartProps, {}> {
         {this.props.chartTitle && <p className={this._classNames.chartTitle}>{this.props.chartTitle}</p>}
         <Pie
           culture={culture}
-          width={width!}
-          height={height!}
+          width={width! + 2 * PADDING}
+          height={height! + 2 * PADDING}
           outerRadius={outerRadius}
           innerRadius={1}
           data={data!}

diff --git a/packages/charts/react-charting/src/components/PieChart/__snapshots__/PieChart.test.tsx.snap b/packages/charts/react-charting/src/components/PieChart/__snapshots__/PieChart.test.tsx.snap
@@ -26,12 +26,12 @@ exports[`PieChart snapShot testing renders PieChart correctly 1`] = `
     onMouseDownCapture={[Function]}
   >
     <svg
-      height={350}
-      width={600}
+      height={358}
+      width={608}
     >
       <g
         className="pie"
-        transform="translate(300, 175)"
+        transform="translate(304, 179)"
       >
         <g
           aria-label="A-50"
@@ -55,6 +55,7 @@ exports[`PieChart snapShot testing renders PieChart correctly 1`] = `
             d="M0.795,-158.998A159,159,0,0,1,1.59,158.992L0.798,0.603A1,1,0,0,0,0.795,-0.607Z"
           />
           <rect
+            fill="#ffffff"
             height={8}
             width={8}
             x={-4}
@@ -77,8 +78,8 @@ exports[`PieChart snapShot testing renders PieChart correctly 1`] = `
             onMouseEnter={[Function]}
             onMouseLeave={[Function]}
             textAnchor="start"
-            x={158.9995031252588}
-            y={-0.3974995859376562}
+            x={168.9995031252588}
+            y={-10.397499585937656}
           >
             A-50
           </text>
@@ -105,6 +106,7 @@ exports[`PieChart snapShot testing renders PieChart correctly 1`] = `
             d="M0,159A159,159,0,0,1,-158.996,1.193L-0.704,0.71Z"
           />
           <rect
+            fill="#ffffff"
             height={8}
             width={8}
             x={-4}
@@ -127,8 +129,8 @@ exports[`PieChart snapShot testing renders PieChart correctly 1`] = `
             onMouseEnter={[Function]}
             onMouseLeave={[Function]}
             textAnchor="end"
-            x={-112.00757625617408}
-            y={112.85079911643227}
+            x={-122.00757625617408}
+            y={122.85079911643227}
           >
             B-25
           </text>
@@ -155,6 +157,7 @@ exports[`PieChart snapShot testing renders PieChart correctly 1`] = `
             d="M-159,-0.398A159,159,0,0,1,-0.795,-158.998L-0.708,-0.706Z"
           />
           <rect
+            fill="#ffffff"
             height={8}
             width={8}
             x={-4}
@@ -177,8 +180,8 @@ exports[`PieChart snapShot testing renders PieChart correctly 1`] = `
             onMouseEnter={[Function]}
             onMouseLeave={[Function]}
             textAnchor="end"
-            x={-112.57042780891464}
-            y={-112.2893529365894}
+            x={-122.57042780891464}
+            y={-122.2893529365894}
           >
             C-25
           </text>
@@ -215,12 +218,12 @@ exports[`PieChart snapShot testing renders with colors, width and height data co
     onMouseDownCapture={[Function]}
   >
     <svg
-      height={300}
-      width={600}
+      height={308}
+      width={608}
     >
       <g
         className="pie"
-        transform="translate(300, 150)"
+        transform="translate(304, 154)"
       >
         <g
           aria-label="A-50"
@@ -244,6 +247,7 @@ exports[`PieChart snapShot testing renders with colors, width and height data co
             d="M0.67,-133.998A134,134,0,0,1,1.34,133.993L0.674,0.739A1,1,0,0,0,0.67,-0.742Z"
           />
           <rect
+            fill="#ffffff"
             height={8}
             width={8}
             x={-4}
@@ -266,8 +270,8 @@ exports[`PieChart snapShot testing renders with colors, width and height data co
             onMouseEnter={[Function]}
             onMouseLeave={[Function]}
             textAnchor="start"
-            x={133.99958125021809}
-            y={-0.3349996510417983}
+            x={143.99958125021809}
+            y={-10.334999651041798}
           >
             A-50
           </text>
@@ -294,6 +298,7 @@ exports[`PieChart snapShot testing renders with colors, width and height data co
             d="M0,134A134,134,0,0,1,-133.996,1.005L-0.741,0.672A1,1,0,0,0,-0.666,0.746Z"
           />
           <rect
+            fill="#ffffff"
             height={8}
             width={8}
             x={-4}
@@ -316,8 +321,8 @@ exports[`PieChart snapShot testing renders with colors, width and height data co
             onMouseEnter={[Function]}
             onMouseLeave={[Function]}
             textAnchor="end"
-            x={-94.39632212784481}
-            y={95.1069627773706}
+            x={-104.39632212784481}
+            y={105.1069627773706}
           >
             B-25
           </text>
@@ -344,6 +349,7 @@ exports[`PieChart snapShot testing renders with colors, width and height data co
             d="M-134,-0.335A134,134,0,0,1,-0.67,-133.998L-0.67,-0.742A1,1,0,0,0,-0.744,-0.668Z"
           />
           <rect
+            fill="#ffffff"
             height={8}
             width={8}
             x={-4}
@@ -366,8 +372,8 @@ exports[`PieChart snapShot testing renders with colors, width and height data co
             onMouseEnter={[Function]}
             onMouseLeave={[Function]}
             textAnchor="end"
-            x={-94.87067500877083}
-            y={-94.63379429876088}
+            x={-104.87067500877083}
+            y={-104.63379429876088}
           >
             C-25
           </text>
-Original file line number
+Diff line change
@@ Expand Up @@
               </g>
               <g>
                 <rect
+                  fill="#ffffff"
                   height="8"
                   width="8"
                   x="-4"
@@ Expand Down @@