From be186ba4528880a1ce9f89936eb12a19befef601 Mon Sep 17 00:00:00 2001
From: srmukher <120183316+srmukher@users.noreply.github.com>
Date: Thu, 19 Dec 2024 12:09:50 +0000
Subject: [PATCH] Fixing donut labels

---
 .../src/components/DonutChart/Arc/Arc.tsx       |  2 +-
 .../components/DonutChart/DonutChart.base.tsx   | 17 +++++++----------
 2 files changed, 8 insertions(+), 11 deletions(-)

diff --git a/packages/charts/react-charting/src/components/DonutChart/Arc/Arc.tsx b/packages/charts/react-charting/src/components/DonutChart/Arc/Arc.tsx
index 522ac87db4b327..09087f3b6b7491 100644
--- a/packages/charts/react-charting/src/components/DonutChart/Arc/Arc.tsx
+++ b/packages/charts/react-charting/src/components/DonutChart/Arc/Arc.tsx
@@ -134,7 +134,7 @@ export class Arc extends React.Component<IArcProps, IArcState> {
     if (
       hideLabels ||
       Math.abs(data!.endAngle - data!.startAngle) < Math.PI / 12 ||
-      this._shouldHighlightArc(activeArc!, data!.data.legend!)
+      !this._shouldHighlightArc(activeArc!, data!.data.legend!)
     ) {
       return null;
     }
diff --git a/packages/charts/react-charting/src/components/DonutChart/DonutChart.base.tsx b/packages/charts/react-charting/src/components/DonutChart/DonutChart.base.tsx
index 3aa12d3a58e33f..c1f2122dd9bae6 100644
--- a/packages/charts/react-charting/src/components/DonutChart/DonutChart.base.tsx
+++ b/packages/charts/react-charting/src/components/DonutChart/DonutChart.base.tsx
@@ -138,9 +138,7 @@ export class DonutChartBase extends React.Component<IDonutChartProps, IDonutChar
                 hoverLeaveCallback={this._hoverLeave}
                 uniqText={this._uniqText}
                 onBlurCallback={this._onBlur}
-                activeArc={this._getHighlightedLegend().filter((legend): legend is string =>
-                  this._isLegendHighlighted(legend),
-                )}
+                activeArc={this._getHighlightedLegend()}
                 focusedArcId={this.state.focusedArcId || ''}
                 href={this.props.href!}
                 calloutId={this._calloutId}
@@ -272,16 +270,16 @@ export class DonutChartBase extends React.Component<IDonutChartProps, IDonutChar
     event: React.MouseEvent<HTMLButtonElement>,
     currentLegend?: ILegend,
   ) => {
-    this.setState({ selectedLegends });
+    if (this.props.legendProps?.canSelectMultipleLegends) {
+      this.setState({ selectedLegends });
+    } else {
+      this.setState({ selectedLegends: selectedLegends.slice(-1) });
+    }
     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;
   };
@@ -294,7 +292,7 @@ export class DonutChartBase extends React.Component<IDonutChartProps, IDonutChar
     this._currentHoverElement = element;
     this.setState({
       /** Show the callout if highlighted arc is focused and Hide it if unhighlighted arc is focused */
-      showHover: this._isLegendHovered(data.legend!),
+      showHover: this._noLegendsHighlighted() || this._isLegendHighlighted(data.legend!),
       value: data.data!.toString(),
       legend: data.legend,
       color: data.color!,
@@ -378,7 +376,6 @@ export class DonutChartBase extends React.Component<IDonutChartProps, IDonutChar
    * 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.
    */
   private _getHighlightedLegend() {
     return this.state.selectedLegends.length > 0