[Donut] Legends multi selection for Donut Charts

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

@@ -488,6 +488,7 @@ export interface IDonutChart {
 // @public
 export interface IDonutChartProps extends ICartesianChartProps {
     calloutProps?: Partial<ICalloutProps>;
+    canSelectMultipleLegends?: boolean;
     culture?: string;
     data?: IChartProps;
     enableGradient?: boolean;

packages/charts/react-charting/src/components/DeclarativeChart/PlotlySchemaAdapter.ts

@@ -94,6 +94,7 @@ export const transformPlotlyJsonToDonutProps = (
     hideLabels,
     showLabelsInPercent: firstData.textinfo ? firstData.textinfo === 'percent' : true,
     styles,
+    canSelectMultipleLegends: true,
   };
 };
 

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

@@ -31,12 +31,11 @@ export class Arc extends React.Component<IArcProps, IArcState> {
   }
 
   public render(): JSX.Element {
-    const { arc, href, focusedArcId } = this.props;
+    const { arc, href, focusedArcId, activeArc } = this.props;
     const getClassNames = classNamesFunction<IArcStyleProps, IArcStyles>();
     const id = this.props.uniqText! + this.props.data!.data.legend!.replace(/\s+/, '') + this.props.data!.data.data;
     const opacity: number =
-      this.props.activeArc === this.props.data!.data.legend || this.props.activeArc === '' ? 1 : 0.1;
-
+      activeArc && activeArc.length > 0 ? (activeArc.includes(this.props.data?.data.legend!) ? 1 : 0.1) : 1;
     const startAngle = this.props.data?.startAngle ?? 0;
     const endAngle = (this.props.data?.endAngle ?? 0) - startAngle;
     const cornerRadius = this.props.roundCorners ? 3 : 0;
@@ -70,7 +69,9 @@ export class Arc extends React.Component<IArcProps, IArcState> {
           d={arc.cornerRadius(cornerRadius)(this.props.data)}
           onFocus={this._onFocus.bind(this, this.props.data!.data, id)}
           className={classNames.root}
-          data-is-focusable={this.props.activeArc === this.props.data!.data.legend || this.props.activeArc === ''}
+          data-is-focusable={
+            this._shouldHighlightArc(activeArc!, this.props.data!.data.legend!) || this.props.activeArc?.length === 0
+          }
           onMouseOver={this._hoverOn.bind(this, this.props.data!.data)}
           onMouseMove={this._hoverOn.bind(this, this.props.data!.data)}
           onMouseLeave={this._hoverOff}
@@ -123,13 +124,17 @@ export class Arc extends React.Component<IArcProps, IArcState> {
     return point.callOutAccessibilityData?.ariaLabel || (legend ? `${legend}, ` : '') + `${yValue}.`;
   };
 
+  private _shouldHighlightArc = (activeArc: string[], legend?: string): boolean => {
+    return Array.isArray(activeArc) && legend !== undefined && activeArc.includes(legend);
+  };
+
   private _renderArcLabel = (className: string) => {
     const { arc, data, innerRadius, outerRadius, showLabelsInPercent, totalValue, hideLabels, activeArc } = this.props;
 
     if (
       hideLabels ||
       Math.abs(data!.endAngle - data!.startAngle) < Math.PI / 12 ||
-      (activeArc !== data!.data.legend && activeArc !== '')
+      this._shouldHighlightArc(activeArc!, data!.data.legend!)
     ) {
       return null;
     }

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

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

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

@@ -24,9 +24,10 @@ export interface IDonutChartState {
   xCalloutValue?: string;
   yCalloutValue?: string;
   focusedArcId?: string;
-  selectedLegend: string;
+  selectedLegend?: string;
   dataPointCalloutProps?: IChartDataPoint;
   callOutAccessibilityData?: IAccessibilityProps;
+  selectedLegends: string[];
 }
 
 export class DonutChartBase extends React.Component<IDonutChartProps, IDonutChartState> {
@@ -69,12 +70,13 @@ export class DonutChartBase extends React.Component<IDonutChartProps, IDonutChar
       legend: '',
       _width: this.props.width || 200,
       _height: this.props.height || 200,
-      activeLegend: '',
+      activeLegend: undefined,
       color: '',
       xCalloutValue: '',
       yCalloutValue: '',
       selectedLegend: props.legendProps?.selectedLegend ?? '',
       focusedArcId: '',
+      selectedLegends: [],
     };
     this._hoverCallback = this._hoverCallback.bind(this);
     this._focusCallback = this._focusCallback.bind(this);
@@ -138,7 +140,9 @@ export class DonutChartBase extends React.Component<IDonutChartProps, IDonutChar
                 hoverLeaveCallback={this._hoverLeave}
                 uniqText={this._uniqText}
                 onBlurCallback={this._onBlur}
-                activeArc={this._getHighlightedLegend()}
+                activeArc={this._getHighlightedLegend().filter(
+                  (legend): legend is string => legend !== undefined && legend !== '',
+                )}
                 focusedArcId={this.state.focusedArcId || ''}
                 href={this.props.href!}
                 calloutId={this._calloutId}
@@ -241,22 +245,19 @@ export class DonutChartBase extends React.Component<IDonutChartProps, IDonutChar
         title: point.legend!,
         color,
         action: () => {
-          if (this.state.selectedLegend === point.legend) {
-            this.setState({ selectedLegend: '' });
-          } else {
-            this.setState({ selectedLegend: point.legend! });
-          }
+          // Add any action logic here
         },
         hoverAction: () => {
           this._handleChartMouseLeave();
           this.setState({ activeLegend: point.legend! });
         },
         onMouseOutAction: () => {
-          this.setState({ activeLegend: '' });
+          this.setState({ activeLegend: undefined });
         },
       };
       return legend;
     });
+
     const legends = (
       <Legends
         legends={legendDataItems}
@@ -265,16 +266,41 @@ export class DonutChartBase extends React.Component<IDonutChartProps, IDonutChar
         focusZonePropsInHoverCard={this.props.focusZonePropsForLegendsInHoverCard}
         overflowText={this.props.legendsOverflowText}
         {...this.props.legendProps}
+        canSelectMultipleLegends={this.props.legendProps?.canSelectMultipleLegends}
+        onChange={this._onLegendChange}
       />
     );
     return legends;
   }
 
