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.

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

Charting: Vertical stacked bar chart minor changes including uncaught type error issue fix. #15447

Conversation

jameelakowsar
Copy link
Contributor

@jameelakowsar jameelakowsar commented Oct 9, 2020

Pull request checklist

Description of changes

Vertical stacked bar chart.

  1. 'Uncaught type error' issue fixed when click event triggers on bars.
  2. Adjusted margin props to the cartesian/specific charts.
  3. Updated below conditions as like previous PR: Vertical stacked bar chart combined callout and other tweaks #14912
    • Non zero bars condition added
    • Changed 'data-is-focusable' param to undefined instead of false.
    • Ref's data updated.
  4. Margins condition updated. Now 0 value can be accepted.
  5. Added description(default prop values) to the margins prop

Note: As Cartesian component consumed by other charts, Due to small change in cartesian, cross checked all other charts and added screenshots.

Focus areas to test

Vertical stacked bar chart
Vertical bar chart
Area chart
Line chart

After fix

margins: {
left: 45,
right: 30
}

Vertical stacked bar chart

image

Vertical stacked bar chart with RTL

image

margins: {{
left: 45,
right: 30
}}

Vertical bar chart

image

Vertical bar chart with RTL

image

No margins given - It can take default values left:40, right: 20

Area chart

image

Area chart with RTL

image

Line chart

image

Line chart with RTL

image

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

Jameela Kowsar Shaik (Zen3 Infosolutions America Inc) added 3 commits October 9, 2020 20:58
@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 Oct 9, 2020
@codesandbox-ci
Copy link

codesandbox-ci bot commented Oct 9, 2020

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 3cc6329:

Sandbox Source
Fluent UI Button Configuration
codesandbox-react-template Configuration
codesandbox-react-next-template Configuration
codesandbox-react-northstar-template Configuration

@msft-github-bot
Copy link
Contributor

msft-github-bot commented Oct 9, 2020

Perf Analysis

No significant results to display.

All results

Scenario Render type 7.0 Ticks PR Ticks Iterations Status
Avatar mount 855 874 5000
BaseButton mount 931 893 5000
Breadcrumb mount 42574 42579 5000
ButtonNext mount 687 655 5000
Checkbox mount 1629 1558 5000
CheckboxBase mount 1359 1273 5000
ChoiceGroup mount 5008 4996 5000
ComboBox mount 964 966 1000
CommandBar mount 7936 8073 1000
ContextualMenu mount 15783 16581 1000
DefaultButton mount 1137 1164 5000
DetailsRow mount 3616 3710 5000
DetailsRowFast mount 3869 3872 5000
DetailsRowNoStyles mount 3432 3566 5000
Dialog mount 1554 1518 1000
DocumentCardTitle mount 1806 1899 1000
Dropdown mount 2633 2657 5000
FocusTrapZone mount 1735 1778 5000
FocusZone mount 1851 1813 5000
IconButton mount 1787 1782 5000
Label mount 339 363 5000
Layer mount 1972 1998 5000
Link mount 485 460 5000
MenuButton mount 1474 1461 5000
MessageBar mount 2104 2111 5000
Nav mount 3409 3371 1000
OverflowSet mount 1457 1477 5000
Panel mount 1483 1499 1000
Persona mount 911 888 1000
Pivot mount 1455 1424 1000
PrimaryButton mount 1348 1290 5000
Rating mount 7809 7747 5000
SearchBox mount 1298 1283 5000
Shimmer mount 2596 2682 5000
Slider mount 1590 1619 5000
SpinButton mount 5129 5191 5000
Spinner mount 425 446 5000
SplitButton mount 3202 3318 5000
Stack mount 523 499 5000
StackWithIntrinsicChildren mount 1634 1594 5000
StackWithTextChildren mount 4789 4785 5000
SwatchColorPicker mount 10653 10727 5000
TagPicker mount 2764 2806 5000
TeachingBubble mount 51721 51849 5000
Text mount 457 440 5000
TextField mount 1439 1491 5000
ThemeProvider mount 1783 1722 5000
ThemeProvider virtual-rerender 631 640 5000
Toggle mount 882 867 5000
button mount 129 123 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 911
🦄 Button.Fluent 0.12 0.2 0.6:1 5000 597
🔧 Checkbox.Fluent 0.69 0.35 1.97:1 1000 685
🎯 Dialog.Fluent 0.16 0.23 0.7:1 5000 820
🔧 Dropdown.Fluent 3.01 0.48 6.27:1 1000 3008
🔧 Icon.Fluent 0.14 0.06 2.33:1 5000 725
🦄 Image.Fluent 0.08 0.12 0.67:1 5000 404
🔧 Slider.Fluent 1.61 0.36 4.47:1 1000 1608
🔧 Text.Fluent 0.07 0.03 2.33:1 5000 371
🦄 Tooltip.Fluent 0.12 16.89 0.01:1 5000 575

🔧 Needs work     🎯 On target     🦄 Amazing

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
AccordionMinimalPerf.default 161 0 Infinity:1
AlertMinimalPerf.default 311 0 Infinity:1
AnimationMinimalPerf.default 416 0 Infinity:1
AttachmentMinimalPerf.default 173 0 Infinity:1
AttachmentSlotsPerf.default 1201 0 Infinity:1
BoxMinimalPerf.default 391 0 Infinity:1
ButtonMinimalPerf.default 190 0 Infinity:1
ButtonOverridesMissPerf.default 1749 0 Infinity:1
ButtonSlotsPerf.default 611 0 Infinity:1
ButtonUseCssPerf.default 839 0 Infinity:1
ButtonUseCssNestingPerf.default 1132 0 Infinity:1
CardMinimalPerf.default 603 0 Infinity:1
CarouselMinimalPerf.default 483 0 Infinity:1
ChatDuplicateMessagesPerf.default 453 0 Infinity:1
ChatMinimalPerf.default 659 0 Infinity:1
ChatWithPopoverPerf.default 479 0 Infinity:1
CheckboxMinimalPerf.default 2945 0 Infinity:1
DialogMinimalPerf.default 843 0 Infinity:1
DividerMinimalPerf.default 414 0 Infinity:1
DropdownManyItemsPerf.default 780 0 Infinity:1
DropdownMinimalPerf.default 2978 0 Infinity:1
EmbedMinimalPerf.default 1985 0 Infinity:1
FlexMinimalPerf.default 329 0 Infinity:1
FormMinimalPerf.default 457 0 Infinity:1
GridMinimalPerf.default 375 0 Infinity:1
HeaderMinimalPerf.default 426 0 Infinity:1
HeaderSlotsPerf.default 827 0 Infinity:1
InputMinimalPerf.default 1412 0 Infinity:1
ItemLayoutMinimalPerf.default 1351 0 Infinity:1
LabelMinimalPerf.default 442 0 Infinity:1
LayoutMinimalPerf.default 470 0 Infinity:1
ListCommonPerf.default 700 0 Infinity:1
ListMinimalPerf.default 531 0 Infinity:1
ListNestedPerf.default 587 0 Infinity:1
ListWith60ListItems.default 924 0 Infinity:1
LoaderMinimalPerf.default 742 0 Infinity:1
MenuMinimalPerf.default 901 0 Infinity:1
MenuButtonMinimalPerf.default 1600 0 Infinity:1
PopupMinimalPerf.default 721 0 Infinity:1
PortalMinimalPerf.default 183 0 Infinity:1
ProviderMergeThemesPerf.default 2176 0 Infinity:1
ProviderMinimalPerf.default 1057 0 Infinity:1
RadioGroupMinimalPerf.default 477 0 Infinity:1
ReactionMinimalPerf.default 430 0 Infinity:1
RefMinimalPerf.default 257 0 Infinity:1
SegmentMinimalPerf.default 366 0 Infinity:1
SkeletonMinimalPerf.default 441 0 Infinity:1
SliderMinimalPerf.default 1593 0 Infinity:1
SplitButtonMinimalPerf.default 3894 0 Infinity:1
StatusMinimalPerf.default 729 0 Infinity:1
IconMinimalPerf.default 675 0 Infinity:1
TableManyItemsPerf.default 2283 0 Infinity:1
TableMinimalPerf.default 436 0 Infinity:1
TextMinimalPerf.default 372 0 Infinity:1
CustomToolbarPrototype.default 4004 0 Infinity:1
TooltipMinimalPerf.default 836 0 Infinity:1
TreeMinimalPerf.default 897 0 Infinity:1
TreeWith60ListItems.default 199 0 Infinity:1
VideoMinimalPerf.default 660 0 Infinity:1
Avatar.Fluent 911 0 Infinity:1
Button.Fluent 597 0 Infinity:1
Checkbox.Fluent 685 0 Infinity:1
Dialog.Fluent 820 0 Infinity:1
Dropdown.Fluent 3008 0 Infinity:1
Icon.Fluent 725 0 Infinity:1
Image.Fluent 404 0 Infinity:1
Slider.Fluent 1608 0 Infinity:1
Text.Fluent 371 0 Infinity:1
Tooltip.Fluent 575 0 Infinity:1
ToolbarMinimalPerf.default 991 1 991:1
TextAreaMinimalPerf.default 534 1 534:1
AvatarMinimalPerf.default 501 1 501:1
ImageMinimalPerf.default 401 1 401:1

