diff --git a/change/@fluentui-react-charting-dc39fef3-6772-4647-97e3-872cfb5dee19.json b/change/@fluentui-react-charting-dc39fef3-6772-4647-97e3-872cfb5dee19.json new file mode 100644 index 0000000000000..919c3fd1e36fb --- /dev/null +++ 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": "120183316+srmukher@users.noreply.github.com", + "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 index 033558c023014..f046434f930db 100644 --- 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} /> )} )} @@ -625,6 +627,7 @@ export class CartesianChartBase }} maxWidth={yAxisTitleMaximumAllowedHeight} wrapContent={wrapContent} + theme={this.props.theme} /> )} diff --git a/packages/charts/react-charting/src/components/DeclarativeChart/PlotlySchemaAdapter.ts b/packages/charts/react-charting/src/components/DeclarativeChart/PlotlySchemaAdapter.ts index 1ac6812e916c0..a91a005b488df 100644 --- 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/packages/charts/react-charting/src/components/DeclarativeChart/__snapshots__/DeclarativeChartRTL.test.tsx.snap b/packages/charts/react-charting/src/components/DeclarativeChart/__snapshots__/DeclarativeChartRTL.test.tsx.snap index b20869dca1561..2cbd9d58bbfc3 100644 --- a/packages/charts/react-charting/src/components/DeclarativeChart/__snapshots__/DeclarativeChartRTL.test.tsx.snap +++ b/packages/charts/react-charting/src/components/DeclarativeChart/__snapshots__/DeclarativeChartRTL.test.tsx.snap @@ -4167,6 +4167,12 @@ exports[`DeclarativeChart Should render gaugechart in DeclarativeChart 1`] = ` /> + + + @@ -1536,28 +1550,36 @@ exports[`GaugeChart snapshot tests should not render the legends when the hideLe onMouseEnter={[Function]} onMouseMove={[Function]} > - , + ] @@ -1730,28 +1752,36 @@ exports[`GaugeChart snapshot tests should render GaugeChart correctly 1`] = ` onMouseEnter={[Function]} onMouseMove={[Function]} > - , + ] @@ -2322,28 +2352,36 @@ exports[`GaugeChart snapshot tests should render GaugeChart correctly in dark th onMouseEnter={[Function]} onMouseMove={[Function]} > - , + ] @@ -2902,28 +2940,36 @@ exports[`GaugeChart snapshot tests should render GaugeChart correctly when the l onMouseEnter={[Function]} onMouseMove={[Function]} > - , + ] @@ -3462,28 +3508,36 @@ exports[`GaugeChart snapshot tests should render a color from DataVizPalette for onMouseEnter={[Function]} onMouseMove={[Function]} > - , + ] @@ -3918,28 +3972,36 @@ exports[`GaugeChart snapshot tests should render a placeholder segment when the onMouseEnter={[Function]} onMouseMove={[Function]} > - , + ] @@ -4406,28 +4468,36 @@ exports[`GaugeChart snapshot tests should render the chart title correctly 1`] = onMouseEnter={[Function]} onMouseMove={[Function]} > - , + ] @@ -4985,28 +5055,36 @@ exports[`GaugeChart snapshot tests should render the chart value in fraction for onMouseEnter={[Function]} onMouseMove={[Function]} > - , + ] @@ -5564,17 +5642,55 @@ exports[`GaugeChart snapshot tests should render the sublabel correctly 1`] = ` onMouseEnter={[Function]} onMouseMove={[Function]} > + Array [ + , + , + ] + + Array [ + , - - - Low Risk - + Low Risk + , + ] 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 index 1690800a1feca..a0fa77d4cbe7a 100644 --- 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 @@ -54,6 +54,12 @@ 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" /> + + + + + + + + + + + + + + + boolean; + + /** + * Theme provided by High Order Component + */ + theme?: ITheme; } interface ISVGTooltipTextState { isTooltipVisible: boolean; isOverflowing: boolean; + textX?: number; + textY?: number; + textWidth?: number; + textHeight?: number; } +const PADDING = 4; + /** * Component to render an SVG text element with an optional tooltip. * The tooltip appears on hovering and focusing the element when its content overflows. @@ -105,7 +117,7 @@ export class SVGTooltipText public render(): React.ReactNode { const { content, tooltipProps, textProps, shouldReceiveFocus = true } = this.props; - const { isTooltipVisible } = this.state; + const { isTooltipVisible, textX, textY, textWidth, textHeight } = this.state; const tooltipRenderProps: ITooltipProps = { content, targetElement: this._getTargetElement(), @@ -121,9 +133,18 @@ export class SVGTooltipText const showTooltip = (!!this.props.isTooltipVisibleProp && this.state.isOverflowing && !!content) || (isTooltipVisible && !!content); - + const backgroundColor = this.props.theme ? this.props.theme.semanticColors.bodyBackground : undefined; + const isRTL = getRTL(); + const rectX = isRTL ? (textX ?? 0) + (textWidth ?? 0) - PADDING : (textX ?? 0) - PADDING; return ( <> + ): void { if (this.props.maxWidth !== prevProps.maxWidth || this.props.maxHeight !== prevProps.maxHeight) { this._wrapContent(); + this._measureText(); } } @@ -168,6 +191,18 @@ export class SVGTooltipText this._hideTooltip(); }; + private _measureText = (): void => { + if (this._tooltipHost.current && typeof this._tooltipHost.current.getBBox === 'function') { + const bbox = this._tooltipHost.current.getBBox(); + this.setState({ + textX: bbox.x, + textY: bbox.y, + textWidth: bbox.width, + textHeight: bbox.height, + }); + } + }; + private _getTargetElement = (): HTMLElement | undefined => { if (!this._tooltipHost.current) { return undefined;