fix(react-charts): support single value callout in linechart (#35084)

Co-authored-by: Anush <[email protected]>

Author: Anush2303

change/@fluentui-react-charts-d1e45a0c-93b3-4634-a06f-0e74d2034fde.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "support single value callout in linechart",
+  "packageName": "@fluentui/react-charts",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

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

@@ -1134,6 +1134,7 @@ export interface LineChartProps extends CartesianChartProps {
     enablePerfOptimization?: boolean;
     eventAnnotationProps?: EventsAnnotationProps;
     getCalloutDescriptionMessage?: (calloutDataProps: CustomizedCalloutData) => string | undefined;
+    isCalloutForStack?: boolean;
     onRenderCalloutPerDataPoint?: RenderFunction<CustomizedCalloutData>;
     onRenderCalloutPerStack?: RenderFunction<CustomizedCalloutData>;
     // (undocumented)

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

@@ -16,6 +16,7 @@ import {
   ChildProps,
   LineChartPoints,
   CustomizedCalloutData,
+  CustomizedCalloutDataPoint,
   Margins,
   RefArrayData,
   ColorFillBarsProps,
@@ -195,6 +196,9 @@ export const LineChart: React.FunctionComponent<LineChartProps> = React.forwardR
     const [stackCalloutProps, setStackCalloutProps] = React.useState<CustomizedCalloutData>();
     const [clickPosition, setClickPosition] = React.useState({ x: 0, y: 0 });
     const [isPopoverOpen, setPopoverOpen] = React.useState(false);
+    const [YValue, setYValue] = React.useState<number | string>('');
+    const [legendVal, setLegendVal] = React.useState<string>('');
+    const [lineColor, setLineColor] = React.useState<string>('');
 
     const pointsRef = React.useRef<LineChartDataWithIndex[] | []>([]);
     const calloutPointsRef = React.useRef<any[]>([]);
@@ -586,6 +590,8 @@ export const LineChart: React.FunctionComponent<LineChartProps> = React.forwardR
                       xAxisCalloutAccessibilityData,
                       event,
                       yScale,
+                      legendVal,
+                      lineColor,
                     )
                   }
                   onMouseMove={(event: React.MouseEvent<SVGElement>) =>
@@ -598,6 +604,8 @@ export const LineChart: React.FunctionComponent<LineChartProps> = React.forwardR
                       xAxisCalloutAccessibilityData,
                       event,
                       yScale,
+                      legendVal,
+                      lineColor,
                     )
                   }
                   onMouseOut={_handleMouseOut}
@@ -779,6 +787,8 @@ export const LineChart: React.FunctionComponent<LineChartProps> = React.forwardR
                         xAxisCalloutAccessibilityData,
                         event,
                         yScale,
+                        legendVal,
+                        lineColor,
                       )
                     }
                     onMouseMove={event =>
@@ -791,6 +801,8 @@ export const LineChart: React.FunctionComponent<LineChartProps> = React.forwardR
                         xAxisCalloutAccessibilityData,
                         event,
                         yScale,
+                        legendVal,
+                        lineColor,
                       )
                     }
                     onMouseOut={_handleMouseOut}
@@ -838,6 +850,8 @@ export const LineChart: React.FunctionComponent<LineChartProps> = React.forwardR
                       xAxisCalloutAccessibilityData,
                       event,
                       yScale,
+                      legendVal,
+                      lineColor,
                     )
                   }
                   onMouseMove={(event: React.MouseEvent<SVGElement>) =>
@@ -850,6 +864,8 @@ export const LineChart: React.FunctionComponent<LineChartProps> = React.forwardR
                       xAxisCalloutAccessibilityData,
                       event,
                       yScale,
+                      legendVal,
+                      lineColor,
                     )
                   }
                   onMouseOut={_handleMouseOut}
@@ -902,6 +918,8 @@ export const LineChart: React.FunctionComponent<LineChartProps> = React.forwardR
                             lastCirlceXCalloutAccessibilityData,
                             event,
                             yScale,
+                            legendVal,
+                            lineColor,
                           )
                         }
                         onMouseMove={event =>
@@ -914,6 +932,8 @@ export const LineChart: React.FunctionComponent<LineChartProps> = React.forwardR
                             lastCirlceXCalloutAccessibilityData,
                             event,
                             yScale,
+                            legendVal,
+                            lineColor,
                           )
                         }
                         onMouseOut={_handleMouseOut}
