fix(react-charting): callout not appearing on scatter chart (microsoft#35185)

Author: krkshitij

change/@fluentui-react-charting-3380de10-aae5-4fc8-9dc7-6be922409175.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: callout not appearing on scatter chart",
+  "packageName": "@fluentui/react-charting",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

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

@@ -5,7 +5,6 @@ import { select as d3Select } from 'd3-selection';
 import { area as d3Area, stack as d3Stack, curveMonotoneX as d3CurveBasis, line as d3Line } from 'd3-shape';
 import {
   classNamesFunction,
-  find,
   getId,
   getRTL,
   initializeComponentRef,
@@ -45,6 +44,7 @@ import {
   areArraysEqual,
   getCurveFactory,
   YAxisType,
+  findCalloutPoints,
 } from '../../utilities/index';
 import { ILegend, ILegendContainer, Legends } from '../Legends/index';
 import { DirectionalHint } from '@fluentui/react/lib/Callout';
@@ -391,11 +391,7 @@ export class AreaChartBase extends React.Component<IAreaChartProps, IAreaChartSt
       pointToHighlight instanceof Date
         ? formatDateToLocaleString(pointToHighlight, this.props.culture, this.props.useUTC)
         : pointToHighlight;
-    const modifiedXVal = pointToHighlight instanceof Date ? pointToHighlight.getTime() : pointToHighlight;
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const found: any = find(this._calloutPoints, (element: { x: string | number }) => {
-      return element.x === modifiedXVal;
-    });
+    const found = findCalloutPoints(this._calloutPoints, pointToHighlight);
     const nearestCircleToHighlight =
       axisType === XAxisTypes.DateAxis ? (pointToHighlight as Date).getTime() : pointToHighlight;
     const pointToHighlightUpdated = this.state.nearestCircleToHighlight !== nearestCircleToHighlight;
@@ -1163,22 +1159,22 @@ export class AreaChartBase extends React.Component<IAreaChartProps, IAreaChartSt
   private _handleFocus = (lineIndex: number, pointIndex: number, circleId: string) => {
     const { x, y, xAxisCalloutData } = this.props.data.lineChartData![lineIndex].data[pointIndex];
     const formattedDate = x instanceof Date ? formatDateToLocaleString(x, this.props.culture, this.props.useUTC) : x;
-    const modifiedXVal = x instanceof Date ? x.getTime() : x;
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const found: any = this._calloutPoints.find((e: { x: string | number }) => e.x === modifiedXVal);
-    // Show details in the callout for the focused point only
-    found.values = found.values.filter((e: { y: number }) => e.y === y);
-    const filteredValues = this._getFilteredLegendValues(found.values);
+    const found = findCalloutPoints(this._calloutPoints, x);
+    if (found) {
+      // Show details in the callout for the focused point only
+      found.values = found.values.filter((e: { y: number }) => e.y === y);
+      const filteredValues = this._getFilteredLegendValues(found.values);
 
-    this.setState({
-      refSelected: `#${circleId}`,
-      isCalloutVisible: true,
-      hoverXValue: xAxisCalloutData ? xAxisCalloutData : formattedDate,
-      YValueHover: filteredValues!,
-      stackCalloutProps: { ...found, values: filteredValues },
-      dataPointCalloutProps: { ...found, values: filteredValues },
-      activePoint: circleId,
-    });
+      this.setState({
+        refSelected: `#${circleId}`,
+        isCalloutVisible: true,
+        hoverXValue: xAxisCalloutData ? xAxisCalloutData : formattedDate,
+        YValueHover: filteredValues!,
+        stackCalloutProps: { ...found, values: filteredValues },
+        dataPointCalloutProps: { ...found, values: filteredValues },
+        activePoint: circleId,
+      });
+    }
   };
 
   // eslint-disable-next-line @typescript-eslint/no-explicit-any

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

@@ -29,6 +29,7 @@ import {
   ILineChartStyles,
   ILineChartGap,
   ILineChartDataPoint,
+  IYValueHover,
 } from '../../index';
 import { DirectionalHint } from '@fluentui/react/lib/Callout';
 import { formatDateToLocaleString } from '@fluentui/chart-utilities';
@@ -57,6 +58,7 @@ import {
   getDomainPaddingForMarkers,
   isPlottable,
   getRangeForScatterMarkerSize,
+  findCalloutPoints,
 } from '../../utilities/index';
 import { IChart, IImageExportOptions } from '../../types/index';
 import { toImage } from '../../utilities/image-export-utils';
@@ -178,8 +180,7 @@ export class LineChartBase extends React.Component<ILineChartProps, ILineChartSt
   };
 
   private _points: LineChartDataWithIndex[];
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  private _calloutPoints: any[];
+  private _calloutPoints: Record<string, IYValueHover[]>;
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   private _xAxisScale: any = '';
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -237,7 +238,7 @@ export class LineChartBase extends React.Component<ILineChartProps, ILineChartSt
     this._refArray = [];
     this._points = this._injectIndexPropertyInLineChartData(this.props.data.lineChartData);
     this._colorFillBars = [];
-    this._calloutPoints = calloutData(this._points) || [];
+    this._calloutPoints = calloutData(this._points) || {};
     this._circleId = getId('circle');
     this._lineId = getId('lineID');
     this._borderId = getId('borderID');
@@ -278,7 +279,7 @@ export class LineChartBase extends React.Component<ILineChartProps, ILineChartSt
       prevProps.data !== this.props.data
     ) {
       this._points = this._injectIndexPropertyInLineChartData(this.props.data.lineChartData);
-      this._calloutPoints = calloutData(this._points) || [];
+      this._calloutPoints = calloutData(this._points) || {};
     }
   }
 
