Enabled multi-selection of Controlled legends (#33479)

Author: Anush2303

change/@fluentui-react-charting-4c197bf1-3dca-480d-aa17-d97a170246ff.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Enabled Multi Select behaviour of Controlled legends",
+  "packageName": "@fluentui/react-charting",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/charts/react-charting/src/components/DeclarativeChart/DeclarativeChart.tsx

@@ -140,7 +140,11 @@ export const DeclarativeChart: React.FunctionComponent<DeclarativeChartProps> =
         return (
           <LineChart
             {...transformPlotlyJsonToScatterChartProps({ data, layout }, false, colorMap, isDarkTheme)}
-            legendProps={legendProps}
+            legendProps={{
+              ...legendProps,
+              canSelectMultipleLegends: true,
+              selectedLegends: activeLegends,
+            }}
           />
         );
       }

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

@@ -188,9 +188,9 @@ export class LineChartBase extends React.Component<ILineChartProps, ILineChartSt
       refSelected: '',
       selectedLegend: props.legendProps?.selectedLegend ?? '',
       isCalloutVisible: false,
-      selectedLegendPoints: [],
+      selectedLegendPoints: this._injectIndexPropertyInLineChartData(this.props.data.lineChartData, true),
       selectedColorBarLegend: [],
-      isSelectedLegend: false,
+      isSelectedLegend: (this.props.legendProps?.selectedLegends?.length ?? 0) > 0,
       activePoint: '',
       nearestCircleToHighlight: null,
       activeLine: null,
@@ -379,10 +379,21 @@ export class LineChartBase extends React.Component<ILineChartProps, ILineChartSt
     return domainNRangeValue;
   };
 
-  private _injectIndexPropertyInLineChartData = (lineChartData?: ILineChartPoints[]): LineChartDataWithIndex[] | [] => {
+  private _injectIndexPropertyInLineChartData = (
+    lineChartData?: ILineChartPoints[],
+    isFilterSelectedLegends: boolean = false,
+  ): LineChartDataWithIndex[] | [] => {
     const { allowMultipleShapesForPoints = false } = this.props;
-    return lineChartData
-      ? lineChartData.map((item: ILineChartPoints, index: number) => {
+    // Apply filter only if isPropChange is true
+    const filteredData = isFilterSelectedLegends
+      ? lineChartData?.filter(
+          (item: ILineChartPoints) =>
+            this.props.legendProps?.selectedLegends?.includes(item.legend) ||
+            this.props.legendProps?.selectedLegend === item.legend,
+        )
+      : lineChartData;
+    return filteredData
+      ? filteredData.map((item: ILineChartPoints, index: number) => {
           let color: string;
           // isInverted property is applicable to v8 themes only
           if (typeof item.color === 'undefined') {

packages/react-examples/src/react-charting/DeclarativeChart/schema/fluent_line.json

@@ -436,5 +436,5 @@
     "paper_bgcolor": "#F5F6F9"
   },
   "frames": [],
-  "selectedLegends": ["Trace 0"]
+  "selectedLegends": ["Trace 0", "Trace 1"]
 }