feat(sunburst): add innerRadius and renderRootNode props #2696
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
@uson1x, I reviewed the previous PR as it already came from another PR 😅 |
|
As the previous one seems inactive, we should probably go for yours instead. |
0b5ec4a to
ed8ed35
Compare
| id = defaultProps.id, | ||
| value = defaultProps.value, | ||
| innerRadius = defaultProps.innerRadius, | ||
| renderRootNode = defaultProps.renderRootNode, |
There was a problem hiding this comment.
I don't think we should use the same rendering as for the arcs for the root node, it generates a shape that doesn't really make sense:
Which means it cannot have a color, interactivity doesn't work...
There was a problem hiding this comment.
I think there was a bug, innerRadius was used instead of innerRadiusOffset
here
this resulted in 0.4 radius.
Fixed now, but, please, let me know if you implied a different approach / mode edits
There was a problem hiding this comment.
It's a bit better, but I think using an arc doesn't work very well tbh.
When enabling/disabling the root node, we can clearly see that the shape for the root node isn't a circle but more like a donut, since it's an arc of 360 degrees.
While the donut shape isn't necessarily critical, the impact it has on the position of the root node label is IMHO, the text should be at the center.
An option (and a bit of a hack) would be to adjust computeArcCenter so that it handles arcs of 360 deg with an inner radius of 0 differently (and arcLabelsRadiusOffset should probably be ignored for this case). That's probably the easiest option.
There was a problem hiding this comment.
If we go for this approach, we should test the position of the text in the root node, and also make sure that a ring of 360 deg still behave as before.
ed8ed35 to
38f6979
Compare
|
@uson1x is attempting to deploy a commit to the plouc's projects Team on Vercel. A member of the Team first needs to authorize it. |
38f6979 to
3817b8a
Compare
3817b8a to
5a55c73
Compare
| id = defaultProps.id, | ||
| value = defaultProps.value, | ||
| innerRadius = defaultProps.innerRadius, | ||
| renderRootNode = defaultProps.renderRootNode, |
There was a problem hiding this comment.
I think there was a bug, innerRadius was used instead of innerRadiusOffset
here
this resulted in 0.4 radius.
Fixed now, but, please, let me know if you implied a different approach / mode edits
|
|
||
| const innerRadiusOffset = radius * Math.min(innerRadius, 1) | ||
|
|
||
| const maxDepth = Math.max(...sortedNodes.map(n => n.depth)) |
There was a problem hiding this comment.
As nodes are already sorted, we can simply get the depth of the last one, should be faster for larger datasets. We just need to handle the case where there are no nodes.
|
@uson1x, I think you forgot to run |
Hey
Thank you for your great work on this library.
I saw a few innerRadius sunburst PRs and decided to make a fresh version with a storyboard for you.
Please, let me know if you need to change anything in order to get this PR to be ready to be merged. I'd be happy to rewrite the PR as needed.
Right now we are pressed to use a custom version of nivo because in our project we need to control the innerRadius, but it would be so much easier to work with if it was in the main repository.
Thank you for taking a look at it!
Fixes #1649
PS: to give credit, this is based on #2219