Fixing donut labels

microsoft · Dec 19, 2024 · 6cbdf51 · 6cbdf51
1 parent cea2d29
commit 6cbdf51
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 10 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
@@ -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
@@ -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}
@@ -273,15 +271,17 @@ export class DonutChartBase extends React.Component<IDonutChartProps, IDonutChar
     currentLegend?: ILegend,
   ) => {
     this.setState({ selectedLegends });
+    if (this.props.legendProps?.canSelectMultipleLegends) {
+      this.setState({ selectedLegends });
+    } else {
+      this.setState({ selectedLegends: selectedLegends.slice(-1) });
+    }
+    this.setState({ activeLegend: currentLegend?.title });
     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 +294,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 +378,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