@size-auditor
Copy link

size-auditor bot commented Oct 9, 2020

Asset size changes

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

Baseline commit: c92c7c4caa7b3f97fc1b7198ec603bd6317ac851 (build)

@mbest
Copy link
Member

mbest commented Oct 9, 2020

@dzearing Why is the "Charting" label no longer applied automatically?

@mbest
Copy link
Member

mbest commented Oct 9, 2020

@jameelakowsar I will test these changes against our code and let know what works or still doesn't.

@dzearing
Copy link
Member

dzearing commented Oct 9, 2020

@ecraig12345 I think the answer to @mbest question above is that the bot is perhaps looking only at target=master PRs? But i'm not sure.

@ecraig12345
Copy link
Member

Yeah it looks like the bot only considers master PRs for path-based labeling, and I don't see an option to consider other branches unfortunately.

@ecraig12345
Copy link
Member

Oh actually, I take that back. The way that the configuration works for this feature is a bit weird, and I think we need to update it to ignore changes to react-examples when considering what labels to use. I'll do that now.

@mbest
Copy link
Member

mbest commented Oct 11, 2020

I've verified that this fixes the following regressions:

  • script error from _redirectToUrl: Uncaught TypeError: Cannot read property 'props' of undefined
  • x-axis position ignores bottom margin (it's only in the right place when margin is 35px)

There are still these issues:

  • zero-value data isn't skipped
  • a zero right margin is ignored (defaults to 20px)
  • left margin of x axis is always 40px (ignores provided margin; the length of the axis lines is correct though, just the position is wrong)

@mbest
Copy link
Member

mbest commented Oct 11, 2020

image

As shown above, the translate value should match the left margin, but is always 40 instead.

@mbest
Copy link
Member

mbest commented Oct 11, 2020

In RTL mode, the right margin isn't handled correctly. Comparing the svg width to the second translate value, they should be different by the amount of the right margin (36px in this case), but instead they are 72px different.

image

Here's the same chart before the changes in #15061

image

@jameelakowsar
Copy link
Contributor Author

I've verified that this fixes the following regressions:

  • script error from _redirectToUrl: Uncaught TypeError: Cannot read property 'props' of undefined
  • x-axis position ignores bottom margin (it's only in the right place when margin is 35px)

There are still these issues:

  • zero-value data isn't skipped
  • a zero right margin is ignored (defaults to 20px)
  • left margin of x axis is always 40px (ignores provided margin; the length of the axis lines is correct though, just the position is wrong)

What meant by 'zero-value' data?
For remaining, Please check email once.
Test link provided in PR description.

@jameelakowsar
Copy link
Contributor Author

@mbest ,

If all good, I will make this PR to open. Confirm your status.

@mbest
Copy link
Member

mbest commented Oct 13, 2020

@jameelakowsar

What meant by 'zero-value' data?

Before your "refactor" I had added this line to filter our zero-value data:

    const nonZeroBars = singleChartData.chartData.filter(point => point.data > 0);

I see from looking through the _createBar function that you undid most of the improvements I made, including that one. Additionally, it's back to using refArrayIndexNumber which is broken if the stacks don't all have the same number of data items. You also undid some code cleanup I did. For example I had:

    const xPoint = xBarScale(isNumeric ? (singleChartData.xAxisPoint as number) : indexNumber);

which you changed back to (and moved back into the loop even though it doesn't need to be there):

        let xPoint;
        if (this._isNumeric) {
          xPoint = xBarScale(singleChartData.xAxisPoint as number);
        } else {
          xPoint = xBarScale(indexNumber);
        }

You also undid the normalization of the props that are passed to the callout handlers.

You also undid the code that makes sure that data-is-focusable isn't set to a value of false, which breaks focus issues.

@jameelakowsar jameelakowsar marked this pull request as ready for review October 14, 2020 12:02
@Raghurk Raghurk merged commit 8828fdc into microsoft:7.0 Oct 14, 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:

ecraig12345 pushed a commit that referenced this pull request Oct 26, 2020
SethDonohue pushed a commit to SethDonohue/fluentui that referenced this pull request Nov 2, 2020
@ecraig12345 ecraig12345 removed the needs cherry-pick Temporary label for PRs which may need to be cherry-picked to master label Jan 26, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

9 participants