Skip to content

Commit

Permalink
Merge pull request #6351 from plotly/treemap-round-corners
Browse files Browse the repository at this point in the history
Add `marker.cornerradius` to `treemap`
  • Loading branch information
archmoj authored Dec 21, 2022
2 parents da4e322 + a814408 commit 984a691
Show file tree
Hide file tree
Showing 10 changed files with 99 additions and 19 deletions.
1 change: 1 addition & 0 deletions draftlogs/6351_add.md
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
- Add `marker.cornerradius` attribute to `treemap` trace [[#6351](https://github.com/plotly/plotly.js/pull/6351)]
2 changes: 2 additions & 0 deletions src/traces/icicle/attributes.js
Original file line number Diff line number Diff line change
Expand Up @@ -61,6 +61,8 @@ module.exports = {

line: sunburstAttrs.marker.line,

cornerradius: treemapAttrs.marker.cornerradius,

editType: 'calc'
},
colorScaleAttrs('marker', {
Expand Down
2 changes: 2 additions & 0 deletions src/traces/icicle/defaults.js
Original file line number Diff line number Diff line change
Expand Up @@ -62,6 +62,8 @@ module.exports = function supplyDefaults(traceIn, traceOut, defaultColor, layout
var lineWidth = coerce('marker.line.width');
if(lineWidth) coerce('marker.line.color', layout.paper_bgcolor);

coerce('marker.cornerradius');

coerce('marker.colors');
var withColorscale = traceOut._hasColorscale = (
hasColorscale(traceIn, 'marker', 'colors') ||
Expand Down
12 changes: 11 additions & 1 deletion src/traces/treemap/attributes.js
Original file line number Diff line number Diff line change
Expand Up @@ -141,7 +141,17 @@ module.exports = {

line: sunburstAttrs.marker.line,

editType: 'calc'
cornerradius: {
valType: 'number',
min: 0,
dflt: 0,
editType: 'plot',
description: [
'Sets the maximum 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
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.cornerradius');

traceOut._hovered = {
marker: {
line: {
Expand Down
48 changes: 30 additions & 18 deletions src/traces/treemap/plot_one.js
Original file line number Diff line number Diff line change
Expand Up @@ -206,6 +206,17 @@ module.exports = function plotOne(gd, cd, element, transitionOpts, drawDescendan
);
};

// Note that `pad` is just an integer for `icicle`` traces where
// `pad` is a hashmap for treemap: pad.t, pad.b, pad.l, and pad.r
var pad = trace[isIcicle ? 'tiling' : 'marker'].pad;

var hasFlag = function(f) { return trace.textposition.indexOf(f) !== -1; };

var hasTop = hasFlag('top');
var hasLeft = hasFlag('left');
var hasRight = hasFlag('right');
var hasBottom = hasFlag('bottom');

// slice path generation fn
var pathDescendant = function(d) {
var _x0 = viewMapX(d.x0);
Expand All @@ -217,12 +228,19 @@ 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 cornerradius = trace.marker.cornerradius || 0;
var r = Math.min(cornerradius, dx / 2, dy / 2);
if(
r &&
d.data &&
d.data.data &&
d.data.data.label
) {
if(hasTop) r = Math.min(r, pad.t);
if(hasLeft) r = Math.min(r, pad.l);
if(hasRight) r = Math.min(r, pad.r);
if(hasBottom) r = Math.min(r, pad.b);
}

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

Expand All @@ -245,25 +263,19 @@ module.exports = function plotOne(gd, cd, element, transitionOpts, drawDescendan
var y1 = pt.y1;
var textBB = pt.textBB;

var hasFlag = function(f) { return trace.textposition.indexOf(f) !== -1; };

var hasBottom = hasFlag('bottom');
var hasTop = hasFlag('top') || (opts.isHeader && !hasBottom);
var _hasTop = hasTop || (opts.isHeader && !hasBottom);

var anchor =
hasTop ? 'start' :
_hasTop ? 'start' :
hasBottom ? 'end' : 'middle';

var hasRight = hasFlag('right');
var hasLeft = hasFlag('left') || opts.onPathbar;
var _hasRight = hasFlag('right');
var _hasLeft = hasFlag('left') || opts.onPathbar;

var leftToRight =
hasLeft ? -1 :
hasRight ? 1 : 0;
_hasLeft ? -1 :
_hasRight ? 1 : 0;

// Note that `pad` is just an integer for `icicle`` traces where
// `pad` is a hashmap for treemap: pad.t, pad.b, pad.l, and pad.r
var pad = trace[isIcicle ? 'tiling' : 'marker'].pad;
if(opts.isHeader) {
x0 += (isIcicle ? pad : pad.l) - TEXTPAD;
x1 -= (isIcicle ? pad : pad.r) - TEXTPAD;
Expand Down
Binary file modified test/image/baselines/treemap_packages_colorscale_novalue.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions test/image/mocks/treemap_packages_colorscale_novalue.json
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@
"line": {
"color": "#777"
},
"cornerradius": 4,
"colorscale": [[0, "#FFF"], [0.01, "#FF0"], [0.1, "#F00"], [1, "#000"]],
"showscale": true
},
Expand Down
36 changes: 36 additions & 0 deletions test/jasmine/tests/treemap_test.js
Original file line number Diff line number Diff line change
Expand Up @@ -1294,6 +1294,42 @@ describe('Test treemap restyle:', function() {
.then(_assert('back to dflt', ['Root', 'B', 'A\nnode1', 'b\nnode3']))
.then(done, done.fail);
});

it('should be able to restyle *marker.cornerradius*', function(done) {
var mock = {
data: [{
type: 'treemap',
labels: ['Root', 'A', 'B', 'b'],
parents: ['', 'Root', 'Root', 'B'],
text: ['node0', 'node1', 'node2', 'node3'],
values: [0, 1, 2, 3],
pathbar: { visible: false }
}]
};

function _assert(msg, exp) {
return function() {
var layer = d3Select(gd).select('.treemaplayer');
layer.selectAll('.surface').each(function() {
var surfaces = d3Select(this);
var path = surfaces[0][0].getAttribute('d');
expect(path.indexOf('a') !== -1).toEqual(exp);
});
};
}

Plotly.newPlot(gd, mock)
.then(_assert('no arcs', false))
.then(function() {
return Plotly.restyle(gd, 'marker.cornerradius', 10);
})
.then(_assert('has arcs', true))
.then(function() {
return Plotly.restyle(gd, 'marker.cornerradius', 0);
})
.then(_assert('no arcs', false))
.then(done, done.fail);
});
});

describe('Test treemap tweening:', function() {
Expand Down
14 changes: 14 additions & 0 deletions test/plot-schema.json
Original file line number Diff line number Diff line change
Expand Up @@ -34112,6 +34112,13 @@
"editType": "none",
"valType": "string"
},
"cornerradius": {
"description": "Sets the maximum rounding of corners (in px).",
"dflt": 0,
"editType": "plot",
"min": 0,
"valType": "number"
},
"editType": "calc",
"line": {
"color": {
Expand Down Expand Up @@ -69171,6 +69178,13 @@
"editType": "none",
"valType": "string"
},
"cornerradius": {
"description": "Sets the maximum rounding of corners (in px).",
"dflt": 0,
"editType": "plot",
"min": 0,
"valType": "number"
},
"depthfade": {
"description": "Determines if the sector colors are faded towards the background from the leaves up to the headers. This option is unavailable when a `colorscale` is present, defaults to false when `marker.colors` is set, but otherwise defaults to true. When set to *reversed*, the fading direction is inverted, that is the top elements within hierarchy are drawn with fully saturated colors while the leaves are faded towards the background color.",
"editType": "style",
Expand Down

0 comments on commit 984a691

Please sign in to comment.