Color Fill Bars Feature for Line Chart Component #14597

mergmiller · 2020-08-18T21:09:07Z

Pull request checklist

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

Description of changes

Adds color fill bar feature to line chart component. Users can opt for color or striped bars to indicate a range along the x-axis. Legend component has been updated to accommodate stripe patterns.

Focus areas to test

Line chart, legends

ghost · 2020-08-18T21:09:19Z

All CLA requirements met.

codesandbox-ci · 2020-08-18T21:42:33Z

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 952ac8d:

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 · 2020-08-18T21:51:23Z

Perf Analysis

No significant results to display.

All results

Scenario	Render type	7.0 Ticks	PR Ticks	Iterations
Avatar	mount	849	810	5000
BaseButton	mount	903	941	5000
Breadcrumb	mount	42054	42006	5000
ButtonNext	mount	595	555	5000
Checkbox	mount	1548	1673	5000
CheckboxBase	mount	1265	1283	5000
ChoiceGroup	mount	4998	5076	5000
ComboBox	mount	923	944	1000
CommandBar	mount	7682	7730	1000
ContextualMenu	mount	14677	14264	1000
DefaultButton	mount	1141	1144	5000
DetailsRow	mount	3724	3675	5000
DetailsRowFast	mount	3789	3667	5000
DetailsRowNoStyles	mount	3426	3405	5000
Dialog	mount	1575	1509	1000
DocumentCardTitle	mount	1840	1829	1000
Dropdown	mount	2616	2641	5000
FocusTrapZone	mount	1708	1728	5000
FocusZone	mount	1806	1883	5000
IconButton	mount	1726	1795	5000
Label	mount	339	343	5000
Layer	mount	2019	1985	5000
Link	mount	451	468	5000
MenuButton	mount	1488	1505	5000
MessageBar	mount	2087	2049	5000
Nav	mount	3291	3295	1000
OverflowSet	mount	1456	1402	5000
Panel	mount	1525	1467	1000
Persona	mount	841	845	1000
Pivot	mount	1424	1448	1000
PrimaryButton	mount	1314	1367	5000
Rating	mount	7673	7655	5000
SearchBox	mount	1273	1258	5000
Shimmer	mount	2605	2660	5000
Slider	mount	1503	1526	5000
SpinButton	mount	5088	5029	5000
Spinner	mount	418	412	5000
SplitButton	mount	3272	3182	5000
Stack	mount	512	508	5000
StackWithIntrinsicChildren	mount	1923	1915	5000
StackWithTextChildren	mount	5063	5091	5000
SwatchColorPicker	mount	10644	10529	5000
TagPicker	mount	2673	2900	5000
TeachingBubble	mount	51232	51043	5000
Text	mount	431	425	5000
TextField	mount	1416	1399	5000
ThemeProvider	mount	1643	1696	5000
ThemeProvider	virtual-rerender	638	665	5000
Toggle	mount	835	839	5000
button	mount	129	152	5000

Perf Analysis (Fluent)

Perf comparison

Status	Scenario	Fluent TPI	Fabric TPI	Ratio	Iterations	Ticks
🎯	Avatar.Fluent	0.46	0.49	0.94:1	2000	923
🦄	Button.Fluent	0.12	0.2	0.6:1	5000	610
🔧	Checkbox.Fluent	0.66	0.34	1.94:1	1000	660
🎯	Dialog.Fluent	0.16	0.23	0.7:1	5000	816
🔧	Dropdown.Fluent	3.07	0.46	6.67:1	1000	3067
🔧	Icon.Fluent	0.15	0.06	2.5:1	5000	749
🦄	Image.Fluent	0.08	0.12	0.67:1	5000	404
🔧	Slider.Fluent	1.65	0.36	4.58:1	1000	1646
🔧	Text.Fluent	0.07	0.04	1.75:1	5000	370
🦄	Tooltip.Fluent	0.12	17.68	0.01:1	5000	584

🔧 Needs work 🎯 On target 🦄 Amazing

Perf tests with no regressions

