-
-
Notifications
You must be signed in to change notification settings - Fork 1.9k
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
Add marker.cornerradius
to treemap
#6351
Conversation
wow that looks great! Any chance we could get this on bars? :) #2196 is a long-standing one... Just need to make sure it's only the top-most bar in a stack. |
Yes we are paving the way for bars here. But that should be a separate PR. |
Hehe ok. I would vote for something like |
src/traces/treemap/attributes.js
Outdated
fillet: { | ||
valType: 'number', | ||
min: 0, | ||
// max: 10, // TODO: Do we need a max? |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Looks like it's possible to make the radius so big that the text or smaller inner boxes poke out of their containers. Here's your mock bumped up to radius 40:
How about we make a dynamic max
? If I did the math right, a safe value would be x+y+sqrt(2*x*y)
where x
is min(padding.l, padding.r)
and y
is min(padding.t, padding.b)
Actually might be more user-friendly to leave max
undefined, but restrict it during rendering and describe this in the attribute description - since we're restricting the radius anyway if the box gets too small... something like "the actual radius we draw will be limited to half the box size, or smaller if necessary to prevent the box contents from overflowing its edges"
marker.fillet
attribute for rounded corners in treemap and icicle plotsmarker.cornerradius
to treemap
@archmoj is my max radius comment #6351 (comment) still open? |
Now addressed by a814408. |
It's still able to generate too big of a radius. On the latest commit if I load |
It don't get the similar image. Perhaps you should |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Weird, I had the latest commit but somehow was still getting the old behavior. Yes, it looks good now! 💃
This PR exposes the
marker.fillet
attribute for treemap and icicle plots, which allows users to create plots with rounded corners by setting the fillet radius in pixels.Based on this comment from @archmoj.
Fillet radius is limited to half of the smallest dimension of a rectangle to avoid weird artifacts on small rectangles.
Example with
marker.fillet
set to 4: