add a minimum pixel for margins - add test with margins on both sides

Author: archmoj

src/plots/plots.js

@@ -1881,6 +1881,12 @@ function initMargins(fullLayout) {
  */
 plots.autoMargin = function(gd, id, o) {
     var fullLayout = gd._fullLayout;
+    var minFinalWidth = Math.max(0, fullLayout.width -
+        64 // TODO: could be exposed as layout.margin.minfinalwidth
+    );
+    var minFinalHeight = Math.max(0, fullLayout.height -
+        64 // TODO: could be exposed as layout.margin.minfinalheight
+    );
 
     var pushMargin = fullLayout._pushmargin;
     var pushMarginIds = fullLayout._pushmarginIds;
@@ -1900,11 +1906,11 @@ plots.autoMargin = function(gd, id, o) {
 
             // if the item is too big, just give it enough automargin to
             // make sure you can still grab it and bring it back
-            if(o.l + o.r > fullLayout.width) {
+            if(o.l + o.r > minFinalWidth) {
                 Lib.log('Margin push', id, 'is too big in x, dropping');
                 o.l = o.r = 0;
             }
-            if(o.b + o.t > fullLayout.height) {
+            if(o.b + o.t > minFinalHeight) {
                 Lib.log('Margin push', id, 'is too big in y, dropping');
                 o.b = o.t = 0;
             }

test/image/baselines/automargin-large-margins-both-sides.png

@@ -0,0 +1,54 @@
+{
+    "data": [{
+            "name": "< D E A T H >",
+            "marker": { "color": "red" },
+            "y": [
+                "Antonio Vivaldi",
+                "Johann Sebastian Bach",
+                "Wolfgang Amadeus Mozart",
+                "Ludwig van Beethoven"
+            ],
+            "x": [
+                "1741",
+                "1750",
+                "1791",
+                "1827"
+            ]
+    },
+    {
+        "name": "< B I R T H >",
+        "marker": { "color": "blue" },
+        "y": [
+            "Antonio Vivaldi",
+            "Johann Sebastian Bach",
+            "Wolfgang Amadeus Mozart",
+            "Ludwig van Beethoven"
+        ],
+        "x": [
+            "1678",
+            "1685",
+            "1756",
+            "1770"
+        ]
+    }],
+    "layout": {
+        "title": {
+            "text": "Longest and shortest<br>names and time periods"
+        },
+        "width": 200,
+        "height": 200,
+        "margin": {
+            "t": 80,
+            "b": 20,
+            "l": 20,
+            "r": 20
+        },
+        "xaxis": {
+            "type": "date",
+            "automargin": true
+        },
+        "yaxis": {
+            "automargin": true
+        }
+    }
+}

test/image/mocks/automargin-large-margins-both-sides.json

@@ -40,6 +40,7 @@ var list = [
     'annotations-autorange',
     'arrow-markers',
     'automargin-large-margins',
+    'automargin-large-margins-both-sides',
     'automargin-large-margins-horizontal',
     'automargin-mirror-all',
     'automargin-mirror-allticks',
@@ -1106,6 +1107,7 @@ figs['animation_bar'] = require('@mocks/animation_bar');
 // figs['annotations-autorange'] = require('@mocks/annotations-autorange');
 figs['arrow-markers'] = require('@mocks/arrow-markers');
 figs['automargin-large-margins'] = require('@mocks/automargin-large-margins');
+figs['automargin-large-margins-both-sides'] = require('@mocks/automargin-large-margins-both-sides');
 figs['automargin-large-margins-horizontal'] = require('@mocks/automargin-large-margins-horizontal');
 figs['automargin-mirror-all'] = require('@mocks/automargin-mirror-all');
 figs['automargin-mirror-allticks'] = require('@mocks/automargin-mirror-allticks');