Skip to content

Commit 1d147e3

Browse files
ErwanMASErwanMAS
committed
- when undefined values with option fill tozerox or tozeroy - order of fill scattergl when overlap
1 parent 33e1acf commit 1d147e3

9 files changed

+188
-11
lines changed

‎src/traces/scattergl/index.js

+67-11
Original file line numberDiff line numberDiff line change
@@ -257,15 +257,28 @@ function sceneUpdate(gd, subplot) {
257257
// draw traces in proper order
258258
scene.draw = function draw() {
259259
var i;
260+
var allReadyDrawLines = Lib.repeat(false, scene.count);
261+
var allReadyDrawMarkers = Lib.repeat(false, scene.count);
260262
for(i = 0; i < scene.count; i++) {
261263
if(scene.fill2d && scene.fillOptions[i]) {
262264
// must do all fills first
263265
scene.fill2d.draw(i);
266+
if(scene.line2d && scene.lineOptions[i] && ( scene.fillOptions[i].fillmode === 'tozeroy' || scene.fillOptions[i].fillmode === 'tozerox' )) {
267+
scene.line2d.draw(i);
268+
allReadyDrawLines[i] = true;
269+
}
270+
if(scene.scatter2d && scene.markerOptions[i] && (!scene.selectBatch || !scene.selectBatch[i]) && ( scene.fillOptions[i].fillmode === 'tozeroy' || scene.fillOptions[i].fillmode === 'tozerox' )) {
271+
// traces in no-selection mode
272+
scene.scatter2d.draw(i);
273+
allReadyDrawMarkers[i] = true;
274+
}
264275
}
265276
}
266277
for(i = 0; i < scene.count; i++) {
267278
if(scene.line2d && scene.lineOptions[i]) {
268-
scene.line2d.draw(i);
279+
if(!allReadyDrawLines[i]) {
280+
scene.line2d.draw(i);
281+
}
269282
}
270283
if(scene.error2d && scene.errorXOptions[i]) {
271284
scene.error2d.draw(i);
@@ -275,7 +288,9 @@ function sceneUpdate(gd, subplot) {
275288
}
276289
if(scene.scatter2d && scene.markerOptions[i] && (!scene.selectBatch || !scene.selectBatch[i])) {
277290
// traces in no-selection mode
278-
scene.scatter2d.draw(i);
291+
if(!allReadyDrawMarkers[i]) {
292+
scene.scatter2d.draw(i);
293+
}
279294
}
280295
}
281296

@@ -417,6 +432,24 @@ function plot(gd, subplot, cdata) {
417432
}
418433
if(scene.line2d) {
419434
scene.line2d.update(scene.lineOptions);
435+
scene.lineOptions = scene.lineOptions.map(function(lineOptions) {
436+
if(lineOptions && lineOptions.positions) {
437+
var pos = [], srcPos = lineOptions.positions;
438+
439+
var firstptdef = 0;
440+
while(isNaN(srcPos[firstptdef]) || isNaN(srcPos[firstptdef + 1])) {
441+
firstptdef += 2;
442+
}
443+
var lastptdef = srcPos.length - 2;
444+
while(isNaN(srcPos[lastptdef]) || isNaN(srcPos[lastptdef + 1])) {
445+
lastptdef += -2;
446+
}
447+
pos = pos.concat(srcPos.slice(firstptdef, lastptdef + 2));
448+
lineOptions.positions = pos;
449+
}
450+
return lineOptions;
451+
});
452+
scene.line2d.update(scene.lineOptions);
420453
}
421454
if(scene.error2d) {
422455
var errorBatch = (scene.errorXOptions || []).concat(scene.errorYOptions || []);
@@ -439,16 +472,38 @@ function plot(gd, subplot, cdata) {
439472
var pos = [], srcPos = (lineOptions && lineOptions.positions) || stash.positions;
440473

441474
if(trace.fill === 'tozeroy') {
442-
pos = [srcPos[0], 0];
443-
pos = pos.concat(srcPos);
444-
pos.push(srcPos[srcPos.length - 2]);
445-
pos.push(0);
475+
var firstpdef = 0;
476+
while(isNaN(srcPos[firstpdef + 1])) {
477+
firstpdef += 2;
478+
}
479+
var lastpdef = srcPos.length - 2;
480+
while(isNaN(srcPos[lastpdef + 1])) {
481+
lastpdef += -2;
482+
}
483+
if(srcPos[firstpdef + 1] !== 0) {
484+
pos = [ srcPos[firstpdef], 0 ];
485+
}
486+
pos = pos.concat(srcPos.slice(firstpdef, lastpdef + 2));
487+
if(srcPos[lastpdef + 1] !== 0) {
488+
pos = pos.concat([ srcPos[lastpdef], 0 ]);
489+
}
446490
}
447491
else if(trace.fill === 'tozerox') {
448-
pos = [0, srcPos[1]];
449-
pos = pos.concat(srcPos);
450-
pos.push(0);
451-
pos.push(srcPos[srcPos.length - 1]);
492+
var firstptdef = 0;
493+
while(isNaN(srcPos[firstptdef])) {
494+
firstptdef += 2;
495+
}
496+
var lastptdef = srcPos.length - 2;
497+
while(isNaN(srcPos[lastptdef])) {
498+
lastptdef += -2;
499+
}
500+
if(srcPos[firstptdef] !== 0) {
501+
pos = [ 0, srcPos[firstptdef + 1] ];
502+
}
503+
pos = pos.concat(srcPos.slice(firstptdef, lastptdef + 2));
504+
if(srcPos[lastptdef] !== 0) {
505+
pos = pos.concat([ 0, srcPos[lastptdef + 1]]);
506+
}
452507
}
453508
else if(trace.fill === 'toself' || trace.fill === 'tonext') {
454509
pos = [];
@@ -506,7 +561,8 @@ function plot(gd, subplot, cdata) {
506561
pos = pos.concat(prevLinePos);
507562
fillOptions.hole = hole;
508563
}
509-
564+
565+
fillOptions.fillmode = trace.fill;
510566
fillOptions.opacity = trace.opacity;
511567
fillOptions.positions = pos;
512568

‎test/image/baselines/gl2d_fill_trace_fillx.png

15.7 KB
Loading

‎test/image/baselines/gl2d_fill_trace_filly.png

14 KB
Loading

‎test/image/baselines/gl2d_fill_trace_order.png

14.9 KB
Loading

‎test/image/baselines/gl2d_text_chart_basic.png

-43 Bytes
Loading

‎test/image/baselines/gl2d_text_chart_single-string.png

-42 Bytes
Loading

‎test/image/mocks/gl2d_fill_trace_fillx.json

+36
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
{
2+
"data": [
3+
{
4+
"x": [null,3 , 3, null, null
5+
],
6+
"y": [ 100,125, 150,175 ,200 ],
7+
"type": "scattergl",
8+
"fill": "tozerox",
9+
"mode": "none",
10+
"showlegend": false,
11+
"fillcolor": "#FF69B4",
12+
"line": { "color": "#FF69B4" }
13+
14+
},
15+
{
16+
"x": [
17+
null,
18+
null,
19+
null,
20+
5,
21+
5
22+
],
23+
"y": [ 100,125, 150,175 ,200 ],
24+
"type": "scattergl",
25+
"fill": "tozerox",
26+
"mode": "markers+lines",
27+
"showlegend": false,
28+
"fillcolor": "#202ff0",
29+
"line": { "color": "#101ff0" }
30+
}
31+
],
32+
"layout": {
33+
"margin": {"l": 100, "r": 100, "t": 100, "b": 100},
34+
"yaxis": { "title": "Y axis 2 ", "type": "linear", "rangemode": "tozero", "nticks": 3 }
35+
}
36+
}

‎test/image/mocks/gl2d_fill_trace_filly.json

+52
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
{
2+
"data": [
3+
{
4+
"x": [
5+
1,
6+
2,
7+
3,
8+
4,
9+
5
10+
],
11+
"y": [ null
12+
,
13+
100,
14+
100,null
15+
,null
16+
],
17+
"type": "scattergl",
18+
"fill": "tozeroy",
19+
"mode": "none",
20+
"showlegend": false,
21+
"fillcolor": "#90ff70",
22+
"line": { "color": "#90ff70" }
23+
24+
},
25+
{
26+
"x": [
27+
1,
28+
2,
29+
3,
30+
4,
31+
5
32+
],
33+
"y": [null
34+
,null
35+
,null
36+
,
37+
100,
38+
100
39+
],
40+
"type": "scattergl",
41+
"fill": "tozeroy",
42+
"mode": "markers+lines",
43+
"showlegend": false,
44+
"fillcolor": "#f02f20",
45+
"line": { "color": "#f01f10" }
46+
}
47+
],
48+
"layout": {
49+
"margin": {"l": 100, "r": 100, "t": 100, "b": 100},
50+
"yaxis": { "title": "Y axis 2 ", "type": "linear", "rangemode": "tozero", "nticks": 3 }
51+
}
52+
}

‎test/image/mocks/gl2d_fill_trace_order.json

+33
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
{
2+
"data": [
3+
{
4+
"x": [ 1, 1, 2, 3, 4, 5,5
5+
],
6+
"y": [ 0,100,100,100,100,100,0
7+
],
8+
"type": "scattergl",
9+
"fill": "tozeroy",
10+
"mode": "markers+lines",
11+
"showlegend": false,
12+
"fillcolor": "#f02f20",
13+
"line": { "color": "#f01f10" }
14+
},
15+
{
16+
"x": [ 1, 2, 2, 3, 4, 4,5
17+
],
18+
"y": [ 0, 0,200,200,200, 0,0
19+
],
20+
"type": "scattergl",
21+
"fill": "tozeroy",
22+
"mode": "none",
23+
"showlegend": false,
24+
"fillcolor": "#90ff70",
25+
"line": { "color": "#90ff70" }
26+
27+
}
28+
],
29+
"layout": {
30+
"margin": {"l": 100, "r": 100, "t": 100, "b": 100},
31+
"yaxis": { "title": "Y axis 2 ", "type": "linear", "rangemode": "tozero", "nticks": 3 }
32+
}
33+
}

0 commit comments

Comments
 (0)