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

Conversation

AtishayMsft
Copy link
Contributor

@AtishayMsft AtishayMsft commented Oct 19, 2024

Previous Behavior

New Behavior

Create chart controls as web components.
This PR introduces the following charts:

The functionality and design is aligned with their corresponding v8 implementation.

Related Issue(s)

  • Fixes #

@AtishayMsft AtishayMsft changed the title Create web component charts Create chart web components Oct 19, 2024
@AtishayMsft AtishayMsft changed the title Create chart web components feat(charts): Create web components - Donut, Horizontal Bar Chart Oct 19, 2024
@fabricteam
Copy link
Collaborator

fabricteam commented Oct 19, 2024

🕵 FluentUIV0 No visual regressions between this PR and main

@fabricteam
Copy link
Collaborator

fabricteam commented Oct 19, 2024

Perf Analysis (@fluentui/react-components)

Scenario Render type Master Ticks PR Ticks Iterations Status
FluentProviderWithTheme virtual-rerender 36 35 10 Possible regression
All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 624 632 5000
Button mount 308 300 5000
Field mount 1141 1151 5000
FluentProvider mount 709 730 5000
FluentProviderWithTheme mount 86 87 10
FluentProviderWithTheme virtual-rerender 36 35 10 Possible regression
FluentProviderWithTheme virtual-rerender-with-unmount 74 82 10
MakeStyles mount 865 880 50000
Persona mount 1757 1690 5000
SpinButton mount 1373 1440 5000
SwatchPicker mount 1649 1646 5000

@fabricteam
Copy link
Collaborator

fabricteam commented Oct 19, 2024

Perf Analysis (@fluentui/react-northstar)

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
AttachmentMinimalPerf.default 94 76 1.24:1
TreeWith60ListItems.default 97 85 1.14:1
AvatarMinimalPerf.default 112 101 1.11:1
ChatWithPopoverPerf.default 201 183 1.1:1
LoaderMinimalPerf.default 199 181 1.1:1
ReactionMinimalPerf.default 222 205 1.08:1
AccordionMinimalPerf.default 90 84 1.07:1
ButtonMinimalPerf.default 91 85 1.07:1
ProviderMinimalPerf.default 212 199 1.07:1
StatusMinimalPerf.default 408 382 1.07:1
ListNestedPerf.default 332 312 1.06:1
ChatDuplicateMessagesPerf.default 165 157 1.05:1
HeaderMinimalPerf.default 213 203 1.05:1
MenuMinimalPerf.default 517 491 1.05:1
SkeletonMinimalPerf.default 205 195 1.05:1
TooltipMinimalPerf.default 1275 1218 1.05:1
CardMinimalPerf.default 328 314 1.04:1
DialogMinimalPerf.default 456 440 1.04:1
FlexMinimalPerf.default 159 153 1.04:1
ListWith60ListItems.default 376 362 1.04:1
RefMinimalPerf.default 115 111 1.04:1
AlertMinimalPerf.default 165 160 1.03:1
CarouselMinimalPerf.default 277 269 1.03:1
CheckboxMinimalPerf.default 1164 1132 1.03:1
DropdownManyItemsPerf.default 414 402 1.03:1
ItemLayoutMinimalPerf.default 719 700 1.03:1
ButtonOverridesMissPerf.default 675 661 1.02:1
EmbedMinimalPerf.default 1923 1883 1.02:1
GridMinimalPerf.default 191 188 1.02:1
InputMinimalPerf.default 561 549 1.02:1
ListCommonPerf.default 397 390 1.02:1
SliderMinimalPerf.default 755 740 1.02:1
TextMinimalPerf.default 191 187 1.02:1
CustomToolbarPrototype.default 1466 1440 1.02:1
BoxMinimalPerf.default 194 193 1.01:1
DividerMinimalPerf.default 206 203 1.01:1
HeaderSlotsPerf.default 467 461 1.01:1
LabelMinimalPerf.default 217 215 1.01:1
MenuButtonMinimalPerf.default 963 949 1.01:1
PortalMinimalPerf.default 85 84 1.01:1
RadioGroupMinimalPerf.default 274 270 1.01:1
SegmentMinimalPerf.default 195 194 1.01:1
TreeMinimalPerf.default 487 484 1.01:1
AnimationMinimalPerf.default 304 303 1:1
DropdownMinimalPerf.default 1466 1463 1:1
FormMinimalPerf.default 220 221 1:1
ImageMinimalPerf.default 227 227 1:1
LayoutMinimalPerf.default 201 202 1:1
TextAreaMinimalPerf.default 290 290 1:1
DatepickerMinimalPerf.default 3615 3642 0.99:1
ListMinimalPerf.default 311 315 0.99:1
RosterPerf.default 1570 1593 0.99:1
ToolbarMinimalPerf.default 546 550 0.99:1
VideoMinimalPerf.default 453 456 0.99:1
AttachmentSlotsPerf.default 648 662 0.98:1
ButtonSlotsPerf.default 304 310 0.98:1
TableManyItemsPerf.default 1123 1146 0.98:1
PopupMinimalPerf.default 346 358 0.97:1
SplitButtonMinimalPerf.default 2209 2269 0.97:1
ChatMinimalPerf.default 424 440 0.96:1
ProviderMergeThemesPerf.default 640 664 0.96:1
IconMinimalPerf.default 387 403 0.96:1
TableMinimalPerf.default 219 239 0.92:1

@fabricteam
Copy link
Collaborator

fabricteam commented Oct 19, 2024

@fabricteam
Copy link
Collaborator

fabricteam commented Oct 19, 2024

Perf Analysis (@fluentui/react)

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
BaseButton mount 649 633 5000
Breadcrumb mount 1738 1722 1000
Checkbox mount 1763 1736 5000
CheckboxBase mount 1517 1486 5000
ChoiceGroup mount 2988 3026 5000
ComboBox mount 678 696 1000
CommandBar mount 6807 6797 1000
ContextualMenu mount 15990 15798 1000
DefaultButton mount 822 827 5000
DetailsRow mount 2269 2213 5000
DetailsRowFast mount 2219 2248 5000
DetailsRowNoStyles mount 2065 2054 5000
Dialog mount 2799 2873 1000
DocumentCardTitle mount 237 228 1000
Dropdown mount 2033 2038 5000
FocusTrapZone mount 1136 1167 5000
FocusZone mount 1105 1120 5000
GroupedList mount 43313 42988 2
GroupedList virtual-rerender 20578 20669 2
GroupedList virtual-rerender-with-unmount 52992 52847 2
GroupedListV2 mount 234 243 2
GroupedListV2 virtual-rerender 226 229 2
GroupedListV2 virtual-rerender-with-unmount 244 243 2
IconButton mount 1155 1159 5000
Label mount 347 356 5000
Layer mount 2747 2756 5000
Link mount 418 407 5000
MenuButton mount 995 1021 5000
MessageBar mount 21548 21493 5000
Nav mount 2033 2027 1000
OverflowSet mount 802 798 5000
Panel mount 1852 1885 1000
Persona mount 754 776 1000
Pivot mount 936 924 1000
PrimaryButton mount 949 935 5000
Rating mount 4664 4735 5000
SearchBox mount 931 954 5000
Shimmer mount 1919 1920 5000
Slider mount 1355 1350 5000
SpinButton mount 3031 2981 5000
Spinner mount 399 398 5000
SplitButton mount 1936 1886 5000
Stack mount 424 413 5000
StackWithIntrinsicChildren mount 881 891 5000
StackWithTextChildren mount 2778 2801 5000
SwatchColorPicker mount 6466 6387 5000
TagPicker mount 1473 1458 5000
Text mount 393 388 5000
TextField mount 965 947 5000
ThemeProvider mount 857 849 5000
ThemeProvider virtual-rerender 581 591 5000
ThemeProvider virtual-rerender-with-unmount 1308 1312 5000
Toggle mount 593 636 5000
buttonNative mount 201 196 5000

Copy link
Contributor

@davatron5000 davatron5000 left a comment

Choose a reason for hiding this comment

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

Saw this request and fui-wc review, so I've added some initial comments. I think the main areas of concern for me are:

  • Use of Tabster - this would increase our bundle size by 50~75%
  • Render functions seem overloaded with DOM manipulation functions. Seems like some of that could be cleaned up and abstracted out to the template.

@AtishayMsft AtishayMsft requested a review from a team as a code owner November 18, 2024 08:39
@AtishayMsft AtishayMsft requested a review from a team as a code owner November 18, 2024 15:46
@AtishayMsft
Copy link
Contributor Author

A high-level note is, both components should probably use ElementInternals to set role as image, If keyboard users are expected to be able to interact with the generated charts (as opposed to just having aria-label to describe the entire chart), I'm not sure if having every element in the tab sequence is very accessible, because a visual impaired user could feel stuck inside the chart and hard to get out of it.

We want the chart to be interactive rather than a single static image, as its individual elements contain valuable information. For keyboard accessibility, we’ll use Tabster to create focusable groups within the chart. This will allow users to navigate within groups using arrow keys, while keeping the tab sequence concise and efficient.

Generally, interactive controls need a role. Image is not an interactive element. In terms of focus ability - that’s fine, besides “convenience”, why is tabster a necessary dependency?

We have added element internal apis for accessibility support.

@AtishayMsft AtishayMsft removed request for a team November 21, 2024 06:00
@@ -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

@fabricteam
Copy link
Collaborator

🕵 fluentui-web-components-v3 No visual regressions between this PR and main

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
Status: No status
Development

Successfully merging this pull request may close these issues.

10 participants