Merge branch 'master' into usr/atisjai/declarativeChartSecurity

microsoft · Dec 26, 2024 · 7b1eff9 · 7b1eff9
2 parents 998286e + 0dd9a71
commit 7b1eff9
Show file tree

Hide file tree

Showing 16 changed files with 102 additions and 318 deletions.
diff --git a/change/@fluentui-react-charting-57a1c519-224f-4da6-bdd9-bfc7decab0f7.json b/change/@fluentui-react-charting-57a1c519-224f-4da6-bdd9-bfc7decab0f7.json
diff --git a/change/@fluentui-react-charting-a75da9fd-a90e-4ca9-818e-c51075622f51.json b/change/@fluentui-react-charting-a75da9fd-a90e-4ca9-818e-c51075622f51.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: remove duplicate legends in vertical bar chart",
+  "packageName": "@fluentui/react-charting",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/charts/react-charting/CHANGELOG.json b/packages/charts/react-charting/CHANGELOG.json
@@ -1,6 +1,21 @@
 {
   "name": "@fluentui/react-charting",
   "entries": [
+    {
+      "date": "Wed, 25 Dec 2024 07:21:55 GMT",
+      "tag": "@fluentui/react-charting_v5.23.30",
+      "version": "5.23.30",
+      "comments": {
+        "patch": [
+          {
+            "author": "[email protected]",
+            "package": "@fluentui/react-charting",
+            "commit": "fa08fec97a5bc070e2866633c792f7066f0c86e8",
+            "comment": "Legends multi selection for Donut Charts"
+          }
+        ]
+      }
+    },
     {
       "date": "Mon, 23 Dec 2024 07:22:57 GMT",
       "tag": "@fluentui/react-charting_v5.23.29",

diff --git a/packages/charts/react-charting/CHANGELOG.md b/packages/charts/react-charting/CHANGELOG.md
@@ -1,9 +1,18 @@
 # Change Log - @fluentui/react-charting
 
-This log was last generated on Mon, 23 Dec 2024 07:22:57 GMT and should not be manually modified.
+This log was last generated on Wed, 25 Dec 2024 07:21:55 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [5.23.30](https://github.com/microsoft/fluentui/tree/@fluentui/react-charting_v5.23.30)
+
+Wed, 25 Dec 2024 07:21:55 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-charting_v5.23.29..@fluentui/react-charting_v5.23.30)
+
+### Patches
+
+- Legends multi selection for Donut Charts ([PR #33447](https://github.com/microsoft/fluentui/pull/33447) by [email protected])
+
 ## [5.23.29](https://github.com/microsoft/fluentui/tree/@fluentui/react-charting_v5.23.29)
 
 Mon, 23 Dec 2024 07:22:57 GMT 

diff --git a/packages/charts/react-charting/package.json b/packages/charts/react-charting/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-charting",
-  "version": "5.23.29",
+  "version": "5.23.30",
   "description": "React web charting controls for Microsoft fluentui system.",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",

diff --git a/packages/charts/react-charting/src/components/DeclarativeChart/PlotlySchemaAdapter.ts b/packages/charts/react-charting/src/components/DeclarativeChart/PlotlySchemaAdapter.ts
@@ -259,7 +259,7 @@ export const transformPlotlyJsonToVBCProps = (
     chartTitle: typeof layout?.title === 'string' ? layout?.title : '',
     // width: layout?.width,
     // height: layout?.height,
-    hideLegend: true,
+    // hideLegend: true,
     barWidth: 24,
     supportNegativeData: true,
   };

diff --git a/packages/charts/react-charting/src/components/VerticalBarChart/VerticalBarChart.base.tsx b/packages/charts/react-charting/src/components/VerticalBarChart/VerticalBarChart.base.tsx
@@ -1087,6 +1087,7 @@ export class VerticalBarChartBase
     const { theme, useSingleColor } = this.props;
     const { lineLegendText, lineLegendColor = theme!.palette.yellow } = this.props;
     const actions: ILegend[] = [];
+    const mapLegendToColor: Record<string, string> = {};
     data.forEach((point: IVerticalBarChartDataPoint, _index: number) => {
       let color: string = !useSingleColor ? point.color! : this._createColors()(1);
 
@@ -1098,16 +1099,19 @@ export class VerticalBarChartBase
         }
       }
 
+      mapLegendToColor[point.legend!] = color;
+    });
+    Object.entries(mapLegendToColor).forEach(([legendTitle, color]) => {
       // mapping data to the format Legends component needs
       const legend: ILegend = {
-        title: point.legend!,
+        title: legendTitle,
         color,
         action: () => {
-          this._onLegendClick(point.legend!);
+          this._onLegendClick(legendTitle);
         },
         hoverAction: () => {
           this._handleChartMouseLeave();
-          this._onLegendHover(point.legend!);
+          this._onLegendHover(legendTitle);
         },
         onMouseOutAction: () => {
           this._onLegendLeave();