Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(charts): Create chart web components - Donut and Horizontal Bar Chart #33084

Open
wants to merge 68 commits into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from 67 commits
Commits
Show all changes
68 commits
Select commit Hold shift + click to select a range
e94bacf
Basic implementation of horizontal bar chart
AtishayMsft Sep 14, 2024
e26840b
Add logic for multistacked bar chart
AtishayMsft Sep 16, 2024
027a7ef
Render multi stacked bars
AtishayMsft Sep 16, 2024
ee296c0
Color the bars as per provided colors
AtishayMsft Sep 17, 2024
01ca8e4
Charts as Web component (#32866)
Anush2303 Oct 11, 2024
ffe7e6f
added callout to multi stacked bar chart (#33013)
Anush2303 Oct 14, 2024
4de6c3f
Add web component for donut chart (#33011)
krkshitij Oct 14, 2024
aa872c6
Added legend functionality to Horizontal Bar chart (#33051)
Anush2303 Oct 17, 2024
0008ba9
Add more functionalities to donut chart (#33039)
krkshitij Oct 18, 2024
66b134b
Move data for HBC to stories
AtishayMsft Oct 19, 2024
0be5e78
Fix styles to use tokens
AtishayMsft Oct 19, 2024
6dc6cb1
Add change file
AtishayMsft Oct 19, 2024
8e14e14
Update d3 dependencies
AtishayMsft Oct 19, 2024
d2f76b4
Fix build errors
AtishayMsft Oct 19, 2024
faaa036
Fix build errors in HBC
AtishayMsft Oct 19, 2024
9d387da
NM Variant of MultiStacked bar chart (#33086)
Anush2303 Oct 21, 2024
f1c9234
Horizontal Bar chart as Web component (#33096)
Anush2303 Oct 22, 2024
ce231ed
Add color palette for data visualization (#33095)
krkshitij Oct 23, 2024
17ffa27
Single Bar HBC NM Variant (#33116)
Anush2303 Oct 24, 2024
86df4de
Fix bugs in donut-chart web component (#33118)
krkshitij Oct 25, 2024
7d7a3c8
Fix error
AtishayMsft Oct 27, 2024
b50e4ba
Move container div to the template
AtishayMsft Oct 27, 2024
ee2aacb
Remove unnecessary calls
AtishayMsft Oct 28, 2024
546029d
Add event listeners to legend buttons (#33150)
krkshitij Oct 28, 2024
475f338
Enable gradient in horizontalbarchart (#33151)
krkshitij Oct 28, 2024
d0551b8
Update single bar story to use gradient
AtishayMsft Oct 28, 2024
c14c048
Resolve review comments
AtishayMsft Oct 28, 2024
415c165
Refactor donut-chart web component (#33149)
krkshitij Oct 30, 2024
86aac7c
Refactor horizontalbarchart web component (#33169)
krkshitij Oct 30, 2024
29da77b
Merge branch 'master' into charting/web-components
AtishayMsft Nov 1, 2024
10c7981
Move charts t web components to own package
AtishayMsft Nov 1, 2024
6baa5bd
Fix CSS class names (#33196)
krkshitij Nov 7, 2024
bab162d
Resolve review comments (#33199)
krkshitij Nov 7, 2024
e5f44c0
Add benchmark triangle in horizontal-bar-chart (#33207)
krkshitij Nov 7, 2024
72edf75
Add support for custom chart data text in horizontal-bar-chart (#33212)
krkshitij Nov 12, 2024
b99009b
bug fixes for horizontal bar chart web component (#33233)
Anush2303 Nov 12, 2024
33a5f67
Add change file
AtishayMsft Nov 13, 2024
6bdaee9
Merge branch 'charting/web-components' of https://github.com/microsof…
AtishayMsft Nov 13, 2024
1915d1b
Resolve review comments (#33215)
krkshitij Nov 13, 2024
4753fca
Resolve review comments (#33264)
krkshitij Nov 13, 2024
499b1d2
Merge branch 'master' into charting/web-components
AtishayMsft Nov 13, 2024
66923a5
Update yarn lock
AtishayMsft Nov 13, 2024
a57df11
Fix build errors
AtishayMsft Nov 13, 2024
a02289e
Added basic test cases to donut chart (#33127)
v-baambati Nov 14, 2024
3049038
Merge master
AtishayMsft Nov 14, 2024
949ff13
Merge branch 'charting/web-components' of https://github.com/microsof…
AtishayMsft Nov 14, 2024
194c051
Fix merge conflict in tsconfig.base.all file
AtishayMsft Nov 14, 2024
5c37d48
Enable chart web components on docsite
AtishayMsft Nov 18, 2024
099247e
removed tabster dependency. (#33285)
Anush2303 Nov 18, 2024
8357fcf
Temp change to fix heap out of memory
AtishayMsft Nov 18, 2024
cad0f85
Merge branch 'charting/web-components' of https://github.com/microsof…
AtishayMsft Nov 18, 2024
b861245
Try updating path
AtishayMsft Nov 18, 2024
ef6c184
Test change for react components
AtishayMsft Nov 18, 2024
45db92b
Fix lint errors
AtishayMsft Nov 18, 2024
24d5295
Fix packaging error
AtishayMsft Nov 18, 2024
00511fc
Fix type check error
AtishayMsft Nov 18, 2024
2c24106
Revert adding to web components docsite
AtishayMsft Nov 18, 2024
3abf8b5
Fix errors in tests
AtishayMsft Nov 18, 2024
bb66e2f
Test change to fix heap out of memery error
AtishayMsft Nov 18, 2024
2022db6
Set role and aria-label for charts (#33294)
krkshitij Nov 20, 2024
2eda223
Merge master
AtishayMsft Nov 20, 2024
4f40ca8
Merge branch 'charting/web-components' of https://github.com/microsof…
AtishayMsft Nov 20, 2024
7d88390
Revert temp changes
AtishayMsft Nov 20, 2024
785ef83
Update api report
AtishayMsft Nov 21, 2024
fcf1184
Update text inside Donut chart fix (#33302)
Anush2303 Nov 21, 2024
85a3aa1
Update api report
AtishayMsft Nov 21, 2024
48799bd
high contrast bug fixes (#33326)
Anush2303 Nov 22, 2024
a0dd0e8
Order of Stories (#33330)
Anush2303 Nov 22, 2024
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .github/CODEOWNERS
Validating CODEOWNERS rules …
Original file line number Diff line number Diff line change
Expand Up @@ -134,6 +134,7 @@ apps/chart-docsite @microsoft/charting-team
#### Packages
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🕵🏾‍♀️ visual regressions to review in the fluentui-web-components-v3 Visual Regression Report

Avatar 1 screenshots
Image Name Diff(in Pixels) Image Type
Avatar.Image.chromium.png 248 Changed

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
Expand Down
1 change: 1 addition & 0 deletions apps/pr-deploy-site/just.config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down
6 changes: 6 additions & 0 deletions apps/pr-deploy-site/pr-deploy-site.js
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down
Original file line number Diff line number Diff line change
@@ -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"
}
8 changes: 8 additions & 0 deletions packages/charts/chart-web-components/.eslintignore
Original file line number Diff line number Diff line change
@@ -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
74 changes: 74 additions & 0 deletions packages/charts/chart-web-components/.eslintrc.json
Original file line number Diff line number Diff line change
@@ -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
}
]
}
}
1 change: 1 addition & 0 deletions packages/charts/chart-web-components/.gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
test-results/
Loading
Loading