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 refactoring and added minor features. #14949

Closed
wants to merge 11 commits into from
Closed

Charting: Vertical stacked bar chart refactoring and added minor features. #14949

wants to merge 11 commits into from

Conversation

jameelakowsar
Copy link
Contributor

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)
  • Y axis min and max values support added
  • Single callout and multi stack callout support added.

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.

Vertical stacked bar chart screenshots.

With single callout

image

With multi stack callout

image

RTL Screenshot

image

Test link:

@codesandbox-ci
Copy link

codesandbox-ci bot commented Sep 9, 2020

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 f6c20e5:

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

Perf Analysis

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
BaseButton mount 894 894 5000
ButtonNext mount 662 671 5000
Checkbox mount 1511 1546 5000
CheckboxBase mount 1313 1297 5000
CheckboxNext mount 1506 1483 5000
ChoiceGroup mount 4998 4961 5000
ChoiceGroupNext mount 5081 4892 5000
ComboBox mount 911 919 1000
CommandBar mount 7619 7662 1000
ContextualMenu mount 13885 13905 1000
DefaultButton mount 1122 1135 5000
DetailsRow mount 3530 3485 5000
DetailsRowFast mount 3574 3506 5000
DetailsRowNoStyles mount 3357 3360 5000
Dialog mount 1450 1445 1000
DocumentCardTitle mount 1822 1894 1000
Dropdown mount 2556 2630 5000
FocusZone mount 1830 1801 5000
IconButton mount 1712 1899 5000
Label mount 337 333 5000
Link mount 432 444 5000
LinkNext mount 478 471 5000
MenuButton mount 1503 1467 5000
MessageBar mount 2111 2097 5000
MessageBarNext mount 2089 2102 5000
Nav mount 3196 3201 1000
OverflowSet mount 1389 1399 5000
OverflowSetNext mount 1043 1017 5000
Panel mount 1431 1460 1000
Persona mount 841 844 1000
Pivot mount 1424 1426 1000
PivotNext mount 1412 1377 1000
PrimaryButton mount 1237 1241 5000
SearchBox mount 1278 1287 5000
SearchBoxNext mount 1287 1284 5000
Shimmer mount 2534 2639 5000
ShimmerNext mount 2460 2585 5000
Slider mount 1548 1511 5000
SliderNext mount 1886 1910 5000
SpinButton mount 4920 5016 5000
SpinButtonNext mount 5093 5137 5000
Spinner mount 431 418 5000
SplitButton mount 3135 3085 5000
Stack mount 535 523 5000
StackWithIntrinsicChildren mount 1922 1941 5000
StackWithTextChildren mount 4998 4993 5000
SwatchColorPicker mount 10320 10198 5000
SwatchColorPickerNext mount 10187 10146 5000
TagPicker mount 2709 2737 5000
TeachingBubble mount 51382 51389 5000
TeachingBubbleNext mount 51083 50999 5000
Text mount 432 427 5000
TextField mount 1342 1428 5000
ThemeProvider mount 4634 4569 5000
ThemeProvider virtual-rerender 463 453 5000
Toggle mount 832 825 5000
ToggleNext mount 808 804 5000
button mount 109 115 5000

Perf Analysis (Fluent)

⚠️ 4 potential perf regressions detected

Potential regressions comparing to master

Scenario Current PR Ticks Baseline Ticks Ratio Regression Analysis
ButtonOverridesMissPerf.default 1746 48 36.38:1 analysis
ButtonUseCssNestingPerf.default 1108 49 22.61:1 analysis
ButtonUseCssPerf.default 829 42 19.74:1 analysis
ChatWithPopoverPerf.default 477 467 1.02:1 analysis
Perf comparison
Status Scenario Fluent TPI Fabric TPI Ratio Iterations Ticks
🎯 Avatar.Fluent 0.44 0.49 0.9:1 2000 888
🦄 Button.Fluent 0.12 0.2 0.6:1 5000 600
🔧 Checkbox.Fluent 0.7 0.34 2.06:1 1000 695
🎯 Dialog.Fluent 0.17 0.22 0.77:1 5000 826
🔧 Dropdown.Fluent 2.99 0.46 6.5:1 1000 2993
🔧 Icon.Fluent 0.15 0.05 3:1 5000 737
🦄 Image.Fluent 0.08 0.12 0.67:1 5000 402
🔧 Slider.Fluent 1.65 0.35 4.71:1 1000 1646
🔧 Text.Fluent 0.07 0.03 2.33:1 5000 364
🦄 Tooltip.Fluent 0.11 17.26 0.01:1 5000 560

