Skip to content

Add marker.cornerradius to treemap #6351

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.

Sign up for GitHub

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

Merged
archmoj merged 11 commits into from
Dec 21, 2022
Merged

Add marker.cornerradius to treemap #6351

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
8495ea4
expose fillet attribute for treemap
emilykl Oct 19, 2022
f55d7db
expose fillet attribute for icicle
emilykl Oct 19, 2022
8333f2b
update image tests for new attribute
emilykl Oct 19, 2022
62dc7ea
update schema file
emilykl Oct 21, 2022
1ebc8c4
Add jasmine test for restyling treemap marker.fillet attribute
archmoj Oct 21, 2022
c61aecc
add jasmine tests for icicle restyling marker.fillet
emilykl Oct 24, 2022
7b6e278
add draftlogs file
emilykl Oct 24, 2022
66ca5f9
revise attribute name and do not add it to icicle
archmoj Nov 17, 2022
81fa893
improve attribute description
archmoj Nov 17, 2022
369f817
FILLET > cornerradius
archmoj Nov 17, 2022
a814408
take into account pad when text is present
archmoj Nov 17, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Next Next commit
expose fillet attribute for treemap
  • Loading branch information
@emilykl
emilykl committed Oct 21, 2022
commit 8495ea4b220b317ae3f8150f605291f694fc545d
14 changes: 13 additions & 1 deletion src/traces/treemap/attributes.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -141,7 +141,19 @@ module.exports = {

line: sunburstAttrs.marker.line,

editType: 'calc'
fillet: {
valType: 'number',
min: 0,
// max: 10, // TODO: Do we need a max?
Copy link
Collaborator

@alexcjohnson alexcjohnson Oct 27, 2022 •
edited
Loading

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:
Screen Shot 2022-10-27 at 19 19 21
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"

dflt: 0,
editType: 'plot',
description: [
'Sets the rounding of corners (in px).'
].join(' ')
},

editType: 'calc',

},
colorScaleAttrs('marker', {
colorAttr: 'colors',
Expand Down
2 changes: 2 additions & 0 deletions src/traces/treemap/defaults.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -85,6 +85,8 @@ module.exports = function supplyDefaults(traceIn, traceOut, defaultColor, layout
coerce('marker.pad.r', headerSize / 4);
coerce('marker.pad.b', bottomText ? headerSize : headerSize / 4);

coerce('marker.fillet');

traceOut._hovered = {
marker: {
line: {
Expand Down
8 changes: 2 additions & 6 deletions src/traces/treemap/plot_one.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -217,12 +217,8 @@ module.exports = function plotOne(gd, cd, element, transitionOpts, drawDescendan
var dy = _y1 - _y0;
if(!dx || !dy) return '';

var FILLET = 0; // TODO: may expose this constant

var r = (
dx > 2 * FILLET &&
dy > 2 * FILLET
) ? FILLET : 0;
var FILLET = trace.marker.fillet;
var r = dx > 2 * FILLET && dy > 2 * FILLET ? FILLET : Math.min(dx, dy) / 2;

var arc = function(rx, ry) { return r ? 'a' + pos(r, r) + ' 0 0 1 ' + pos(rx, ry) : ''; };

Expand Down