Updating legend selection functions

microsoft · Dec 27, 2024 · 7425792 · 7425792
1 parent 1b14235
commit 7425792
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 28 deletions.
diff --git a/packages/charts/react-charting/src/components/AreaChart/AreaChart.base.tsx b/packages/charts/react-charting/src/components/AreaChart/AreaChart.base.tsx
@@ -41,6 +41,7 @@ import {
   createStringYAxis,
   formatDate,
   getSecureProps,
+  areArraysEqual,
 } from '../../utilities/index';
 import { ILegend, Legends } from '../Legends/index';
 import { DirectionalHint } from '@fluentui/react/lib/Callout';
@@ -136,7 +137,7 @@ export class AreaChartBase extends React.Component<IAreaChartProps, IAreaChartSt
 
     this._createSet = memoizeFunction(this._createDataSet);
     this.state = {
-      selectedLegends: [],
+      selectedLegends: props.legendProps?.selectedLegends || [],
       activeLegend: undefined,
       hoverXValue: '',
       isCalloutVisible: false,
@@ -164,9 +165,9 @@ export class AreaChartBase extends React.Component<IAreaChartProps, IAreaChartSt
   }
 
   public componentDidUpdate(prevProps: IAreaChartProps): void {
-    if (prevProps.legendProps?.selectedLegend !== this.props.legendProps?.selectedLegend) {
+    if (!areArraysEqual(prevProps.legendProps?.selectedLegends, this.props.legendProps?.selectedLegends)) {
       this.setState({
-        selectedLegend: this.props.legendProps?.selectedLegend ?? '',
+        selectedLegends: this.props.legendProps?.selectedLegends || [],
       });
     }
 
@@ -635,15 +636,25 @@ export class AreaChartBase extends React.Component<IAreaChartProps, IAreaChartSt
         enabledWrapLines={this.props.enabledLegendsWrapLines}
         focusZonePropsInHoverCard={this.props.focusZonePropsForLegendsInHoverCard}
         {...this.props.legendProps}
-        canSelectMultipleLegends={this.props.canSelectMultipleLegends}
-        onChange={this._onLegendChange}
+        onChange={this._onLegendSelectionChange.bind(this)}
       />
     );
   };
 
-  private _onLegendChange = (selectedLegends: string[]) => {
-    this.setState({ selectedLegends });
-  };
+  private _onLegendSelectionChange(
+    selectedLegends: string[],
+    event: React.MouseEvent<HTMLButtonElement>,
+    currentLegend?: ILegend,
+  ): void {
+    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 _onDataPointClick = (func: (() => void) | undefined) => {
     if (func) {
@@ -893,10 +904,10 @@ export class AreaChartBase extends React.Component<IAreaChartProps, IAreaChartSt
   };
 
   private _getCircleRadius = (xDataPoint: number, circleRadius: number, circleId: string, legend: string): number => {
-    const { isCircleClicked, nearestCircleToHighlight, activePoint, selectedLegends } = this.state;
+    const { isCircleClicked, nearestCircleToHighlight, activePoint } = this.state;
 
     // Show the circle if no legends are selected or if the point's legend is in the selected legends
-    if (selectedLegends.length > 0 && !selectedLegends.includes(legend)) {
+    if (!this._legendHighlighted(legend)) {
       return 0;
     }
 
@@ -922,19 +933,24 @@ export class AreaChartBase extends React.Component<IAreaChartProps, IAreaChartSt
    * 2. hovering: if there is no selected legend and the user hovers over it
    */
   private _legendHighlighted = (legend: string) => {
-    return (
-      this.state.selectedLegends.includes(legend) ||
-      (this.state.selectedLegends.length === 0 && this.state.activeLegend === legend)
-    );
+    return this._getHighlightedLegend().includes(legend!);
   };
 
   /**
    * This function checks if none of the legends is selected or hovered.
    */
   private _noLegendHighlighted = () => {
-    return this.state.selectedLegends.length === 0 && this.state.activeLegend === undefined;
+    return this._getHighlightedLegend().length === 0;
   };
 
+  private _getHighlightedLegend() {
+    return this.state.selectedLegends.length > 0
+      ? this.state.selectedLegends
+      : this.state.activeLegend
+      ? [this.state.activeLegend]
+      : [];
+  }
+
   private _addDefaultColors = (lineChartData?: ILineChartPoints[]): ILineChartPoints[] => {
     return lineChartData
       ? lineChartData.map((item, index) => {
@@ -959,22 +975,26 @@ export class AreaChartBase extends React.Component<IAreaChartProps, IAreaChartSt
     const found: any = this._calloutPoints.find((e: { x: string | number }) => e.x === modifiedXVal);
     // Show details in the callout for the focused point only
     found.values = found.values.filter((e: { y: number }) => e.y === y);
-    const filteredValues =
-      this.state.selectedLegends.length > 0
-        ? found.values.filter((value: { legend: string }) => this.state.selectedLegends.includes(value.legend))
-        : found.values;
+    const filteredValues = this._getFilteredLegendValues(found.values);
 
     this.setState({
       refSelected: `#${circleId}`,
       isCalloutVisible: true,
       hoverXValue: xAxisCalloutData ? xAxisCalloutData : formattedDate,
-      YValueHover: filteredValues,
+      YValueHover: filteredValues!,
       stackCalloutProps: { ...found, values: filteredValues },
       dataPointCalloutProps: { ...found, values: filteredValues },
       activePoint: circleId,
     });
   };
 
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  private _getFilteredLegendValues = (values: any) => {
+    !this._noLegendHighlighted()
+      ? values.filter((value: { legend: string }) => this._legendHighlighted(value.legend))
+      : values;
+  };
+
   private _handleBlur = () => {
     this.setState({
       refSelected: null,

diff --git a/packages/charts/react-charting/src/components/AreaChart/AreaChart.types.ts b/packages/charts/react-charting/src/components/AreaChart/AreaChart.types.ts
@@ -70,12 +70,6 @@ export interface IAreaChartProps extends ICartesianChartProps {
    * The prop used to enable gradient fill color for the chart.
    */
   enableGradient?: boolean;
-
-  /**
-   * @default false
-   * The prop used to enable multiple selection of legends.
-   */
-  canSelectMultipleLegends?: boolean;
 }
 
 /**

diff --git a/packages/react-examples/src/react-charting/AreaChart/AreaChart.Basic.Example.tsx b/packages/react-examples/src/react-charting/AreaChart/AreaChart.Basic.Example.tsx
@@ -271,7 +271,9 @@ export class AreaChartBasicExample extends React.Component<{}, IAreaChartBasicSt
               enableReflow={true}
               yAxisTitle={this.state.showAxisTitles ? 'Variation of stock market prices' : undefined}
               xAxisTitle={this.state.showAxisTitles ? 'Number of days' : undefined}
-              canSelectMultipleLegends={this.state.legendMultiSelect}
+              legendProps={{
+                canSelectMultipleLegends: this.state.legendMultiSelect,
+              }}
             />
           </div>
         )}
@@ -295,7 +297,9 @@ export class AreaChartBasicExample extends React.Component<{}, IAreaChartBasicSt
                 ) : null
               }
               enableReflow={true}
-              canSelectMultipleLegends={this.state.legendMultiSelect}
+              legendProps={{
+                canSelectMultipleLegends: this.state.legendMultiSelect,
+              }}
             />
           </div>
         )}