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: Area chart - Graph update after data change issue resolved and memoize implemented #15299

Merged
merged 7 commits into from
Oct 1, 2020
Merged

Charting: Area chart - Graph update after data change issue resolved and memoize implemented #15299

merged 7 commits into from
Oct 1, 2020

Conversation

jameelakowsar
Copy link
Contributor

Pull request checklist

Description of changes

After props data updated, need to update stackedValues and CalloutPoints which are using to redraw the graph. These data updated.

Memoize concept implemented - Previously, calculating stacked data, getting keys, colors, creating dataset all these will be calculated for every render which is not required and take time. Now all these will be calculated only when prop changes.

Focus areas to test

Area chart

Before Fix, After clicking on update data (Graph is same as previous)

image

After fix, Updated graph.

image

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

@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
@jameelakowsar jameelakowsar marked this pull request as ready for review September 29, 2020 05:42
@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 e129dcc:

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 7.0 Ticks PR Ticks Iterations Status
Avatar mount 832 853 5000
BaseButton mount 921 955 5000
Breadcrumb mount 40719 39490 5000
ButtonNext mount 602 599 5000
Checkbox mount 1598 1754 5000
CheckboxBase mount 1380 1399 5000
ChoiceGroup mount 5097 5126 5000
ComboBox mount 899 908 1000
CommandBar mount 7562 7447 1000
ContextualMenu mount 12171 12260 1000
DefaultButton mount 1190 1155 5000
DetailsRow mount 3762 3788 5000
DetailsRowFast mount 3615 3619 5000
DetailsRowNoStyles mount 3482 3477 5000
Dialog mount 1527 1527 1000
DocumentCardTitle mount 1742 1781 1000
Dropdown mount 2674 2590 5000
FocusTrapZone mount 1664 1663 5000
FocusZone mount 1733 1768 5000
IconButton mount 1771 1800 5000
Label mount 330 357 5000
Layer mount 2028 1966 5000
Link mount 444 460 5000
MenuButton mount 1555 1570 5000
MessageBar mount 2104 2033 5000
Nav mount 3251 3276 1000
OverflowSet mount 1379 1408 5000
Panel mount 1450 1452 1000
Persona mount 807 869 1000
Pivot mount 1446 1423 1000
PrimaryButton mount 1287 1309 5000
Rating mount 7868 7935 5000
SearchBox mount 1372 1322 5000
Shimmer mount 2661 2643 5000
Slider mount 1511 1567 5000
SpinButton mount 5040 5202 5000
Spinner mount 419 395 5000
SplitButton mount 3194 3219 5000
Stack mount 552 532 5000
StackWithIntrinsicChildren mount 2046 1970 5000
StackWithTextChildren mount 5317 5233 5000
SwatchColorPicker mount 10337 10492 5000
TagPicker mount 2800 2778 5000
TeachingBubble mount 48212 48224 5000
Text mount 424 421 5000
TextField mount 1444 1425 5000
ThemeProvider mount 3092 3049 5000
ThemeProvider virtual-rerender 595 594 5000
Toggle mount 844 844 5000
button mount 111 121 5000

Perf Analysis (Fluent)

Perf comparison
Status Scenario Fluent TPI Fabric TPI Ratio Iterations Ticks
🎯 Avatar.Fluent 0.47 0.48 0.98:1 2000 930
🦄 Button.Fluent 0.13 0.21 0.62:1 5000 625
🔧 Checkbox.Fluent 0.66 0.35 1.89:1 1000 657
🎯 Dialog.Fluent 0.17 0.23 0.74:1 5000 841
🔧 Dropdown.Fluent 2.99 0.48 6.23:1 1000 2987
🔧 Icon.Fluent 0.15 0.06 2.5:1 5000 748
🦄 Image.Fluent 0.08 0.12 0.67:1 5000 422
🔧 Slider.Fluent 1.62 0.39 4.15:1 1000 1619
🔧 Text.Fluent 0.08 0.03 2.67:1 5000 399
🦄 Tooltip.Fluent 0.11 14.53 0.01:1 5000 570

