Skip to content

use marker.colors with colorscale in treemap and sunburst plots #4242

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 13 commits into from
Oct 7, 2019
Merged

use marker.colors with colorscale in treemap and sunburst plots #4242

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
1c136f4
use marker.colors with colorscale in treemap and sunburst plots
archmoj Oct 1, 2019
2e17994
no need to hasColorscale twice in calc step of treemap and sunburst
archmoj Oct 2, 2019
ba492cf
add treemap and sunburst tests to cover the case of using marker.colo…
archmoj Oct 2, 2019
1d159e6
display treemap root with opacity 1
archmoj Oct 3, 2019
429324d
impelement depthfade
archmoj Oct 4, 2019
f068cb2
set `Color.addOpacity(trace._backgroundColor, 0.75)`
etpinard Oct 4, 2019
7df59a5
Merge branch 'master' into treemap-sunburst-colors-in-colorscale
etpinard Oct 4, 2019
280a0a1
treemap remaining items - rework key functions - jasmine tests - desc…
archmoj Oct 4, 2019
aa52dd5
always default pathbar.opacity to 1
archmoj Oct 4, 2019
fed26bb
combine colors for pathbar - correct pathbar test - add depthfade rev…
archmoj Oct 6, 2019
481f660
add basic mock for treemap and sunburst - rename a variable name
archmoj Oct 6, 2019
3b104b1
drop pathbar.opacity and modify depthfade description
archmoj Oct 7, 2019
1dff468
handle special root color case
archmoj Oct 7, 2019
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
4 changes: 2 additions & 2 deletions src/components/colorscale/helpers.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,11 +17,11 @@ var Color = require('../color');

var isValidScale = require('./scales').isValid;

function hasColorscale(trace, containerStr) {
function hasColorscale(trace, containerStr, colorKey) {
var container = containerStr ?
Lib.nestedProperty(trace, containerStr).get() || {} :
trace;
var color = container.color;
var color = container[colorKey || 'color'];

var isArrayWithOneNumber = false;
if(Lib.isArrayOrTypedArray(color)) {
Expand Down
3 changes: 2 additions & 1 deletion src/traces/sunburst/calc.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -189,9 +189,10 @@ exports.calc = function(gd, trace) {
var pullColor;
var scaleColor;
var colors = trace.marker.colors || [];
var hasColors = !!colors.length;
trace._hasColorscale = hasColorscale(trace, 'marker');
if(trace._hasColorscale) {
if(!colors.length) {
if(!hasColors) {
colors = hasValues ? trace.values : trace._values;
}

Expand Down
2 changes: 1 addition & 1 deletion src/traces/sunburst/defaults.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@ module.exports = function supplyDefaults(traceIn, traceOut, defaultColor, layout
if(lineWidth) coerce('marker.line.color', layout.paper_bgcolor);

coerce('marker.colors');
var withColorscale = hasColorscale(traceIn, 'marker');
var withColorscale = hasColorscale(traceIn, 'marker', 'colors');
if(withColorscale) {
colorscaleDefaults(traceIn, traceOut, layout, coerce, {prefix: 'marker.', cLetter: 'c'});
}
Expand Down
5 changes: 4 additions & 1 deletion src/traces/treemap/defaults.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,7 +73,10 @@ module.exports = function supplyDefaults(traceIn, traceOut, defaultColor, layout
if(lineWidth) coerce('marker.line.color', layout.paper_bgcolor);

coerce('marker.colors');
var withColorscale = hasColorscale(traceIn, 'marker');
var withColorscale = hasColorscale(traceIn, 'marker', 'colors');
if(withColorscale) {
colorscaleDefaults(traceIn, traceOut, layout, coerce, {prefix: 'marker.', cLetter: 'c'});
}

var headerSize = traceOut.textfont.size * 2;

Expand Down
107 changes: 107 additions & 0 deletions test/jasmine/tests/sunburst_test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -153,6 +153,31 @@ describe('Test sunburst defaults:', function() {
expect(gd._fullLayout.sunburstcolorway)
.toEqual(['cyan', 'yellow', 'black'], 'user-defined value');
});

it('should not default *marker.colorscale* when not having *marker.colors*', function() {
_supply([
{labels: [1], parents: ['']}
]);

expect(fullData[0].marker.colorscale).toBe(undefined);
});

it('should default *marker.colorscale* to *Reds* when having *marker.colors*', function() {
_supply([
{labels: [1], parents: [''], marker: {
colors: [0]
}}
]);

expect(fullData[0].marker.colorscale).toBeCloseToArray([
[ 0, 'rgb(5,10,172)' ],
[ 0.35, 'rgb(106,137,247)' ],
[ 0.5, 'rgb(190,190,190)' ],
[ 0.6, 'rgb(220,170,132)' ],
[ 0.7, 'rgb(230,145,90)' ],
[ 1, 'rgb(178,10,28)' ]
]);
});
});

describe('Test sunburst calc:', function() {
Expand Down Expand Up @@ -317,6 +342,88 @@ describe('Test sunburst calc:', function() {
expect(extract('id')).toEqual(['true', '1', '2', '3', '4', '5', '6', '7', '8']);
expect(extract('pid')).toEqual(['', 'true', 'true', '2', '2', 'true', 'true', '6', 'true']);
});

it('should use *marker.colors*', function() {
_calc({
marker: { colors: ['pink', '#777', '#f00', '#ff0', '#0f0', '#0ff', '#00f', '#f0f', '#fff'] },
labels: ['Eve', 'Cain', 'Seth', 'Enos', 'Noam', 'Abel', 'Awan', 'Enoch', 'Azura'],
parents: ['', 'Eve', 'Eve', 'Seth', 'Seth', 'Eve', 'Eve', 'Awan', 'Eve']
});

var cd = gd.calcdata[0];
expect(cd.length).toEqual(9);
expect(cd[0].color).toEqual('rgba(255, 192, 203, 1)');
expect(cd[1].color).toEqual('rgba(119, 119, 119, 1)');
expect(cd[2].color).toEqual('rgba(255, 0, 0, 1)');
expect(cd[3].color).toEqual('rgba(255, 255, 0, 1)');
expect(cd[4].color).toEqual('rgba(0, 255, 0, 1)');
expect(cd[5].color).toEqual('rgba(0, 255, 255, 1)');
expect(cd[6].color).toEqual('rgba(0, 0, 255, 1)');
expect(cd[7].color).toEqual('rgba(255, 0, 255, 1)');
expect(cd[8].color).toEqual('rgba(255, 255, 255, 1)');
});

it('should use *marker.colors* numbers with colorscale', function() {
_calc({
marker: { colors: [1, 2, 3, 4, 5, 6, 7, 8, 9], colorscale: 'Portland' },
labels: ['Eve', 'Cain', 'Seth', 'Enos', 'Noam', 'Abel', 'Awan', 'Enoch', 'Azura'],
parents: ['', 'Eve', 'Eve', 'Seth', 'Seth', 'Eve', 'Eve', 'Awan', 'Eve']
});

var cd = gd.calcdata[0];
expect(cd.length).toEqual(9);
expect(cd[0].color).toEqual('rgb(12, 51, 131)');
expect(cd[1].color).toEqual('rgb(11, 94, 159)');
expect(cd[2].color).toEqual('rgb(10, 136, 186)');
expect(cd[3].color).toEqual('rgb(126, 174, 121)');
expect(cd[4].color).toEqual('rgb(242, 211, 56)');
expect(cd[5].color).toEqual('rgb(242, 177, 56)');
expect(cd[6].color).toEqual('rgb(242, 143, 56)');
expect(cd[7].color).toEqual('rgb(230, 87, 43)');
expect(cd[8].color).toEqual('rgb(217, 30, 30)');
});

it('should use *marker.colors* numbers not values with colorscale', function() {
_calc({
values: [0.0001, 0.001, 0.01, 0.1, 1, 10, 100, 1000, 10000],
marker: { colors: [1, 2, 3, 4, 5, 6, 7, 8, 9], colorscale: 'Portland' },
labels: ['Eve', 'Cain', 'Seth', 'Enos', 'Noam', 'Abel', 'Awan', 'Enoch', 'Azura'],
parents: ['', 'Eve', 'Eve', 'Seth', 'Seth', 'Eve', 'Eve', 'Awan', 'Eve']
});

var cd = gd.calcdata[0];
expect(cd.length).toEqual(9);
expect(cd[0].color).toEqual('rgb(12, 51, 131)');
expect(cd[1].color).toEqual('rgb(11, 94, 159)');
expect(cd[2].color).toEqual('rgb(10, 136, 186)');
expect(cd[3].color).toEqual('rgb(126, 174, 121)');
expect(cd[4].color).toEqual('rgb(242, 211, 56)');
expect(cd[5].color).toEqual('rgb(242, 177, 56)');
expect(cd[6].color).toEqual('rgb(242, 143, 56)');
expect(cd[7].color).toEqual('rgb(230, 87, 43)');
expect(cd[8].color).toEqual('rgb(217, 30, 30)');
});

it('should use values with colorscale when *marker.colors* in empty', function() {
_calc({
values: [1, 2, 3, 4, 5, 6, 7, 8, 9],
marker: { colors: [], colorscale: 'Portland' },
labels: ['Eve', 'Cain', 'Seth', 'Enos', 'Noam', 'Abel', 'Awan', 'Enoch', 'Azura'],
parents: ['', 'Eve', 'Eve', 'Seth', 'Seth', 'Eve', 'Eve', 'Awan', 'Eve']
});

var cd = gd.calcdata[0];
expect(cd.length).toEqual(9);
expect(cd[0].color).toEqual('rgb(12, 51, 131)');
expect(cd[1].color).toEqual('rgb(11, 94, 159)');
expect(cd[2].color).toEqual('rgb(10, 136, 186)');
expect(cd[3].color).toEqual('rgb(126, 174, 121)');
expect(cd[4].color).toEqual('rgb(242, 211, 56)');
expect(cd[5].color).toEqual('rgb(242, 177, 56)');
expect(cd[6].color).toEqual('rgb(242, 143, 56)');
expect(cd[7].color).toEqual('rgb(230, 87, 43)');
expect(cd[8].color).toEqual('rgb(217, 30, 30)');
});
});

describe('Test sunburst hover:', function() {
Expand Down
107 changes: 107 additions & 0 deletions test/jasmine/tests/treemap_test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -264,6 +264,31 @@ describe('Test treemap defaults:', function() {
expect(fullData[0].pathbar.textfont.size).toBe(24);
expect(fullData[0].pathbar.thickness).toBe(30);
});

it('should not default *marker.colorscale* when not having *marker.colors*', function() {
_supply([
{labels: [1], parents: ['']}
]);

expect(fullData[0].marker.colorscale).toBe(undefined);
});

it('should default *marker.colorscale* to *Reds* when having *marker.colors*', function() {
_supply([
{labels: [1], parents: [''], marker: {
colors: [0]
}}
]);

expect(fullData[0].marker.colorscale).toBeCloseToArray([
[ 0, 'rgb(5,10,172)' ],
[ 0.35, 'rgb(106,137,247)' ],
[ 0.5, 'rgb(190,190,190)' ],
[ 0.6, 'rgb(220,170,132)' ],
[ 0.7, 'rgb(230,145,90)' ],
[ 1, 'rgb(178,10,28)' ]
]);
});
});

describe('Test treemap calc:', function() {
Expand Down Expand Up @@ -428,6 +453,88 @@ describe('Test treemap calc:', function() {
expect(extract('id')).toEqual(['true', '1', '2', '3', '4', '5', '6', '7', '8']);
expect(extract('pid')).toEqual(['', 'true', 'true', '2', '2', 'true', 'true', '6', 'true']);
});

it('should use *marker.colors*', function() {
_calc({
marker: { colors: ['pink', '#777', '#f00', '#ff0', '#0f0', '#0ff', '#00f', '#f0f', '#fff'] },
labels: ['Eve', 'Cain', 'Seth', 'Enos', 'Noam', 'Abel', 'Awan', 'Enoch', 'Azura'],
parents: ['', 'Eve', 'Eve', 'Seth', 'Seth', 'Eve', 'Eve', 'Awan', 'Eve']
});

var cd = gd.calcdata[0];
expect(cd.length).toEqual(9);
expect(cd[0].color).toEqual('rgba(255, 192, 203, 1)');
expect(cd[1].color).toEqual('rgba(119, 119, 119, 1)');
expect(cd[2].color).toEqual('rgba(255, 0, 0, 1)');
expect(cd[3].color).toEqual('rgba(255, 255, 0, 1)');
expect(cd[4].color).toEqual('rgba(0, 255, 0, 1)');
expect(cd[5].color).toEqual('rgba(0, 255, 255, 1)');
expect(cd[6].color).toEqual('rgba(0, 0, 255, 1)');
expect(cd[7].color).toEqual('rgba(255, 0, 255, 1)');
expect(cd[8].color).toEqual('rgba(255, 255, 255, 1)');
});

it('should use *marker.colors* numbers with colorscale', function() {
_calc({
marker: { colors: [1, 2, 3, 4, 5, 6, 7, 8, 9], colorscale: 'Portland' },
labels: ['Eve', 'Cain', 'Seth', 'Enos', 'Noam', 'Abel', 'Awan', 'Enoch', 'Azura'],
parents: ['', 'Eve', 'Eve', 'Seth', 'Seth', 'Eve', 'Eve', 'Awan', 'Eve']
});

var cd = gd.calcdata[0];
expect(cd.length).toEqual(9);
expect(cd[0].color).toEqual('rgb(12, 51, 131)');
expect(cd[1].color).toEqual('rgb(11, 94, 159)');
expect(cd[2].color).toEqual('rgb(10, 136, 186)');
expect(cd[3].color).toEqual('rgb(126, 174, 121)');
expect(cd[4].color).toEqual('rgb(242, 211, 56)');
expect(cd[5].color).toEqual('rgb(242, 177, 56)');
expect(cd[6].color).toEqual('rgb(242, 143, 56)');
expect(cd[7].color).toEqual('rgb(230, 87, 43)');
expect(cd[8].color).toEqual('rgb(217, 30, 30)');
});

it('should use *marker.colors* numbers not values with colorscale', function() {
_calc({
values: [0.0001, 0.001, 0.01, 0.1, 1, 10, 100, 1000, 10000],
marker: { colors: [1, 2, 3, 4, 5, 6, 7, 8, 9], colorscale: 'Portland' },
labels: ['Eve', 'Cain', 'Seth', 'Enos', 'Noam', 'Abel', 'Awan', 'Enoch', 'Azura'],
parents: ['', 'Eve', 'Eve', 'Seth', 'Seth', 'Eve', 'Eve', 'Awan', 'Eve']
});

var cd = gd.calcdata[0];
expect(cd.length).toEqual(9);
expect(cd[0].color).toEqual('rgb(12, 51, 131)');
expect(cd[1].color).toEqual('rgb(11, 94, 159)');
expect(cd[2].color).toEqual('rgb(10, 136, 186)');
expect(cd[3].color).toEqual('rgb(126, 174, 121)');
expect(cd[4].color).toEqual('rgb(242, 211, 56)');
expect(cd[5].color).toEqual('rgb(242, 177, 56)');
expect(cd[6].color).toEqual('rgb(242, 143, 56)');
expect(cd[7].color).toEqual('rgb(230, 87, 43)');
expect(cd[8].color).toEqual('rgb(217, 30, 30)');
});

it('should use values with colorscale when *marker.colors* in empty', function() {
_calc({
values: [1, 2, 3, 4, 5, 6, 7, 8, 9],
marker: { colors: [], colorscale: 'Portland' },
labels: ['Eve', 'Cain', 'Seth', 'Enos', 'Noam', 'Abel', 'Awan', 'Enoch', 'Azura'],
parents: ['', 'Eve', 'Eve', 'Seth', 'Seth', 'Eve', 'Eve', 'Awan', 'Eve']
});

var cd = gd.calcdata[0];
expect(cd.length).toEqual(9);
expect(cd[0].color).toEqual('rgb(12, 51, 131)');
expect(cd[1].color).toEqual('rgb(11, 94, 159)');
expect(cd[2].color).toEqual('rgb(10, 136, 186)');
expect(cd[3].color).toEqual('rgb(126, 174, 121)');
expect(cd[4].color).toEqual('rgb(242, 211, 56)');
expect(cd[5].color).toEqual('rgb(242, 177, 56)');
expect(cd[6].color).toEqual('rgb(242, 143, 56)');
expect(cd[7].color).toEqual('rgb(230, 87, 43)');
expect(cd[8].color).toEqual('rgb(217, 30, 30)');
});
});

describe('Test treemap hover:', function() {
Expand Down