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: Custom callout support for Horizontal bar chart, Stacked bar chart and Donut chart #15298

Merged
merged 8 commits into from
Oct 12, 2020
Merged

Charting: Custom callout support for Horizontal bar chart, Stacked bar chart and Donut chart #15298

merged 8 commits into from
Oct 12, 2020

Conversation

jameelakowsar
Copy link
Contributor

@jameelakowsar jameelakowsar commented Sep 29, 2020 •
edited
Loading

Pull request checklist

Description of changes

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

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

@msft-github-bot msft-github-bot added the needs cherry-pick Temporary label for PRs which may need to be cherry-picked to master label Sep 29, 2020
@codesandbox-ci
Copy link

codesandbox-ci bot commented Sep 29, 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 553e79f:

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

@khmakoto khmakoto mentioned this pull request Sep 29, 2020
Closed
40 tasks
@jameelakowsar jameelakowsar marked this pull request as ready for review September 30, 2020 12:04
@msft-github-bot
Copy link
Contributor

Perf Analysis

No significant results to display.

All results

Scenario Render type 7.0 Ticks PR Ticks Iterations Status
Avatar mount 861 864 5000
BaseButton mount 945 939 5000
Breadcrumb mount 41194 41454 5000
ButtonNext mount 600 601 5000
Checkbox mount 1631 1675 5000
CheckboxBase mount 1339 1425 5000
ChoiceGroup mount 5172 5063 5000
ComboBox mount 988 935 1000
CommandBar mount 7636 7555 1000
ContextualMenu mount 12939 12694 1000
DefaultButton mount 1145 1160 5000
DetailsRow mount 3728 3784 5000
DetailsRowFast mount 3722 3740 5000
DetailsRowNoStyles mount 3512 3545 5000
Dialog mount 1542 1522 1000
DocumentCardTitle mount 1780 1786 1000
Dropdown mount 2656 2694 5000
FocusTrapZone mount 1756 1721 5000
FocusZone mount 1802 1823 5000
IconButton mount 1841 1826 5000
Label mount 357 339 5000
Layer mount 1995 2029 5000
Link mount 465 459 5000
MenuButton mount 1525 1550 5000
MessageBar mount 2039 2027 5000
Nav mount 3341 3374 1000
OverflowSet mount 1439 1429 5000
Panel mount 1432 1495 1000
Persona mount 823 838 1000
Pivot mount 1447 1474 1000
PrimaryButton mount 1351 1356 5000
Rating mount 7989 8031 5000
SearchBox mount 1362 1338 5000
Shimmer mount 2663 2661 5000
Slider mount 1517 1554 5000
SpinButton mount 5136 5175 5000
Spinner mount 426 414 5000
SplitButton mount 3307 3273 5000
Stack mount 537 548 5000
StackWithIntrinsicChildren mount 2098 2060 5000
StackWithTextChildren mount 5305 5356 5000
SwatchColorPicker mount 10487 10540 5000
TagPicker mount 2864 2859 5000
TeachingBubble mount 49894 49437 5000
Text mount 441 439 5000
TextField mount 1412 1420 5000
ThemeProvider mount 3040 3105 5000
ThemeProvider virtual-rerender 591 619 5000
Toggle mount 870 828 5000
button mount 111 122 5000

Perf Analysis (Fluent)

Perf comparison
Status Scenario Fluent TPI Fabric TPI Ratio Iterations Ticks
🔧 Avatar.Fluent 0.51 0.5 1.02:1 2000 1025
🦄 Button.Fluent 0.13 0.22 0.59:1 5000 644
🔧 Checkbox.Fluent 0.68 0.37 1.84:1 1000 684
🎯 Dialog.Fluent 0.17 0.23 0.74:1 5000 861
🔧 Dropdown.Fluent 3.05 0.49 6.22:1 1000 3053
🔧 Icon.Fluent 0.16 0.06 2.67:1 5000 806
🎯 Image.Fluent 0.09 0.12 0.75:1 5000 433
🔧 Slider.Fluent 1.69 0.38 4.45:1 1000 1692
🔧 Text.Fluent 0.08 0.03 2.67:1 5000 412
🦄 Tooltip.Fluent 0.12 15.4 0.01:1 5000 613

