Skip to content

Commit 1c136f4

Browse files
archmojarchmoj
committed
use marker.colors with colorscale in treemap and sunburst plots
- default marker.colorscale when having marker.colors
1 parent 9abf36a commit 1c136f4

File tree

6 files changed

+223
-5
lines changed

6 files changed

+223
-5
lines changed

‎src/components/colorscale/helpers.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,11 +17,11 @@ var Color = require('../color');
1717

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

20-
function hasColorscale(trace, containerStr) {
20+
function hasColorscale(trace, containerStr, colorKey) {
2121
var container = containerStr ?
2222
Lib.nestedProperty(trace, containerStr).get() || {} :
2323
trace;
24-
var color = container.color;
24+
var color = container[colorKey || 'color'];
2525

2626
var isArrayWithOneNumber = false;
2727
if(Lib.isArrayOrTypedArray(color)) {

‎src/traces/sunburst/calc.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -189,9 +189,10 @@ exports.calc = function(gd, trace) {
189189
var pullColor;
190190
var scaleColor;
191191
var colors = trace.marker.colors || [];
192+
var hasColors = !!colors.length;
192193
trace._hasColorscale = hasColorscale(trace, 'marker');
193194
if(trace._hasColorscale) {
194-
if(!colors.length) {
195+
if(!hasColors) {
195196
colors = hasValues ? trace.values : trace._values;
196197
}
197198

‎src/traces/sunburst/defaults.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@ module.exports = function supplyDefaults(traceIn, traceOut, defaultColor, layout
4444
if(lineWidth) coerce('marker.line.color', layout.paper_bgcolor);
4545

4646
coerce('marker.colors');
47-
var withColorscale = hasColorscale(traceIn, 'marker');
47+
var withColorscale = hasColorscale(traceIn, 'marker', 'colors');
4848
if(withColorscale) {
4949
colorscaleDefaults(traceIn, traceOut, layout, coerce, {prefix: 'marker.', cLetter: 'c'});
5050
}

‎src/traces/treemap/defaults.js

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -73,7 +73,10 @@ module.exports = function supplyDefaults(traceIn, traceOut, defaultColor, layout
7373
if(lineWidth) coerce('marker.line.color', layout.paper_bgcolor);
7474

7575
coerce('marker.colors');
76-
var withColorscale = hasColorscale(traceIn, 'marker');
76+
var withColorscale = hasColorscale(traceIn, 'marker', 'colors');
77+
if(withColorscale) {
78+
colorscaleDefaults(traceIn, traceOut, layout, coerce, {prefix: 'marker.', cLetter: 'c'});
79+
}
7780

7881
var headerSize = traceOut.textfont.size * 2;
7982

‎test/jasmine/tests/sunburst_test.js

Lines changed: 107 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -153,6 +153,31 @@ describe('Test sunburst defaults:', function() {
153153
expect(gd._fullLayout.sunburstcolorway)
154154
.toEqual(['cyan', 'yellow', 'black'], 'user-defined value');
155155
});
156+
157+
it('should not default *marker.colorscale* when not having *marker.colors*', function() {
158+
_supply([
159+
{labels: [1], parents: ['']}
160+
]);
161+
162+
expect(fullData[0].marker.colorscale).toBe(undefined);
163+
});
164+
165+
it('should default *marker.colorscale* to *Reds* when having *marker.colors*', function() {
166+
_supply([
167+
{labels: [1], parents: [''], marker: {
168+
colors: [0]
169+
}}
170+
]);
171+
172+
expect(fullData[0].marker.colorscale).toBeCloseToArray([
173+
[ 0, 'rgb(5,10,172)' ],
174+
[ 0.35, 'rgb(106,137,247)' ],
175+
[ 0.5, 'rgb(190,190,190)' ],
176+
[ 0.6, 'rgb(220,170,132)' ],
177+
[ 0.7, 'rgb(230,145,90)' ],
178+
[ 1, 'rgb(178,10,28)' ]
179+
]);
180+
});
156181
});
157182

158183
describe('Test sunburst calc:', function() {
@@ -317,6 +342,88 @@ describe('Test sunburst calc:', function() {
317342
expect(extract('id')).toEqual(['true', '1', '2', '3', '4', '5', '6', '7', '8']);
318343
expect(extract('pid')).toEqual(['', 'true', 'true', '2', '2', 'true', 'true', '6', 'true']);
319344
});
345+
346+
it('should use *marker.colors*', function() {
347+
_calc({
348+
marker: { colors: ['pink', '#777', '#f00', '#ff0', '#0f0', '#0ff', '#00f', '#f0f', '#fff'] },
349+
labels: ['Eve', 'Cain', 'Seth', 'Enos', 'Noam', 'Abel', 'Awan', 'Enoch', 'Azura'],
350+
parents: ['', 'Eve', 'Eve', 'Seth', 'Seth', 'Eve', 'Eve', 'Awan', 'Eve']
351+
});
352+
353+
var cd = gd.calcdata[0];
354+
expect(cd.length).toEqual(9);
355+
expect(cd[0].color).toEqual('rgba(255, 192, 203, 1)');
356+
expect(cd[1].color).toEqual('rgba(119, 119, 119, 1)');
357+
expect(cd[2].color).toEqual('rgba(255, 0, 0, 1)');
358+
expect(cd[3].color).toEqual('rgba(255, 255, 0, 1)');
359+
expect(cd[4].color).toEqual('rgba(0, 255, 0, 1)');
360+
expect(cd[5].color).toEqual('rgba(0, 255, 255, 1)');
361+
expect(cd[6].color).toEqual('rgba(0, 0, 255, 1)');
362+
expect(cd[7].color).toEqual('rgba(255, 0, 255, 1)');
363+
expect(cd[8].color).toEqual('rgba(255, 255, 255, 1)');
364+
});
365+
366+
it('should use *marker.colors* numbers with colorscale', function() {
367+
_calc({
368+
marker: { colors: [1, 2, 3, 4, 5, 6, 7, 8, 9], colorscale: 'Portland' },
369+
labels: ['Eve', 'Cain', 'Seth', 'Enos', 'Noam', 'Abel', 'Awan', 'Enoch', 'Azura'],
370+
parents: ['', 'Eve', 'Eve', 'Seth', 'Seth', 'Eve', 'Eve', 'Awan', 'Eve']
371+
});
372+
373+
var cd = gd.calcdata[0];
374+
expect(cd.length).toEqual(9);
375+
expect(cd[0].color).toEqual('rgb(12, 51, 131)');
376+
expect(cd[1].color).toEqual('rgb(11, 94, 159)');
377+
expect(cd[2].color).toEqual('rgb(10, 136, 186)');
378+
expect(cd[3].color).toEqual('rgb(126, 174, 121)');
379+
expect(cd[4].color).toEqual('rgb(242, 211, 56)');
380+
expect(cd[5].color).toEqual('rgb(242, 177, 56)');
381+
expect(cd[6].color).toEqual('rgb(242, 143, 56)');
382+
expect(cd[7].color).toEqual('rgb(230, 87, 43)');
383+
expect(cd[8].color).toEqual('rgb(217, 30, 30)');
384+
});
385+
386+
it('should use *marker.colors* numbers not values with colorscale', function() {
387+
_calc({
388+
values: [0.0001, 0.001, 0.01, 0.1, 1, 10, 100, 1000, 10000],
389+
marker: { colors: [1, 2, 3, 4, 5, 6, 7, 8, 9], colorscale: 'Portland' },
390+
labels: ['Eve', 'Cain', 'Seth', 'Enos', 'Noam', 'Abel', 'Awan', 'Enoch', 'Azura'],
391+
parents: ['', 'Eve', 'Eve', 'Seth', 'Seth', 'Eve', 'Eve', 'Awan', 'Eve']
392+
});
393+
394+
var cd = gd.calcdata[0];
395+
expect(cd.length).toEqual(9);
396+
expect(cd[0].color).toEqual('rgb(12, 51, 131)');
397+
expect(cd[1].color).toEqual('rgb(11, 94, 159)');
398+
expect(cd[2].color).toEqual('rgb(10, 136, 186)');
399+
expect(cd[3].color).toEqual('rgb(126, 174, 121)');
400+
expect(cd[4].color).toEqual('rgb(242, 211, 56)');
401+
expect(cd[5].color).toEqual('rgb(242, 177, 56)');
402+
expect(cd[6].color).toEqual('rgb(242, 143, 56)');
403+
expect(cd[7].color).toEqual('rgb(230, 87, 43)');
404+
expect(cd[8].color).toEqual('rgb(217, 30, 30)');
405+
});
406+
407+
it('should use values with colorscale when *marker.colors* in empty', function() {
408+
_calc({
409+
values: [1, 2, 3, 4, 5, 6, 7, 8, 9],
410+
marker: { colors: [], colorscale: 'Portland' },
411+
labels: ['Eve', 'Cain', 'Seth', 'Enos', 'Noam', 'Abel', 'Awan', 'Enoch', 'Azura'],
412+
parents: ['', 'Eve', 'Eve', 'Seth', 'Seth', 'Eve', 'Eve', 'Awan', 'Eve']
413+
});
414+
415+
var cd = gd.calcdata[0];
416+
expect(cd.length).toEqual(9);
417+
expect(cd[0].color).toEqual('rgb(12, 51, 131)');
418+
expect(cd[1].color).toEqual('rgb(11, 94, 159)');
419+
expect(cd[2].color).toEqual('rgb(10, 136, 186)');
420+
expect(cd[3].color).toEqual('rgb(126, 174, 121)');
421+
expect(cd[4].color).toEqual('rgb(242, 211, 56)');
422+
expect(cd[5].color).toEqual('rgb(242, 177, 56)');
423+
expect(cd[6].color).toEqual('rgb(242, 143, 56)');
424+
expect(cd[7].color).toEqual('rgb(230, 87, 43)');
425+
expect(cd[8].color).toEqual('rgb(217, 30, 30)');
426+
});
320427
});
321428

322429
describe('Test sunburst hover:', function() {

‎test/jasmine/tests/treemap_test.js

Lines changed: 107 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -264,6 +264,31 @@ describe('Test treemap defaults:', function() {
264264
expect(fullData[0].pathbar.textfont.size).toBe(24);
265265
expect(fullData[0].pathbar.thickness).toBe(30);
266266
});
267+
268+
it('should not default *marker.colorscale* when not having *marker.colors*', function() {
269+
_supply([
270+
{labels: [1], parents: ['']}
271+
]);
272+
273+
expect(fullData[0].marker.colorscale).toBe(undefined);
274+
});
275+
276+
it('should default *marker.colorscale* to *Reds* when having *marker.colors*', function() {
277+
_supply([
278+
{labels: [1], parents: [''], marker: {
279+
colors: [0]
280+
}}
281+
]);
282+
283+
expect(fullData[0].marker.colorscale).toBeCloseToArray([
284+
[ 0, 'rgb(5,10,172)' ],
285+
[ 0.35, 'rgb(106,137,247)' ],
286+
[ 0.5, 'rgb(190,190,190)' ],
287+
[ 0.6, 'rgb(220,170,132)' ],
288+
[ 0.7, 'rgb(230,145,90)' ],
289+
[ 1, 'rgb(178,10,28)' ]
290+
]);
291+
});
267292
});
268293

269294
describe('Test treemap calc:', function() {
@@ -428,6 +453,88 @@ describe('Test treemap calc:', function() {
428453
expect(extract('id')).toEqual(['true', '1', '2', '3', '4', '5', '6', '7', '8']);
429454
expect(extract('pid')).toEqual(['', 'true', 'true', '2', '2', 'true', 'true', '6', 'true']);
430455
});
456+
457+
it('should use *marker.colors*', function() {
458+
_calc({
459+
marker: { colors: ['pink', '#777', '#f00', '#ff0', '#0f0', '#0ff', '#00f', '#f0f', '#fff'] },
460+
labels: ['Eve', 'Cain', 'Seth', 'Enos', 'Noam', 'Abel', 'Awan', 'Enoch', 'Azura'],
461+
parents: ['', 'Eve', 'Eve', 'Seth', 'Seth', 'Eve', 'Eve', 'Awan', 'Eve']
462+
});
463+
464+
var cd = gd.calcdata[0];
465+
expect(cd.length).toEqual(9);
466+
expect(cd[0].color).toEqual('rgba(255, 192, 203, 1)');
467+
expect(cd[1].color).toEqual('rgba(119, 119, 119, 1)');
468+
expect(cd[2].color).toEqual('rgba(255, 0, 0, 1)');
469+
expect(cd[3].color).toEqual('rgba(255, 255, 0, 1)');
470+
expect(cd[4].color).toEqual('rgba(0, 255, 0, 1)');
471+
expect(cd[5].color).toEqual('rgba(0, 255, 255, 1)');
472+
expect(cd[6].color).toEqual('rgba(0, 0, 255, 1)');
473+
expect(cd[7].color).toEqual('rgba(255, 0, 255, 1)');
474+
expect(cd[8].color).toEqual('rgba(255, 255, 255, 1)');
475+
});
476+
477+
it('should use *marker.colors* numbers with colorscale', function() {
478+
_calc({
479+
marker: { colors: [1, 2, 3, 4, 5, 6, 7, 8, 9], colorscale: 'Portland' },
480+
labels: ['Eve', 'Cain', 'Seth', 'Enos', 'Noam', 'Abel', 'Awan', 'Enoch', 'Azura'],
481+
parents: ['', 'Eve', 'Eve', 'Seth', 'Seth', 'Eve', 'Eve', 'Awan', 'Eve']
482+
});
483+
484+
var cd = gd.calcdata[0];
485+
expect(cd.length).toEqual(9);
486+
expect(cd[0].color).toEqual('rgb(12, 51, 131)');
487+
expect(cd[1].color).toEqual('rgb(11, 94, 159)');
488+
expect(cd[2].color).toEqual('rgb(10, 136, 186)');
489+
expect(cd[3].color).toEqual('rgb(126, 174, 121)');
490+
expect(cd[4].color).toEqual('rgb(242, 211, 56)');
491+
expect(cd[5].color).toEqual('rgb(242, 177, 56)');
492+
expect(cd[6].color).toEqual('rgb(242, 143, 56)');
493+
expect(cd[7].color).toEqual('rgb(230, 87, 43)');
494+
expect(cd[8].color).toEqual('rgb(217, 30, 30)');
495+
});
496+
497+
it('should use *marker.colors* numbers not values with colorscale', function() {
498+
_calc({
499+
values: [0.0001, 0.001, 0.01, 0.1, 1, 10, 100, 1000, 10000],
500+
marker: { colors: [1, 2, 3, 4, 5, 6, 7, 8, 9], colorscale: 'Portland' },
501+
labels: ['Eve', 'Cain', 'Seth', 'Enos', 'Noam', 'Abel', 'Awan', 'Enoch', 'Azura'],
502+
parents: ['', 'Eve', 'Eve', 'Seth', 'Seth', 'Eve', 'Eve', 'Awan', 'Eve']
503+
});
504+
505+
var cd = gd.calcdata[0];
506+
expect(cd.length).toEqual(9);
507+
expect(cd[0].color).toEqual('rgb(12, 51, 131)');
508+
expect(cd[1].color).toEqual('rgb(11, 94, 159)');
509+
expect(cd[2].color).toEqual('rgb(10, 136, 186)');
510+
expect(cd[3].color).toEqual('rgb(126, 174, 121)');
511+
expect(cd[4].color).toEqual('rgb(242, 211, 56)');
512+
expect(cd[5].color).toEqual('rgb(242, 177, 56)');
513+
expect(cd[6].color).toEqual('rgb(242, 143, 56)');
514+
expect(cd[7].color).toEqual('rgb(230, 87, 43)');
515+
expect(cd[8].color).toEqual('rgb(217, 30, 30)');
516+
});
517+
518+
it('should use values with colorscale when *marker.colors* in empty', function() {
519+
_calc({
520+
values: [1, 2, 3, 4, 5, 6, 7, 8, 9],
521+
marker: { colors: [], colorscale: 'Portland' },
522+
labels: ['Eve', 'Cain', 'Seth', 'Enos', 'Noam', 'Abel', 'Awan', 'Enoch', 'Azura'],
523+
parents: ['', 'Eve', 'Eve', 'Seth', 'Seth', 'Eve', 'Eve', 'Awan', 'Eve']
524+
});
525+
526+
var cd = gd.calcdata[0];
527+
expect(cd.length).toEqual(9);
528+
expect(cd[0].color).toEqual('rgb(12, 51, 131)');
529+
expect(cd[1].color).toEqual('rgb(11, 94, 159)');
530+
expect(cd[2].color).toEqual('rgb(10, 136, 186)');
531+
expect(cd[3].color).toEqual('rgb(126, 174, 121)');
532+
expect(cd[4].color).toEqual('rgb(242, 211, 56)');
533+
expect(cd[5].color).toEqual('rgb(242, 177, 56)');
534+
expect(cd[6].color).toEqual('rgb(242, 143, 56)');
535+
expect(cd[7].color).toEqual('rgb(230, 87, 43)');
536+
expect(cd[8].color).toEqual('rgb(217, 30, 30)');
537+
});
431538
});
432539

433540
describe('Test treemap hover:', function() {

0 commit comments

Comments
 (0)