Enable multiple legend selection for Horizontal bar chart with axis

microsoft · Dec 16, 2024 · f255301 · f255301
1 parent 7b75871
commit f255301
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 2 deletions.
diff --git a/...ct-charting/src/components/HorizontalBarChartWithAxis/HorizontalBarChartWithAxis.base.tsx b/...ct-charting/src/components/HorizontalBarChartWithAxis/HorizontalBarChartWithAxis.base.tsx
@@ -54,6 +54,7 @@ export interface IHorizontalBarChartWithAxisState extends IBasestate {
   callOutAccessibilityData?: IAccessibilityProps;
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   tooltipElement?: any;
+  selectedLegends: string[];
 }
 
 type ColorScale = (_p?: number) => string;
@@ -93,6 +94,7 @@ export class HorizontalBarChartWithAxisBase extends React.Component<
       activeXdataPoint: null,
       YValueHover: [],
       hoverXValue: '',
+      selectedLegends: [],
     };
     this._calloutId = getId('callout');
     this._tooltipId = getId('HBCWATooltipID_');
@@ -337,7 +339,10 @@ 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.isLegendSelected &&
+          (this.state.selectedLegendTitle === point.legend ||
+            this.state.selectedLegends.length === 0 ||
+            this.state.selectedLegends.includes(point.legend!)))) &&
       this._calloutAnchorPoint !== point
     ) {
       this._calloutAnchorPoint = point;
@@ -457,7 +462,10 @@ export class HorizontalBarChartWithAxisBase extends React.Component<
     const bars = sortedBars.map((point: IHorizontalBarChartWithAxisDataPoint, index: number) => {
       let shouldHighlight = true;
       if (this.state.isLegendHovered || this.state.isLegendSelected) {
-        shouldHighlight = this.state.selectedLegendTitle === point.legend;
+        shouldHighlight =
+          this.state.selectedLegendTitle === point.legend ||
+          this.state.selectedLegends.length === 0 ||
+          this.state.selectedLegends?.includes(point.legend!);
       }
       this._classNames = getClassNames(this.props.styles!, {
         theme: this.props.theme!,
@@ -780,11 +788,17 @@ export class HorizontalBarChartWithAxisBase extends React.Component<
         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[]) => {
+    this.setState({ selectedLegends });
+  };
+
   private _getAxisData = (yAxisData: IAxisData) => {
     if (yAxisData && yAxisData.yAxisDomainValues.length) {
       // For HBCWA x and y Values are swapped

diff --git a/...rc/react-charting/HorizontalBarChartWithAxis/HorizontalBarChartWithAxis.Basic.Example.tsx b/...rc/react-charting/HorizontalBarChartWithAxis/HorizontalBarChartWithAxis.Basic.Example.tsx
@@ -18,6 +18,7 @@ interface IHorizontalBarChartWithAxisState {
   useSingleColor: boolean;
   enableGradient: boolean;
   roundCorners: boolean;
+  selectMultipleLegends: boolean;
 }
 
 const options: IChoiceGroupOption[] = [
@@ -38,6 +39,7 @@ export class HorizontalBarChartWithAxisBasicExample extends React.Component<
       useSingleColor: false,
       enableGradient: false,
       roundCorners: false,
+      selectMultipleLegends: false,
     };
   }
 
@@ -71,6 +73,10 @@ export class HorizontalBarChartWithAxisBasicExample extends React.Component<
     this.setState({ roundCorners: checked });
   };
 
+  private _onToggleRoundMultipleLegendSelection = (ev: React.MouseEvent<HTMLElement>, checked: boolean) => {
+    this.setState({ selectMultipleLegends: checked });
+  };
+
   private _basicExample(): JSX.Element {
     const points: IHorizontalBarChartWithAxisDataPoint[] = [
       {
@@ -148,6 +154,12 @@ export class HorizontalBarChartWithAxisBasicExample extends React.Component<
           <Toggle label="Enable Gradient" onText="ON" offText="OFF" onChange={this._onToggleGradient} />
           &nbsp;&nbsp;
           <Toggle label="Rounded Corners" onText="ON" offText="OFF" onChange={this._onToggleRoundCorners} />
+          <Toggle
+            label="Select multiple legends"
+            onText="ON"
+            offText="OFF"
+            onChange={this._onToggleRoundMultipleLegendSelection}
+          />
         </div>
         <br />
 
@@ -168,6 +180,9 @@ export class HorizontalBarChartWithAxisBasicExample extends React.Component<
             enableReflow={true}
             enableGradient={this.state.enableGradient}
             roundCorners={this.state.roundCorners}
+            legendProps={{
+              canSelectMultipleLegends: this.state.selectMultipleLegends,
+            }}
           />
         </div>
       </>