Fix/issue 895 by narinluangrath · Pull Request #1118 · FormidableLabs/victory

narinluangrath · 2018-09-19T21:15:19Z

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 · 2018-09-19T21:23:14Z

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

boygirl · 2018-09-20T04:57:28Z

package.json

-  "sideEffects": false
+  "sideEffects": false,
+  "dependencies": {
+    "circle2": "^1.1.1"


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

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.

Assuming we did want this dep, isn't it supposed to be in https://github.com/FormidableLabs/victory/blob/master/packages/victory-bar/package.json ?

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

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

narinluangrath · 2018-09-20T16:15:24Z

packages/victory-bar/src/bar.js

-    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


*three ways

narinluangrath · 2018-09-25T21:59:54Z

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?

boygirl

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

narinluangrath · 2018-09-25T23:03:23Z

Makes sense to me 👍Thanks for the feedback.

narinluangrath · 2018-09-30T06:40:55Z

packages/victory-bar/src/geometry-helper-methods.js

-  this.x = x;
-  this.y = y;
-}
+const Point = function (x, y) {


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?

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

narinluangrath · 2018-10-01T05:48:06Z

@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 · 2018-10-01T16:49:30Z

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

boygirl · 2018-10-05T02:50:09Z

@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 · 2018-10-05T02:56:19Z

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

- 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 · 2018-10-15T16:15:39Z

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

- 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 · 2018-10-16T04:26:32Z

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 · 2018-10-17T23:23:21Z

Moved to https://github.com/FormidableLabs/victory/tree/fix/issue-895-1119

boygirl · 2018-10-24T23:44:35Z

@narinluangrath closing this one in favor of #1158

Narin Luangrath added 5 commits September 18, 2018 10:58

Add variable names to bar path string

3d1309e

Solve edge case where borderRadius.bottom = 0

2dc961c

Solve issue for vertical bars

d6e892d

Finish getVerticalBarPath, add comments

853f575

Remove edit to victory-bar story

112f9c7

boygirl reviewed Sep 20, 2018

View reviewed changes

narinluangrath commented Sep 20, 2018

View reviewed changes

remove circle2 dependency, add helper methods to replace it

8da7a1d

boygirl reviewed Sep 25, 2018

View reviewed changes

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

Narin Luangrath added 2 commits September 29, 2018 21:35

Create helper geometry functions to reduce deplicated code in bar.js

63bfe3c

Lint code

8ef0ac7

narinluangrath commented Sep 30, 2018

View reviewed changes

narinluangrath added the in progress label Oct 1, 2018

Narin Luangrath added 4 commits October 8, 2018 22:30

Move path calculations to separate file

f086dd1

Fix border artifact for horizontal bars

d79a502

- Translate code from getVerticalBarPath to horizontal case - Add Circle.ProtoType.solveY helper method

Change propType for cornerRadius

a6ae3f8

- Allow topLeft, topRight, bottomLeft, bottomRight fields - Still need to make it functional

Narin Luangrath added 3 commits October 15, 2018 19:44

Incorporate topLeft, topRight, etc. cornerRadius to horizontal bar

5c097cd

- 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

Add cornerRadius topLeft, topRight etc to Polar Bars

120f3e1

Change Z to z to pass tests

10d71d8

boygirl added 3 commits October 23, 2018 22:10

working polar paths

9548a3e

clean up

3032bea

merge master

77ada90

boygirl closed this Oct 24, 2018

boygirl deleted the fix/issue-895 branch November 9, 2018 23:37

Conversation

narinluangrath commented Sep 19, 2018

Uh oh!

narinluangrath commented Sep 19, 2018

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

narinluangrath commented Sep 25, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

boygirl left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

narinluangrath commented Sep 25, 2018

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

narinluangrath commented Oct 1, 2018

Uh oh!

boygirl commented Oct 1, 2018

Uh oh!

boygirl commented Oct 5, 2018

Uh oh!

narinluangrath commented Oct 5, 2018

Uh oh!

narinluangrath commented Oct 15, 2018

Uh oh!

narinluangrath commented Oct 16, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

narinluangrath commented Oct 17, 2018

Uh oh!

boygirl commented Oct 24, 2018

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

narinluangrath commented Sep 25, 2018 •

edited

Loading

narinluangrath commented Oct 16, 2018 •

edited

Loading