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: Adding custom Callout support for HorizontalBarChart, StackedBarChart and DonutChart #15697

Merged
merged 2 commits into from
Oct 26, 2020
Merged

Charting: Adding custom Callout support for HorizontalBarChart, StackedBarChart and DonutChart #15697

merged 2 commits into from
Oct 26, 2020

Conversation

khmakoto
Copy link
Member

Pull request checklist

Description of changes

Cherry-pick of #15298.

Original PR description:

Custom callout support added to

  • Horizontal bar chart
  • Stacked bar chart
  • Multi stacked bar chart
  • Donut 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 avilable.
image

Implementing custom callout feature, Need to implement own callout component and need to pass props like below (Here, for example I am using CardHoverCard common component). See Examples file once.

image

Focus areas to test

  • Horizontal bar chart
  • Stacked bar chart
  • Multi stacked bar chart
  • Donut chart

Horizontal bar chart

Default callout example

image

Custom callout Example

image

Donut chart

Default callout example

image

Custom callout example

image

Stacked bar chart

Default callout example

image

Custom callout example

image

Multi stacked bar chart

Default callout example

image

Custom callout example

image

@khmakoto khmakoto mentioned this pull request Oct 26, 2020
Closed
40 tasks
@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 bca66b9:

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 812 818 5000
BaseButtonCompat mount 954 948 5000
Breadcrumb mount 151620 151719 5000
Checkbox mount 1533 1480 5000
CheckboxBase mount 1281 1299 5000
ChoiceGroup mount 4791 4856 5000
ComboBox mount 962 952 1000
CommandBar mount 21011 21137 1000
ContextualMenu mount 5940 6070 1000
DefaultButtonCompat mount 1126 1131 5000
DetailsRow mount 3653 3577 5000
DetailsRowFast mount 3698 3634 5000
DetailsRowNoStyles mount 3472 3488 5000
Dialog mount 1496 1500 1000
DocumentCardTitle mount 1734 1748 1000
Dropdown mount 3416 3422 5000
FocusTrapZone mount 1766 1769 5000
FocusZone mount 1796 1741 5000
IconButtonCompat mount 1798 1793 5000
Label mount 317 319 5000
Layer mount 1792 1799 5000
Link mount 459 464 5000
MenuButtonCompat mount 1509 1514 5000
MessageBar mount 1933 1943 5000
Nav mount 3209 3223 1000
OverflowSet mount 1027 1001 5000
Panel mount 1424 1430 1000
Persona mount 855 869 1000
Pivot mount 1503 1426 1000
PrimaryButtonCompat mount 1296 1305 5000
Rating mount 7718 7654 5000
SearchBox mount 1335 1348 5000
Shimmer mount 2618 2553 5000
Slider mount 1892 1913 5000
SpinButton mount 5017 4964 5000
Spinner mount 412 385 5000
SplitButtonCompat mount 3212 3176 5000
Stack mount 493 511 5000
StackWithIntrinsicChildren mount 1534 1491 5000
StackWithTextChildren mount 4771 4745 5000
SwatchColorPicker mount 10335 10281 5000
TagPicker mount 2777 2986 5000
TeachingBubble mount 11495 11410 5000
Text mount 438 438 5000
TextField mount 1389 1388 5000
ThemeProvider mount 1929 1947 5000
ThemeProvider virtual-rerender 624 643 5000
Toggle mount 805 833 5000
button mount 559 526 5000
buttonNative mount 106 111 5000

Perf Analysis (Fluent)

Perf comparison
Status Scenario Fluent TPI Fabric TPI Ratio Iterations Ticks
🎯 Avatar.Fluent 0.47 0.51 0.92:1 2000 932
🦄 Button.Fluent 0.13 0.25 0.52:1 5000 631
🔧 Checkbox.Fluent 0.66 0.37 1.78:1 1000 657
🎯 Dialog.Fluent 0.17 0.23 0.74:1 5000 862
🔧 Dropdown.Fluent 2.86 0.43 6.65:1 1000 2859
🔧 Icon.Fluent 0.16 0.06 2.67:1 5000 782
🦄 Image.Fluent 0.09 0.13 0.69:1 5000 440
🔧 Slider.Fluent 1.58 0.44 3.59:1 1000 1579
🔧 Text.Fluent 0.08 0.03 2.67:1 5000 395
🦄 Tooltip.Fluent 0.11 0.89 0.12:1 5000 573