Scenario	Current PR Ticks	Baseline Ticks	Ratio
AlertMinimalPerf.default	324	0	Infinity:1
AnimationMinimalPerf.default	431	0	Infinity:1
AttachmentMinimalPerf.default	157	0	Infinity:1
AttachmentSlotsPerf.default	1163	0	Infinity:1
BoxMinimalPerf.default	379	0	Infinity:1
ButtonMinimalPerf.default	186	0	Infinity:1
ButtonOverridesMissPerf.default	1713	0	Infinity:1
ButtonSlotsPerf.default	615	0	Infinity:1
ButtonUseCssPerf.default	832	0	Infinity:1
ButtonUseCssNestingPerf.default	1133	0	Infinity:1
CardMinimalPerf.default	598	0	Infinity:1
ChatDuplicateMessagesPerf.default	428	0	Infinity:1
ChatMinimalPerf.default	686	0	Infinity:1
ChatWithPopoverPerf.default	486	0	Infinity:1
CheckboxMinimalPerf.default	2903	0	Infinity:1
DialogMinimalPerf.default	857	0	Infinity:1
DividerMinimalPerf.default	384	0	Infinity:1
DropdownManyItemsPerf.default	792	0	Infinity:1
DropdownMinimalPerf.default	3015	0	Infinity:1
EmbedMinimalPerf.default	1988	0	Infinity:1
FlexMinimalPerf.default	311	0	Infinity:1
FormMinimalPerf.default	435	0	Infinity:1
HeaderMinimalPerf.default	381	0	Infinity:1
ImageMinimalPerf.default	415	0	Infinity:1
InputMinimalPerf.default	1371	0	Infinity:1
ItemLayoutMinimalPerf.default	1310	0	Infinity:1
LabelMinimalPerf.default	468	0	Infinity:1
LayoutMinimalPerf.default	421	0	Infinity:1
ListCommonPerf.default	668	0	Infinity:1
ListMinimalPerf.default	524	0	Infinity:1
ListNestedPerf.default	600	0	Infinity:1
LoaderMinimalPerf.default	747	0	Infinity:1
MenuMinimalPerf.default	877	0	Infinity:1
MenuButtonMinimalPerf.default	1637	0	Infinity:1
PopupMinimalPerf.default	729	0	Infinity:1
PortalMinimalPerf.default	170	0	Infinity:1
ProviderMergeThemesPerf.default	2148	0	Infinity:1
ProviderMinimalPerf.default	1064	0	Infinity:1
RadioGroupMinimalPerf.default	459	0	Infinity:1
ReactionMinimalPerf.default	422	0	Infinity:1
SegmentMinimalPerf.default	369	0	Infinity:1
SkeletonMinimalPerf.default	433	0	Infinity:1
SliderMinimalPerf.default	1607	0	Infinity:1
SplitButtonMinimalPerf.default	3864	0	Infinity:1
TableMinimalPerf.default	466	0	Infinity:1
TextMinimalPerf.default	379	0	Infinity:1
TextAreaMinimalPerf.default	526	0	Infinity:1
CustomToolbarPrototype.default	4046	0	Infinity:1
ToolbarMinimalPerf.default	976	0	Infinity:1
TooltipMinimalPerf.default	836	0	Infinity:1
TreeMinimalPerf.default	895	0	Infinity:1
TreeWith60ListItems.default	225	0	Infinity:1
VideoMinimalPerf.default	646	0	Infinity:1
Avatar.Fluent	923	0	Infinity:1
Button.Fluent	610	0	Infinity:1
Checkbox.Fluent	660	0	Infinity:1
Dropdown.Fluent	3067	0	Infinity:1
Icon.Fluent	749	0	Infinity:1
Image.Fluent	404	0	Infinity:1
Slider.Fluent	1646	0	Infinity:1
Text.Fluent	370	0	Infinity:1
Tooltip.Fluent	584	0	Infinity:1
TableManyItemsPerf.default	2204	1	2204:1
ListWith60ListItems.default	986	1	986:1
HeaderSlotsPerf.default	843	1	843:1
Dialog.Fluent	816	1	816:1
StatusMinimalPerf.default	748	1	748:1
IconMinimalPerf.default	729	1	729:1
AvatarMinimalPerf.default	494	1	494:1
CarouselMinimalPerf.default	456	1	456:1
GridMinimalPerf.default	372	1	372:1
RefMinimalPerf.default	271	1	271:1
AccordionMinimalPerf.default	165	1	165:1

size-auditor · 2020-08-18T21:58:10Z

Asset size changes

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

Baseline commit: 4ed02fee9163038991cf09fd0517e517055a27ef (build)

…olorFillBarFeature

packages/charting/src/components/LineChart/LineChart.base.tsx

ecraig12345 · 2020-08-28T00:37:14Z

@Raghurk Can you please review?

…olorFillBarFeature

mergmiller · 2020-09-03T14:05:32Z

I've updated the snapshot test so that all tests pass locally. However, the Vertical Line Chart snapshot still fails. Please advise, @Raghurk , @ecraig12345. Thank you!

packages/charting/src/components/LineChart/LineChart.base.tsx

packages/charting/src/components/LineChart/LineChart.types.ts

packages/charting/src/components/LineChart/LineChart.base.tsx

packages/charting/src/components/Legends/Legends.styles.ts

packages/charting/src/components/LineChart/LineChart.base.tsx

mergmiller · 2020-10-01T18:52:18Z

Updated base, @khmakoto

mergmiller · 2020-10-05T20:15:12Z

Hi, @Raghurk. Since this was approved, when will it be merged in? Also, it says that I do not have a yarn change file update and am receiving this error when running yarn change:

ecraig12345 · 2020-10-05T20:57:38Z

You need to run yarn to install updated dependencies, then try yarn change again.

ecraig12345 · 2020-10-05T21:22:58Z

Looks like you need to update snapshots. cd to the charting package folder then run yarn update-snapshots.

msft-github-bot · 2020-10-05T23:15:30Z

Hello @ecraig12345!

Because this pull request has the AutoMerge label, I will be glad to assist with helping to merge this pull request once all check-in policies pass.

p.s. you can customize the way I help with merging this pull request, such as holding this pull request until a specific person approves. Simply @mention me (`@msft-github-bot`) and give me an instruction to get started! Learn more here.

mergmiller · 2020-10-07T16:26:17Z

Hi, @ecraig12345! Do you know why these tasks haven't reported back and why one is still queued?

ecraig12345 · 2020-10-07T17:18:15Z

There's been an ongoing issue the past couple days with Azure Devops builds not getting queued by GitHub PRs. I've hopefully worked around it now but your last push may have happened to be at one of the times it was broken. In general you can trigger new builds by either closing and reopening the PR or commenting /azp run (without the code formatting).

Also the "Screener for N*" check shouldn't be running for this branch and you can ignore it (we're working on removing it).

…rFillBarFeature

msft-github-bot · 2020-10-08T12:23:46Z

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

Handy links:

msft-github-bot · 2020-10-08T12:23:49Z

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

Handy links:

…15660) Co-authored-by: mergmiller <[email protected]>

…omponent (microsoft#15660) Co-authored-by: mergmiller <[email protected]>

mergmiller added 4 commits August 17, 2020 14:16

Added overlays and updated legend

d1ebfc1

Updated variable names

47443b1

Updated overlay name to color fill bars

559a523

Change files

aa4f51c

mergmiller requested a review from Raghurk as a code owner August 18, 2020 21:09

msft-github-bot added the Package: charting label Aug 18, 2020

msft-github-bot assigned khmakoto Aug 18, 2020

Merge branch 'master' into ColorFillBarFeature

0dc796b

mergmiller added 2 commits August 24, 2020 15:17

Merge branch 'master' of https://github.com/microsoft/fluentui into C…

8564d2e

…olorFillBarFeature

Merge branch 'master' of https://github.com/microsoft/fluentui into C…

833f16b

…olorFillBarFeature

ecraig12345 reviewed Aug 28, 2020

View reviewed changes

packages/charting/src/components/LineChart/LineChart.base.tsx Outdated Show resolved Hide resolved

ecraig12345 closed this Aug 28, 2020

ecraig12345 reopened this Aug 28, 2020

mergmiller and others added 6 commits August 31, 2020 10:41

Removed eslint comment

7b06a4b

Merge branch 'master' into ColorFillBarFeature

77bb0f6

Updated snapshot

49934fc

Merge branch 'master' of https://github.com/microsoft/fluentui into C…

b1a94f9

…olorFillBarFeature

Merge branch

d713bef

Change files

4df5299

mergmiller requested a review from ecraig12345 September 3, 2020 20:07

shivasai09 suggested changes Sep 4, 2020

View reviewed changes

msft-github-bot added the Needs: Author Feedback label Sep 4, 2020

shivasai09 reviewed Sep 4, 2020

View reviewed changes

packages/charting/src/components/LineChart/LineChart.base.tsx Show resolved Hide resolved

shivasai09 mentioned this pull request Sep 4, 2020

deprecate prop showYAxisGridLines in AreaChart #14873

Closed

mergmiller requested review from lorejoh12, miroslavstastny, pompomon, wsmd and xugao as code owners October 1, 2020 18:49

mergmiller changed the base branch from master to 7.0 October 1, 2020 18:50

Raghurk approved these changes Oct 1, 2020

View reviewed changes

Merge branch '7.0' into ColorFillBarFeature

8c3de7c

Change files

34363f4

updated snapshots

cf36277

ecraig12345 added the AutoMerge label Oct 5, 2020

ecraig12345 closed this Oct 7, 2020

ecraig12345 reopened this Oct 7, 2020

mergmiller added 2 commits October 7, 2020 10:49

Merge branch '7.0' of https://github.com/microsoft/fluentui into Colo…

566f9d4

…rFillBarFeature

Updated snapshot

952ac8d

msft-github-bot removed the AutoMerge label Oct 7, 2020

ecraig12345 merged commit 4c6a2e3 into microsoft:7.0 Oct 7, 2020

mergmiller deleted the ColorFillBarFeature branch October 7, 2020 21:10

ecraig12345 mentioned this pull request Oct 22, 2020

React-Charting: Cherry pick #14597, Color Fill Bars Feature for Line Chart Component #15660

Merged

ecraig12345 pushed a commit that referenced this pull request Oct 23, 2020

Cherry pick #14597, Color Fill Bars Feature for Line Chart Component (#…

02adca2

…15660) Co-authored-by: mergmiller <[email protected]>

SethDonohue pushed a commit to SethDonohue/fluentui that referenced this pull request Nov 2, 2020

Cherry pick microsoft#14597, Color Fill Bars Feature for Line Chart C…

b07ac5f

…omponent (microsoft#15660) Co-authored-by: mergmiller <[email protected]>

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Color Fill Bars Feature for Line Chart Component #14597

Color Fill Bars Feature for Line Chart Component #14597

mergmiller commented Aug 18, 2020 •

edited

Loading

ghost commented Aug 18, 2020 •

edited by ghost

Loading

codesandbox-ci bot commented Aug 18, 2020 •

edited

Loading

msft-github-bot commented Aug 18, 2020 •

edited

Loading

size-auditor bot commented Aug 18, 2020 •

edited

Loading

ecraig12345 commented Aug 28, 2020

mergmiller commented Sep 3, 2020

mergmiller commented Oct 1, 2020

mergmiller commented Oct 5, 2020

ecraig12345 commented Oct 5, 2020

ecraig12345 commented Oct 5, 2020

msft-github-bot commented Oct 5, 2020

mergmiller commented Oct 7, 2020

ecraig12345 commented Oct 7, 2020

msft-github-bot commented Oct 8, 2020

msft-github-bot commented Oct 8, 2020

Color Fill Bars Feature for Line Chart Component #14597

Color Fill Bars Feature for Line Chart Component #14597

Conversation

mergmiller commented Aug 18, 2020 • edited Loading

Pull request checklist

Description of changes

Focus areas to test

ghost commented Aug 18, 2020 • edited by ghost Loading

codesandbox-ci bot commented Aug 18, 2020 • edited Loading

msft-github-bot commented Aug 18, 2020 • edited Loading

Perf Analysis

Perf Analysis (Fluent)

size-auditor bot commented Aug 18, 2020 • edited Loading

Asset size changes

ecraig12345 commented Aug 28, 2020

mergmiller commented Sep 3, 2020

mergmiller commented Oct 1, 2020

mergmiller commented Oct 5, 2020

ecraig12345 commented Oct 5, 2020

ecraig12345 commented Oct 5, 2020

msft-github-bot commented Oct 5, 2020

p.s. you can customize the way I help with merging this pull request, such as holding this pull request until a specific person approves. Simply @mention me (@msft-github-bot) and give me an instruction to get started! Learn more here.

mergmiller commented Oct 7, 2020

ecraig12345 commented Oct 7, 2020

msft-github-bot commented Oct 8, 2020

msft-github-bot commented Oct 8, 2020

mergmiller commented Aug 18, 2020 •

edited

Loading

ghost commented Aug 18, 2020 •

edited by ghost

Loading

codesandbox-ci bot commented Aug 18, 2020 •

edited

Loading

msft-github-bot commented Aug 18, 2020 •

edited

Loading

size-auditor bot commented Aug 18, 2020 •

edited

Loading

p.s. you can customize the way I help with merging this pull request, such as holding this pull request until a specific person approves. Simply @mention me (`@msft-github-bot`) and give me an instruction to get started! Learn more here.