Skip to content

Commit

Permalink
drop pathbar.opacity and modify depthfade description
Browse files Browse the repository at this point in the history
  • Loading branch information
@archmoj
archmoj committed Oct 7, 2019
1 parent 481f660 commit 3b104b1
Show file tree
Hide file tree
Showing 7 changed files with 30 additions and 119 deletions.
28 changes: 8 additions & 20 deletions src/traces/treemap/attributes.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -145,14 +145,14 @@ module.exports = {
editType: 'style',
role: 'style',
description: [
'Fades headers towards the background. Background color with opacity of 0.75',
'is used as the destination fading color.',
'When `marker.colors` are not set within the trace it is defaulted to *false*;',
'otherwise it is defaulted to *true*.',
'The *reversed* option could be used to invert the direction of fade',
'in which the top elements within hierarchy drawn with fully saturated colors',
'while the leaves would be faded towards the background color',
'This option is not available when a `colorscale` is present.'
'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.'
].join(' ')
},

Expand Down Expand Up @@ -222,18 +222,6 @@ module.exports = {
].join(' ')
},

opacity: {
valType: 'number',
editType: 'style',
role: 'style',
min: 0,
dflt: 1,
description: [
'Sets the opacity of the pathbar.',
'This option is not available when a `colorscale` is present.'
].join(' ')
},

