-
Notifications
You must be signed in to change notification settings - Fork 2.7k
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
base: master
Are you sure you want to change the base?
Conversation
change/@fluentui-web-components-a2072109-cb0f-486e-9cbe-81ebc19d21c4.json
Outdated
Show resolved
Hide resolved
🕵 FluentUIV0 No visual regressions between this PR and main |
Perf Analysis (
|
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 |
Perf Analysis (
|
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 |
change/@fluentui-web-components-a2072109-cb0f-486e-9cbe-81ebc19d21c4.json
Outdated
Show resolved
Hide resolved
Perf Analysis (
|
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 |
packages/web-components/src/horizontalbarchart/horizontalbarchart.ts
Outdated
Show resolved
Hide resolved
There was a problem hiding this 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.
packages/web-components/src/horizontalbarchart/horizontalbarchart.ts
Outdated
Show resolved
Hide resolved
packages/web-components/src/donut-chart/donut-chart.template.ts
Outdated
Show resolved
Hide resolved
packages/web-components/src/horizontalbarchart/horizontalbarchart.styles.ts
Outdated
Show resolved
Hide resolved
…t/fluentui into charting/web-components
We have added element internal apis for accessibility support. |
Co-authored-by: Kumar Kshitij <[email protected]>
@@ -134,6 +134,7 @@ apps/chart-docsite @microsoft/charting-team | |||
#### Packages |
There was a problem hiding this comment.
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 |
🕵 fluentui-web-components-v3 No visual regressions between this PR and main |
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)