Adding handlers for selected legends

microsoft · Dec 18, 2024 · 403da6d · 403da6d
1 parent f255301
commit 403da6d
Showing 1 changed file with 49 additions and 21 deletions.
diff --git a/...ct-charting/src/components/HorizontalBarChartWithAxis/HorizontalBarChartWithAxis.base.tsx b/...ct-charting/src/components/HorizontalBarChartWithAxis/HorizontalBarChartWithAxis.base.tsx
@@ -338,11 +338,11 @@ export class HorizontalBarChartWithAxisBase extends React.Component<
 
     const { YValueHover, hoverXValue } = this._getCalloutContentForBar(point);
     if (
-      (this.state.isLegendSelected === false ||
-        (this.state.isLegendSelected &&
-          (this.state.selectedLegendTitle === point.legend ||
-            this.state.selectedLegends.length === 0 ||
-            this.state.selectedLegends.includes(point.legend!)))) &&
+      (!this._isLegendSelected() ||
+        (this._isLegendSelected() &&
+          (this._isSpecificLegendTitleSelected(point.legend!) ||
+            this._noLegendsSelected() ||
+            this._isSpecificLegendSelected(point.legend!)))) &&
       this._calloutAnchorPoint !== point
     ) {
       this._calloutAnchorPoint = point;
@@ -383,10 +383,7 @@ export class HorizontalBarChartWithAxisBase extends React.Component<
     refArrayIndexNumber: number,
     color: string,
   ): void => {
-    if (
-      this.state.isLegendSelected === false ||
-      (this.state.isLegendSelected && this.state.selectedLegendTitle === point.legend)
-    ) {
+    if (!this._isLegendSelected() || (this._isLegendSelected() && this._isSpecificLegendTitleSelected(point.legend!))) {
       const { YValueHover, hoverXValue } = this._getCalloutContentForBar(point);
       this._refArray.forEach((obj: IRefArrayData, index: number) => {
         if (refArrayIndexNumber === index) {
@@ -461,11 +458,11 @@ export class HorizontalBarChartWithAxisBase extends React.Component<
 
     const bars = sortedBars.map((point: IHorizontalBarChartWithAxisDataPoint, index: number) => {
       let shouldHighlight = true;
-      if (this.state.isLegendHovered || this.state.isLegendSelected) {
+      if (this._isLegendHovered() || this._isLegendSelected()) {
         shouldHighlight =
-          this.state.selectedLegendTitle === point.legend ||
-          this.state.selectedLegends.length === 0 ||
-          this.state.selectedLegends?.includes(point.legend!);
+          this._isSpecificLegendTitleSelected(point.legend!) ||
+          this._noLegendsSelected() ||
+          this._isSpecificLegendSelected(point.legend!);
       }
       this._classNames = getClassNames(this.props.styles!, {
         theme: this.props.theme!,
@@ -592,8 +589,8 @@ export class HorizontalBarChartWithAxisBase extends React.Component<
     const { useSingleColor = false } = this.props;
     const bars = this._points.map((point: IHorizontalBarChartWithAxisDataPoint, index: number) => {
       let shouldHighlight = true;
-      if (this.state.isLegendHovered || this.state.isLegendSelected) {
-        shouldHighlight = this.state.selectedLegendTitle === point.legend;
+      if (this._isLegendHovered() || this._isLegendSelected()) {
+        shouldHighlight = this._isSpecificLegendTitleSelected(point.legend!);
       }
       this._classNames = getClassNames(this.props.styles!, {
         theme: this.props.theme!,
@@ -707,8 +704,8 @@ export class HorizontalBarChartWithAxisBase extends React.Component<
   };
 
   private _onLegendClick(customMessage: string): void {
-    if (this.state.isLegendSelected) {
-      if (this.state.selectedLegendTitle === customMessage) {
+    if (this._isLegendSelected()) {
+      if (this._isSpecificLegendTitleSelected(customMessage)) {
         this.setState({
           isLegendSelected: false,
           selectedLegendTitle: customMessage,
@@ -727,7 +724,7 @@ export class HorizontalBarChartWithAxisBase extends React.Component<
   }
 
   private _onLegendHover(customMessage: string): void {
-    if (this.state.isLegendSelected === false) {
+    if (!this._isLegendSelected()) {
       this.setState({
         isLegendHovered: true,
         selectedLegendTitle: customMessage,
@@ -736,11 +733,11 @@ export class HorizontalBarChartWithAxisBase extends React.Component<
   }
 
   private _onLegendLeave(isLegendFocused?: boolean): void {
-    if (!!isLegendFocused || this.state.isLegendSelected === false) {
+    if (!!isLegendFocused || !this._isLegendSelected()) {
       this.setState({
         isLegendHovered: false,
         selectedLegendTitle: '',
-        isLegendSelected: isLegendFocused ? false : this.state.isLegendSelected,
+        isLegendSelected: isLegendFocused ? false : this._isLegendSelected(),
       });
     }
   }
@@ -795,8 +792,39 @@ export class HorizontalBarChartWithAxisBase extends React.Component<
     return legends;
   };
 
-  private _onLegendChange = (selectedLegends: string[]) => {
+  private _getHighlightedLegend = () => {
+    return this.state.selectedLegends.length > 0 ? this.state.selectedLegends : [this.state.activeLegend];
+  };
+
+  private _isLegendSelected = (): boolean => {
+    return this.state.isLegendSelected!;
+  };
+
+  private _isSpecificLegendTitleSelected = (legend: string): boolean => {
+    return this.state.selectedLegendTitle === legend;
+  };
+
+  private _isLegendHovered = (): boolean => {
+    return this.state.isLegendHovered!;
+  };
+
+  private _isSpecificLegendSelected = (legend: string): boolean => {
+    return this._getHighlightedLegend().indexOf(legend) > -1;
+  };
+
+  private _noLegendsSelected = (): boolean => {
+    return this.state.selectedLegends.length === 0;
+  };
+
+  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 _getAxisData = (yAxisData: IAxisData) => {