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

Add features to Line Chart (gaps, borders, line properties, etc.) #18665

Merged
merged 4 commits into from
Jun 24, 2021
Merged

Add features to Line Chart (gaps, borders, line properties, etc.) #18665

merged 4 commits into from
Jun 24, 2021

Conversation

nojittip
Copy link
Contributor

@nojittip nojittip commented Jun 22, 2021 •
edited

Pull request checklist

  • Addresses an existing issue: Fixes #0000
  • Include a change request file using $ yarn change

Description of changes

Add support in LineChart for:

  • specifying gaps in the lines
  • adding border around lines
  • hiding callout info for specific points
  • hiding dots for non-active points from chart
  • line properties (width, dasharray)
  • specifying legend shape (also added new shape for dottedLine)
  • description message for stacked Callout

Gaps + Dotted Lines + Legend shape (dotted line)
image

Borders + Horizonal dotted line (custom stroke width and dasharray)
image

Description message for stacked Callout
image

Focus areas to test

LineChart and AreaChart

@nojittip nojittip requested a review from Raghurk as a code owner June 22, 2021 15:33
@size-auditor
Copy link

size-auditor bot commented Jun 22, 2021 •
edited

Asset size changes

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

Baseline commit: 4510bf44dfb494fc62aff9eedad3332924144f7b (build)

@fabricteam
Copy link
Collaborator

fabricteam commented Jun 22, 2021 •
edited

Perf Analysis (@fluentui/react)

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 782 822 5000
BaseButton mount 878 889 5000
Breadcrumb mount 2542 2585 1000
ButtonNext mount 512 524 5000
Checkbox mount 1502 1521 5000
CheckboxBase mount 1262 1250 5000
ChoiceGroup mount 4671 4593 5000
ComboBox mount 953 948 1000
CommandBar mount 10011 9887 1000
ContextualMenu mount 6232 6304 1000
DefaultButton mount 1163 1110 5000
DetailsRow mount 3606 3748 5000
DetailsRowFast mount 3694 3671 5000
DetailsRowNoStyles mount 3458 3443 5000
Dialog mount 2133 2160 1000
DocumentCardTitle mount 143 143 1000
Dropdown mount 3208 3176 5000
FocusTrapZone mount 1801 1798 5000
FocusZone mount 1833 1811 5000
IconButton mount 1741 1689 5000
Label mount 320 331 5000
Layer mount 1735 1787 5000
Link mount 448 459 5000
MakeStyles mount 1781 1796 50000
MenuButton mount 1466 1445 5000
MessageBar mount 1967 1985 5000
Nav mount 3226 3234 1000
OverflowSet mount 1041 1061 5000
Panel mount 2038 2071 1000
Persona mount 805 801 1000
Pivot mount 1427 1371 1000
PrimaryButton mount 1237 1258 5000
Rating mount 7372 7517 5000
SearchBox mount 1315 1307 5000
Shimmer mount 2481 2532 5000
Slider mount 1970 1927 5000
SpinButton mount 4953 4892 5000
Spinner mount 427 424 5000
SplitButton mount 3097 3151 5000
Stack mount 484 498 5000
StackWithIntrinsicChildren mount 1486 1491 5000
StackWithTextChildren mount 4431 4439 5000
SwatchColorPicker mount 10108 10010 5000
Tabs mount 1398 1370 1000
TagPicker mount 2354 2420 5000
TeachingBubble mount 11722 11692 5000
Text mount 432 415 5000
TextField mount 1366 1344 5000
ThemeProvider mount 1164 1176 5000
ThemeProvider virtual-rerender 596 581 5000
ThemeProviderNext mount 7141 7040 5000
Toggle mount 828 804 5000
buttonNative mount 115 114 5000