+  private _onLegendChange = (
+    selectedLegends: string[],
+    event: React.MouseEvent<HTMLButtonElement>,
+    currentLegend?: ILegend,
+  ) => {
+    this.setState({ selectedLegends });
+    if (this.props.legendProps?.onChange) {
+      this.props.legendProps.onChange(selectedLegends, event, currentLegend);
+    }
+  };
+
+  private _isLegendHovered = (legend: string): boolean => {
+    return this._noLegendsHighlighted() || this._isLegendHighlighted(legend);
+  };
+
+  private _isLegendHighlighted = (legend: string): boolean => {
+    return this._getHighlightedLegend().indexOf(legend) > -1;
+  };
+
+  private _noLegendsHighlighted = (): boolean => {
+    return this._getHighlightedLegend().length === 0;
+  };
+
   private _focusCallback = (data: IChartDataPoint, id: string, element: SVGPathElement): void => {
     this._currentHoverElement = element;
     this.setState({
       /** Show the callout if highlighted arc is focused and Hide it if unhighlighted arc is focused */
-      showHover: this.state.selectedLegend === '' || this.state.selectedLegend === data.legend,
+      showHover: this._isLegendHovered(data.legend!),
       value: data.data!.toString(),
       legend: data.legend,
       color: data.color!,
@@ -299,7 +325,7 @@ export class DonutChartBase extends React.Component<IDonutChartProps, IDonutChar
 
       this.setState({
         /** Show the callout if highlighted arc is hovered and Hide it if unhighlighted arc is hovered */
-        showHover: this.state.selectedLegend === '' || this.state.selectedLegend === data.legend,
+        showHover: this._noLegendsHighlighted() || this._isLegendHighlighted(data.legend!),
         value: data.data!.toString(),
         legend: data.legend,
         color,
@@ -324,16 +350,23 @@ export class DonutChartBase extends React.Component<IDonutChartProps, IDonutChar
   };
 
   private _valueInsideDonut(valueInsideDonut: string | number | undefined, data: IChartDataPoint[]) {
-    const highlightedLegend = this._getHighlightedLegend();
-    if (valueInsideDonut !== undefined && (highlightedLegend !== '' || this.state.showHover)) {
-      let legendValue = valueInsideDonut;
-      data!.map((point: IChartDataPoint, index: number) => {
-        if (point.legend === highlightedLegend || (this.state.showHover && point.legend === this.state.legend)) {
-          legendValue = point.yAxisCalloutData ? point.yAxisCalloutData : point.data!;
+    const highlightedLegends = this._getHighlightedLegend().filter(legend => legend !== undefined);
+
+    if (this.state.showHover) {
+      const legendValue = data.find(point => point.legend === this.state.legend);
+      return legendValue
+        ? legendValue.yAxisCalloutData
+          ? legendValue.yAxisCalloutData
+          : legendValue.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;
     }
@@ -354,7 +387,7 @@ export class DonutChartBase extends React.Component<IDonutChartProps, IDonutChar
    * Note: This won't work in case of multiple legends selection.
    */
   private _getHighlightedLegend() {
-    return this.state.selectedLegend || this.state.activeLegend;
+    return this.state.selectedLegends.length > 0 ? this.state.selectedLegends : [this.state.activeLegend];
   }
 
   private _isChartEmpty(): boolean {

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

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

packages/react-examples/src/react-charting/DonutChart/DonutChart.Basic.Example.tsx

@@ -14,6 +14,7 @@ import { Toggle } from '@fluentui/react/lib/Toggle';
 interface IDonutChartState {
   enableGradient: boolean;
   roundCorners: boolean;
+  legendMultiSelect: boolean;
 }
 
 export class DonutChartBasicExample extends React.Component<IDonutChartProps, IDonutChartState> {
@@ -22,6 +23,7 @@ export class DonutChartBasicExample extends React.Component<IDonutChartProps, ID
     this.state = {
       enableGradient: false,
       roundCorners: false,
+      legendMultiSelect: false,
     };
   }
 
@@ -41,6 +43,62 @@ export class DonutChartBasicExample extends React.Component<IDonutChartProps, ID
         gradient: getGradientFromToken(DataVizGradientPalette.gradient2),
         xAxisCalloutData: '2020/04/20',
       },
+      {
+        legend: 'third',
+        data: 12000,
+        color: getColorFromToken(DataVizPalette.color3),
+        gradient: getGradientFromToken(DataVizGradientPalette.gradient2),
+        xAxisCalloutData: '2020/04/20',
+      },
+      {
+        legend: 'fourth',
+        data: 2000,
+        color: getColorFromToken(DataVizPalette.color4),
+        gradient: getGradientFromToken(DataVizGradientPalette.gradient2),
+        xAxisCalloutData: '2020/04/20',
+      },
+      {
+        legend: 'fifth',
+        data: 5000,
+        color: getColorFromToken(DataVizPalette.color5),
+        gradient: getGradientFromToken(DataVizGradientPalette.gradient2),
+        xAxisCalloutData: '2020/04/20',
+      },
+      {
+        legend: 'sixth',
+        data: 6000,
+        color: getColorFromToken(DataVizPalette.color6),
+        gradient: getGradientFromToken(DataVizGradientPalette.gradient2),
+        xAxisCalloutData: '2020/04/20',
+      },
+      {
+        legend: 'seventh',
+        data: 7000,
+        color: getColorFromToken(DataVizPalette.color7),
+        gradient: getGradientFromToken(DataVizGradientPalette.gradient2),
+        xAxisCalloutData: '2020/04/20',
+      },
+      {
+        legend: 'eighth',
+        data: 8000,
+        color: getColorFromToken(DataVizPalette.color8),
+        gradient: getGradientFromToken(DataVizGradientPalette.gradient2),
+        xAxisCalloutData: '2020/04/20',
+      },
+      {
+        legend: 'ninth',
+        data: 9000,
+        color: getColorFromToken(DataVizPalette.color9),
+        gradient: getGradientFromToken(DataVizGradientPalette.gradient2),
+        xAxisCalloutData: '2020/04/20',
+      },
+      {
+        legend: 'tenth',
+        data: 10000,
+        color: getColorFromToken(DataVizPalette.color10),
+        gradient: getGradientFromToken(DataVizGradientPalette.gradient2),
+        xAxisCalloutData: '2020/04/20',
+      },
     ];
 
     const data: IChartProps = {
@@ -66,6 +124,14 @@ export class DonutChartBasicExample extends React.Component<IDonutChartProps, ID
             onChange={this._onToggleRoundCorners}
             checked={this.state.roundCorners}
           />
+          &nbsp;&nbsp;
+          <Toggle
+            label="Select Multiple Legends"
+            onText="ON"
+            offText="OFF"
+            onChange={this._onToggleLegendMultiSelect}
+            checked={this.state.legendMultiSelect}
+          />
         </div>
 
         <DonutChart
@@ -75,11 +141,12 @@ export class DonutChartBasicExample extends React.Component<IDonutChartProps, ID
           href={'https://developer.microsoft.com/en-us/'}
           legendsOverflowText={'overflow Items'}
           hideLegend={false}
-          height={220}
-          width={176}
           valueInsideDonut={39000}
           enableGradient={this.state.enableGradient}
           roundCorners={this.state.roundCorners}
+          legendProps={{
+            canSelectMultipleLegends: this.state.legendMultiSelect,
+          }}
         />
       </>
     );
@@ -92,4 +159,8 @@ export class DonutChartBasicExample extends React.Component<IDonutChartProps, ID
   private _onToggleRoundCorners = (ev: React.MouseEvent<HTMLElement>, checked: boolean) => {
     this.setState({ roundCorners: checked });
   };
+
+  private _onToggleLegendMultiSelect = (ev: React.MouseEvent<HTMLElement>, checked: boolean) => {
+    this.setState({ legendMultiSelect: checked });
+  };
 }