@@ -1597,11 +1598,7 @@ export class LineChartBase extends React.Component<ILineChartProps, ILineChartSt
       xPointToHighlight instanceof Date
         ? formatDateToLocaleString(xPointToHighlight, this.props.culture, this.props.useUTC)
         : xPointToHighlight;
-    const modifiedXVal = xPointToHighlight instanceof Date ? xPointToHighlight.getTime() : xPointToHighlight;
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const found: any = find(this._calloutPoints, (element: { x: string | number }) => {
-      return element.x === modifiedXVal;
-    });
+    const found = findCalloutPoints(this._calloutPoints, xPointToHighlight) as ICustomizedCalloutData | undefined;
     const pointToHighlight: ILineChartDataPoint = lineChartData![linenumber].data[index!];
     const pointToHighlightUpdated =
       this.state.nearestCircleToHighlight === null ||
@@ -1657,8 +1654,7 @@ export class LineChartBase extends React.Component<ILineChartProps, ILineChartSt
   ) => {
     this._uniqueCallOutID = circleId;
     const formattedData = x instanceof Date ? formatDateToLocaleString(x, this.props.culture, this.props.useUTC) : x;
-    const xVal = x instanceof Date ? x.getTime() : x;
-    const found = find(this._calloutPoints, (element: { x: string | number }) => element.x === xVal);
+    const found = findCalloutPoints(this._calloutPoints, x) as ICustomizedCalloutData | undefined;
     // if no points need to be called out then don't show vertical line and callout card
 
     if (found) {
@@ -1689,7 +1685,7 @@ export class LineChartBase extends React.Component<ILineChartProps, ILineChartSt
 
   private _handleHover = (
     x: number | Date,
-    y: number | Date,
+    y: number,
     lineHeight: number,
     xAxisCalloutData: string | undefined,
     circleId: string,
@@ -1701,17 +1697,15 @@ export class LineChartBase extends React.Component<ILineChartProps, ILineChartSt
   ) => {
     mouseEvent.persist();
     const formattedData = x instanceof Date ? formatDateToLocaleString(x, this.props.culture, this.props.useUTC) : x;
-    const xVal = x instanceof Date ? x.getTime() : x;
-    const yVal = y instanceof Date ? y.getTime() : y;
     const _this = this;
-    const found = find(this._calloutPoints, (element: { x: string | number }) => element.x === xVal);
+    const found = findCalloutPoints(this._calloutPoints, x) as ICustomizedCalloutData | undefined;
     let hoverDp: ICustomizedCalloutData | undefined = undefined;
 
     if (this.props.isCalloutForStack === false && found?.values) {
-      const dp = find(found.values, (val: ICustomizedCalloutDataPoint) => val?.y === yVal);
+      const dp = find(found.values, (val: ICustomizedCalloutDataPoint) => val?.y === y);
       if (dp) {
         hoverDp = {
-          x: xVal,
+          x,
           values: [dp],
         };
       }
@@ -1731,7 +1725,7 @@ export class LineChartBase extends React.Component<ILineChartProps, ILineChartSt
           refSelected: `#${circleId}`,
           hoverXValue: xAxisCalloutData ? xAxisCalloutData : '' + formattedData,
           YValueHover: found.values,
-          YValue: yVal,
+          YValue: y,
           legendVal: legendVal!,
           lineColor,
           stackCalloutProps: found!,

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

@@ -18,6 +18,7 @@ import {
   getRangeForScatterMarkerSize,
   domainRangeOfDateForAreaLineScatterVerticalBarCharts,
   domainRangeOfNumericForAreaLineScatterCharts,
+  findCalloutPoints,
 } from '../../utilities/index';
 import {
   IAccessibilityProps,
@@ -26,6 +27,7 @@ import {
   IMargins,
   IRefArrayData,
   IChart,
+  IYValueHover,
 } from '../../index';
 import {
   calloutData,
@@ -37,7 +39,7 @@ import {
   getColorFromToken,
   sortAxisCategories,
 } from '../../utilities/index';
-import { classNamesFunction, DirectionalHint, find, getId, getRTL } from '@fluentui/react';
+import { classNamesFunction, DirectionalHint, getId, getRTL } from '@fluentui/react';
 import { IImageExportOptions, IScatterChartDataPoint, IScatterChartPoints } from '../../types/index';
 import { ILineChartPoints } from '../../types/IDataPoint';
 import { toImage as convertToImage } from '../../utilities/image-export-utils';
@@ -67,8 +69,7 @@ export const ScatterChartBase: React.FunctionComponent<IScatterChartProps> = Rea
   const _points = React.useRef<ScatterChartDataWithIndex[]>(
     _injectIndexPropertyInScatterChartData(props.data.scatterChartData),
   );
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  let _calloutPoints = React.useMemo(() => calloutData(_points.current as any) || [], [_points]);
+  let _calloutPoints = React.useMemo(() => calloutData(_points.current) || {}, [_points]);
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const _xAxisScale: any = React.useRef<any>('');
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -86,7 +87,7 @@ export const ScatterChartBase: React.FunctionComponent<IScatterChartProps> = Rea
 
   const [hoverXValue, setHoverXValue] = React.useState<string | number>('');
   const [activeLegend, setActiveLegend] = React.useState<string>('');
-  const [YValueHover, setYValueHover] = React.useState<[]>([]);
+  const [YValueHover, setYValueHover] = React.useState<IYValueHover[]>([]);
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const [selectedLegendPoints, setSelectedLegendPoints] = React.useState<any[]>([]);
   const [isSelectedLegend, setIsSelectedLegend] = React.useState<boolean>(false);
@@ -144,8 +145,6 @@ export const ScatterChartBase: React.FunctionComponent<IScatterChartProps> = Rea
       : YAxisType.NumericAxis;
 
   const pointsRef = React.useRef<ScatterChartDataWithIndex[] | []>([]);
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const calloutPointsRef = React.useRef<any[]>([]);
   React.useEffect(() => {
     /** note that height and width are not used to resize or set as dimesions of the chart,
      * fitParentContainer is responisble for setting the height and width or resizing of the svg/chart
@@ -156,7 +155,6 @@ export const ScatterChartBase: React.FunctionComponent<IScatterChartProps> = Rea
       props.data !== _points.current
     ) {
       pointsRef.current = _injectIndexPropertyInScatterChartData(props.data.scatterChartData);
-      calloutPointsRef.current = calloutData(pointsRef.current);
     }
   }, [props.height, props.width, props.data, _points]);
 
@@ -352,10 +350,7 @@ export const ScatterChartBase: React.FunctionComponent<IScatterChartProps> = Rea
     ) => {
       _uniqueCallOutID.current = circleId;
       const formattedData = x instanceof Date ? formatDateToLocaleString(x, props.culture, props.useUTC) : x;
-      const xVal = x instanceof Date ? x.getTime() : x;
-      const found = find(_calloutPoints, (element: { x: string | number }) => element.x === xVal) as
-        | { x: string | number; values: [] }
-        | undefined;
+      const found = findCalloutPoints(_calloutPoints, x);
       // if no points need to be called out then don't show vertical line and callout card
       if (found) {
         d3Select(`#${_verticalLine}`)
@@ -380,7 +375,7 @@ export const ScatterChartBase: React.FunctionComponent<IScatterChartProps> = Rea
   const _handleHover = React.useCallback(
     (
       x: number | Date | string,
-      y: number | Date,
+      y: number,
       lineHeight: number,
       xAxisCalloutData: string | undefined,
       circleId: string,
@@ -389,10 +384,7 @@ export const ScatterChartBase: React.FunctionComponent<IScatterChartProps> = Rea
     ) => {
       mouseEvent?.persist();
       const formattedData = x instanceof Date ? formatDateToLocaleString(x, props.culture, props.useUTC) : x;
-      const xVal = x instanceof Date ? x.getTime() : x;
-      const found = find(_calloutPoints, (element: { x: string | number }) => element.x === xVal) as
-        | { x: string | number; values: [] }
-        | undefined;
+      const found = findCalloutPoints(_calloutPoints, x) as ICustomizedCalloutData | undefined;
       // if no points need to be called out then don't show vertical line and callout card
       if (found) {
         d3Select(`#${_verticalLine}`)