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: Adding customized callout support to AreaChart and LineChart #15684

Merged
merged 2 commits into from
Oct 24, 2020

Conversation

khmakoto
Copy link
Member

Pull request checklist

Description of changes

Cherry-pick of #15361.

Original PR description:

Custom callout support added to Area chart and line chart.

To add this, Exposed callout props and added a new callback method prop to the chart props. As a callback, below details will be available.
image

Implementing custom callout feature, Need to implement own callout component and need to pass props like below ( See Examples file for better understanding.

Focus areas to test

Area chart
Line chart

Screenshots

Area Chart

Default behavior

image

Custom callout
image

Line chart

Default behavior
image

Custom callout
image

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

@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 389e6cf:

Sandbox Source
Fluent UI Button Configuration
codesandbox-react-template Configuration
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
Avatar mount 903 905 5000
BaseButtonCompat mount 995 1027 5000
Breadcrumb mount 161169 163521 5000
Checkbox mount 1626 1596 5000
CheckboxBase mount 1337 1360 5000
ChoiceGroup mount 5079 4978 5000
ComboBox mount 1018 1040 1000
CommandBar mount 22310 22207 1000
ContextualMenu mount 6126 6203 1000
DefaultButtonCompat mount 1181 1194 5000
DetailsRow mount 3748 3784 5000
DetailsRowFast mount 3810 3947 5000
DetailsRowNoStyles mount 3620 3654 5000
Dialog mount 1603 1564 1000
DocumentCardTitle mount 1888 1903 1000
Dropdown mount 3686 3685 5000
FocusTrapZone mount 1847 1824 5000
FocusZone mount 1838 1880 5000
IconButtonCompat mount 1860 1898 5000
Label mount 352 327 5000
Layer mount 1871 1894 5000
Link mount 479 481 5000
MenuButtonCompat mount 1580 1612 5000
MessageBar mount 2164 2103 5000
Nav mount 3446 3576 1000
OverflowSet mount 1090 1069 5000
Panel mount 1480 1487 1000
Persona mount 874 880 1000
Pivot mount 1474 1492 1000
PrimaryButtonCompat mount 1436 1351 5000
Rating mount 8227 8375 5000
SearchBox mount 1422 1433 5000
Shimmer mount 2794 2759 5000
Slider mount 1993 2079 5000
SpinButton mount 5374 5334 5000
Spinner mount 439 448 5000
SplitButtonCompat mount 3329 3435 5000
Stack mount 533 564 5000
StackWithIntrinsicChildren mount 1702 1706 5000
StackWithTextChildren mount 5065 5077 5000
SwatchColorPicker mount 10712 10783 5000
TagPicker mount 2846 2868 5000
TeachingBubble mount 12006 12069 5000
Text mount 469 472 5000
TextField mount 1479 1476 5000
ThemeProvider mount 2046 2052 5000
ThemeProvider virtual-rerender 669 662 5000
Toggle mount 892 853 5000
button mount 601 594 5000
buttonNative mount 119 124 5000

Perf Analysis (Fluent)

Perf comparison
Status Scenario Fluent TPI Fabric TPI Ratio Iterations Ticks
🎯 Avatar.Fluent 0.52 0.56 0.93:1 2000 1035
🦄 Button.Fluent 0.13 0.27 0.48:1 5000 666
🔧 Checkbox.Fluent 0.71 0.38 1.87:1 1000 711
🎯 Dialog.Fluent 0.18 0.24 0.75:1 5000 886
🔧 Dropdown.Fluent 3.18 0.43 7.4:1 1000 3181
🔧 Icon.Fluent 0.16 0.06 2.67:1 5000 783
🦄 Image.Fluent 0.09 0.14 0.64:1 5000 460
🔧 Slider.Fluent 1.74 0.51 3.41:1 1000 1741
🔧 Text.Fluent 0.08 0.04 2:1 5000 421
🦄 Tooltip.Fluent 0.12 0.94 0.13:1 5000 615

🔧 Needs work     🎯 On target     🦄 Amazing

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
PortalMinimalPerf.default 193 174 1.11:1
ReactionMinimalPerf.default 478 450 1.06:1
DropdownManyItemsPerf.default 879 835 1.05:1
FlexMinimalPerf.default 367 351 1.05:1
LabelMinimalPerf.default 490 465 1.05:1
AttachmentMinimalPerf.default 192 185 1.04:1
ListWith60ListItems.default 1008 973 1.04:1
TableMinimalPerf.default 500 483 1.04:1
Checkbox.Fluent 711 684 1.04:1
Text.Fluent 421 405 1.04:1
ButtonMinimalPerf.default 203 197 1.03:1
ButtonOverridesMissPerf.default 1881 1834 1.03:1
FormMinimalPerf.default 497 483 1.03:1
HeaderMinimalPerf.default 448 435 1.03:1
InputMinimalPerf.default 1430 1393 1.03:1
ItemLayoutMinimalPerf.default 1434 1396 1.03:1
MenuMinimalPerf.default 948 916 1.03:1
IconMinimalPerf.default 780 757 1.03:1
TextMinimalPerf.default 425 414 1.03:1
Image.Fluent 460 446 1.03:1
AnimationMinimalPerf.default 444 437 1.02:1
DialogMinimalPerf.default 880 862 1.02:1
HeaderSlotsPerf.default 904 888 1.02:1
ImageMinimalPerf.default 459 448 1.02:1
PopupMinimalPerf.default 803 790 1.02:1
SplitButtonMinimalPerf.default 4237 4136 1.02:1
ToolbarMinimalPerf.default 1093 1071 1.02:1
Avatar.Fluent 1035 1015 1.02:1
Slider.Fluent 1741 1708 1.02:1
AvatarMinimalPerf.default 551 547 1.01:1
ButtonUseCssPerf.default 905 896 1.01:1
CarouselMinimalPerf.default 502 497 1.01:1
DropdownMinimalPerf.default 3156 3116 1.01:1
ListCommonPerf.default 752 744 1.01:1
SkeletonMinimalPerf.default 495 488 1.01:1
TreeMinimalPerf.default 1020 1010 1.01:1
VideoMinimalPerf.default 719 713 1.01:1
Dialog.Fluent 886 879 1.01:1
Dropdown.Fluent 3181 3152 1.01:1
AttachmentSlotsPerf.default 1248 1251 1:1
ChatMinimalPerf.default 685 683 1:1
ChatWithPopoverPerf.default 512 512 1:1
CheckboxMinimalPerf.default 2986 2998 1:1
EmbedMinimalPerf.default 2142 2137 1:1
GridMinimalPerf.default 403 403 1:1
ListNestedPerf.default 651 653 1:1
LoaderMinimalPerf.default 775 774 1:1
RadioGroupMinimalPerf.default 509 509 1:1
SliderMinimalPerf.default 1737 1741 1:1
TextAreaMinimalPerf.default 582 582 1:1
CustomToolbarPrototype.default 4204 4223 1:1
Button.Fluent 666 665 1:1
Tooltip.Fluent 615 612 1:1
ButtonUseCssNestingPerf.default 1156 1165 0.99:1
DividerMinimalPerf.default 431 436 0.99:1
ListMinimalPerf.default 546 552 0.99:1
MenuButtonMinimalPerf.default 1724 1749 0.99:1
ProviderMergeThemesPerf.default 2138 2152 0.99:1
ProviderMinimalPerf.default 1134 1140 0.99:1
TooltipMinimalPerf.default 892 900 0.99:1
BoxMinimalPerf.default 427 436 0.98:1
ButtonSlotsPerf.default 642 655 0.98:1
CardMinimalPerf.default 625 635 0.98:1
ChatDuplicateMessagesPerf.default 446 453 0.98:1
TableManyItemsPerf.default 2445 2502 0.98:1
AccordionMinimalPerf.default 170 176 0.97:1
AlertMinimalPerf.default 328 339 0.97:1
LayoutMinimalPerf.default 465 477 0.97:1
StatusMinimalPerf.default 829 855 0.97:1
Icon.Fluent 783 810 0.97:1
SegmentMinimalPerf.default 408 425 0.96:1
TreeWith60ListItems.default 235 249 0.94:1
RefMinimalPerf.default 245 265 0.92:1

@size-auditor
Copy link

size-auditor bot commented Oct 24, 2020

Asset size changes

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

Baseline commit: ea7178e75c96d7cd9175c28260ec13cd3f8515b9 (build)

@ecraig12345 ecraig12345 merged commit ef71422 into microsoft:master Oct 24, 2020
@khmakoto khmakoto deleted the customCalloutForCharts branch October 24, 2020 00:42
@msft-github-bot
Copy link
Contributor

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

Handy links:

SethDonohue pushed a commit to SethDonohue/fluentui that referenced this pull request Nov 2, 2020
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