Add shapes.layer "between" for drawing between gridlines and traces

[my-tien]

This PR adds the value "belowtraces" to the shapes.layer property. "below" draws the shape below the gridlines, "above" draws it above traces and "belowtraces" draws it between gridlines and traces.

I am required to add that…

the software is provided "as is", without warranty of any kind, express or implied, including but not limited to the warranties of merchantability, fitness for a particular purpose and noninfringement. in no event shall the authors or copyright holders be liable for any claim, damages or other liability, whether in an action of contract, tort or otherwise, arising from, out of or in connection with the software or the use or other dealings in the software.

[archmoj]

This option should be added to newshape too here:

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

Line 120 in 08f21f0

values: ['below', 'above'],

That way one could use this feature when drawing new shapes.

[my-tien]

Hi @archmoj, thx for your feedback so far!
Please let me know if there are more locations I need to update for newshape. I didn't find any.

[my-tien]

Hi, any pointers for this error that suddenly appeared? Can it be ignored?

1. @gl should fetch GeoJSON using URLs found in the traces
   Test mapbox GeoJSON fetching:
   Error: Expected Error: GeoJSON at URL "invalidUrl-two" does not exist. to equal Error: GeoJSON at URL "invalidUrl" does not exist..
   at
   at eval (webpack://plotly.js/./test/jasmine/tests/mapbox_test.js?:1800:22)
   Error: Expected 'pending' to be undefined.
   at
   at eval (webpack://plotly.js/./test/jasmine/tests/mapbox_test.js?:1801:49)

[archmoj]

We fixed a problem on CircleCI (#6935).
Please pull upstream/master and merge it into this branch.

[archmoj]

@my-tien Thanks very much for the PR.

Just a little note:
Force pushing to PRs is discouraged as described here: https://github.com/plotly/plotly.js/blob/master/.github/PULL_REQUEST_TEMPLATE.md

It's just fine for now. But for future work it would be better to pull upstream/master and merge it instead of rebasing and force push.

Thanks again for all your great contributions.

I would request a second review from @emilykl on this PR.

[my-tien]

@my-tien Thanks very much for the PR.

Just a little note: Force pushing to PRs is discouraged as described here: https://github.com/plotly/plotly.js/blob/master/.github/PULL_REQUEST_TEMPLATE.md

It's just fine for now. But for future work it would be better to pull upstream/master and merge it instead of rebasing and force push.

Thanks again for all your great contributions.

I would request a second review from @emilykl on this PR.

Right, I might have tested your tolerance there… will pay attention to that next time! :)

[emilykl]

How does this behave with multiple overlaid sets of axes and gridlines?

[my-tien]

How does this behave with multiple overlaid sets of axes and gridlines?

I have added a y2 axis to the test to verify that it looks correct

[archmoj]

@my-tien Please test the following mock:
It looks there is a problem placing some of the shapes in the relevant layer.

{
    "data":[{
        "x":[0,0.1,0.2,0.3,0.4,0.5,0.6,0.7,0.8,0.9,1],
        "y":[1,2,3,4,5,6,7,8,9,10],
        "mode":"markers"
    },
    {
        "x":["2000-01-01", "2000-01-02"],
        "y":["a", "b"],
        "mode":"markers",
        "xaxis":"x2",
        "yaxis":"y2"
    }],
    "layout": {
        "xaxis":{"title":{"text":"linear"},"range":[0,1],"domain":[0.35,0.65],"type":"linear","zeroline":false,"showticklabels":false},
        "yaxis":{"title":{"text":"log"},"range":[0,1],"domain":[0.6,1],"type":"log","zeroline":false,"showticklabels":false},
        "xaxis2":{"title":{"text":"date"},"range":["2000-01-01","2000-01-02"],"domain":[0.7,1],"anchor":"y2","type":"date","zeroline":false,"showticklabels":false},
        "yaxis2":{"title":{"text":"category"},"range":[0,1],"domain":[0.6,1],"anchor":"x2","type":"category","zeroline":false,"showticklabels":false},
        "height":400,
        "width":800,
        "margin": {"l":20,"r":20,"pad":0},
        "showlegend":false,
        "shapes":[
            {"layer":"between","x0":0.1,"x1":0.4,"y0":1.5,"y1":20,"opacity":0.5,"fillcolor":"#f00","line":{"width":8,"color":"#008","dash":"dashdot"}},
            {"layer":"between","path":"M0.5,3C0.5,9 0.9,9 0.9,3C0.9,1 0.5,1 0.5,3ZM0.6,4C0.6,5 0.66,5 0.66,4ZM0.74,4C0.74,5 0.8,5 0.8,4ZM0.6,3C0.63,2 0.77,2 0.8,3Z","fillcolor":"#fd2","line":{"width":1,"color":"black"}},
            {"layer":"between","xref":"x2","yref":"y2","type":"circle","x0":"2000-01-01 02","x1":"2000-01-01 08:30:33.456","y0":0.1,"y1":0.9,"fillcolor":"rgba(0,0,0,0.5)","line":{"color":"rgba(0,255,0,0.5)", "width":5}},
            {"layer":"between","xref":"x2","yref":"y2","path":"M2000-01-01_11:20:45.6,0.2Q2000-01-01_10:00,0.85 2000-01-01_21,0.8Q2000-01-01_22:20,0.15 2000-01-01_11:20:45.6,0.2Z","fillcolor":"rgb(151,73,58)"},
            {"layer":"between","xref":"x2","yref":"y2","type":"line","x0":"2000-01-01 11:00","x1":"2000-01-01 09:00","y0":"b","y1":"a","line":{"color":"#006","width":3}}
        ]
    }
}

[my-tien]

@my-tien Please test the following mock: It looks there is a problem placing some of the shapes in the relevant layer.

{
    "data":[{
        "x":[0,0.1,0.2,0.3,0.4,0.5,0.6,0.7,0.8,0.9,1],
        "y":[1,2,3,4,5,6,7,8,9,10],
        "mode":"markers"
    },
    {
        "x":["2000-01-01", "2000-01-02"],
        "y":["a", "b"],
        "mode":"markers",
        "xaxis":"x2",
        "yaxis":"y2"
    }],
    "layout": {
        "xaxis":{"title":{"text":"linear"},"range":[0,1],"domain":[0.35,0.65],"type":"linear","zeroline":false,"showticklabels":false},
        "yaxis":{"title":{"text":"log"},"range":[0,1],"domain":[0.6,1],"type":"log","zeroline":false,"showticklabels":false},
        "xaxis2":{"title":{"text":"date"},"range":["2000-01-01","2000-01-02"],"domain":[0.7,1],"anchor":"y2","type":"date","zeroline":false,"showticklabels":false},
        "yaxis2":{"title":{"text":"category"},"range":[0,1],"domain":[0.6,1],"anchor":"x2","type":"category","zeroline":false,"showticklabels":false},
        "height":400,
        "width":800,
        "margin": {"l":20,"r":20,"pad":0},
        "showlegend":false,
        "shapes":[
            {"layer":"between","x0":0.1,"x1":0.4,"y0":1.5,"y1":20,"opacity":0.5,"fillcolor":"#f00","line":{"width":8,"color":"#008","dash":"dashdot"}},
            {"layer":"between","path":"M0.5,3C0.5,9 0.9,9 0.9,3C0.9,1 0.5,1 0.5,3ZM0.6,4C0.6,5 0.66,5 0.66,4ZM0.74,4C0.74,5 0.8,5 0.8,4ZM0.6,3C0.63,2 0.77,2 0.8,3Z","fillcolor":"#fd2","line":{"width":1,"color":"black"}},
            {"layer":"between","xref":"x2","yref":"y2","type":"circle","x0":"2000-01-01 02","x1":"2000-01-01 08:30:33.456","y0":0.1,"y1":0.9,"fillcolor":"rgba(0,0,0,0.5)","line":{"color":"rgba(0,255,0,0.5)", "width":5}},
            {"layer":"between","xref":"x2","yref":"y2","path":"M2000-01-01_11:20:45.6,0.2Q2000-01-01_10:00,0.85 2000-01-01_21,0.8Q2000-01-01_22:20,0.15 2000-01-01_11:20:45.6,0.2Z","fillcolor":"rgb(151,73,58)"},
            {"layer":"between","xref":"x2","yref":"y2","type":"line","x0":"2000-01-01 11:00","x1":"2000-01-01 09:00","y0":"b","y1":"a","line":{"color":"#006","width":3}}
        ]
    }
}

Can you specify which layer is placed incorrectly? I couldn't find an issue with this example (I removed transparency and made the traces overlap all shapes to see that it correctly draws on top of the shapes):

{
  "data":[{
      "x":[0,0.1,0.2,0.3,0.4,0.5,0.6,0.7,0.8,0.9,1],
      "y":[1,2,3,4,5,6,6,6,6,6],
      "mode":"markers"
  },
  {
      "x":["2000-01-01", "2000-01-02"],
      "y":["a", "b"],
      "mode":"lines+markers",
      "xaxis":"x2",
      "yaxis":"y2"
  }],
  "layout": {
      "xaxis":{"title":{"text":"linear"},"range":[0,1],"domain":[0.35,0.65],"type":"linear","zeroline":false,"showticklabels":false},
      "yaxis":{"title":{"text":"log"},"range":[0,1],"domain":[0.6,1],"type":"log","zeroline":false,"showticklabels":false},
      "xaxis2":{"title":{"text":"date"},"range":["2000-01-01","2000-01-02"],"domain":[0.7,1],"anchor":"y2","type":"date","zeroline":false,"showticklabels":false},
      "yaxis2":{"title":{"text":"category"},"range":[0,1],"domain":[0.6,1],"anchor":"x2","type":"category","zeroline":false,"showticklabels":false},
      "height":400,
      "width":800,
      "margin": {"l":20,"r":20,"pad":0},
      "showlegend":false,
      "shapes":[
          {"layer":"between","x0":0.1,"x1":0.4,"y0":1.5,"y1":20,"opacity":1,"fillcolor":"#f00","line":{"width":8,"color":"#008","dash":"dashdot"}},
          {"layer":"between","path":"M0.5,3C0.5,9 0.9,9 0.9,3C0.9,1 0.5,1 0.5,3ZM0.6,4C0.6,5 0.66,5 0.66,4ZM0.74,4C0.74,5 0.8,5 0.8,4ZM0.6,3C0.63,2 0.77,2 0.8,3Z","fillcolor":"#fd2","line":{"width":1,"color":"black"}},
          {"layer":"between","xref":"x2","yref":"y2","type":"circle","x0":"2000-01-01 02","x1":"2000-01-01 08:30:33.456","y0":0.1,"y1":0.9,"fillcolor":"rgba(0,0,0,1)","line":{"color":"rgba(0,255,0,1)", "width":5}},
          {"layer":"between","xref":"x2","yref":"y2","path":"M2000-01-01_11:20:45.6,0.2Q2000-01-01_10:00,0.85 2000-01-01_21,0.8Q2000-01-01_22:20,0.15 2000-01-01_11:20:45.6,0.2Z","fillcolor":"rgb(151,73,58)"},
          {"layer":"between","xref":"x2","yref":"y2","type":"line","x0":"2000-01-01 11:00","x1":"2000-01-01 09:00","y0":"b","y1":"a","line":{"color":"#006","width":3}}
      ]
  }
}

[archmoj]

Thanks for testing it out. So It was because of the transparency that I thought there is an issue.
Resolved.

@my-tien Please test the following mock: It looks there is a problem placing some of the shapes in the relevant layer.

Can you specify which layer is placed incorrectly? I couldn't find an issue with this example (I removed transparency and made the traces overlap all shapes to see that it correctly draws on top of the shapes):

[archmoj]

Nicely completed.
💃