@@ -967,6 +987,8 @@ export const LineChart: React.FunctionComponent<LineChartProps> = React.forwardR
                           lastCirlceXCalloutAccessibilityData,
                           event,
                           yScale,
+                          legendVal,
+                          lineColor,
                         )
                       }
                       onMouseMove={(event: React.MouseEvent<SVGElement>) =>
@@ -979,6 +1001,8 @@ export const LineChart: React.FunctionComponent<LineChartProps> = React.forwardR
                           lastCirlceXCalloutAccessibilityData,
                           event,
                           yScale,
+                          legendVal,
+                          lineColor,
                         )
                       }
                       onMouseOut={_handleMouseOut}
@@ -1022,6 +1046,8 @@ export const LineChart: React.FunctionComponent<LineChartProps> = React.forwardR
                         lastCirlceXCalloutAccessibilityData,
                         event,
                         yScale,
+                        legendVal,
+                        lineColor,
                       )
                     }
                     onMouseMove={(event: React.MouseEvent<SVGElement>) =>
@@ -1034,6 +1060,8 @@ export const LineChart: React.FunctionComponent<LineChartProps> = React.forwardR
                         lastCirlceXCalloutAccessibilityData,
                         event,
                         yScale,
+                        legendVal,
+                        lineColor,
                       )
                     }
                     onFocus={event =>
@@ -1094,6 +1122,8 @@ export const LineChart: React.FunctionComponent<LineChartProps> = React.forwardR
                           xAxisCalloutAccessibilityData,
                           event,
                           yScale,
+                          legendVal,
+                          lineColor,
                         )
                       }
                       onMouseMove={event =>
@@ -1106,6 +1136,8 @@ export const LineChart: React.FunctionComponent<LineChartProps> = React.forwardR
                           xAxisCalloutAccessibilityData,
                           event,
                           yScale,
+                          legendVal,
+                          lineColor,
                         )
                       }
                       onMouseOut={_handleMouseOut}
@@ -1399,11 +1431,25 @@ export const LineChart: React.FunctionComponent<LineChartProps> = React.forwardR
       xAxisCalloutAccessibilityData: AccessibilityProps | undefined,
       mouseEvent: React.MouseEvent<SVGElement>,
       yScale: ScaleLinear<number, number>,
