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

charting: Grouped vertical bar chart code refactor. #15838

Merged

Conversation

jameelakowsar
Copy link
Contributor

Pull request checklist

Description of changes

Cherry-pick of ##15468

Original description

In the process of restructure of the Groped vertical bar chart,

Removed d3 related graph structure and updated with rectangles.

Implemented with Cartesian chart(Common component)

YMinValue and YMaxValue support added

Added support of yAxisTickFormat.

Customized callout support implemented.

Code cleanup

Snapshot and basic level unit test cases added

Deprecated below props(Made them as default props).

  • showYAxisGridLines
  • showXAxisPath
  • showYAxisPath
  • showXAxisGridLines
  • legendColor
    Note: As RTL support and word wrap of x axis already implemented for this chart, Now it's working as like previous. Attacked screenshots.

Focus areas to test
Grouped vertical bar chart

Grouped vertical bar chart with custom callout
image

yMax value support - with 100000 as Max value
image

RTL Support
image

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

@codesandbox-ci
Copy link

codesandbox-ci bot commented Nov 5, 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 5225e7f:

Sandbox Source
Fluent UI Button Configuration

@msft-github-bot
Copy link
Contributor

msft-github-bot commented Nov 5, 2020

Perf Analysis

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 862 880 5000
BaseButtonCompat mount 992 1012 5000
Breadcrumb mount 43529 44481 5000
Checkbox mount 1614 1574 5000
CheckboxBase mount 1392 1336 5000
ChoiceGroup mount 5208 4966 5000
ComboBox mount 1023 1044 1000
CommandBar mount 10383 10461 1000
ContextualMenu mount 6480 6158 1000
DefaultButtonCompat mount 1241 1244 5000
DetailsRow mount 3908 3850 5000
DetailsRowFast mount 3940 3914 5000
DetailsRowNoStyles mount 3598 3594 5000
Dialog mount 1548 1574 1000
DocumentCardTitle mount 1797 1803 1000
Dropdown mount 3661 3585 5000
FocusTrapZone mount 1910 1871 5000
FocusZone mount 1893 1914 5000
IconButtonCompat mount 1886 1865 5000
Label mount 345 341 5000
Layer mount 1874 1880 5000
Link mount 470 487 5000
MenuButtonCompat mount 1585 1519 5000
MessageBar mount 2054 2084 5000
Nav mount 3371 3378 1000
OverflowSet mount 1087 1116 5000
Panel mount 1553 1516 1000
Persona mount 896 894 1000
Pivot mount 1459 1509 1000
PrimaryButtonCompat mount 1360 1386 5000
Rating mount 7883 8354 5000
SearchBox mount 1459 1457 5000
Shimmer mount 2729 2810 5000
Slider mount 1999 2116 5000
SpinButton mount 5283 5232 5000
Spinner mount 427 414 5000
SplitButtonCompat mount 3409 3352 5000
Stack mount 524 522 5000
StackWithIntrinsicChildren mount 1639 1640 5000
StackWithTextChildren mount 5153 5061 5000
SwatchColorPicker mount 10800 10642 5000
Tabs mount 1489 1507 1000
TagPicker mount 2828 2945 5000
TeachingBubble mount 11972 12052 5000
Text mount 464 463 5000
TextField mount 1442 1494 5000
ThemeProvider mount 2054 2002 5000
ThemeProvider virtual-rerender 692 652 5000
Toggle mount 856 840 5000
button mount 569 572 5000
buttonNative mount 123 114 5000

Perf Analysis (Fluent)

Perf comparison
Status Scenario Fluent TPI Fabric TPI Ratio Iterations Ticks
🎯 Avatar.Fluent 0.49 0.52 0.94:1 2000 978
🦄 Button.Fluent 0.13 0.25 0.52:1 5000 637
🔧 Checkbox.Fluent 0.69 0.38 1.82:1 1000 692
🎯 Dialog.Fluent 0.17 0.24 0.71:1 5000 852
🔧 Dropdown.Fluent 3.04 0.43 7.07:1 1000 3038
🔧 Icon.Fluent 0.17 0.06 2.83:1 5000 825
🦄 Image.Fluent 0.08 0.13 0.62:1 5000 422
🔧 Slider.Fluent 1.63 0.47 3.47:1 1000 1633
🔧 Text.Fluent 0.08 0.04 2:1 5000 422
🦄 Tooltip.Fluent 0.13 0.9 0.14:1 5000 636