🔧 Needs work     🎯 On target     🦄 Amazing

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
AccordionMinimalPerf.default 188 0 Infinity:1
AlertMinimalPerf.default 334 0 Infinity:1
AnimationMinimalPerf.default 444 0 Infinity:1
AvatarMinimalPerf.default 530 0 Infinity:1
BoxMinimalPerf.default 419 0 Infinity:1
ButtonMinimalPerf.default 206 0 Infinity:1
ButtonSlotsPerf.default 656 0 Infinity:1
ButtonUseCssPerf.default 929 0 Infinity:1
ButtonUseCssNestingPerf.default 1234 0 Infinity:1
CardMinimalPerf.default 658 0 Infinity:1
CarouselMinimalPerf.default 527 0 Infinity:1
ChatMinimalPerf.default 708 0 Infinity:1
CheckboxMinimalPerf.default 3086 0 Infinity:1
DialogMinimalPerf.default 924 0 Infinity:1
DropdownManyItemsPerf.default 827 0 Infinity:1
DropdownMinimalPerf.default 3105 0 Infinity:1
EmbedMinimalPerf.default 2124 0 Infinity:1
FlexMinimalPerf.default 349 0 Infinity:1
FormMinimalPerf.default 504 0 Infinity:1
GridMinimalPerf.default 422 0 Infinity:1
ImageMinimalPerf.default 464 0 Infinity:1
InputMinimalPerf.default 1427 0 Infinity:1
ItemLayoutMinimalPerf.default 1493 0 Infinity:1
LabelMinimalPerf.default 489 0 Infinity:1
LayoutMinimalPerf.default 480 0 Infinity:1
ListCommonPerf.default 760 0 Infinity:1
ListMinimalPerf.default 598 0 Infinity:1
ListNestedPerf.default 656 0 Infinity:1
ListWith60ListItems.default 991 0 Infinity:1
MenuMinimalPerf.default 954 0 Infinity:1
MenuButtonMinimalPerf.default 1743 0 Infinity:1
PopupMinimalPerf.default 761 0 Infinity:1
PortalMinimalPerf.default 179 0 Infinity:1
ProviderMergeThemesPerf.default 2160 0 Infinity:1
ProviderMinimalPerf.default 1106 0 Infinity:1
RefMinimalPerf.default 252 0 Infinity:1
SegmentMinimalPerf.default 421 0 Infinity:1
SkeletonMinimalPerf.default 506 0 Infinity:1
SliderMinimalPerf.default 1658 0 Infinity:1
StatusMinimalPerf.default 834 0 Infinity:1
IconMinimalPerf.default 755 0 Infinity:1
TableManyItemsPerf.default 2468 0 Infinity:1
TableMinimalPerf.default 515 0 Infinity:1
TextMinimalPerf.default 429 0 Infinity:1
TextAreaMinimalPerf.default 610 0 Infinity:1
CustomToolbarPrototype.default 4371 0 Infinity:1
ToolbarMinimalPerf.default 1130 0 Infinity:1
TooltipMinimalPerf.default 969 0 Infinity:1
TreeMinimalPerf.default 1061 0 Infinity:1
VideoMinimalPerf.default 747 0 Infinity:1
Avatar.Fluent 1025 0 Infinity:1
Checkbox.Fluent 684 0 Infinity:1
Dropdown.Fluent 3053 0 Infinity:1
Icon.Fluent 806 0 Infinity:1
Image.Fluent 433 0 Infinity:1
Slider.Fluent 1692 0 Infinity:1
Text.Fluent 412 0 Infinity:1
Tooltip.Fluent 613 0 Infinity:1
SplitButtonMinimalPerf.default 4077 1 4077:1
ButtonOverridesMissPerf.default 1839 1 1839:1
AttachmentSlotsPerf.default 1238 1 1238:1
HeaderSlotsPerf.default 892 1 892:1
Dialog.Fluent 861 1 861:1
LoaderMinimalPerf.default 786 1 786:1
Button.Fluent 644 1 644:1
RadioGroupMinimalPerf.default 507 1 507:1
ChatWithPopoverPerf.default 504 1 504:1
ReactionMinimalPerf.default 480 1 480:1
ChatDuplicateMessagesPerf.default 454 1 454:1
DividerMinimalPerf.default 440 1 440:1
HeaderMinimalPerf.default 438 1 438:1
TreeWith60ListItems.default 239 1 239:1
AttachmentMinimalPerf.default 191 1 191:1

@size-auditor
Copy link

size-auditor bot commented Oct 5, 2020

Asset size changes

⚠️ Insufficient baseline data to detect size changes

Unable to find bundle size details for Baseline commit: f54b420

Possible causes

  • The baseline build f54b420 is broken
  • The Size Auditor run for the baseline build f54b420 was not triggered

Recommendations

  • Please merge your branch for this Pull request with the latest master build and commit your changes once again

@jameelakowsar jameelakowsar requested a review from Raghurk October 12, 2020 12:07
@Raghurk Raghurk merged commit f6bf52d into microsoft:7.0 Oct 12, 2020
@msft-github-bot
Copy link
Contributor

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

Handy links:

@msft-github-bot
Copy link
Contributor

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

Handy links:

@msft-github-bot msft-github-bot mentioned this pull request Oct 13, 2020
Closed
@khmakoto khmakoto mentioned this pull request Oct 26, 2020
Merged
2 tasks
ecraig12345 pushed a commit that referenced this pull request Oct 26, 2020
@khmakoto
Charting: Adding custom Callout support for HorizontalBarChart, Stack…
9340abc 
…edBarChart and DonutChart (#15697)

Cherry-pick of #15298.
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.
@ecraig12345 ecraig12345 removed the needs cherry-pick Temporary label for PRs which may need to be cherry-picked to master label Dec 3, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@ecraig12345 ecraig12345 Awaiting requested review from ecraig12345

@Raghurk Raghurk Awaiting requested review from Raghurk

Assignees

@miroslavstastny miroslavstastny

Labels
Package: charting
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
7 participants
@jameelakowsar @msft-github-bot @Raghurk @ecraig12345 @khmakoto @miroslavstastny @RajeshGoriga