Enable Controlled Legend working in Declarative HBC (#33476)

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

Hide file tree

Showing 5 changed files with 50 additions and 3 deletions.
diff --git a/change/@fluentui-react-charting-f8073f84-d26a-4b28-992e-379202a63f5d.json b/change/@fluentui-react-charting-f8073f84-d26a-4b28-992e-379202a63f5d.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Enable Controlled Legends working in declarative HBC",
+  "packageName": "@fluentui/react-charting",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/...ct-charting/src/components/HorizontalBarChartWithAxis/HorizontalBarChartWithAxis.base.tsx b/...ct-charting/src/components/HorizontalBarChartWithAxis/HorizontalBarChartWithAxis.base.tsx
@@ -84,7 +84,7 @@ export class HorizontalBarChartWithAxisBase extends React.Component<
       color: '',
       dataForHoverCard: 0,
       isCalloutVisible: false,
-      isLegendSelected: false,
+      isLegendSelected: props.legendProps?.selectedLegend !== undefined,
       isLegendHovered: false,
       refSelected: null,
       selectedLegendTitle: props.legendProps?.selectedLegend ?? '',
@@ -583,6 +583,15 @@ export class HorizontalBarChartWithAxisBase extends React.Component<
     const { xBarScale, yBarScale } = this._getScales(containerHeight, containerWidth, false);
     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;
+      }
+      this._classNames = getClassNames(this.props.styles!, {
+        theme: this.props.theme!,
+        legendColor: this.state.color,
+        shouldHighlight,
+      });
       const barHeight: number = Math.max(yBarScale(point.y), 0);
       if (barHeight < 1) {
         return <React.Fragment key={point.x}> </React.Fragment>;
@@ -627,6 +636,7 @@ export class HorizontalBarChartWithAxisBase extends React.Component<
           <rect
             transform={`translate(0,${0.5 * (yBarScale.bandwidth() - this._barHeight)})`}
             key={point.x}
+            className={this._classNames.opacityChangeOnHover}
             x={this._isRtl ? xBarScale(point.x) : this.margins.left!}
             y={yBarScale(point.y)}
             rx={this.props.roundCorners ? 3 : 0}
@@ -646,7 +656,7 @@ export class HorizontalBarChartWithAxisBase extends React.Component<
             onMouseOver={this._onBarHover.bind(this, point, startColor)}
             onMouseLeave={this._onBarLeave}
             onBlur={this._onBarLeave}
-            data-is-focusable={true}
+            data-is-focusable={shouldHighlight}
             onFocus={this._onBarFocus.bind(this, point, index, startColor)}
             fill={this.props.enableGradient ? `url(#${gradientId})` : startColor}
           />

diff --git a/...ponents/HorizontalBarChartWithAxis/__snapshots__/HorizontalBarChartWithAxis.test.tsx.snap b/...ponents/HorizontalBarChartWithAxis/__snapshots__/HorizontalBarChartWithAxis.test.tsx.snap
@@ -2128,6 +2128,11 @@ exports[`HorizontalBarChartWithAxis snapShot testing renders showToolTipForYAxis
         <rect
           aria-label="1000. String One."
           aria-labelledby="toolTipcallout0"
+          className=
+
+              {
+                opacity: ;
+              }
           data-is-focusable={true}
           fill="#0078d4"
           height={32}
@@ -2739,6 +2744,11 @@ exports[`HorizontalBarChartWithAxis snapShot testing renders showYAxisLables cor
         <rect
           aria-label="1000. String One."
           aria-labelledby="toolTipcallout0"
+          className=
+
+              {
+                opacity: ;
+              }
           data-is-focusable={true}
           fill="#0078d4"
           height={32}

diff --git a/...ents/HorizontalBarChartWithAxis/__snapshots__/HorizontalBarChartWithAxisRTL.test.tsx.snap b/...ents/HorizontalBarChartWithAxis/__snapshots__/HorizontalBarChartWithAxisRTL.test.tsx.snap
@@ -4389,6 +4389,11 @@ exports[`Horizontal bar chart with axis rendering Should render the Horizontal b
           <rect
             aria-label="1000. String One."
             aria-labelledby="toolTipcallout0"
+            class=
+
+                {
+                  opacity: ;
+                }
             data-is-focusable="true"
             fill="#0078d4"
             height="32"
@@ -4403,6 +4408,11 @@ exports[`Horizontal bar chart with axis rendering Should render the Horizontal b
           <rect
             aria-label="5000. String Two."
             aria-labelledby="toolTipcallout0"
+            class=
+
+                {
+                  opacity: ;
+                }
             data-is-focusable="true"
             fill="#002050"
             height="32"
@@ -4417,6 +4427,11 @@ exports[`Horizontal bar chart with axis rendering Should render the Horizontal b
           <rect
             aria-label="3000. String Three."
             aria-labelledby="toolTipcallout0"
+            class=
+
+                {
+                  opacity: ;
+                }
             data-is-focusable="true"
             fill="#00188f"
             height="32"
@@ -4431,6 +4446,11 @@ exports[`Horizontal bar chart with axis rendering Should render the Horizontal b
           <rect
             aria-label="2000. String Four."
             aria-labelledby="toolTipcallout0"
+            class=
+
+                {
+                  opacity: ;
+                }
             data-is-focusable="true"
             fill="#0078d4"
             height="32"

diff --git a/packages/react-examples/src/react-charting/DeclarativeChart/schema/fluent_horizontalbar.json b/packages/react-examples/src/react-charting/DeclarativeChart/schema/fluent_horizontalbar.json
@@ -60,7 +60,7 @@
   ],
   "layout": {
     "title": "PHP Framework Popularity at Work - SitePoint, 2015",
-    "width": 1151,
+    "width": 850,
     "xaxis": {
       "type": "linear",
       "range": [-198.2562959184288, 1830.6731869091736],