fix(react-charting): [BUG 12178] Add background to the SVGTooltipText (…

…#33696)
microsoft · Jan 30, 2025 · fa5549e · fa5549e
1 parent 669de2d
commit fa5549e
Show file tree

Hide file tree

Showing 8 changed files with 462 additions and 221 deletions.
diff --git a/change/@fluentui-react-charting-dc39fef3-6772-4647-97e3-872cfb5dee19.json b/change/@fluentui-react-charting-dc39fef3-6772-4647-97e3-872cfb5dee19.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Add background to the SVGTooltipText",
+  "packageName": "@fluentui/react-charting",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/charts/react-charting/src/components/CommonComponents/CartesianChart.base.tsx b/packages/charts/react-charting/src/components/CommonComponents/CartesianChart.base.tsx
@@ -554,6 +554,7 @@ export class CartesianChartBase
                 }}
                 maxWidth={xAxisTitleMaximumAllowedWidth}
                 wrapContent={wrapContent}
+                theme={this.props.theme}
               />
             )}
             <g
@@ -602,6 +603,7 @@ export class CartesianChartBase
                     }}
                     maxWidth={yAxisTitleMaximumAllowedHeight}
                     wrapContent={wrapContent}
+                    theme={this.props.theme}
                   />
                 )}
               </g>
@@ -625,6 +627,7 @@ export class CartesianChartBase
                 }}
                 maxWidth={yAxisTitleMaximumAllowedHeight}
                 wrapContent={wrapContent}
+                theme={this.props.theme}
               />
             )}
           </svg>

diff --git a/packages/charts/react-charting/src/components/DeclarativeChart/PlotlySchemaAdapter.ts b/packages/charts/react-charting/src/components/DeclarativeChart/PlotlySchemaAdapter.ts
@@ -796,7 +796,7 @@ export const transformPlotlyJsonToGaugeProps = (
   };
 };
 
-const MAX_DEPTH = 8;
+const MAX_DEPTH = 15;
 export const sanitizeJson = (jsonObject: any, depth: number = 0): any => {
   if (depth > MAX_DEPTH) {
     throw new Error('Maximum json depth exceeded');

diff --git a/...-charting/src/components/DeclarativeChart/__snapshots__/DeclarativeChartRTL.test.tsx.snap b/...-charting/src/components/DeclarativeChart/__snapshots__/DeclarativeChartRTL.test.tsx.snap
@@ -4167,6 +4167,12 @@ exports[`DeclarativeChart Should render gaugechart in DeclarativeChart 1`] = `
             />
           </g>
           <g>
+            <rect
+              height="8"
+              width="8"
+              x="-4"
+              y="-4"
+            />
             <text
               aria-hidden="true"
               class=
@@ -4186,6 +4192,12 @@ exports[`DeclarativeChart Should render gaugechart in DeclarativeChart 1`] = `
               420
             </text>
           </g>
+          <rect
+            height="8"
+            width="8"
+            x="-4"
+            y="-4"
+          />
           <text
             class=