Skip to content

Commit 35474a1

Browse files
archmojarchmoj
authoredSep 26, 2020
Merge pull request #5166 from plotly/surface-colorscale-with-alpha
Handle colorscale with transparent colors in surface traces
·
v3.0.1v1.56.0
2 parents 98097ea + f1236ef commit 35474a1

8 files changed

+171
-19
lines changed
 

‎package-lock.json

+3-3
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -90,7 +90,7 @@
9090
"gl-select-box": "^1.0.4",
9191
"gl-spikes2d": "^1.0.2",
9292
"gl-streamtube3d": "^1.4.1",
93-
"gl-surface3d": "^1.5.2",
93+
"gl-surface3d": "^1.6.0",
9494
"gl-text": "^1.1.8",
9595
"glslify": "^7.1.1",
9696
"has-hover": "^1.0.1",

‎src/lib/gl_format_color.js

+4-7
Original file line numberDiff line numberDiff line change
@@ -76,22 +76,19 @@ function formatColor(containerIn, opacityIn, len) {
7676
return colorOut;
7777
}
7878

79-
function parseColorScale(cont, alpha) {
80-
if(alpha === undefined) alpha = 1;
81-
79+
function parseColorScale(cont) {
8280
var cOpts = Colorscale.extractOpts(cont);
8381

84-
var colorscale = cOpts.reversescale ?
85-
Colorscale.flipScale(cOpts.colorscale) :
86-
cOpts.colorscale;
82+
var colorscale = cOpts.colorscale;
83+
if(cOpts.reversescale) colorscale = Colorscale.flipScale(cOpts.colorscale);
8784

8885
return colorscale.map(function(elem) {
8986
var index = elem[0];
9087
var color = tinycolor(elem[1]);
9188
var rgb = color.toRgb();
9289
return {
9390
index: index,
94-
rgb: [rgb.r, rgb.g, rgb.b, alpha]
91+
rgb: [rgb.r, rgb.g, rgb.b, rgb.a]
9592
};
9693
});
9794
}

‎src/traces/surface/convert.js

+1-6
Original file line numberDiff line numberDiff line change
@@ -433,8 +433,7 @@ proto.update = function(data) {
433433
var scene = this.scene;
434434
var sceneLayout = scene.fullSceneLayout;
435435
var surface = this.surface;
436-
var alpha = data.opacity;
437-
var colormap = parseColorScale(data, alpha);
436+
var colormap = parseColorScale(data);
438437
var scaleFactor = scene.dataScale;
439438
var xlen = data.z[0].length;
440439
var ylen = data._ylength;
@@ -679,10 +678,6 @@ proto.update = function(data) {
679678
if('lightposition' in data) {
680679
surface.lightPosition = [data.lightposition.x, data.lightposition.y, data.lightposition.z];
681680
}
682-
683-
if(alpha && alpha < 1) {
684-
surface.supportsTransparency = true;
685-
}
686681
};
687682

688683
proto.dispose = function() {

‎test/image/baselines/gl3d_surface-heatmap-treemap_transparent-colorscale.png

118 KB
Loading

‎test/image/compare_pixels_test.js

+1-2
Original file line numberDiff line numberDiff line change
@@ -102,9 +102,8 @@ if(allMock || argv.filter) {
102102

103103
var FLAKY_LIST = [
104104
'treemap_coffee',
105-
'treemap_textposition',
106-
'treemap_sunburst_marker_colors',
107105
'treemap_with-without_values',
106+
'gl3d_directions-streamtube1',
108107
];
109108

110109
console.log('');

‎test/image/mocks/gl3d_surface-heatmap-treemap_transparent-colorscale.json

+159
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,159 @@
1+
{
2+
"data": [
3+
{
4+
"type": "treemap",
5+
"labels": [
6+
"Alpha",
7+
"Bravo",
8+
"Charlie",
9+
"Delta",
10+
"Echo",
11+
"Foxtrot",
12+
"Golf",
13+
"Hotel",
14+
"India",
15+
"Juliet",
16+
"Kilo",
17+
"Lima",
18+
"Mike",
19+
"November",
20+
"Oscar",
21+
"Papa",
22+
"Quebec",
23+
"Romeo",
24+
"Sierra",
25+
"Tango",
26+
"Uniform",
27+
"Victor",
28+
"Whiskey",
29+
"X ray",
30+
"Yankee",
31+
"Zulu"
32+
],
33+
"parents": [
34+
"",
35+
"Alpha",
36+
"Alpha",
37+
"Charlie",
38+
"Charlie",
39+
"Charlie",
40+
"Foxtrot",
41+
"Foxtrot",
42+
"Foxtrot",
43+
"Foxtrot",
44+
"Juliet",
45+
"Juliet",
46+
"Juliet",
47+
"Juliet",
48+
"Juliet",
49+
"Oscar",
50+
"Oscar",
51+
"Oscar",
52+
"Oscar",
53+
"Oscar",
54+
"Oscar",
55+
"Uniform",
56+
"Uniform",
57+
"Uniform",
58+
"Uniform",
59+
"Uniform",
60+
"Uniform"
61+
],
62+
"level": "Juliet",
63+
"count": "leaves+branches",
64+
"textinfo": "label",
65+
"insidetextorientation": "horizontal",
66+
"marker": {
67+
"line": {
68+
"color": "#777"
69+
},
70+
"colorscale": [
71+
[0, "rgba(0,0,255,1)"],
72+
[0.5, "rgba(0,255,0,0.0)"],
73+
[1, "rgba(255,0,0,1)"]
74+
],
75+
"showscale": false
76+
},
77+
"domain": {
78+
"x": [0, 0.3]
79+
}
80+
},
81+
{
82+
"type": "heatmap",
83+
"zsmooth": "best",
84+
"coloraxis": "coloraxis",
85+
"contours": {
86+
"z": {
87+
"show": true
88+
}
89+
},
90+
"x": [0, 0.25, 0.5, 0.75, 1],
91+
"y": [0, 0.25, 0.5, 0.75, 1],
92+
"z": [
93+
[0, 0, 0, 0, 0],
94+
[0, 0.1, 0.8, 0.7, 0],
95+
[0, 0.2, 0, 0.6, 0],
96+
[0, 0.3, 0.4, 0.5, 0],
97+
[0, 0, 0, 0, 0]
98+
]
99+
},
100+
{
101+
"type": "surface",
102+
"coloraxis": "coloraxis",
103+
"contours": {
104+
"z": {
105+
"show": true
106+
}
107+
},
108+
"x": [0, 0.25, 0.5, 0.75, 1],
109+
"y": [0, 0.25, 0.5, 0.75, 1],
110+
"z": [
111+
[0, 0, 0, 0, 0],
112+
[0, 0.1, 0.8, 0.7, 0],
113+
[0, 0.2, 0, 0.6, 0],
114+
[0, 0.3, 0.4, 0.5, 0],
115+
[0, 0, 0, 0, 0]
116+
]
117+
}
118+
],
119+
"layout": {
120+
"width": 1000,
121+
"height": 350,
122+
"title": {
123+
"text": "treemap, heatmap & surface plots with transparent colorscale"
124+
},
125+
"coloraxis": {
126+
"colorscale": [
127+
[0, "rgba(0,0,255,1)"],
128+
[0.5, "rgba(0,255,0,0.0)"],
129+
[1, "rgba(255,0,0,1)"]
130+
]
131+
},
132+
"margin": {
133+
"t": 75,
134+
"l": 25,
135+
"r": 25,
136+
"b": 25
137+
},
138+
"xaxis": {
139+
"domain": [0.35, 0.65]
140+
},
141+
"scene": {
142+
"domain": {
143+
"x": [0.7, 1]
144+
},
145+
"camera": {
146+
"eye": {
147+
"x": 0,
148+
"y": 0,
149+
"z": 2
150+
},
151+
"up": {
152+
"x": 0,
153+
"y": 1,
154+
"z": 0
155+
}
156+
}
157+
}
158+
}
159+
}

‎test/jasmine/tests/mock_test.js

+2
Original file line numberDiff line numberDiff line change
@@ -562,6 +562,7 @@ var list = [
562562
'gl3d_surface_transparent-with-contours',
563563
'gl3d_surface-circular-colorscale',
564564
'gl3d_surface-circular-opacityscale',
565+
'gl3d_surface-heatmap-treemap_transparent-colorscale',
565566
'gl3d_surface-lighting',
566567
'gl3d_tetrahedra',
567568
'gl3d_text-weirdness',
@@ -1614,6 +1615,7 @@ figs['gl3d_surface_opacity_match_mesh3d'] = require('@mocks/gl3d_surface_opacity
16141615
figs['gl3d_surface_transparent-with-contours'] = require('@mocks/gl3d_surface_transparent-with-contours');
16151616
figs['gl3d_surface-circular-colorscale'] = require('@mocks/gl3d_surface-circular-colorscale');
16161617
figs['gl3d_surface-circular-opacityscale'] = require('@mocks/gl3d_surface-circular-opacityscale');
1618+
// figs['gl3d_surface-heatmap-treemap_transparent-colorscale'] = require('@mocks/gl3d_surface-heatmap-treemap_transparent-colorscale');
16171619
// figs['gl3d_surface-lighting'] = require('@mocks/gl3d_surface-lighting');
16181620
figs['gl3d_tetrahedra'] = require('@mocks/gl3d_tetrahedra');
16191621
figs['gl3d_text-weirdness'] = require('@mocks/gl3d_text-weirdness');

0 commit comments

Comments
 (0)
Please sign in to comment.