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

Fix/issue 895 #1118

Closed
wants to merge 18 commits into from
Closed

Fix/issue 895 #1118

wants to merge 18 commits into from

Conversation

narinluangrath
Copy link
Contributor

What's new:

  • Broke apart the bar svg path into smaller pieces
  • Fixed issue 895 for vertical bars. Will add fix for horizontal bars if this code is approved.

Other comments:

  • Maybe consider breaking up the code into smaller sub-functions?
  • I'm looking for suggestions to improve my code, I know it's a bit hard to follow!

@narinluangrath
Copy link
Contributor Author

Ack, I forgot to run the formatter before I pushed. I'll push again later.

package.json Outdated
"sideEffects": false
"sideEffects": false,
"dependencies": {
"circle2": "^1.1.1"
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I would really prefer not to take this dependency. Can you get it done without?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I can give it a try! Do you have some general guidelines on whether or not to take a dependency, like a best practices guide? I didn't see anything about that in the formidable-playbook.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, keeping it in the main package.json would add it to every package.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for pointing that out! I'll uninstall it from the main package.json.

const topRightArc = `A ${topArc}, ${intrxnRight.x}, ${intrxnRight.y}`;
const bottomRightArc = `A ${bottomArc}, ${x1 - cornerRadius.bottom}, ${y0}`;
const end = "z";
// There are four ways the verticalBarPath can self-intersect
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

*three ways

@narinluangrath
Copy link
Contributor Author

narinluangrath commented Sep 25, 2018

Do Not Merge! Just pushing to get feedback.

I removed the circle2 dependency with my own circle module and wrote tests for that module.

I am considering some changes to make getVerticalBarPath less huge:

  • turn hasSelfIntersectingPath into a separate helper function
  • turn each of the three cases into it's own helper function

I ready though the testing section of CONTRIBUTING.md but I'm still not sure the best way to test the change. Maybe add a very small bar chart to stories/victory-bar.js?

Copy link
Contributor

@boygirl boygirl left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There are a lot of repeated patterns in your three cases that I think can be refactored into small reusable functions. You can make this a lot shorter by only re-assigning variables that are different in the three cases. Ternary operators might help, too.

packages/victory-bar/src/bar.js Outdated Show resolved Hide resolved
packages/victory-bar/src/bar.js Outdated Show resolved Hide resolved
packages/victory-bar/src/bar.js Outdated Show resolved Hide resolved
@narinluangrath
Copy link
Contributor Author

Makes sense to me 👍Thanks for the feedback.

this.x = x;
this.y = y;
}
const Point = function (x, y) {
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Writing function Point(x, y) results in ESLint error func-style
Writing const Point = function (x, y) results in ESLint error no-invalid-this
Which is preferred?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

const Point = (x, y) => ... should pass our linting rules. Otherwise, prefer function Point(x, y) and add an exception for func-style

@narinluangrath
Copy link
Contributor Author

@boygirl Would I be a good idea to solve issue #1119 in this PR/branch as well? It would be kinda strange to solve issue #895, and then immediately edit the same code to solve #1119. Let me know what you think of changes, and if it looks good to you, I can apply the fix to horizontal bars and solve #1119.

@boygirl
Copy link
Contributor

boygirl commented Oct 1, 2018

@narinluangrath yes, I agree those changes make sense together.

@boygirl
Copy link
Contributor

boygirl commented Oct 5, 2018

@narinluangrath to clarify, yes, please do add #1119 into this ticket. I also think it makes sense to move these path calculations into a separate file since they're getting so lengthy. Maybe path-helpers?

@narinluangrath
Copy link
Contributor Author

@boygirl Roger that, will add #1119 solution and path-helpers file in next commits.

Narin Luangrath added 4 commits October 8, 2018 22:30
- Translate code from getVerticalBarPath to horizontal case
- Add Circle.ProtoType.solveY helper method
- Allow topLeft, topRight, bottomLeft, bottomRight fields
- Still need to make it functional
- modify getCornerRadius helper function to look for topLeft, topRight (not just top)
- create helper function getVerticalBarPoints to make getVerticalBarPath function smaller
- add temporary solution for getHorizontalBarPath and getPolarBarPath (see TODO)
@narinluangrath
Copy link
Contributor Author

Going to push fix after work today! Code is done, just need to pass linting rules.

Narin Luangrath added 3 commits October 15, 2018 19:44
- Add temporary solution for getVerticalPolarBar since it normally doesn't accept topLeft, topRight, etc.
- Change cornerRadius function to satisfy linter
- Try to change getVerticalBarPoints to satisfy linter
@narinluangrath
Copy link
Contributor Author

narinluangrath commented Oct 16, 2018

Gurrr merge conflict. I probably should have seen this coming, since most of the conflict is caused by my own code from a previously merged PR ... going to rebase and try again.

@narinluangrath
Copy link
Contributor Author

@boygirl
Copy link
Contributor

boygirl commented Oct 24, 2018

@narinluangrath closing this one in favor of #1158

@boygirl boygirl closed this Oct 24, 2018
@boygirl boygirl deleted the fix/issue-895 branch November 9, 2018 23:37
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants