Merge pull request #4127 from plotly/rangeslider-l-positioning-fix

Use gs.l not margin.l to position rangeslider

src/components/rangeslider/draw.js

@@ -106,19 +106,18 @@ module.exports = function(gd) {
 
         // update range slider dimensions
 
-        var margin = fullLayout.margin;
-        var graphSize = fullLayout._size;
+        var gs = fullLayout._size;
         var domain = axisOpts.domain;
         var tickHeight = opts._tickHeight;
 
         var oppBottom = opts._oppBottom;
 
-        opts._width = graphSize.w * (domain[1] - domain[0]);
+        opts._width = gs.w * (domain[1] - domain[0]);
 
-        var x = Math.round(margin.l + (graphSize.w * domain[0]));
+        var x = Math.round(gs.l + (gs.w * domain[0]));
 
         var y = Math.round(
-            graphSize.t + graphSize.h * (1 - oppBottom) +
+            gs.t + gs.h * (1 - oppBottom) +
             tickHeight +
             opts._offsetShift + constants.extraPad
         );

test/image/mocks/range_slider_legend_left.json

@@ -0,0 +1,123 @@
+{
+  "data": [
+    {
+      "x": [1, 2, 3],
+      "y": [44, 88, 132],
+      "name": "trace0"
+    },
+    {
+      "x": [1, 2, 3],
+      "y": [88, 176, 264],
+      "name": "trace1",
+      "yaxis": "y2"
+    },
+    {
+      "x": [1, 2, 3],
+      "y": [132, 264, 396.00000000000006],
+      "name": "trace2"
+    },
+    {
+      "x": [1, 2, 3],
+      "y": [176, 352, 528],
+      "name": "trace3",
+      "yaxis": "y2",
+      "visible": "legendonly"
+    },
+    {
+      "x": [1, 2, 3],
+      "y": [220, 440, 660],
+      "name": "trace4",
+      "visible": "legendonly"
+    },
+    {
+      "x": [1, 2, 3],
+      "y": [264, 528, 792],
+      "name": "trace5",
+      "yaxis": "y2",
+      "visible": "legendonly"
+    },
+    {
+      "x": [1, 2, 3],
+      "y": [308, 616, 923.9999999999999],
+      "name": "trace6",
+      "visible": "legendonly"
+    },
+    {
+      "x": [1, 2, 3],
+      "y": [351.99999999999994, 703.9999999999999, 1055.9999999999998],
+      "name": "trace7",
+      "yaxis": "y2",
+      "visible": "legendonly"
+    },
+    {
+      "x": [1, 2, 3],
+      "y": [395.99999999999994, 791.9999999999999, 1187.9999999999998],
+      "name": "trace8",
+      "visible": "legendonly"
+    },
+    {
+      "x": [1, 2, 3],
+      "y": [439.99999999999994, 879.9999999999999, 1319.9999999999998],
+      "name": "trace9",
+      "yaxis": "y2",
+      "visible": "legendonly"
+    },
+    {
+      "x": [1, 2, 3],
+      "y": [483.9999999999999, 967.9999999999998, 1451.9999999999998],
+      "name": "trace10",
+      "visible": "legendonly"
+    },
+    {
+      "x": [1, 2, 3],
+      "y": [527.9999999999999, 1055.9999999999998, 1583.9999999999998],
+      "name": "trace11",
+      "yaxis": "y2",
+      "visible": "legendonly"
+    },
+    {
+      "x": [1, 2, 3],
+      "y": [571.9999999999999, 1143.9999999999998, 1715.9999999999995],
+      "name": "trace12",
+      "visible": "legendonly"
+    },
+    {
+      "x": [1, 2, 3],
+      "y": [615.9999999999999, 1231.9999999999998, 1847.9999999999995],
+      "name": "trace13",
+      "yaxis": "y2",
+      "visible": "legendonly"
+    },
+    {
+      "x": [1, 2, 3],
+      "y": [659.9999999999999, 1319.9999999999998, 1979.9999999999995],
+      "name": "trace14",
+      "visible": "legendonly"
+    }
+  ],
+  "layout": {
+    "legend": {
+      "xanchor": "right",
+      "yanchor": "top",
+      "x": -0.5,
+      "y": 1
+    },
+    "xaxis": {
+      "rangeslider": {
+        "visible": true
+      }
+    },
+    "yaxis": {
+      "title": {
+        "text": "Count#"
+      }
+    },
+    "yaxis2": {
+      "title": {
+        "text": "Y-2Axis"
+      },
+      "overlaying": "y",
+      "side": "right"
+    }
+  }
+}