🔧 Needs work     🎯 On target     🦄 Amazing

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
AccordionMinimalPerf.default 179 0 Infinity:1
AlertMinimalPerf.default 347 0 Infinity:1
AnimationMinimalPerf.default 443 0 Infinity:1
AttachmentMinimalPerf.default 193 0 Infinity:1
AttachmentSlotsPerf.default 1193 0 Infinity:1
BoxMinimalPerf.default 405 0 Infinity:1
ButtonMinimalPerf.default 200 0 Infinity:1
ButtonOverridesMissPerf.default 1766 0 Infinity:1
ButtonSlotsPerf.default 634 0 Infinity:1
ButtonUseCssPerf.default 919 0 Infinity:1
ButtonUseCssNestingPerf.default 1152 0 Infinity:1
CardMinimalPerf.default 634 0 Infinity:1
CarouselMinimalPerf.default 486 0 Infinity:1
ChatMinimalPerf.default 664 0 Infinity:1
ChatWithPopoverPerf.default 499 0 Infinity:1
CheckboxMinimalPerf.default 2898 0 Infinity:1
DropdownMinimalPerf.default 2910 0 Infinity:1
EmbedMinimalPerf.default 2063 0 Infinity:1
FlexMinimalPerf.default 331 0 Infinity:1
FormMinimalPerf.default 463 0 Infinity:1
GridMinimalPerf.default 393 0 Infinity:1
HeaderMinimalPerf.default 420 0 Infinity:1
HeaderSlotsPerf.default 836 0 Infinity:1
InputMinimalPerf.default 1325 0 Infinity:1
ItemLayoutMinimalPerf.default 1370 0 Infinity:1
LabelMinimalPerf.default 463 0 Infinity:1
ListCommonPerf.default 724 0 Infinity:1
ListNestedPerf.default 613 0 Infinity:1
ListWith60ListItems.default 959 0 Infinity:1
LoaderMinimalPerf.default 774 0 Infinity:1
MenuMinimalPerf.default 935 0 Infinity:1
MenuButtonMinimalPerf.default 1667 0 Infinity:1
PopupMinimalPerf.default 722 0 Infinity:1
PortalMinimalPerf.default 160 0 Infinity:1
ProviderMergeThemesPerf.default 2013 0 Infinity:1
ProviderMinimalPerf.default 1047 0 Infinity:1
RadioGroupMinimalPerf.default 484 0 Infinity:1
ReactionMinimalPerf.default 445 0 Infinity:1
RefMinimalPerf.default 251 0 Infinity:1
SegmentMinimalPerf.default 395 0 Infinity:1
SkeletonMinimalPerf.default 459 0 Infinity:1
SliderMinimalPerf.default 1603 0 Infinity:1
SplitButtonMinimalPerf.default 4001 0 Infinity:1
StatusMinimalPerf.default 779 0 Infinity:1
IconMinimalPerf.default 715 0 Infinity:1
TableManyItemsPerf.default 2348 0 Infinity:1
TableMinimalPerf.default 461 0 Infinity:1
TextMinimalPerf.default 388 0 Infinity:1
TextAreaMinimalPerf.default 554 0 Infinity:1
CustomToolbarPrototype.default 3890 0 Infinity:1
ToolbarMinimalPerf.default 989 0 Infinity:1
TooltipMinimalPerf.default 827 0 Infinity:1
TreeMinimalPerf.default 949 0 Infinity:1
TreeWith60ListItems.default 214 0 Infinity:1
VideoMinimalPerf.default 673 0 Infinity:1
Avatar.Fluent 930 0 Infinity:1
Button.Fluent 625 0 Infinity:1
Checkbox.Fluent 657 0 Infinity:1
Dropdown.Fluent 2987 0 Infinity:1
Icon.Fluent 748 0 Infinity:1
Image.Fluent 422 0 Infinity:1
Slider.Fluent 1619 0 Infinity:1
Text.Fluent 399 0 Infinity:1
Tooltip.Fluent 570 0 Infinity:1
DialogMinimalPerf.default 846 1 846:1
Dialog.Fluent 841 1 841:1
DropdownManyItemsPerf.default 802 1 802:1
AvatarMinimalPerf.default 510 1 510:1
ListMinimalPerf.default 510 1 510:1
ImageMinimalPerf.default 444 1 444:1
LayoutMinimalPerf.default 444 1 444:1
ChatDuplicateMessagesPerf.default 425 1 425:1
DividerMinimalPerf.default 420 1 420:1

@size-auditor
Copy link

size-auditor bot commented Sep 29, 2020

Asset size changes

⚠️ Insufficient baseline data to detect size changes

Unable to find bundle size details for Baseline commit: 3ce8f97

Possible causes

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

Recommendations

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

@khmakoto khmakoto mentioned this pull request Sep 29, 2020
Closed
40 tasks
@Raghurk Raghurk merged commit 4069d50 into microsoft:7.0 Oct 1, 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:

@khmakoto khmakoto mentioned this pull request Oct 22, 2020
Merged
2 tasks
ecraig12345 pushed a commit that referenced this pull request Oct 23, 2020
@khmakoto
Area chart data memoized (#15647)
b24c2dd 
* Charting: Resolving redraw issue after data change in AreaChart and implementing memoization.
Cherry-pick of #15299.
SethDonohue pushed a commit to SethDonohue/fluentui that referenced this pull request Nov 2, 2020
@khmakoto
Area chart data memoized (microsoft#15647)
01dc118 
* Charting: Resolving redraw issue after data change in AreaChart and implementing memoization.
Cherry-pick of microsoft#15299.
@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

@Raghurk Raghurk Raghurk approved these changes

Assignees

@miroslavstastny miroslavstastny

Labels
Package: charting
Projects
None yet
Milestone
No milestone
Development

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