Enable chart selection based on legends in declarative charts (#33460)

Author: Anush2303

Diff for: change/@fluentui-react-charting-48ec930a-4a1f-4ee2-bd2d-bdaf4b06fbb0.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Enable chart selection based on legends in declarative charts",
+  "packageName": "@fluentui/react-charting",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

Diff for: packages/charts/react-charting/src/components/AreaChart/AreaChart.base.tsx

@@ -124,7 +124,7 @@ export class AreaChartBase extends React.Component<IAreaChartProps, IAreaChartSt
     super(props);
     this._createSet = memoizeFunction(this._createDataSet);
     this.state = {
-      selectedLegend: '',
+      selectedLegend: props.legendProps?.selectedLegend ?? '',
       activeLegend: '',
       hoverXValue: '',
       isCalloutVisible: false,

Diff for: packages/charts/react-charting/src/components/DonutChart/DonutChart.base.tsx

@@ -73,7 +73,7 @@ export class DonutChartBase extends React.Component<IDonutChartProps, IDonutChar
       color: '',
       xCalloutValue: '',
       yCalloutValue: '',
-      selectedLegend: '',
+      selectedLegend: props.legendProps?.selectedLegend ?? '',
       focusedArcId: '',
     };
     this._hoverCallback = this._hoverCallback.bind(this);

Diff for: packages/charts/react-charting/src/components/GaugeChart/GaugeChart.base.tsx

@@ -141,7 +141,7 @@ export class GaugeChartBase extends React.Component<IGaugeChartProps, IGaugeChar
 
     this.state = {
       hoveredLegend: '',
-      selectedLegend: '',
+      selectedLegend: props.legendProps?.selectedLegend ?? '',
       focusedElement: '',
       calloutTarget: null,
       isCalloutVisible: false,

Diff for: packages/charts/react-charting/src/components/GroupedVerticalBarChart/GroupedVerticalBarChart.base.tsx

@@ -109,7 +109,7 @@ export class GroupedVerticalBarChartBase extends React.Component<
       dataForHoverCard: 0,
       isCalloutVisible: false,
       refSelected: null,
-      selectedLegend: '',
+      selectedLegend: props.legendProps?.selectedLegend ?? '',
       xCalloutValue: '',
       yCalloutValue: '',
       YValueHover: [],

Diff for: packages/charts/react-charting/src/components/HeatMapChart/HeatMapChart.base.tsx

@@ -133,7 +133,7 @@ export class HeatMapChartBase extends React.Component<IHeatMapChartProps, IHeatM
       ): DataSet => this._createNewDataSet(data, xDate, xNum, yDate, yNum),
     );
     this.state = {
-      selectedLegend: '',
+      selectedLegend: props.legendProps?.selectedLegend ?? '',
       activeLegend: '',
       isCalloutVisible: false,
       target: null,

Diff for: packages/charts/react-charting/src/components/HorizontalBarChartWithAxis/HorizontalBarChartWithAxis.base.tsx

@@ -87,7 +87,7 @@ export class HorizontalBarChartWithAxisBase extends React.Component<
       isLegendSelected: false,
       isLegendHovered: false,
       refSelected: null,
-      selectedLegendTitle: '',
+      selectedLegendTitle: props.legendProps?.selectedLegend ?? '',
       xCalloutValue: '',
       yCalloutValue: '',
       activeXdataPoint: null,

Diff for: packages/charts/react-charting/src/components/LineChart/LineChart.base.tsx

@@ -186,7 +186,7 @@ export class LineChartBase extends React.Component<ILineChartProps, ILineChartSt
       activeLegend: '',
       YValueHover: [],
       refSelected: '',
-      selectedLegend: '',
+      selectedLegend: props.legendProps?.selectedLegend ?? '',
       isCalloutVisible: false,
       selectedLegendPoints: [],
       selectedColorBarLegend: [],
@@ -1192,7 +1192,7 @@ export class LineChartBase extends React.Component<ILineChartProps, ILineChartSt
           () => `translate(${this._xAxisScale(pointToHighlight.x)}, ${this._yAxisScale(pointToHighlight.y)})`,
         )
         .attr('visibility', 'visibility')
-        .attr('y2', `${lineHeight - 5 - this._yAxisScale(pointToHighlight.y)}`);
+        .attr('y2', `${lineHeight - this._yAxisScale(pointToHighlight.y)}`);
 
       this.setState({
         nearestCircleToHighlight: pointToHighlight,
@@ -1278,7 +1278,7 @@ export class LineChartBase extends React.Component<ILineChartProps, ILineChartSt
       d3Select(`#${this._verticalLine}`)
         .attr('transform', () => `translate(${_this._xAxisScale(x)}, ${_this._yAxisScale(y)})`)
         .attr('visibility', 'visibility')
-        .attr('y2', `${lineHeight - 5 - _this._yAxisScale(y)}`);
+        .attr('y2', `${lineHeight - _this._yAxisScale(y)}`);
       if (this._uniqueCallOutID !== circleId) {
         this._uniqueCallOutID = circleId;
         this.setState({

Diff for: packages/charts/react-charting/src/components/VerticalBarChart/VerticalBarChart.base.tsx

@@ -110,7 +110,7 @@ export class VerticalBarChartBase extends React.Component<IVerticalBarChartProps
       dataForHoverCard: 0,
       isCalloutVisible: false,
       refSelected: null,
-      selectedLegend: '',
+      selectedLegend: props.legendProps?.selectedLegend ?? '',
       activeLegend: '',
       xCalloutValue: '',
       yCalloutValue: '',

Diff for: packages/charts/react-charting/src/components/VerticalStackedBarChart/VerticalStackedBarChart.base.tsx

@@ -128,7 +128,7 @@ export class VerticalStackedBarChartBase extends React.Component<
     super(props);
     this.state = {
       isCalloutVisible: false,
-      selectedLegend: '',
+      selectedLegend: props.legendProps?.selectedLegend ?? '',
       activeLegend: '',
       refSelected: null,
       dataForHoverCard: 0,