Skip to content

Commit e555e1d

Browse files
archmojarchmoj
authored
Merge pull request #6927 from my-tien/below_traces
Add shapes.layer "between" for drawing between gridlines and traces
2 parents 4390b0d + fb7f228 commit e555e1d

File tree

9 files changed

+165
-12
lines changed

9 files changed

+165
-12
lines changed

‎draftlogs/6927_add.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
- Add "between" option to shape layer for placing them above grid lines and below traces [[#6927](https://github.com/plotly/plotly.js/pull/6927)],
2+
with thanks to @my-tien for the contribution!

‎src/components/shapes/attributes.js‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -110,10 +110,13 @@ module.exports = templatedArray('shape', {
110110

111111
layer: {
112112
valType: 'enumerated',
113-
values: ['below', 'above'],
113+
values: ['below', 'above', 'between'],
114114
dflt: 'above',
115115
editType: 'arraydraw',
116-
description: 'Specifies whether shapes are drawn below or above traces.'
116+
description: [
117+
'Specifies whether shapes are drawn below gridlines (*below*),',
118+
'between gridlines and traces (*between*) or above traces (*above*).'
119+
].join(' ')
117120
},
118121

119122
xref: extendFlat({}, annAttrs.xref, {

‎src/components/shapes/draw.js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -91,10 +91,12 @@ function drawOne(gd, index) {
9191
// TODO: use d3 idioms instead of deleting and redrawing every time
9292
if(!options._input || options.visible !== true) return;
9393

94-
if(options.layer !== 'below') {
94+
if(options.layer === 'above') {
9595
drawShape(gd._fullLayout._shapeUpperLayer);
9696
} else if(options.xref === 'paper' || options.yref === 'paper') {
9797
drawShape(gd._fullLayout._shapeLowerLayer);
98+
} else if(options.layer === 'between') {
99+
drawShape(plotinfo.shapelayerBetween);
98100
} else {
99101
if(plotinfo._hadPlotinfo) {
100102
var mainPlot = plotinfo.mainplotinfo || plotinfo;

‎src/components/shapes/draw_newshape/attributes.js‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -117,9 +117,12 @@ module.exports = overrideAll({
117117
},
118118
layer: {
119119
valType: 'enumerated',
120-
values: ['below', 'above'],
120+
values: ['below', 'above', 'between'],
121121
dflt: 'above',
122-
description: 'Specifies whether new shapes are drawn below or above traces.'
122+
description: [
123+
'Specifies whether new shapes are drawn below gridlines (*below*),',
124+
'between gridlines and traces (*between*) or above traces (*above*).'
125+
].join(' ')
123126
},
124127
drawdirection: {
125128
valType: 'enumerated',

‎src/plots/cartesian/index.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -465,6 +465,10 @@ function makeSubplotLayer(gd, plotinfo) {
465465
plotinfo.gridlayer = ensureSingle(plotgroup, 'g', 'gridlayer');
466466
plotinfo.zerolinelayer = ensureSingle(plotgroup, 'g', 'zerolinelayer');
467467

468+
var betweenLayer = ensureSingle(plotgroup, 'g', 'layer-between');
469+
plotinfo.shapelayerBetween = ensureSingle(betweenLayer, 'g', 'shapelayer');
470+
plotinfo.imagelayerBetween = ensureSingle(betweenLayer, 'g', 'imagelayer');
471+
468472
ensureSingle(plotgroup, 'path', 'xlines-below');
469473
ensureSingle(plotgroup, 'path', 'ylines-below');
470474
plotinfo.overlinesBelow = ensureSingle(plotgroup, 'g', 'overlines-below');

‎test/image/baselines/zz-shapes_layer_below_traces.png‎

28.2 KB
Loading

‎test/image/mocks/zz-shapes_layer_below_traces.json‎

Lines changed: 137 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,137 @@
1+
{
2+
"data": [
3+
{
4+
"name": "scatter",
5+
"x": [
6+
"A",
7+
"B",
8+
"C",
9+
"D",
10+
2000.0
11+
],
12+
"y": [
13+
100,
14+
200,
15+
150,
16+
190,
17+
50
18+
],
19+
"type": "scatter"
20+
},
21+
{
22+
"name": "bar",
23+
"x": [
24+
"A",
25+
"B",
26+
"C",
27+
"D",
28+
2000.0
29+
],
30+
"y": [
31+
50,
32+
70,
33+
90,
34+
35,
35+
55
36+
],
37+
"type": "bar",
38+
"yaxis":"y2"
39+
}
40+
],
41+
"layout": {
42+
"shapes": [
43+
{
44+
"name": "dashdot line",
45+
"fillcolor": "rgba(179,179,179,1)",
46+
"layer": "above",
47+
"line": {
48+
"color": "rgba(66,127,109,1)",
49+
"dash": "dashdot"
50+
},
51+
"type": "line",
52+
"x0": 0.4,
53+
"x1": 0.4,
54+
"xref": "x",
55+
"y0": 0.0,
56+
"y1": 1.0,
57+
"yref": "paper"
58+
},
59+
{
60+
"name": "horizontal line",
61+
"fillcolor": "rgba(179,179,179,1)",
62+
"layer": "above",
63+
"line": {
64+
"color": "rgba(0,0,0,1)"
65+
},
66+
"type": "line",
67+
"x0": 0.0,
68+
"x1": 1.0,
69+
"xref": "paper",
70+
"y0": 120.0,
71+
"y1": 120.0,
72+
"yref": "y"
73+
},
74+
{
75+
"name": "blue rect",
76+
"fillcolor": "rgba(108,173,225,1)",
77+
"layer": "between",
78+
"label": {
79+
"text": "hello, I am between gridlines and traces!"
80+
},
81+
"line": {
82+
"color": "rgba(108,173,225,1)"
83+
},
84+
"type": "rect",
85+
"x0": "B",
86+
"x1": "D",
87+
"xref": "x",
88+
"y0": 35,
89+
"y1": 65.0
90+
},
91+
{
92+
"name": "big rect",
93+
"fillcolor": "rgba(179,179,179,1)",
94+
"layer": "below",
95+
"line": {
96+
"color": "rgba(179,179,179,1)"
97+
},
98+
"type": "rect",
99+
"x0": "C",
100+
"x1": 0.25,
101+
"xref": "x",
102+
"y0": 0.0,
103+
"y1": 1.0,
104+
"yref": "paper"
105+
},
106+
{
107+
"name": "dashed rect",
108+
"fillcolor": "rgba(130,143,198,1)",
109+
"layer": "between",
110+
"line": {
111+
"color": "rgba(0,0,0,1)",
112+
"dash": "dash",
113+
"width": 3.0
114+
},
115+
"type": "rect",
116+
"x0": "D",
117+
"x1": 5,
118+
"y0": 140,
119+
"y1": 200
120+
}
121+
],
122+
"yaxis": {
123+
"gridcolor": "red",
124+
"insiderange": [
125+
"0",
126+
"215"
127+
],
128+
"type": "linear"
129+
},
130+
"yaxis2": {
131+
"gridwidth": 2,
132+
"side": "right",
133+
"overlaying": "y"
134+
}
135+
136+
}
137+
}

‎test/jasmine/tests/splom_test.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -825,7 +825,7 @@ describe('Test splom interactions:', function() {
825825
.then(function() {
826826
_assert({
827827
subplotCnt: 25,
828-
innerSubplotNodeCnt: 18,
828+
innerSubplotNodeCnt: 19,
829829
hasSplomGrid: false,
830830
bgCnt: 0
831831
});
@@ -845,7 +845,7 @@ describe('Test splom interactions:', function() {
845845
// grid layer would be above xaxis layer,
846846
// if we didn't clear subplot children.
847847
expect(gridIndex).toBe(2, '<g.gridlayer> index');
848-
expect(xaxisIndex).toBe(15, '<g.xaxislayer-above> index');
848+
expect(xaxisIndex).toBe(16, '<g.xaxislayer-above> index');
849849

850850
return Plotly.restyle(gd, 'dimensions', [dimsLarge]);
851851
})
@@ -857,7 +857,7 @@ describe('Test splom interactions:', function() {
857857
// new subplots though have reduced number of children.
858858
innerSubplotNodeCnt: function(d) {
859859
var p = d.match(SUBPLOT_PATTERN);
860-
return (p[1] > 5 || p[2] > 5) ? 4 : 18;
860+
return (p[1] > 5 || p[2] > 5) ? 4 : 19;
861861
},
862862
hasSplomGrid: true,
863863
bgCnt: 0

‎test/plot-schema.json‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3720,13 +3720,14 @@
37203720
}
37213721
},
37223722
"layer": {
3723-
"description": "Specifies whether new shapes are drawn below or above traces.",
3723+
"description": "Specifies whether new shapes are drawn below gridlines (*below*), between gridlines and traces (*between*) or above traces (*above*).",
37243724
"dflt": "above",
37253725
"editType": "none",
37263726
"valType": "enumerated",
37273727
"values": [
37283728
"below",
3729-
"above"
3729+
"above",
3730+
"between"
37303731
]
37313732
},
37323733
"legend": {
@@ -7708,13 +7709,14 @@
77087709
}
77097710
},
77107711
"layer": {
7711-
"description": "Specifies whether shapes are drawn below or above traces.",
7712+
"description": "Specifies whether shapes are drawn below gridlines (*below*), between gridlines and traces (*between*) or above traces (*above*).",
77127713
"dflt": "above",
77137714
"editType": "arraydraw",
77147715
"valType": "enumerated",
77157716
"values": [
77167717
"below",
7717-
"above"
7718+
"above",
7719+
"between"
77187720
]
77197721
},
77207722
"legend": {

0 commit comments

Comments
 (0)