feat(react-charts): onboard v9 charts to nx workspace plugin and enable griffel raw styles (#34912)

Author: Hotell

change/@fluentui-react-charts-2a4b0134-5015-4cbd-b601-7a6bcceedc5f.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "feat: enable griffel raw styles",
+  "packageName": "@fluentui/react-charts",
+  "email": "martinhochel@microsoft.com",
+  "dependentChangeType": "patch"
+}

nx.json

@@ -145,7 +145,8 @@
         "packages/eslint-plugin/**",
         "packages/tokens/**",
         "packages/react-conformance/**",
-        "packages/react-components/**/*"
+        "packages/react-components/**/*",
+        "packages/charts/react-charts/**/*"
       ]
     }
   ],

packages/charts/react-charts/library/.eslintrc.json

@@ -1,4 +1,22 @@
 {
   "extends": ["plugin:@fluentui/eslint-plugin/react"],
-  "root": true
+  "root": true,
+  "rules": {
+    "@fluentui/no-global-react": "warn",
+    "@nx/workspace-no-restricted-globals": "warn",
+    "@rnx-kit/no-export-all": "warn",
+    "@typescript-eslint/naming-convention": "warn",
+    "@typescript-eslint/no-explicit-any": "warn",
+    "@typescript-eslint/no-shadow": "warn",
+    "array-callback-return": "warn",
+    "eqeqeq": "warn",
+    "import/no-extraneous-dependencies": "warn",
+    "jsdoc/check-tag-names": "warn",
+    "no-restricted-syntax": "warn",
+    "object-shorthand": "warn",
+    "prefer-const": "warn",
+    "react-compiler/react-compiler": "warn",
+    "react-hooks/exhaustive-deps": "warn",
+    "react/jsx-no-bind": "warn"
+  }
 }

packages/charts/react-charts/library/bundle-size/LineChart.fixture.js

@@ -1,4 +1,4 @@
-import { LineChart } from '@fluentui/react-charting';
+import { LineChart } from '@fluentui/react-charts';
 
 console.log(LineChart);
 

packages/charts/react-charts/library/just.config.ts

@@ -17,24 +17,14 @@
     "url": "https://github.com/microsoft/fluentui"
   },
   "license": "MIT",
-  "scripts": {
-    "build": "just-scripts build",
-    "clean": "just-scripts clean",
-    "generate-api": "just-scripts generate-api",
-    "start": "yarn storybook",
-    "storybook": "yarn --cwd ../stories storybook",
-    "test": "jest --passWithNoTests",
-    "type-check": "just-scripts type-check"
-  },
   "syncpack": {
     "dependencyTypes": []
   },
   "devDependencies": {
     "@fluentui/eslint-plugin": "*",
     "@fluentui/react-conformance": "*",
     "@fluentui/react-conformance-griffel": "*",
-    "@fluentui/scripts-api-extractor": "*",
-    "@fluentui/scripts-tasks": "*"
+    "@fluentui/scripts-api-extractor": "*"
   },
   "dependencies": {
     "@fluentui/chart-utilities": "^1.1.26",

packages/charts/react-charts/library/package.json

@@ -152,6 +152,7 @@ function cloneLegendsToSVG(chartContainer: HTMLElement, svgWidth: number, svgHei
       textOffset = 28;
     } else {
       legendText = legendButtons[i] as HTMLButtonElement;
+      // eslint-disable-next-line no-console
       console.log(legendText!.textContent);
       textOffset = 8;
     }

packages/charts/react-charts/library/src/components/DeclarativeChart/imageExporter.ts

@@ -222,6 +222,8 @@ describe('Donut Chart - axe-core', () => {
   });
 });
 
+/* eslint-disable @typescript-eslint/no-deprecated */
+
 describe('DonutChart snapShot testing', () => {
   it('renders DonutChart correctly', () => {
     let component = renderer.create(<DonutChart data={chartPointsDC} innerRadius={55} />);
@@ -275,11 +277,13 @@ describe('DonutChart snapShot testing', () => {
     const tree = component!.toJSON();
     expect(tree).toMatchSnapshot();
   });
+
   it('Should elevate all smaller values to minimums', () => {
     let component = renderer.create(<DonutChart data={chartPointsDCElevateMinimums} />);
     const tree = component!.toJSON();
     expect(tree).toMatchSnapshot();
   });
+  /* eslint-enable @typescript-eslint/no-deprecated */
 });
 
 describe('DonutChart - basic props', () => {

packages/charts/react-charts/library/src/components/DonutChart/DonutChart.test.tsx

@@ -46,7 +46,13 @@ export const Pie: React.FunctionComponent<PieProps> = React.forwardRef<HTMLDivEl
     }
 
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    function arcGenerator(d: any, i: number, focusData: any, href?: string): JSX.Element {
+    function arcGenerator(
+      d: any,
+      i: number,
+      focusData: any,
+      href?: string,
+    ): // eslint-disable-next-line @typescript-eslint/no-deprecated
+    JSX.Element {
       const color = d && d.data && d.data.color;
       return (
         <Arc

packages/charts/react-charts/library/src/components/DonutChart/Pie/Pie.tsx

@@ -244,7 +244,7 @@ export const GroupedVerticalBarChart: React.FC<GroupedVerticalBarChartProps> = R
   const legends: JSX.Element = _getLegendData(points!);
   _adjustProps();
 
-  // eslint-disable-next-line @typescript-eslint/no-explicit-anyAdd commentMore actions
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- Add commentMore actions
   function _getMinMaxOfYAxis(datasetForBars: any, yAxisType?: YAxisType, useSecondaryYScale?: boolean) {
     const values: number[] = [];
     // eslint-disable-next-line @typescript-eslint/no-explicit-any