Perf Analysis (@fluentui/react-northstar)

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
FormMinimalPerf.default 404 369 1.09:1
IconMinimalPerf.default 639 591 1.08:1
TreeWith60ListItems.default 180 166 1.08:1
TooltipMinimalPerf.default 1008 945 1.07:1
AttachmentMinimalPerf.default 156 148 1.05:1
SkeletonMinimalPerf.default 370 353 1.05:1
TableMinimalPerf.default 409 390 1.05:1
BoxMinimalPerf.default 345 331 1.04:1
GridMinimalPerf.default 335 323 1.04:1
InputMinimalPerf.default 1266 1213 1.04:1
TextMinimalPerf.default 351 339 1.04:1
AttachmentSlotsPerf.default 1138 1110 1.03:1
CheckboxMinimalPerf.default 2728 2656 1.03:1
EmbedMinimalPerf.default 4096 3983 1.03:1
HeaderSlotsPerf.default 756 732 1.03:1
ProviderMergeThemesPerf.default 1683 1635 1.03:1
RefMinimalPerf.default 247 239 1.03:1
ChatMinimalPerf.default 615 604 1.02:1
FlexMinimalPerf.default 282 276 1.02:1
ItemLayoutMinimalPerf.default 1186 1168 1.02:1
MenuMinimalPerf.default 851 833 1.02:1
MenuButtonMinimalPerf.default 1571 1536 1.02:1
ReactionMinimalPerf.default 365 357 1.02:1
SplitButtonMinimalPerf.default 3688 3620 1.02:1
TableManyItemsPerf.default 1846 1812 1.02:1
VideoMinimalPerf.default 602 590 1.02:1
AccordionMinimalPerf.default 147 145 1.01:1
AvatarMinimalPerf.default 197 196 1.01:1
ButtonMinimalPerf.default 167 165 1.01:1
ButtonOverridesMissPerf.default 1641 1629 1.01:1
LayoutMinimalPerf.default 355 352 1.01:1
ListMinimalPerf.default 503 498 1.01:1
PopupMinimalPerf.default 566 558 1.01:1
SliderMinimalPerf.default 1573 1557 1.01:1
CustomToolbarPrototype.default 3783 3731 1.01:1
ToolbarMinimalPerf.default 914 903 1.01:1
TreeMinimalPerf.default 783 772 1.01:1
AlertMinimalPerf.default 258 258 1:1
AnimationMinimalPerf.default 406 404 1:1
DialogMinimalPerf.default 736 738 1:1
DividerMinimalPerf.default 352 351 1:1
ProviderMinimalPerf.default 963 965 1:1
DropdownManyItemsPerf.default 651 655 0.99:1
DropdownMinimalPerf.default 3030 3063 0.99:1
LabelMinimalPerf.default 376 380 0.99:1
ListWith60ListItems.default 630 637 0.99:1
StatusMinimalPerf.default 672 676 0.99:1
TextAreaMinimalPerf.default 478 482 0.99:1
CarouselMinimalPerf.default 449 457 0.98:1
ChatDuplicateMessagesPerf.default 269 274 0.98:1
ChatWithPopoverPerf.default 340 348 0.98:1
DatepickerMinimalPerf.default 5233 5336 0.98:1
ListCommonPerf.default 595 616 0.97:1
RosterPerf.default 1118 1154 0.97:1
PortalMinimalPerf.default 172 178 0.97:1
RadioGroupMinimalPerf.default 426 441 0.97:1
CardMinimalPerf.default 533 555 0.96:1
ImageMinimalPerf.default 358 373 0.96:1
LoaderMinimalPerf.default 657 682 0.96:1
ButtonSlotsPerf.default 518 544 0.95:1
SegmentMinimalPerf.default 333 350 0.95:1
HeaderMinimalPerf.default 336 359 0.94:1
ListNestedPerf.default 506 541 0.94:1

@Raghurk Raghurk merged commit 4e3c7cb into microsoft:master Jun 24, 2021
@msft-fluent-ui-bot
Copy link
Collaborator

🎉@fluentui/react-charting@v5.3.0 has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

🎉@fluentui/react-examples@v8.32.0 has been released which incorporates this pull request.:tada:

Handy links:

nojittip added a commit to nojittip/fluentui that referenced this pull request Jun 25, 2021
@nojittip
Add features to Line Chart (gaps, borders, line properties, etc.) (mi…
f7a72ba 
…crosoft#18665)

* add gaps, dotted lines and borders to line chart

* add example for line chart gaps

* Change files

* add option to hide non-active dots

(cherry picked from commit 4e3c7cb)
@nojittip nojittip mentioned this pull request Jun 25, 2021
Merged
2 tasks
Raghurk pushed a commit that referenced this pull request Jun 25, 2021
@nojittip
Cherry pick from Add features to Line Chart (gaps, borders, line prop…
b52f002 
…erties, etc.) #18665 (#18726)

* Add features to Line Chart (gaps, borders, line properties, etc.) (#18665)

* add gaps, dotted lines and borders to line chart

* add example for line chart gaps

* Change files

* add option to hide non-active dots

(cherry picked from commit 4e3c7cb)

* Change files
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.

None yet
5 participants
@nojittip @fabricteam @msft-fluent-ui-bot @Raghurk @miroslavstastny