🔧 Needs work     🎯 On target     🦄 Amazing

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
AccordionMinimalPerf.default 194 176 1.1:1
ImageMinimalPerf.default 450 414 1.09:1
TreeWith60ListItems.default 220 201 1.09:1
Image.Fluent 440 406 1.08:1
FlexMinimalPerf.default 328 307 1.07:1
AnimationMinimalPerf.default 456 430 1.06:1
AttachmentMinimalPerf.default 180 170 1.06:1
ButtonMinimalPerf.default 195 184 1.06:1
IconMinimalPerf.default 745 705 1.06:1
BoxMinimalPerf.default 409 391 1.05:1
ListNestedPerf.default 622 595 1.05:1
ToolbarMinimalPerf.default 1056 1009 1.05:1
ChatDuplicateMessagesPerf.default 443 426 1.04:1
FormMinimalPerf.default 491 474 1.04:1
GridMinimalPerf.default 391 375 1.04:1
ListMinimalPerf.default 545 522 1.04:1
ListWith60ListItems.default 1003 961 1.04:1
SegmentMinimalPerf.default 404 390 1.04:1
StatusMinimalPerf.default 811 782 1.04:1
Text.Fluent 395 380 1.04:1
Tooltip.Fluent 573 550 1.04:1
ButtonSlotsPerf.default 638 620 1.03:1
ButtonUseCssNestingPerf.default 1123 1090 1.03:1
ChatWithPopoverPerf.default 492 478 1.03:1
DropdownManyItemsPerf.default 807 780 1.03:1
EmbedMinimalPerf.default 2010 1943 1.03:1
LabelMinimalPerf.default 469 456 1.03:1
ListCommonPerf.default 707 685 1.03:1
CustomToolbarPrototype.default 3871 3776 1.03:1
TreeMinimalPerf.default 962 932 1.03:1
Dialog.Fluent 862 834 1.03:1
Icon.Fluent 782 761 1.03:1
Slider.Fluent 1579 1529 1.03:1
AvatarMinimalPerf.default 512 501 1.02:1
CardMinimalPerf.default 616 602 1.02:1
RefMinimalPerf.default 236 232 1.02:1
TooltipMinimalPerf.default 839 823 1.02:1
Avatar.Fluent 932 918 1.02:1
Button.Fluent 631 619 1.02:1
ButtonUseCssPerf.default 850 839 1.01:1
ChatMinimalPerf.default 667 662 1.01:1
CheckboxMinimalPerf.default 2920 2890 1.01:1
DialogMinimalPerf.default 825 820 1.01:1
ItemLayoutMinimalPerf.default 1385 1376 1.01:1
LayoutMinimalPerf.default 446 443 1.01:1
MenuMinimalPerf.default 920 912 1.01:1
MenuButtonMinimalPerf.default 1654 1632 1.01:1
PopupMinimalPerf.default 725 721 1.01:1
PortalMinimalPerf.default 161 160 1.01:1
ProviderMinimalPerf.default 991 979 1.01:1
SkeletonMinimalPerf.default 463 458 1.01:1
SliderMinimalPerf.default 1549 1527 1.01:1
TableManyItemsPerf.default 2404 2373 1.01:1
TextAreaMinimalPerf.default 556 553 1.01:1
VideoMinimalPerf.default 699 689 1.01:1
AttachmentSlotsPerf.default 1196 1195 1:1
ButtonOverridesMissPerf.default 1698 1705 1:1
HeaderMinimalPerf.default 404 405 1:1
LoaderMinimalPerf.default 752 750 1:1
ProviderMergeThemesPerf.default 1970 1971 1:1
RadioGroupMinimalPerf.default 490 489 1:1
SplitButtonMinimalPerf.default 3891 3883 1:1
TableMinimalPerf.default 456 454 1:1
Dropdown.Fluent 2859 2870 1:1
AlertMinimalPerf.default 342 347 0.99:1
CarouselMinimalPerf.default 479 482 0.99:1
DropdownMinimalPerf.default 2865 2891 0.99:1
HeaderSlotsPerf.default 860 868 0.99:1
InputMinimalPerf.default 1298 1307 0.99:1
Checkbox.Fluent 657 661 0.99:1
DividerMinimalPerf.default 412 420 0.98:1
TextMinimalPerf.default 395 410 0.96:1
ReactionMinimalPerf.default 429 455 0.94:1

@khmakoto khmakoto changed the title Custom callout horizontal stacked donut Charting: Adding custom Callout support for HorizontalBarChart, StackedBarChart and DonutChart Oct 26, 2020
@size-auditor
Copy link

size-auditor bot commented Oct 26, 2020

Asset size changes

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

Baseline commit: 1370675e769de5a68d5a5a0a33d420e31b6c6af3 (build)

@ecraig12345 ecraig12345 merged commit 9340abc into microsoft:master Oct 26, 2020
@khmakoto khmakoto deleted the customCalloutHorizontalStackedDonut branch October 26, 2020 21:36
@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
@khmakoto
Charting: Adding custom Callout support for HorizontalBarChart, Stack…
3a181ed 
…edBarChart and DonutChart (microsoft#15697)

Cherry-pick of microsoft#15298.
@SamuelQZQ SamuelQZQ mentioned this pull request Jan 26, 2021
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@ecraig12345 ecraig12345 ecraig12345 approved these changes

@Raghurk Raghurk Awaiting requested review from Raghurk

Assignees

@tomi-msft tomi-msft

Labels
Package: charting
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
4 participants
@khmakoto @msft-github-bot @ecraig12345 @tomi-msft