textfont: extendFlat({}, pieAttrs.textfont, {
description: 'Sets the font used inside `pathbar`.'
}),
Expand Down
3 changes: 0 additions & 3 deletions src/traces/treemap/defaults.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -89,13 +89,10 @@ module.exports = function supplyDefaults(traceIn, traceOut, defaultColor, layout

if(withColorscale) {
colorscaleDefaults(traceIn, traceOut, layout, coerce, {prefix: 'marker.', cLetter: 'c'});
} else {
coerce('pathbar.opacity');
}

traceOut._hovered = {
marker: {
opacity: 1,
line: {
width: 2,
color: Color.contrast(layout.paper_bgcolor)
Expand Down
52 changes: 22 additions & 30 deletions src/traces/treemap/style.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,39 +43,32 @@ function styleOne(s, pt, trace, opts) {
} else {
var isRoot = helpers.isHierarchyRoot(pt);

if(!trace._hasColorscale) {
if(pt.onPathbar) {
// Combining colors with the background color.
// Better not to have transparent segments.
// Also this helps pathbar texts appear nicely below previous segments.
fillColor = Color.combine(Color.addOpacity(trace._backgroundColor, 1 - trace.pathbar.opacity), fillColor);
} else {
var depthfade = trace.marker.depthfade;
if(depthfade) {
var fadedColor = Color.combine(Color.addOpacity(trace._backgroundColor, 0.75), fillColor);
var n;
if(!trace._hasColorscale && !pt.onPathbar) {
var depthfade = trace.marker.depthfade;
if(depthfade) {
var fadedColor = Color.combine(Color.addOpacity(trace._backgroundColor, 0.75), fillColor);
var n;

if(depthfade === true) {
var maxDepth = helpers.getMaxDepth(trace);
if(isFinite(maxDepth)) {
if(helpers.isLeaf(pt)) {
n = 0;
} else {
n = (trace._maxVisibleLayers) - (pt.data.depth - trace._entryDepth);
}
if(depthfade === true) {
var maxDepth = helpers.getMaxDepth(trace);
if(isFinite(maxDepth)) {
if(helpers.isLeaf(pt)) {
n = 0;
} else {
n = pt.data.height + 1;
n = (trace._maxVisibleLayers) - (pt.data.depth - trace._entryDepth);
}
} else { // i.e. case of depthfade === 'reversed'
n = pt.data.depth - trace._entryDepth;
if(!trace._atRootLevel) n++;
} else {
n = pt.data.height + 1;
}
} else { // i.e. case of depthfade === 'reversed'
n = pt.data.depth - trace._entryDepth;
if(!trace._atRootLevel) n++;
}

if(n > 0) {
for(var i = 0; i < n; i++) {
var ratio = 0.5 * i / n;
fillColor = Color.combine(Color.addOpacity(fadedColor, ratio), fillColor);
}
if(n > 0) {
for(var i = 0; i < n; i++) {
var ratio = 0.5 * i / n;
fillColor = Color.combine(Color.addOpacity(fadedColor, ratio), fillColor);
}
}
}
Expand All @@ -92,8 +85,7 @@ function styleOne(s, pt, trace, opts) {

s.style('stroke-width', lineWidth)
.call(Color.fill, fillColor)
.call(Color.stroke, lineColor)
.style('opacity', null);
.call(Color.stroke, lineColor);
}

module.exports = {
Expand Down
Binary file modified test/image/baselines/treemap_level-depth.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified test/image/baselines/treemap_textposition.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
6 changes: 0 additions & 6 deletions test/image/mocks/treemap_textposition.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,6 @@
"name": "bottom left textposition",
"textposition": "bottom left",
"pathbar": {
"opacity": 0.5,
"side": "bottom",
"textfont": {
"size": 12,
Expand Down Expand Up @@ -115,7 +114,6 @@
"name": "bottom center textposition",
"textposition": "bottom center",
"pathbar": {
"opacity": 0.5,
"textfont": {
"size": 12,
"family": "Times New Roman"
Expand Down Expand Up @@ -225,7 +223,6 @@
"name": "bottom right textposition",
"textposition": "bottom right",
"pathbar": {
"opacity": 0.5,
"side": "bottom",
"textfont": {
"size": 12,
Expand Down Expand Up @@ -656,7 +653,6 @@
"name": "top left textposition",
"textposition": "top left",
"pathbar": {
"opacity": 0.5,
"textfont": {
"size": 12,
"family": "Times New Roman"
Expand Down Expand Up @@ -767,7 +763,6 @@
"name": "top center textposition",
"textposition": "top center",
"pathbar": {
"opacity": 0.5,
"side": "bottom",
"textfont": {
"size": 12,
Expand Down Expand Up @@ -878,7 +873,6 @@
"name": "top right textposition",
"textposition": "top right",
"pathbar": {
"opacity": 0.5,
"textfont": {
"size": 12,
"family": "Times New Roman"
Expand Down
60 changes: 0 additions & 60 deletions test/jasmine/tests/treemap_test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1196,66 +1196,6 @@ describe('Test treemap restyle:', function() {
.then(done);
});

it('should be able to restyle *pathbar.opacity*', function(done) {
var mock = {
data: [{
type: 'treemap',
labels: ['Root', 'A', 'B', 'b', ],
parents: ['', 'Root', 'Root', 'B'],
level: 'b'
}]
};

function _assert(msg, exp) {
return function() {
var layer = d3.select(gd).select('.treemaplayer');

var opacities = [];
var fillColors = [];
layer.selectAll('path.surface').each(function() {
opacities.push(this.style.opacity);
fillColors.push(this.style.fill);
});

expect(opacities).toEqual(exp[0], msg);
expect(fillColors).toEqual(exp[1], msg);

// editType:style
if(msg !== 'base') {
expect(Plots.doCalcdata).toHaveBeenCalledTimes(0);
expect(gd._fullData[0]._module.plot).toHaveBeenCalledTimes(0);
}
};
}

Plotly.plot(gd, mock)
.then(_assert('base', [
['', '', ''], // opacity
['rgb(255, 127, 14)', 'rgb(255, 127, 14)', 'rgb(255, 255, 255)'] // fill
]))
.then(function() {
spyOn(Plots, 'doCalcdata').and.callThrough();
spyOn(gd._fullData[0]._module, 'plot').and.callThrough();
})
.then(_restyle({'pathbar.opacity': 0.2}))
.then(_assert('lower pathbar.opacity', [
['', '', ''], // opacity
['rgb(255, 127, 14)', 'rgb(255, 229, 207)', 'rgb(255, 255, 255)'] // fill
]))
.then(_restyle({'pathbar.opacity': 0.8}))
.then(_assert('raise pathbar.opacity', [
['', '', ''], // opacity
['rgb(255, 127, 14)', 'rgb(255, 153, 62)', 'rgb(255, 255, 255)'] // fill
]))
.then(_restyle({'pathbar.opacity': null}))
.then(_assert('back to dflt', [
['', '', ''], // opacity
['rgb(255, 127, 14)', 'rgb(255, 127, 14)', 'rgb(255, 255, 255)'] // fill
]))
.catch(failTest)
.then(done);
});

it('should be able to restyle *textinfo*', function(done) {
var mock = {
data: [{
Expand Down

0 comments on commit 3b104b1

Please sign in to comment.