Merge pull request #3329 from plotly/rangeslider-top-axis

Fix rangeslider + automargin on side:'top' axes

Author: etpinard

src/components/rangeslider/draw.js

@@ -100,7 +100,7 @@ module.exports = function(gd) {
         var margin = fullLayout.margin;
         var graphSize = fullLayout._size;
         var domain = axisOpts.domain;
-        var tickHeight = (axisOpts._boundingBox || {}).height || 0;
+        var tickHeight = opts._tickHeight;
 
         var oppBottom = opts._oppBottom;
 

src/components/rangeslider/helpers.js

@@ -54,6 +54,7 @@ exports.autoMarginOpts = function(gd, ax) {
     opts._oppBottom = oppBottom;
 
     var tickHeight = (ax.side === 'bottom' && ax._boundingBox.height) || 0;
+    opts._tickHeight = tickHeight;
 
     return {
         x: 0,

src/plot_api/plot_api.js

@@ -1937,8 +1937,19 @@ function addAxRangeSequence(seq, rangesAltered) {
     // subroutine of its own so that finalDraw always gets
     // executed after drawData
     var drawAxes = rangesAltered ?
-        function(gd) { return Axes.draw(gd, Object.keys(rangesAltered), {skipTitle: true}); } :
-        function(gd) { return Axes.draw(gd, 'redraw'); };
+        function(gd) {
+            var opts = {skipTitle: true};
+            for(var id in rangesAltered) {
+                if(Axes.getFromId(gd, id).automargin) {
+                    opts = {};
+                    break;
+                }
+            }
+            return Axes.draw(gd, Object.keys(rangesAltered), opts);
+        } :
+        function(gd) {
+            return Axes.draw(gd, 'redraw');
+        };
 
     seq.push(
         subroutines.doAutoRangeAndConstraints,

test/image/baselines/range_slider_multiple.png

@@ -0,0 +1,39 @@
+{
+  "data": [
+    {
+      "x": [
+        "a",
+        "b",
+        "c",
+        "d",
+        "long category",
+        "another even longer",
+        "the longest one yet!!!!!!"
+      ],
+      "y": [
+        0,
+        10,
+        20,
+        30,
+        40,
+        50,
+        60
+      ]
+    }
+  ],
+  "layout": {
+    "xaxis": {
+      "title": {
+        "text": "Top X Axis",
+        "font": {"size": 24}
+      },
+      "rangeslider": {
+        "visible": true
+      },
+      "side": "top",
+      "automargin": true
+    },
+    "width": 400,
+    "height": 400
+  }
+}

test/image/baselines/range_slider_top_axis.png

@@ -352,6 +352,51 @@ describe('Visible rangesliders', function() {
         .catch(failTest)
         .then(done);
     });
+
+    it('should automargin correctly with a top or bottom x axis', function(done) {
+        var topMock = require('@mocks/range_slider_top_axis');
+
+        function assertTop(hasExtra) {
+            var op = hasExtra ? 'toBeGreaterThan' : 'toBeLessThan';
+            expect(gd._fullLayout._size.t)[op](102);
+            expect(gd._fullLayout._size.b).toBeWithin(128, 5);
+        }
+
+        function assertBottom(val) {
+            expect(gd._fullLayout._size.t).toBe(100);
+            expect(gd._fullLayout._size.b).toBeWithin(val, 10);
+        }
+
+        Plotly.plot(gd, topMock)
+        .then(function() {
+            assertTop(true);
+            return Plotly.relayout(gd, 'xaxis.range', [-0.5, 1.5]);
+        })
+        .then(function() {
+            assertTop(false);
+            return Plotly.relayout(gd, 'xaxis.range', [-0.5, 6.5]);
+        })
+        .then(function() {
+            assertTop(true);
+            // rangeslider automargins even without automargin turned on
+            // axis.automargin only affects automargin directly from labels,
+            // not when the rangeslider is pushed down by labels.
+            return Plotly.relayout(gd, {'xaxis.side': 'bottom', 'xaxis.automargin': false});
+        })
+        .then(function() {
+            assertBottom(210);
+            return Plotly.relayout(gd, 'xaxis.range', [-0.5, 1.5]);
+        })
+        .then(function() {
+            assertBottom(145);
+            return Plotly.relayout(gd, 'xaxis.range', [-0.5, 6.5]);
+        })
+        .then(function() {
+            assertBottom(210);
+        })
+        .catch(failTest)
+        .then(done);
+    });
 });
 
 describe('Rangeslider visibility property', function() {