fix(charts): enable custom callout in scatter chart (#35565)

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

Author: Anush2303

change/@fluentui-react-charting-4bbde751-8506-4c64-bc86-96880437f006.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "enable custom callout in scatter chart",
+  "packageName": "@fluentui/react-charting",
+  "email": "anushgupta@microsoft.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-charts-ceb865b5-03af-428c-a16a-4034026e4760.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "enable custom callout in scatter chart",
+  "packageName": "@fluentui/react-charts",
+  "email": "anushgupta@microsoft.com",
+  "dependentChangeType": "patch"
+}

packages/charts/react-charting/etc/react-charting.api.md

@@ -1649,6 +1649,7 @@ export interface IScatterChartProps extends ICartesianChartProps {
     data: IChartProps;
     getCalloutDescriptionMessage?: (calloutDataProps: ICustomizedCalloutData) => string | undefined;
     onRenderCalloutPerDataPoint?: IRenderFunction<ICustomizedCalloutData>;
+    onRenderCalloutPerStack?: IRenderFunction<ICustomizedCalloutData>;
     styles?: IScatterChartStyles;
 }
 

packages/charts/react-charting/src/components/ScatterChart/ScatterChart.base.tsx

@@ -94,6 +94,7 @@ export const ScatterChartBase: React.FunctionComponent<IScatterChartProps> = Rea
   const [isSelectedLegend, setIsSelectedLegend] = React.useState<boolean>(false);
   const [activePoint, setActivePoint] = React.useState<string>('');
   const [stackCalloutProps, setStackCalloutProps] = React.useState<ICustomizedCalloutData>();
+  const [dataPointCalloutProps, setDataPointCalloutProps] = React.useState<ICustomizedCalloutData>();
   const [isCalloutVisible, setCalloutVisible] = React.useState(false);
   const [selectedLegends, setSelectedLegends] = React.useState<string[]>(props.legendProps?.selectedLegends || []);
   const [refSelected, setRefSelected] = React.useState<string>('');
@@ -408,6 +409,7 @@ export const ScatterChartBase: React.FunctionComponent<IScatterChartProps> = Rea
           setRefSelected(`#${circleId}`);
           setYValueHover(found.values);
           setStackCalloutProps(found!);
+          setDataPointCalloutProps(found!);
           setActivePoint(circleId);
         }
       } else {
@@ -720,6 +722,14 @@ export const ScatterChartBase: React.FunctionComponent<IScatterChartProps> = Rea
     setCalloutVisible(false);
   }
 
