fix(react-charts): fix callout position issues (#34868)

Co-authored-by: Anush <anushgupta@microsoft.com>

Author: Anush2303

change/@fluentui-react-charts-1916b4bc-e595-453f-8bec-2fc3275a3c80.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix callout position issues",
+  "packageName": "@fluentui/react-charts",
+  "email": "anushgupta@microsoft.com",
+  "dependentChangeType": "patch"
+}

packages/charts/react-charts/library/src/components/AreaChart/AreaChart.tsx

@@ -638,6 +638,7 @@ export const AreaChart: React.FunctionComponent<AreaChartProps> = React.forwardR
                 opacity={layerOpacity}
                 fillOpacity={_getOpacity(points[index]!.legend)}
                 onMouseMove={event => _onRectMouseMove(event)}
+                onFocus={event => _handleFocus(event, index, 0, `${_circleId}_${index}`)}
                 onMouseOut={_onRectMouseOut}
                 onMouseOver={event => _onRectMouseMove(event)}
               />
@@ -701,7 +702,7 @@ export const AreaChart: React.FunctionComponent<AreaChartProps> = React.forwardR
                     onMouseOut={_onRectMouseOut}
                     onMouseOver={event => _onRectMouseMove(event)}
                     onClick={() => _onDataPointClick(points[index]!.data[pointIndex].onDataPointClick!)}
-                    onFocus={() => _handleFocus(index, pointIndex, circleId)}
+                    onFocus={event => _handleFocus(event, index, pointIndex, circleId)}
                     onBlur={_handleBlur}
                     {...getSecureProps(pointOptions)}
                     r={_getCircleRadius(xDataPoint, circleRadius, circleId, legend)}
@@ -731,6 +732,7 @@ export const AreaChart: React.FunctionComponent<AreaChartProps> = React.forwardR
                   fill={_updateCircleFillColor(xDataPoint, lineColor, circleId)}
                   onMouseOut={_onRectMouseOut}
                   onMouseOver={event => _onRectMouseMove(event)}
+                  onFocus={event => _handleFocus(event, index, pointIndex, circleId)}
                   onClick={() => _onDataPointClick(points[index]!.data[pointIndex].onDataPointClick!)}
                   {...getSecureProps(pointOptions)}
                   r={_getCircleRadius(xDataPoint, circleRadius, circleId, legend)}
@@ -834,7 +836,20 @@ export const AreaChart: React.FunctionComponent<AreaChartProps> = React.forwardR
         : [];
     }
 
-    function _handleFocus(lineIndex: number, pointIndex: number, circleId: string) {
+    function _handleFocus(
+      event: React.FocusEvent<SVGCircleElement, Element>,
+      lineIndex: number,
+      pointIndex: number,
+      circleId: string,
+    ) {
+      let cx = 0;
+      let cy = 0;
+
+      const targetRect = (event.target as SVGCircleElement).getBoundingClientRect();
+      cx = targetRect.left + targetRect.width / 2;
+      cy = targetRect.top + targetRect.height / 2;
+      _updatePosition(cx, cy);
+
       const { x, y, xAxisCalloutData } = props.data.lineChartData![lineIndex].data[pointIndex];
       const formattedDate = x instanceof Date ? formatDate(x, props.useUTC) : x;
       const modifiedXVal = x instanceof Date ? x.getTime() : x;

packages/charts/react-charts/library/src/components/DonutChart/Arc/Arc.tsx

@@ -22,8 +22,8 @@ export const Arc: React.FunctionComponent<ArcProps> = React.forwardRef<HTMLDivEl
       _updateChart(props);
     }, [props]);
 
-    function _onFocus(data: ChartDataPoint, id: string): void {
-      props.onFocusCallback!(data, id, currentRef.current);
+    function _onFocus(data: ChartDataPoint, id: string, event: React.FocusEvent<SVGPathElement, Element>): void {
+      props.onFocusCallback!(data, id, event, currentRef.current);
     }
 
     function _hoverOn(data: ChartDataPoint, mouseEvent: React.MouseEvent<SVGPathElement>): void {
@@ -128,10 +128,10 @@ export const Arc: React.FunctionComponent<ArcProps> = React.forwardRef<HTMLDivEl
           }
           className={classes.root}
           style={{ fill: props.color, cursor: href ? 'pointer' : 'default' }}
-          onFocus={_onFocus.bind(this, props.data!.data, id)}
+          onFocus={event => _onFocus(props.data!.data, id, event)}
           data-is-focusable={props.activeArc === props.data!.data.legend || props.activeArc === ''}
-          onMouseOver={_hoverOn.bind(this, props.data!.data)}
-          onMouseMove={_hoverOn.bind(this, props.data!.data)}
+          onMouseOver={event => _hoverOn(props.data!.data, event)}
+          onMouseMove={event => _hoverOn(props.data!.data, event)}
           onMouseLeave={_hoverOff}
           tabIndex={_shouldHighlightArc(props.data!.data.legend!) ? 0 : undefined}
           onBlur={_onBlur}

packages/charts/react-charts/library/src/components/DonutChart/DonutChart.tsx

@@ -118,7 +118,14 @@ export const DonutChart: React.FunctionComponent<DonutChartProps> = React.forwar
       return legends;
     }
 
-    function _focusCallback(data: ChartDataPoint, id: string, element: SVGPathElement): void {
+    function _focusCallback(data: ChartDataPoint, id: string, e: React.FocusEvent<SVGPathElement>): void {
+      let cx = 0;
+      let cy = 0;
+
+      const targetRect = (e.target as SVGPathElement).getBoundingClientRect();
+      cx = targetRect.left + targetRect.width / 2;
+      cy = targetRect.top + targetRect.height / 2;
+      updatePosition(cx, cy);
       setPopoverOpen(selectedLegend === '' || selectedLegend === data.legend);
       setValue(data.data!.toString());
       setLegend(data.legend);

packages/charts/react-charts/library/src/components/DonutChart/Pie/Pie.tsx

@@ -29,7 +29,7 @@ export const Pie: React.FunctionComponent<PieProps> = React.forwardRef<HTMLDivEl
       .value((d: any) => d.data)
       .padAngle(0);
 
-    function _focusCallback(data: ChartDataPoint, id: string, e: SVGPathElement): void {
+    function _focusCallback(data: ChartDataPoint, id: string, e: React.FocusEvent<SVGPathElement>): void {
       props.onFocusCallback!(data, id, e);
     }
 

packages/charts/react-charts/library/src/components/GroupedVerticalBarChart/GroupedVerticalBarChart.tsx

@@ -389,11 +389,19 @@ export const GroupedVerticalBarChart: React.FC<GroupedVerticalBarChartProps> = R
   };
 
   const onBarFocus = (
+    event: React.FocusEvent<SVGRectElement, Element>,
     pointData: GVBarChartSeriesPoint,
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     groupData: any,
     refArrayIndexNumber: number,
   ): void => {
+    let x = 0;
+    let y = 0;
+
+    const targetRect = (event.target as SVGRectElement).getBoundingClientRect();
+    x = targetRect.left + targetRect.width / 2;
+    y = targetRect.top + targetRect.height / 2;
+    updatePosition(x, y);
     _refArray.forEach((obj: RefArrayData, index: number) => {
       if (obj.index === pointData.legend && refArrayIndexNumber === index) {
         setPopoverOpen(_noLegendHighlighted() || _legendHighlighted(pointData.legend));
@@ -464,17 +472,16 @@ export const GroupedVerticalBarChart: React.FC<GroupedVerticalBarChartProps> = R
               width={_barWidth}
               x={xPoint}
               y={yPoint}
-              data-is-focusable={!props.hideTooltip && (_legendHighlighted(pointData.legend) || _noLegendHighlighted())}
               opacity={_getOpacity(pointData.legend)}
               ref={(e: SVGRectElement | null) => {
                 _refCallback(e!, pointData.legend, refIndexNumber);
               }}
               fill={startColor}
               rx={0}
-              onMouseOver={onBarHover.bind(null, pointData, singleSet)}
-              onMouseMove={onBarHover.bind(null, pointData, singleSet)}
+              onMouseOver={event => onBarHover(pointData, singleSet, event)}
+              onMouseMove={event => onBarHover(pointData, singleSet, event)}
               onMouseOut={_onBarLeave}
-              onFocus={onBarFocus.bind(null, pointData, singleSet, refIndexNumber)}
+              onFocus={event => onBarFocus(event, pointData, singleSet, refIndexNumber)}
               onBlur={_onBarLeave}
               onClick={pointData.onClick}
               aria-label={getAriaLabel(pointData, singleSet.xAxisPoint)}