fix(react-charts): fix date format and multi selection of legends in donut chart (microsoft#35163)

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

Author: Anush2303

change/@fluentui-react-charts-42e40d6c-06a4-471c-902f-18a50d48d7f8.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix date format and multi selection of legends in donut chart",
+  "packageName": "@fluentui/react-charts",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

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

@@ -28,7 +28,6 @@ import {
   tooltipOfAxislabels,
   getNextColor,
   getColorFromToken,
-  formatDate,
   getSecureProps,
   areArraysEqual,
   getCurveFactory,
@@ -47,6 +46,7 @@ import type { JSXElement } from '@fluentui/react-utilities';
 import { Legend, LegendContainer, Legends } from '../Legends/index';
 import { ScaleLinear } from 'd3-scale';
 import { toImage } from '../../utilities/image-export-utils';
+import { formatDateToLocaleString } from '@fluentui/chart-utilities';
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 const bisect = bisector((d: any) => d.x).left;
@@ -236,7 +236,9 @@ export const AreaChart: React.FunctionComponent<AreaChartProps> = React.forwardR
       // eslint-disable-next-line @typescript-eslint/no-shadow
       const { xAxisCalloutData, xAxisCalloutAccessibilityData } = lineChartData![0].data[index as number];
       const formattedDate =
-        pointToHighlight instanceof Date ? formatDate(pointToHighlight, props.useUTC) : pointToHighlight;
+        pointToHighlight instanceof Date
+          ? formatDateToLocaleString(pointToHighlight, props.culture, props.useUTC as boolean)
+          : pointToHighlight;
       const modifiedXVal = pointToHighlight instanceof Date ? pointToHighlight.getTime() : pointToHighlight;
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
       const found: any = find(_calloutPoints, (element: { x: string | number }) => {
@@ -866,7 +868,7 @@ export const AreaChart: React.FunctionComponent<AreaChartProps> = React.forwardR
       _updatePosition(cx, cy);
 
       const { x, y, xAxisCalloutData } = props.data.lineChartData![lineIndex].data[pointIndex];
-      const formattedDate = x instanceof Date ? formatDate(x, props.useUTC) : x;
+      const formattedDate = x instanceof Date ? formatDateToLocaleString(x, props.culture, props.useUTC as boolean) : x;
       const modifiedXVal = x instanceof Date ? x.getTime() : x;
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
       const found: any = _calloutPoints.find((e: { x: string | number }) => e.x === modifiedXVal);
@@ -901,7 +903,8 @@ export const AreaChart: React.FunctionComponent<AreaChartProps> = React.forwardR
     function _getAriaLabel(lineIndex: number, pointIndex: number): string {
       const line = props.data.lineChartData![lineIndex];
       const point = line.data[pointIndex];
-      const formattedDate = point.x instanceof Date ? formatDate(point.x, props.useUTC) : point.x;
+      const formattedDate =
+        point.x instanceof Date ? formatDateToLocaleString(point.x, props.culture, props.useUTC as boolean) : point.x;
       const xValue = point.xAxisCalloutData || formattedDate;
       const legend = line.legend;
       const yValue = point.yAxisCalloutData || point.y;

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

@@ -53,12 +53,12 @@ export const Arc: React.FunctionComponent<ArcProps> = React.forwardRef<HTMLDivEl
     }
 
     function _renderArcLabel(className: string) {
-      const { data, innerRadius, outerRadius, showLabelsInPercent, totalValue, hideLabels, activeArc } = props;
+      const { data, innerRadius, outerRadius, showLabelsInPercent, totalValue, hideLabels } = props;
 
       if (
         hideLabels ||
         Math.abs(data!.endAngle - data!.startAngle) < Math.PI / 12 ||
-        (activeArc !== data!.data.legend && activeArc !== '')
+        !_shouldHighlightArc(data!.data.legend!)
       ) {
         return null;
       }
@@ -92,13 +92,14 @@ export const Arc: React.FunctionComponent<ArcProps> = React.forwardRef<HTMLDivEl
       }
     }
 
-    const { href, focusedArcId } = props;
+    const { href, focusedArcId, activeArc } = props;
     //TO DO 'replace' is throwing error
     const id =
       props.uniqText! +
       (typeof props.data!.data.legend === 'string' ? props.data!.data.legend.replace(/\s+/g, '') : '') +
       props.data!.data.data;
-    const opacity: number = props.activeArc === props.data!.data.legend || props.activeArc === '' ? 1 : 0.1;
+    const opacity: number =
+      activeArc && activeArc.length > 0 ? (activeArc.includes(props.data?.data.legend!) ? 1 : 0.1) : 1;
     const cornerRadius = props.roundCorners ? 3 : 0;
     return (
       <g ref={currentRef}>
@@ -129,11 +130,10 @@ export const Arc: React.FunctionComponent<ArcProps> = React.forwardRef<HTMLDivEl
           className={classes.root}
           style={{ fill: props.color, cursor: href ? 'pointer' : 'default' }}
           onFocus={event => _onFocus(props.data!.data, id, event)}
-          data-is-focusable={props.activeArc === props.data!.data.legend || props.activeArc === ''}
           onMouseOver={event => _hoverOn(props.data!.data, event)}
           onMouseMove={event => _hoverOn(props.data!.data, event)}
           onMouseLeave={_hoverOff}
-          tabIndex={_shouldHighlightArc(props.data!.data.legend!) ? 0 : undefined}
+          tabIndex={_shouldHighlightArc(props.data!.data.legend!) || props.activeArc?.length === 0 ? 0 : undefined}
           onBlur={_onBlur}
           opacity={opacity}
           onClick={props.data?.data.onClick}

packages/charts/react-charts/library/src/components/DonutChart/Arc/Arc.types.ts

@@ -68,7 +68,7 @@ export interface ArcProps {
   /**
    * Active Arc for chart
    */
-  activeArc?: string;
+  activeArc?: string[];
 
   /**
    * internal prop for href

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

@@ -5,7 +5,7 @@ import { DonutChartProps } from './DonutChart.types';
 import { useDonutChartStyles } from './useDonutChartStyles.styles';
 import { ChartDataPoint } from '../../DonutChart';
 import { formatToLocaleString } from '@fluentui/chart-utilities';
-import { getColorFromToken, getNextColor, MIN_DONUT_RADIUS, useRtl } from '../../utilities/index';
+import { areArraysEqual, getColorFromToken, getNextColor, MIN_DONUT_RADIUS, useRtl } from '../../utilities/index';
 import { Legend, Legends, LegendContainer } from '../../index';
 import { useId } from '@fluentui/react-utilities';
 import type { JSXElement } from '@fluentui/react-utilities';
@@ -35,22 +35,33 @@ export const DonutChart: React.FunctionComponent<DonutChartProps> = React.forwar
     const [legend, setLegend] = React.useState<string | undefined>('');
     const [_width, setWidth] = React.useState<number | undefined>(props.width || 200);
     const [_height, setHeight] = React.useState<number | undefined>(props.height || 200);
-    const [activeLegend, setActiveLegend] = React.useState<string>('');
+    const [activeLegend, setActiveLegend] = React.useState<string | undefined>(undefined);
     const [color, setColor] = React.useState<string | undefined>('');
     const [xCalloutValue, setXCalloutValue] = React.useState<string>('');
     const [yCalloutValue, setYCalloutValue] = React.useState<string>('');
-    const [selectedLegend, setSelectedLegend] = React.useState<string>('');
+    const [selectedLegends, setSelectedLegends] = React.useState<string[]>(props.legendProps?.selectedLegends || []);
     const [focusedArcId, setFocusedArcId] = React.useState<string>('');
     const [dataPointCalloutProps, setDataPointCalloutProps] = React.useState<ChartDataPoint | undefined>();
     const [clickPosition, setClickPosition] = React.useState({ x: 0, y: 0 });
     const [isPopoverOpen, setPopoverOpen] = React.useState(false);
+    const prevPropsRef = React.useRef<DonutChartProps | null>(null);
     const _legendsRef = React.useRef<LegendContainer>(null);
     const _isRTL: boolean = useRtl();
 
     React.useEffect(() => {
       _fitParentContainer();
     }, []);
 
+    React.useEffect(() => {
+      if (prevPropsRef.current) {
+        const prevProps = prevPropsRef.current;
+        if (!areArraysEqual(prevProps.legendProps?.selectedLegends, props.legendProps?.selectedLegends)) {
+          setSelectedLegends(props.legendProps?.selectedLegends || []);
+        }
+      }
+      prevPropsRef.current = props;
+    }, [props]);
+
     React.useEffect(() => {
       if (prevSize.current.height !== props.height || prevSize.current.width !== props.width) {
         _fitParentContainer();
@@ -98,19 +109,12 @@ export const DonutChart: React.FunctionComponent<DonutChartProps> = React.forwar
         const legend: Legend = {
           title: point.legend!,
           color,
-          action: () => {
-            if (selectedLegend === point.legend) {
-              setSelectedLegend('');
-            } else {
-              setSelectedLegend(point.legend!);
-            }
-          },
           hoverAction: () => {
             _handleChartMouseLeave();
             setActiveLegend(point.legend!);
           },
           onMouseOutAction: () => {
-            setActiveLegend('');
+            setActiveLegend(undefined);
           },
         };
         return legend;
@@ -121,11 +125,27 @@ export const DonutChart: React.FunctionComponent<DonutChartProps> = React.forwar
           centerLegends
           overflowText={props.legendsOverflowText}
           {...props.legendProps}
+          // eslint-disable-next-line react/jsx-no-bind
+          onChange={_onLegendSelectionChange}
           legendRef={_legendsRef}
         />
       );
       return legends;
     }
+    function _onLegendSelectionChange(
+      selectedLegends: string[],
+      event: React.MouseEvent<HTMLButtonElement>,
+      currentLegend?: Legend,
+    ): void {
+      if (props.legendProps && props.legendProps?.canSelectMultipleLegends) {
+        setSelectedLegends(selectedLegends);
+      } else {
+        setSelectedLegends(selectedLegends.slice(-1));
+      }
+      if (props.legendProps?.onChange) {
+        props.legendProps.onChange(selectedLegends, event, currentLegend);
+      }
+    }
 
     function _focusCallback(data: ChartDataPoint, id: string, e: React.FocusEvent<SVGPathElement>): void {
       let cx = 0;
@@ -135,7 +155,7 @@ export const DonutChart: React.FunctionComponent<DonutChartProps> = React.forwar
       cx = targetRect.left + targetRect.width / 2;
       cy = targetRect.top + targetRect.height / 2;
       updatePosition(cx, cy);
-      setPopoverOpen(selectedLegend === '' || selectedLegend === data.legend);
+      setPopoverOpen(_noLegendsHighlighted() || _isLegendHighlighted(data.legend));
       setValue(data.data!.toString());
       setLegend(data.legend);
       setColor(data.color!);
@@ -148,7 +168,7 @@ export const DonutChart: React.FunctionComponent<DonutChartProps> = React.forwar
     function _hoverCallback(data: ChartDataPoint, e: React.MouseEvent<SVGPathElement>): void {
       if (_calloutAnchorPoint !== data) {
         _calloutAnchorPoint = data;
-        setPopoverOpen(selectedLegend === '' || selectedLegend === data.legend);
+        setPopoverOpen(_noLegendsHighlighted() || _isLegendHighlighted(data.legend));
         setValue(data.data!.toString());
         setLegend(data.legend);
         setColor(data.color!);
@@ -172,16 +192,22 @@ export const DonutChart: React.FunctionComponent<DonutChartProps> = React.forwar
     }
 
     function _valueInsideDonut(valueInsideDonut: string | number | undefined, data: ChartDataPoint[]) {
-      const highlightedLegend = _getHighlightedLegend();
-      if (valueInsideDonut !== undefined && (highlightedLegend !== '' || isPopoverOpen)) {
-        let legendValue = valueInsideDonut;
-        data!.map((point: ChartDataPoint, index: number) => {
-          if (point.legend === highlightedLegend || (isPopoverOpen && point.legend === legend)) {
-            legendValue = point.yAxisCalloutData ? point.yAxisCalloutData : point.data!;
+      const highlightedLegends = _getHighlightedLegend();
+      if (valueInsideDonut !== undefined && (highlightedLegends.length === 1 || isPopoverOpen)) {
+        const pointValue = data.find(point => _isLegendHighlighted(point.legend));
+        return pointValue
+          ? pointValue.yAxisCalloutData
+            ? pointValue.yAxisCalloutData
+            : pointValue.data!
+          : valueInsideDonut;
+      } else if (highlightedLegends.length > 0) {
+        let totalValue = 0;
+        data.forEach(point => {
+          if (highlightedLegends.includes(point.legend!)) {
+            totalValue += point.data!;
           }
-          return;
         });
-        return legendValue;
+        return totalValue;
       } else {
         return valueInsideDonut;
       }
@@ -199,10 +225,17 @@ export const DonutChart: React.FunctionComponent<DonutChartProps> = React.forwar
      * This function returns
      * the selected legend if there is one
      * or the hovered legend if none of the legends is selected.
-     * Note: This won't work in case of multiple legends selection.
      */
     function _getHighlightedLegend() {
-      return selectedLegend || activeLegend;
+      return selectedLegends.length > 0 ? selectedLegends : activeLegend ? [activeLegend] : [];
+    }
+
+    function _isLegendHighlighted(legend: string | undefined): boolean {
+      return _getHighlightedLegend().includes(legend!);
+    }
+
+    function _noLegendsHighlighted(): boolean {
+      return _getHighlightedLegend().length === 0;
     }
 
     function _isChartEmpty(): boolean {

packages/charts/react-charts/library/src/components/DonutChart/Pie/Pie.types.ts

@@ -52,7 +52,7 @@ export interface PieProps {
   /**
    * Active Arc for chart
    */
-  activeArc?: string;
+  activeArc?: string[];
 
   /**
    * string for callout id