🔧 Needs work     🎯 On target     🦄 Amazing

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
PortalMinimalPerf.default 173 135 1.28:1
AttachmentMinimalPerf.default 173 139 1.24:1
GridMinimalPerf.default 379 306 1.24:1
RefMinimalPerf.default 245 200 1.23:1
ReactionMinimalPerf.default 442 362 1.22:1
AlertMinimalPerf.default 334 278 1.2:1
ImageMinimalPerf.default 423 352 1.2:1
FlexMinimalPerf.default 318 268 1.19:1
DividerMinimalPerf.default 382 324 1.18:1
TableMinimalPerf.default 442 374 1.18:1
TextMinimalPerf.default 379 322 1.18:1
AccordionMinimalPerf.default 168 144 1.17:1
FormMinimalPerf.default 434 371 1.17:1
RadioGroupMinimalPerf.default 454 388 1.17:1
SegmentMinimalPerf.default 374 319 1.17:1
HeaderMinimalPerf.default 403 346 1.16:1
SkeletonMinimalPerf.default 438 377 1.16:1
Button.Fluent 600 523 1.15:1
BoxMinimalPerf.default 385 337 1.14:1
IconMinimalPerf.default 698 610 1.14:1
ButtonMinimalPerf.default 184 163 1.13:1
Dialog.Fluent 826 734 1.13:1
Icon.Fluent 737 652 1.13:1
Image.Fluent 402 356 1.13:1
Text.Fluent 364 322 1.13:1
LabelMinimalPerf.default 431 386 1.12:1
StatusMinimalPerf.default 731 653 1.12:1
ItemLayoutMinimalPerf.default 1344 1208 1.11:1
LayoutMinimalPerf.default 432 390 1.11:1
ListMinimalPerf.default 521 469 1.11:1
Tooltip.Fluent 560 505 1.11:1
CardMinimalPerf.default 592 539 1.1:1
CarouselMinimalPerf.default 474 429 1.1:1
ChatDuplicateMessagesPerf.default 452 415 1.09:1
MenuMinimalPerf.default 890 817 1.09:1
ProviderMergeThemesPerf.default 2064 1901 1.09:1
Checkbox.Fluent 695 639 1.09:1
AvatarMinimalPerf.default 483 446 1.08:1
ProviderMinimalPerf.default 1002 928 1.08:1
TooltipMinimalPerf.default 829 771 1.08:1
ChatMinimalPerf.default 641 601 1.07:1
AnimationMinimalPerf.default 412 389 1.06:1
HeaderSlotsPerf.default 798 753 1.06:1
PopupMinimalPerf.default 711 669 1.06:1
TextAreaMinimalPerf.default 479 451 1.06:1
Avatar.Fluent 888 846 1.05:1
ButtonSlotsPerf.default 603 578 1.04:1
MenuButtonMinimalPerf.default 1596 1541 1.04:1
TreeMinimalPerf.default 900 866 1.04:1
AttachmentSlotsPerf.default 1170 1141 1.03:1
DialogMinimalPerf.default 789 767 1.03:1
DropdownManyItemsPerf.default 758 736 1.03:1
InputMinimalPerf.default 1347 1305 1.03:1
LoaderMinimalPerf.default 760 736 1.03:1
TableManyItemsPerf.default 2172 2112 1.03:1
CustomToolbarPrototype.default 3896 3796 1.03:1
ToolbarMinimalPerf.default 959 930 1.03:1
CheckboxMinimalPerf.default 2860 2796 1.02:1
EmbedMinimalPerf.default 1909 1868 1.02:1
Dropdown.Fluent 2993 2936 1.02:1
Slider.Fluent 1646 1612 1.02:1
SplitButtonMinimalPerf.default 3732 3712 1.01:1
VideoMinimalPerf.default 620 612 1.01:1
DropdownMinimalPerf.default 2927 2964 0.99:1
SliderMinimalPerf.default 1624 1637 0.99:1
TreeWith60ListItems.default 207 218 0.95:1
ListWith60ListItems.default 967 1078 0.9:1
ListCommonPerf.default 660 929 0.71:1
ListNestedPerf.default 582 862 0.68:1

@size-auditor
Copy link

size-auditor bot commented Sep 9, 2020

Asset size changes

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

Baseline commit: 5eb582994298a0b2b60a2f73136291bf5822b0bb (build)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@Raghurk Raghurk Awaiting requested review from Raghurk

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

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