+      legendVal: string,
+      lineColor: string,
     ) {
       mouseEvent?.persist();
       const formattedData = x instanceof Date ? formatDate(x, props.useUTC) : x;
       const xVal = x instanceof Date ? x.getTime() : x;
+      const yVal = y instanceof Date ? y.getTime() : y;
       const found = find(_calloutPoints, (element: { x: string | number }) => element.x === xVal);
+      let hoverDp: CustomizedCalloutData | undefined = undefined;
+
+      if (props.isCalloutForStack === false && found?.values) {
+        const dp = find(found.values, (val: CustomizedCalloutDataPoint) => val?.y === yVal);
+        if (dp) {
+          hoverDp = {
+            x: xVal,
+            values: [dp],
+          };
+        }
+      }
       // if no points need to be called out then don't show vertical line and callout card
 
       if (found) {
@@ -1417,8 +1463,11 @@ export const LineChart: React.FunctionComponent<LineChartProps> = React.forwardR
           updatePosition(mouseEvent.clientX, mouseEvent.clientY);
           xAxisCalloutData ? setHoverXValue(xAxisCalloutData) : setHoverXValue('' + formattedData);
           setYValueHover(found.values);
+          setYValue(yVal);
+          setLegendVal(legendVal);
+          setLineColor(lineColor);
           setStackCalloutProps(found!);
-          setDataPointCalloutProps(found!);
+          setDataPointCalloutProps(hoverDp);
           setActivePoint(circleId);
           setNearestCircleToHighlight(null);
         }
@@ -1686,6 +1735,10 @@ export const LineChart: React.FunctionComponent<LineChartProps> = React.forwardR
     const calloutProps = {
       YValueHover: YValueHover,
       hoverXValue: hoverXValue,
+      YValue: YValue,
+      legend: legendVal,
+      color: lineColor,
+      XValue: hoverXValue! as string,
       descriptionMessage:
         props.getCalloutDescriptionMessage && stackCalloutProps
           ? props.getCalloutDescriptionMessage(stackCalloutProps)
@@ -1695,7 +1748,7 @@ export const LineChart: React.FunctionComponent<LineChartProps> = React.forwardR
       ...props.calloutProps,
       clickPosition: clickPosition,
       isPopoverOpen: isPopoverOpen,
-      isCalloutForStack: true,
+      isCalloutForStack: props.isCalloutForStack,
       culture: props.culture ?? 'en-us',
       isCartesian: true,
       customCallout: {
@@ -1776,3 +1829,6 @@ export const LineChart: React.FunctionComponent<LineChartProps> = React.forwardR
   },
 );
 LineChart.displayName = 'LineChart';
+LineChart.defaultProps = {
+  isCalloutForStack: true,
+};

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

@@ -88,6 +88,13 @@ export interface LineChartProps extends CartesianChartProps {
    * The prop used to enable the perf optimization
    */
   enablePerfOptimization?: boolean;
+
+  /**
+   * To enable callout for individual line or complete stack.
+   * @default true
+   * @type \{boolean \}
+   */
+  isCalloutForStack?: boolean;
 }
 
 /**

packages/charts/react-charts/stories/src/LineChart/LineChartDefault.stories.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { LineChartProps, LineChart, ChartProps, DataVizPalette } from '@fluentui/react-charts';
-import { Switch, Checkbox, makeStyles, tokens } from '@fluentui/react-components';
+import { Switch, Checkbox, makeStyles, tokens, Field, Radio, RadioGroup } from '@fluentui/react-components';
 import type { CheckboxOnChangeData, CheckboxProps } from '@fluentui/react-components';
 
 const useStyles = makeStyles({
@@ -16,6 +16,7 @@ export const LineChartBasic = (props: LineChartProps) => {
   const [allowMultipleShapes, setAllowMultipleShapes] = React.useState<boolean>(false);
   const [showAxisTitles, setShowAxisTitles] = React.useState<boolean>(true);
   const [useUTC, setUseUTC] = React.useState<CheckboxProps['checked']>(true);
+  const [selectedCallout, setSelectedCallout] = React.useState<string>('MultiCallout');
 
   const _onWidthChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     setWidth(parseInt(e.target.value, 10));
@@ -189,6 +190,21 @@ export const LineChartBasic = (props: LineChartProps) => {
       <div style={{ marginTop: '10px' }}>
         <Checkbox label="Use UTC time" checked={useUTC} onChange={_onCheckChange} />
       </div>
+      <Field label="Pick one">
+        <RadioGroup
+          defaultValue="MultiCallout"
+          onChange={(_ev, option) => {
+            if (selectedCallout === 'MultiCallout') {
+              setSelectedCallout('singleCallout');
+            } else {
+              setSelectedCallout('MultiCallout');
+            }
+          }}
+        >
+          <Radio value="singleCallout" label="Single Callout" />
+          <Radio value="MultiCallout" label="Stack Callout" />
+        </RadioGroup>
+      </Field>
       {showAxisTitles && (
         <div style={rootStyle}>
           <LineChart
@@ -202,6 +218,7 @@ export const LineChartBasic = (props: LineChartProps) => {
             xAxisTickCount={10}
             allowMultipleShapesForPoints={allowMultipleShapes}
             enablePerfOptimization={true}
+            isCalloutForStack={selectedCallout === 'MultiCallout'}
             yAxisTitle={
               showAxisTitles
                 ? 'Different categories of mail flow each of which are categorized into different categories'
@@ -226,6 +243,7 @@ export const LineChartBasic = (props: LineChartProps) => {
             xAxisTickCount={10}
             allowMultipleShapesForPoints={allowMultipleShapes}
             enablePerfOptimization={true}
+            isCalloutForStack={selectedCallout === 'MultiCallout'}
             yAxisTitle={showAxisTitles ? 'Different categories of mail flow' : undefined}
             xAxisTitle={showAxisTitles ? 'Values of each category' : undefined}
             useUTC={useUTC}