feat(chart-web-components): Create chart web components - Donut and H…

…orizontal Bar Chart (#33084)

Co-authored-by: Anush Gupta <[email protected]>
Co-authored-by: krkshitij <[email protected]>
Co-authored-by: v-baambati <[email protected]>
Co-authored-by: Kumar Kshitij <[email protected]>

.github/CODEOWNERS

@@ -134,6 +134,7 @@ apps/chart-docsite @microsoft/charting-team
 #### Packages
 packages/azure-themes @Jacqueline-ms @robtaft-ms
 packages/react-conformance @microsoft/fluentui-react-build
+packages/charts/chart-web-components @microsoft/charting-team
 packages/charts/react-charting @microsoft/charting-team
 packages/charts/react-charts-preview/library @microsoft/charting-team
 packages/charts/react-charts-preview/stories @microsoft/charting-team

apps/pr-deploy-site/just.config.ts

@@ -24,6 +24,7 @@ const dependencies = [
   '@fluentui/public-docsite',
   '@fluentui/react',
   '@fluentui/react-charting',
+  '@fluentui/chart-web-components',
   '@fluentui/chart-docsite',
   '@fluentui/public-docsite-v9',
   '@fluentui/react-experiments',

apps/pr-deploy-site/pr-deploy-site.js

@@ -60,6 +60,12 @@ var siteInfo = [
     icon: 'BarChart4',
     title: 'Charting',
   },
+  {
+    package: '@fluentui/chart-web-components',
+    link: './chart-web-components/storybook/index.html',
+    icon: 'BarChart4',
+    title: 'Chart web components',
+  },
   {
     package: '@fluentui/theming-designer',
     link: './theming-designer/index.html',

change/@fluentui-chart-web-components-dfff0cf0-8ca6-4c11-aacb-bdd0e7090bbb.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Create chart web components. Includes donut chart and horizontal bar chart",
+  "packageName": "@fluentui/chart-web-components",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/charts/chart-web-components/.eslintignore

@@ -0,0 +1,8 @@
+# don't ever lint node_modules
+node_modules
+# don't lint build output (make sure it's set to your correct build folder name)
+dist
+# don't lint coverage output
+coverage
+# don't lint storybook
+.storybook

packages/charts/chart-web-components/.eslintrc.json

@@ -0,0 +1,74 @@
+{
+  "root": true,
+  "parser": "@typescript-eslint/parser",
+  "plugins": ["@typescript-eslint", "import"],
+  "extends": [
+    "eslint:recommended",
+    "plugin:@typescript-eslint/eslint-recommended",
+    "plugin:@typescript-eslint/recommended",
+    "prettier",
+    "plugin:playwright/recommended"
+  ],
+  "settings": {
+    "react": {
+      "version": "latest"
+    }
+  },
+  "rules": {
+    "no-empty": [
+      "error",
+      {
+        "allowEmptyCatch": true
+      }
+    ],
+    "no-extra-boolean-cast": "off",
+    "no-prototype-builtins": "off",
+    "no-fallthrough": "off",
+    "no-unexpected-multiline": "off",
+    "no-useless-escape": "off",
+    "import/order": "error",
+    "sort-imports": [
+      "error",
+      {
+        "ignoreCase": true,
+        "ignoreDeclarationSort": true
+      }
+    ],
+    "comma-dangle": "off",
+    "@typescript-eslint/no-non-null-assertion": "off",
+    "@typescript-eslint/no-use-before-define": "off",
+    "@typescript-eslint/no-empty-interface": "error",
+    "@typescript-eslint/no-empty-object-type": "off",
+    "@typescript-eslint/no-unsafe-declaration-merging": "off",
+    "@typescript-eslint/explicit-module-boundary-types": "off",
+    "@typescript-eslint/explicit-function-return-type": "off",
+    "@typescript-eslint/camelcase": "off",
+    "@typescript-eslint/no-inferrable-types": "off",
+    "@typescript-eslint/no-unused-vars": [
+      "warn",
+      {
+        "args": "none"
+      }
+    ],
+    "@typescript-eslint/no-unused-expressions": "warn",
+    "@typescript-eslint/no-explicit-any": "off",
+    "@typescript-eslint/naming-convention": [
+      "error",
+      {
+        "selector": "default",
+        "format": ["UPPER_CASE", "camelCase", "PascalCase"],
+        "leadingUnderscore": "allow"
+      },
+      {
+        "selector": "property",
+        "format": null // disable for property names because of our foo__expanded convention for JSS
+        // TODO: I think we can come up with a regex that ignores variables with __ in them
+      },
+      {
+        "selector": "variable",
+        "format": null // disable for variable names because of our foo__expanded convention for JSS
+        // TODO: I think we can come up with a regex that ignores variables with __ in them
+      }
+    ]
+  }
+}

packages/charts/chart-web-components/.gitignore

@@ -0,0 +1 @@
+test-results/