🔧 Needs work     🎯 On target     🦄 Amazing

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
TreeWith60ListItems.default 240 215 1.12:1
LabelMinimalPerf.default 520 475 1.09:1
ListCommonPerf.default 791 732 1.08:1
MenuMinimalPerf.default 969 896 1.08:1
AttachmentMinimalPerf.default 196 183 1.07:1
DividerMinimalPerf.default 459 431 1.06:1
RefMinimalPerf.default 270 254 1.06:1
ButtonMinimalPerf.default 216 206 1.05:1
CardMinimalPerf.default 680 646 1.05:1
ChatWithPopoverPerf.default 545 517 1.05:1
ButtonUseCssPerf.default 955 916 1.04:1
LayoutMinimalPerf.default 490 471 1.04:1
TableMinimalPerf.default 502 481 1.04:1
TextMinimalPerf.default 429 413 1.04:1
TreeMinimalPerf.default 980 946 1.04:1
Text.Fluent 422 404 1.04:1
AvatarMinimalPerf.default 564 545 1.03:1
CarouselMinimalPerf.default 544 526 1.03:1
FlexMinimalPerf.default 357 347 1.03:1
ImageMinimalPerf.default 458 443 1.03:1
ItemLayoutMinimalPerf.default 1453 1415 1.03:1
RadioGroupMinimalPerf.default 525 511 1.03:1
ReactionMinimalPerf.default 479 467 1.03:1
ToolbarMinimalPerf.default 1041 1006 1.03:1
AttachmentSlotsPerf.default 1277 1257 1.02:1
BoxMinimalPerf.default 459 449 1.02:1
ButtonOverridesMissPerf.default 1943 1902 1.02:1
ChatDuplicateMessagesPerf.default 477 468 1.02:1
GridMinimalPerf.default 420 412 1.02:1
InputMinimalPerf.default 1445 1422 1.02:1
ListWith60ListItems.default 1027 1007 1.02:1
PopupMinimalPerf.default 759 745 1.02:1
SplitButtonMinimalPerf.default 4162 4075 1.02:1
TooltipMinimalPerf.default 873 854 1.02:1
Dropdown.Fluent 3038 2987 1.02:1
Tooltip.Fluent 636 625 1.02:1
AnimationMinimalPerf.default 476 472 1.01:1
ChatMinimalPerf.default 683 676 1.01:1
HeaderMinimalPerf.default 459 455 1.01:1
ListMinimalPerf.default 570 563 1.01:1
ListNestedPerf.default 669 664 1.01:1
SkeletonMinimalPerf.default 504 500 1.01:1
TableManyItemsPerf.default 2498 2475 1.01:1
CustomToolbarPrototype.default 4227 4186 1.01:1
Button.Fluent 637 632 1.01:1
Image.Fluent 422 419 1.01:1
DialogMinimalPerf.default 893 893 1:1
ProviderMinimalPerf.default 1140 1135 1:1
SliderMinimalPerf.default 1720 1717 1:1
StatusMinimalPerf.default 839 841 1:1
IconMinimalPerf.default 749 746 1:1
Checkbox.Fluent 692 695 1:1
Slider.Fluent 1633 1630 1:1
ButtonUseCssNestingPerf.default 1231 1242 0.99:1
DropdownManyItemsPerf.default 834 839 0.99:1
LoaderMinimalPerf.default 795 802 0.99:1
MenuButtonMinimalPerf.default 1704 1720 0.99:1
PortalMinimalPerf.default 172 174 0.99:1
SegmentMinimalPerf.default 420 424 0.99:1
Avatar.Fluent 978 988 0.99:1
ButtonSlotsPerf.default 677 689 0.98:1
CheckboxMinimalPerf.default 3051 3112 0.98:1
DropdownMinimalPerf.default 3056 3116 0.98:1
EmbedMinimalPerf.default 2070 2120 0.98:1
FormMinimalPerf.default 508 520 0.98:1
ProviderMergeThemesPerf.default 2093 2130 0.98:1
TextAreaMinimalPerf.default 575 584 0.98:1
Icon.Fluent 825 843 0.98:1
HeaderSlotsPerf.default 905 931 0.97:1
Dialog.Fluent 852 878 0.97:1
VideoMinimalPerf.default 703 733 0.96:1
AccordionMinimalPerf.default 187 197 0.95:1
AlertMinimalPerf.default 351 370 0.95:1

@size-auditor
Copy link

size-auditor bot commented Nov 5, 2020

Asset size changes

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

Baseline commit: 08d28c85ddc861eb731df5ad30e7073128187a2d (build)

@jameelakowsar jameelakowsar reopened this Nov 5, 2020
@jameelakowsar jameelakowsar marked this pull request as ready for review November 5, 2020 10:17
@jameelakowsar jameelakowsar reopened this Nov 5, 2020
@@ -0,0 +1,8 @@
{
"type": "none",
Copy link
Contributor

Choose a reason for hiding this comment

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

should this be patch, minor or major?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Hi raghu,

All other PR's (which were cherry-picked and ported to master) are with type:none only. And while adding change file they are only 2 options(Prerelease and None). So I have added None.

@Raghurk Raghurk merged commit 33fc4b3 into microsoft:master Nov 11, 2020
SethDonohue pushed a commit to SethDonohue/fluentui that referenced this pull request Nov 23, 2020
* Grouped vertical bar chart code refactor cherry pick to port master

* Change files

* email updated in change files

Co-authored-by: Jameela Kowsar Shaik (Zen3 Infosolutions America Inc) <v-jasha@microsoft.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants