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.

Sign up for GitHub

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

Jump to bottom

Charting: Vertical stacked bar chart code refactor. Cartesian chart implemented in base file. #15061

Merged
merged 7 commits into from
Sep 18, 2020
Merged

Charting: Vertical stacked bar chart code refactor. Cartesian chart implemented in base file. #15061

merged 7 commits into from
Sep 18, 2020

Conversation

jameelakowsar
Copy link
Contributor

@jameelakowsar jameelakowsar commented Sep 16, 2020 •
edited
Loading

Pull request checklist

Description of changes

In the process of refactoring of the Vertical stacked bar chart below features added to the chart.

  • Implemented with Cartesian chart (Common component) which includes Y axis min and max values support added
  • single and multi callout added previously. changed a little bit of them and all were working as expected.
  • For creating axis, using Cartesian chart styles. And most of the style props not using in chart present. So deprecated them.

Note: As RTL support already implemented for this chart, Now it's working as like previous. Attacked screenshots.

Focus areas to test

Vertical stacked bar chart.

Single callout

image

With complete bar callout (Multi callout)

image

RTL Screenshot

image

Test link: http://fabricweb.z5.web.core.windows.net/pr-deploy-site/refs/pull/15061/merge/charting/dist/index.html#/examples/VerticalStackedBarChart

Jameela Kowsar Shaik (Zen3 Infosolutions America Inc) added 3 commits September 16, 2020 10:46
@codesandbox-ci
Copy link

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit ec80216:

Sandbox Source
Fluent UI Button Configuration
microsoft/fluentui: codesandbox-react-template Configuration
microsoft/fluentui: codesandbox-react-next-template Configuration
microsoft/fluentui: codesandbox-react-northstar-template Configuration

@codesandbox-ci
Copy link

codesandbox-ci bot commented Sep 16, 2020 •
edited
Loading

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 92e81b7:

Sandbox Source
Fluent UI Button Configuration
microsoft/fluentui: codesandbox-react-template Configuration
microsoft/fluentui: codesandbox-react-next-template Configuration
microsoft/fluentui: codesandbox-react-northstar-template Configuration

@msft-github-bot
Copy link
Contributor

msft-github-bot commented Sep 16, 2020 •
edited
Loading

Perf Analysis

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
BaseButton mount 926 922 5000
Breadcrumb mount 41040 41122 5000
BreadcrumbNext mount 161018 163853 5000
ButtonNext mount 598 605 5000
Checkbox mount 1702 1712 5000
CheckboxBase mount 1423 1393 5000
CheckboxNext mount 1635 1631 5000
ChoiceGroup mount 5369 5261 5000
ChoiceGroupNext mount 5365 5221 5000
ComboBox mount 981 962 1000
CommandBar mount 7739 7853 1000
ContextualMenu mount 13338 13539 1000
DefaultButton mount 1196 1174 5000
DetailsRow mount 3752 3729 5000
DetailsRowFast mount 3708 3653 5000
DetailsRowNoStyles mount 3565 3620 5000
Dialog mount 1541 1510 1000
DocumentCardTitle mount 1807 1832 1000
Dropdown mount 2726 2673 5000
FocusZone mount 1822 1842 5000
IconButton mount 1837 1999 5000
Label mount 361 357 5000
Link mount 478 456 5000
LinkNext mount 487 508 5000
MenuButton mount 1516 1494 5000
MessageBar mount 2048 2055 5000
MessageBarNext mount 2065 2008 5000
Nav mount 3310 3321 1000
OverflowSet mount 1477 1393 5000
OverflowSetNext mount 1054 1028 5000
Panel mount 1488 1492 1000
Persona mount 859 881 1000
Pivot mount 1453 1460 1000
PivotNext mount 1449 1431 1000
PrimaryButton mount 1310 1308 5000
Rating mount 7974 8047 5000
RatingNext mount 7839 7932 5000
SearchBox mount 1352 1358 5000
SearchBoxNext mount 1384 1461 5000
Shimmer mount 2670 2755 5000
ShimmerNext mount 2669 2748 5000
Slider mount 1520 1546 5000
SliderNext mount 1971 1956 5000
SpinButton mount 5092 5160 5000
SpinButtonNext mount 5318 5589 5000
Spinner mount 422 421 5000
SplitButton mount 3214 3221 5000
Stack mount 566 570 5000
StackWithIntrinsicChildren mount 2021 2010 5000
StackWithTextChildren mount 5224 5332 5000
SwatchColorPicker mount 10492 10711 5000
SwatchColorPickerNext mount 10598 10608 5000
TagPicker mount 2810 2883 5000
TeachingBubble mount 49402 50154 5000
TeachingBubbleNext mount 49387 49547 5000
Text mount 451 443 5000
TextField mount 1452 1439 5000
ThemeProvider mount 4861 4887 5000
ThemeProvider virtual-rerender 599 589 5000
Toggle mount 857 861 5000
ToggleNext mount 819 853 5000
button mount 115 117 5000

Perf Analysis (Fluent)

⚠️ 5 potential perf regressions detected

Potential regressions comparing to master

Scenario Current PR Ticks Baseline Ticks Ratio Regression Analysis
ButtonOverridesMissPerf.default 1771 44 40.25:1 analysis
ButtonUseCssNestingPerf.default 1164 48 24.25:1 analysis
ButtonUseCssPerf.default 892 50 17.84:1 analysis
ChatWithPopoverPerf.default 502 479 1.05:1 analysis
ListNestedPerf.default 667 965 0.69:1 analysis
Perf comparison
Status Scenario Fluent TPI Fabric TPI Ratio Iterations Ticks
🎯 Avatar.Fluent 0.49 0.51 0.96:1 2000 974
🦄 Button.Fluent 0.13 0.2 0.65:1 5000 656
🔧 Checkbox.Fluent 0.66 0.37 1.78:1 1000 663
🎯 Dialog.Fluent 0.17 0.23 0.74:1 5000 843
🔧 Dropdown.Fluent 2.92 0.49 5.96:1 1000 2919
🔧 Icon.Fluent 0.17 0.06 2.83:1 5000 833
🎯 Image.Fluent 0.09 0.12 0.75:1 5000 439
🔧 Slider.Fluent 1.65 0.37 4.46:1 1000 1654
🔧 Text.Fluent 0.08 0.03 2.67:1 5000 416
🦄 Tooltip.Fluent 0.12 15.22 0.01:1 5000 577

🔧 Needs work     🎯 On target     🦄 Amazing

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
PortalMinimalPerf.default 166 115 1.44:1
ButtonMinimalPerf.default 215 175 1.23:1
SegmentMinimalPerf.default 441 358 1.23:1
DividerMinimalPerf.default 440 361 1.22:1
RefMinimalPerf.default 242 198 1.22:1
AlertMinimalPerf.default 361 298 1.21:1
HeaderMinimalPerf.default 479 396 1.21:1
ReactionMinimalPerf.default 506 417 1.21:1
AttachmentMinimalPerf.default 185 154 1.2:1
FormMinimalPerf.default 525 438 1.2:1
ImageMinimalPerf.default 482 401 1.2:1
Image.Fluent 439 380 1.16:1
BoxMinimalPerf.default 426 369 1.15:1
ChatMinimalPerf.default 697 607 1.15:1
Button.Fluent 656 571 1.15:1
LabelMinimalPerf.default 504 441 1.14:1
Text.Fluent 416 366 1.14:1
CardMinimalPerf.default 682 605 1.13:1
CarouselMinimalPerf.default 540 480 1.13:1
FlexMinimalPerf.default 336 297 1.13:1
GridMinimalPerf.default 419 370 1.13:1
RadioGroupMinimalPerf.default 502 443 1.13:1
StatusMinimalPerf.default 797 705 1.13:1
Icon.Fluent 833 736 1.13:1
LayoutMinimalPerf.default 486 435 1.12:1
ListMinimalPerf.default 562 502 1.12:1
MenuMinimalPerf.default 1015 910 1.12:1
TooltipMinimalPerf.default 871 776 1.12:1
ChatDuplicateMessagesPerf.default 463 418 1.11:1
ProviderMinimalPerf.default 1036 937 1.11:1
SkeletonMinimalPerf.default 465 419 1.11:1
TextAreaMinimalPerf.default 542 490 1.11:1
AnimationMinimalPerf.default 432 393 1.1:1
AvatarMinimalPerf.default 538 490 1.1:1
DropdownManyItemsPerf.default 861 780 1.1:1
TextMinimalPerf.default 408 370 1.1:1
TableMinimalPerf.default 445 409 1.09:1
Dialog.Fluent 843 770 1.09:1
Tooltip.Fluent 577 527 1.09:1
DialogMinimalPerf.default 844 783 1.08:1
HeaderSlotsPerf.default 977 905 1.08:1
IconMinimalPerf.default 753 697 1.08:1
ToolbarMinimalPerf.default 1050 976 1.08:1
VideoMinimalPerf.default 713 661 1.08:1
MenuButtonMinimalPerf.default 1766 1648 1.07:1
Avatar.Fluent 974 911 1.07:1
ButtonSlotsPerf.default 638 603 1.06:1
PopupMinimalPerf.default 736 694 1.06:1
ProviderMergeThemesPerf.default 1990 1882 1.06:1
TreeMinimalPerf.default 942 899 1.05:1
Slider.Fluent 1654 1576 1.05:1
AccordionMinimalPerf.default 164 158 1.04:1
CheckboxMinimalPerf.default 3004 2886 1.04:1
LoaderMinimalPerf.default 820 785 1.04:1
EmbedMinimalPerf.default 2035 1972 1.03:1
ItemLayoutMinimalPerf.default 1460 1417 1.03:1
SplitButtonMinimalPerf.default 4010 3878 1.03:1
TableManyItemsPerf.default 2341 2281 1.03:1
CustomToolbarPrototype.default 3818 3707 1.03:1
Checkbox.Fluent 663 641 1.03:1
DropdownMinimalPerf.default 2997 2947 1.02:1
InputMinimalPerf.default 1422 1395 1.02:1
AttachmentSlotsPerf.default 1198 1195 1:1
SliderMinimalPerf.default 1591 1594 1:1
TreeWith60ListItems.default 222 221 1:1
Dropdown.Fluent 2919 2963 0.99:1
ListWith60ListItems.default 1052 1209 0.87:1
ListCommonPerf.default 770 1069 0.72:1

@size-auditor
Copy link

size-auditor bot commented Sep 16, 2020 •
edited
Loading

Asset size changes

Size Auditor did not detect a change in bundle size for any component!

Baseline commit: 730c61559ee97a7cfc2f84d40c96fab3077e5fb0 (build)

@jameelakowsar jameelakowsar reopened this Sep 16, 2020
Jameela Kowsar Shaik (Zen3 Infosolutions America Inc) added 2 commits September 16, 2020 16:21
@mbest
Copy link
Member

mbest commented Sep 16, 2020

Keyboard navigation in the chart has changed from up/down to left/right. Is that the correct behavior?

@jameelakowsar jameelakowsar marked this pull request as ready for review September 17, 2020 04:06
@Raghurk Raghurk merged commit f986d68 into microsoft:master Sep 18, 2020
@msft-github-bot
Copy link
Contributor

🎉@uifabric/[email protected] has been released which incorporates this pull request.:tada:

Handy links:

@mbest mbest mentioned this pull request Oct 11, 2020
Merged
2 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@mbest mbest mbest left review comments

@Raghurk Raghurk Raghurk approved these changes

Assignees
No one assigned
Labels
Package: charting
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
4 participants
@jameelakowsar @msft-github-bot @mbest @Raghurk