+  function _getCustomizedCallout() {
+    return props.onRenderCalloutPerStack
+      ? props.onRenderCalloutPerStack(stackCalloutProps)
+      : props.onRenderCalloutPerDataPoint
+      ? props.onRenderCalloutPerDataPoint(dataPointCalloutProps)
+      : null;
+  }
+
   const _getNumericMinMaxOfY = React.useCallback(
     (points: IScatterChartPoints[], yAxisType?: YAxisType): { startValue: number; endValue: number } => {
       const { startValue, endValue } = findNumericMinMaxOfY(points, yAxisType, undefined, props.yScaleType);
@@ -809,6 +819,7 @@ export const ScatterChartBase: React.FunctionComponent<IScatterChartProps> = Rea
       datasetForXAxisDomain={_xAxisLabels}
       componentRef={cartesianChartRef}
       {...(_isScatterPolarRef.current ? { yMaxValue: 1, yMinValue: -1 } : {})}
+      customizedCallout={_getCustomizedCallout()}
       /* eslint-disable react/jsx-no-bind */
 
       children={(childProps: IChildProps) => {

packages/charts/react-charting/src/components/ScatterChart/ScatterChart.types.ts

@@ -37,6 +37,11 @@ export interface IScatterChartProps extends ICartesianChartProps {
    */
   onRenderCalloutPerDataPoint?: IRenderFunction<ICustomizedCalloutData>;
 
+  /**
+   * Define a custom callout renderer for a stack; default is to render per data point
+   */
+  onRenderCalloutPerStack?: IRenderFunction<ICustomizedCalloutData>;
+
   /**
    * Callback for getting callout description message
    */

packages/charts/react-charts/library/etc/react-charts.api.md

@@ -1650,6 +1650,7 @@ export interface ScatterChartProps extends CartesianChartProps {
     data: ChartProps;
     getCalloutDescriptionMessage?: (calloutDataProps: CustomizedCalloutData) => string | undefined;
     onRenderCalloutPerDataPoint?: RenderFunction<CustomizedCalloutData>;
+    onRenderCalloutPerStack?: RenderFunction<CustomizedCalloutData>;
     styles?: ScatterChartStyles;
 }
 

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

@@ -95,6 +95,7 @@ export const ScatterChart: React.FunctionComponent<ScatterChartProps> = React.fo
   const [isSelectedLegend, setIsSelectedLegend] = React.useState<boolean>(false);
   const [activePoint, setActivePoint] = React.useState<string>('');
   const [stackCalloutProps, setStackCalloutProps] = React.useState<CustomizedCalloutData>();
+  const [dataPointCalloutProps, setDataPointCalloutProps] = React.useState<CustomizedCalloutData>();
   const [clickPosition, setClickPosition] = React.useState({ x: 0, y: 0 });
   const [isPopoverOpen, setPopoverOpen] = React.useState(false);
   const [selectedLegends, setSelectedLegends] = React.useState<string[]>(props.legendProps?.selectedLegends || []);
@@ -573,6 +574,7 @@ export const ScatterChart: React.FunctionComponent<ScatterChartProps> = React.fo
           xAxisCalloutData ? setHoverXValue(xAxisCalloutData) : setHoverXValue('' + formattedData);
           setYValueHover(found.values);
           setStackCalloutProps(found!);
+          setDataPointCalloutProps(found!);
           setActivePoint(circleId);
         }
       });
@@ -607,6 +609,7 @@ export const ScatterChart: React.FunctionComponent<ScatterChartProps> = React.fo
         xAxisCalloutData ? setHoverXValue(xAxisCalloutData) : setHoverXValue('' + formattedData);
         setYValueHover(found.values);
         setStackCalloutProps(found!);
+        setDataPointCalloutProps(found!);
         setActivePoint(circleId);
       }
     } else {
@@ -640,6 +643,14 @@ export const ScatterChart: React.FunctionComponent<ScatterChartProps> = React.fo
     }
   }
 
+  function _getCustomizedCallout() {
+    return props.onRenderCalloutPerStack
+      ? props.onRenderCalloutPerStack(stackCalloutProps)
+      : props.onRenderCalloutPerDataPoint
+      ? props.onRenderCalloutPerDataPoint(dataPointCalloutProps)
+      : null;
+  }
+
   /**
    * This function checks if the given legend is highlighted or not.
    * A legend can be highlighted in 2 ways:
@@ -712,6 +723,12 @@ export const ScatterChart: React.FunctionComponent<ScatterChartProps> = React.fo
     isCalloutForStack: true,
     culture: props.culture,
     isCartesian: true,
+    customCallout: {
+      customizedCallout: _getCustomizedCallout() !== null ? _getCustomizedCallout()! : undefined,
+      customCalloutProps: props.calloutPropsPerDataPoint
+        ? props.calloutPropsPerDataPoint(dataPointCalloutProps!)
+        : undefined,
+    },
   };
   const tickParams = {
     tickValues,

packages/charts/react-charts/library/src/components/ScatterChart/ScatterChart.types.ts

@@ -37,6 +37,11 @@ export interface ScatterChartProps extends CartesianChartProps {
    */
   onRenderCalloutPerDataPoint?: RenderFunction<CustomizedCalloutData>;
 
+  /**
+   * Define a custom callout renderer for a stack; default is to render per data point
+   */
+  onRenderCalloutPerStack?: RenderFunction<CustomizedCalloutData>;
+
   /**
    * Callback for getting callout description message
    */