From 7b75871739a0639fffc065d649848a356baf1d26 Mon Sep 17 00:00:00 2001
From: Anush Gupta <74965306+Anush2303@users.noreply.github.com>
Date: Mon, 16 Dec 2024 17:01:29 +0530
Subject: [PATCH] Enable Controlled Legend working in Declarative HBC (#33476)

---
 ...-f8073f84-d26a-4b28-992e-379202a63f5d.json |  7 +++++++
 .../HorizontalBarChartWithAxis.base.tsx       | 14 +++++++++++--
 .../HorizontalBarChartWithAxis.test.tsx.snap  | 10 ++++++++++
 ...orizontalBarChartWithAxisRTL.test.tsx.snap | 20 +++++++++++++++++++
 .../schema/fluent_horizontalbar.json          |  2 +-
 5 files changed, 50 insertions(+), 3 deletions(-)
 create mode 100644 change/@fluentui-react-charting-f8073f84-d26a-4b28-992e-379202a63f5d.json

diff --git a/change/@fluentui-react-charting-f8073f84-d26a-4b28-992e-379202a63f5d.json b/change/@fluentui-react-charting-f8073f84-d26a-4b28-992e-379202a63f5d.json
new file mode 100644
index 00000000000000..4ee5b0e301fd36
--- /dev/null
+++ 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": "74965306+Anush2303@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/charts/react-charting/src/components/HorizontalBarChartWithAxis/HorizontalBarChartWithAxis.base.tsx b/packages/charts/react-charting/src/components/HorizontalBarChartWithAxis/HorizontalBarChartWithAxis.base.tsx
index 10246111177c29..8cb522e55edd42 100644
--- a/packages/charts/react-charting/src/components/HorizontalBarChartWithAxis/HorizontalBarChartWithAxis.base.tsx
+++ b/packages/charts/react-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/packages/charts/react-charting/src/components/HorizontalBarChartWithAxis/__snapshots__/HorizontalBarChartWithAxis.test.tsx.snap b/packages/charts/react-charting/src/components/HorizontalBarChartWithAxis/__snapshots__/HorizontalBarChartWithAxis.test.tsx.snap
index eeabb9f133817c..ae589f61329a71 100644
--- a/packages/charts/react-charting/src/components/HorizontalBarChartWithAxis/__snapshots__/HorizontalBarChartWithAxis.test.tsx.snap
+++ b/packages/charts/react-charting/src/components/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/packages/charts/react-charting/src/components/HorizontalBarChartWithAxis/__snapshots__/HorizontalBarChartWithAxisRTL.test.tsx.snap b/packages/charts/react-charting/src/components/HorizontalBarChartWithAxis/__snapshots__/HorizontalBarChartWithAxisRTL.test.tsx.snap
index f231289f46c8d1..d9004824313301 100644
--- a/packages/charts/react-charting/src/components/HorizontalBarChartWithAxis/__snapshots__/HorizontalBarChartWithAxisRTL.test.tsx.snap
+++ b/packages/charts/react-charting/src/components/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
index fcb62084212738..23cb372f1e7f0b 100644
--- 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],