🔪 grid.gap

Author: alexcjohnson

src/plots/grid.js

@@ -109,20 +109,6 @@ var gridAttrs = exports.attributes = {
             'then iterating rows according to `roworder`.'
         ].join(' ')
     },
-    gap: {
-        valType: 'number',
-        min: 0,
-        max: 1,
-        dflt: 0.1,
-        role: 'info',
-        editType: 'calc',
-        description: [
-            'Space between grid cells, expressed as a fraction of the total',
-            'width or height available to one cell. You can also use `xgap`',
-            'and `ygap` to space x and y differently. Defaults to 0.1 for',
-            'coupled-axes grids and 0.25 for independent grids.'
-        ].join(' ')
-    },
     xgap: {
         valType: 'number',
         min: 0,
@@ -131,7 +117,8 @@ var gridAttrs = exports.attributes = {
         editType: 'calc',
         description: [
             'Horizontal space between grid cells, expressed as a fraction',
-            'of the total width available to one cell.'
+            'of the total width available to one cell. Defaults to 0.1',
+            'for coupled-axes grids and 0.2 for independent grids.'
         ].join(' ')
     },
     ygap: {
@@ -142,7 +129,8 @@ var gridAttrs = exports.attributes = {
         editType: 'calc',
         description: [
             'Vertical space between grid cells, expressed as a fraction',
-            'of the total height available to one cell.'
+            'of the total height available to one cell. Defaults to 0.1',
+            'for coupled-axes grids and 0.3 for independent grids.'
         ].join(' ')
     },
     domain: domainAttrs({name: 'grid', editType: 'calc', noGridCell: true}, {
@@ -218,17 +206,16 @@ exports.sizeDefaults = function(layoutIn, layoutOut) {
 
     var rowOrder = coerce('roworder');
     var reversed = rowOrder === 'top to bottom';
-    var gap = coerce('gap', hasSubplotGrid ? 0.25 : 0.1);
 
     gridOut._domains = {
-        x: fillGridPositions('x', coerce, gap, columns),
-        y: fillGridPositions('y', coerce, gap, rows, reversed)
+        x: fillGridPositions('x', coerce, hasSubplotGrid ? 0.2 : 0.1, columns),
+        y: fillGridPositions('y', coerce, hasSubplotGrid ? 0.3 : 0.1, rows, reversed)
     };
 };
 
 // coerce x or y sizing attributes and return an array of domains for this direction
-function fillGridPositions(axLetter, coerce, gap, len, reversed) {
-    var dirGap = coerce(axLetter + 'gap', gap);
+function fillGridPositions(axLetter, coerce, dfltGap, len, reversed) {
+    var dirGap = coerce(axLetter + 'gap', dfltGap);
     var domain = coerce('domain.' + axLetter);
     coerce(axLetter + 'side');
 

test/image/mocks/grid_subplot_types.json

@@ -22,7 +22,7 @@
     "yaxis2": {"title": "y2"},
     "xaxis3": {"title": "x3"},
     "yaxis3": {"title": "y3"},
-    "grid": {"rows": 3, "columns": 3, "gap": 0.3},
+    "grid": {"rows": 3, "columns": 3, "xgap": 0.3, "ygap": 0.3},
     "scene": {"domain": {"row": 1, "column": 1}},
     "ternary": {"domain": {"row": 1, "column": 2}},
     "geo": {"domain": {"row": 2, "column": 1}},

test/jasmine/tests/plots_test.js

@@ -940,12 +940,12 @@ describe('grids', function() {
         )
         .then(function() {
             _assertDomains({
-                xaxis2: [1 / 2.75, 1.75 / 2.75],
-                yaxis2: [2 / 2.75, 1],
-                xaxis3: [2 / 2.75, 1],
-                yaxis3: [2 / 2.75, 1],
-                xaxis4: [0, 0.75 / 2.75],
-                yaxis4: [1 / 2.75, 1.75 / 2.75]
+                xaxis2: [1 / 2.8, 1.8 / 2.8],
+                yaxis2: [2 / 2.7, 1],
+                xaxis3: [2 / 2.8, 1],
+                yaxis3: [2 / 2.7, 1],
+                xaxis4: [0, 0.8 / 2.8],
+                yaxis4: [1 / 2.7, 1.7 / 2.7]
             });
             _assertMissing(['xaxis', 'yaxis']);
 
@@ -955,33 +955,33 @@ describe('grids', function() {
         })
         .then(function() {
             _assertDomains({
-                xaxis2: [1 / 2.75, 1.75 / 2.75],
-                yaxis2: [0, 0.75 / 2.75],
-                xaxis3: [2 / 2.75, 1],
-                yaxis3: [2 / 2.75, 1],
-                xaxis4: [0, 0.75 / 2.75],
-                yaxis4: [2 / 2.75, 1]
+                xaxis2: [1 / 2.8, 1.8 / 2.8],
+                yaxis2: [0, 0.7 / 2.7],
+                xaxis3: [2 / 2.8, 1],
+                yaxis3: [2 / 2.7, 1],
+                xaxis4: [0, 0.8 / 2.8],
+                yaxis4: [2 / 2.7, 1]
             });
             _assertMissing(['xaxis', 'yaxis']);
 
             return Plotly.relayout(gd, {'grid.roworder': 'bottom to top'});
         })
         .then(function() {
             _assertDomains({
-                xaxis2: [1 / 2.75, 1.75 / 2.75],
-                yaxis2: [2 / 2.75, 1],
-                xaxis3: [2 / 2.75, 1],
-                yaxis3: [0, 0.75 / 2.75],
-                xaxis4: [0, 0.75 / 2.75],
-                yaxis4: [0, 0.75 / 2.75]
+                xaxis2: [1 / 2.8, 1.8 / 2.8],
+                yaxis2: [2 / 2.7, 1],
+                xaxis3: [2 / 2.8, 1],
+                yaxis3: [0, 0.7 / 2.7],
+                xaxis4: [0, 0.8 / 2.8],
+                yaxis4: [0, 0.7 / 2.7]
             });
             _assertMissing(['xaxis', 'yaxis']);
         })
         .catch(failTest)
         .then(done);
     });
 
-    it('can set x and y gaps together or separately and change domain', function(done) {
+    it('can set x and y gaps and change domain', function(done) {
         Plotly.newPlot(gd,
             // leave some empty rows/columns
             makeData(['xy', 'x2y2']),
@@ -995,24 +995,14 @@ describe('grids', function() {
                 yaxis2: [0, 0.9 / 1.9]
             });
 
-            return Plotly.relayout(gd, {'grid.gap': 0.4});
-        })
-        .then(function() {
-            _assertDomains({
-                xaxis: [0, 0.6 / 1.6],
-                yaxis: [1 / 1.6, 1],
-                xaxis2: [1 / 1.6, 1],
-                yaxis2: [0, 0.6 / 1.6]
-            });
-
             return Plotly.relayout(gd, {'grid.xgap': 0.2});
         })
         .then(function() {
             _assertDomains({
                 xaxis: [0, 0.8 / 1.8],
-                yaxis: [1 / 1.6, 1],
+                yaxis: [1 / 1.9, 1],
                 xaxis2: [1 / 1.8, 1],
-                yaxis2: [0, 0.6 / 1.6]
+                yaxis2: [0, 0.9 / 1.9]
             });
 
             return Plotly.relayout(gd, {'grid.ygap': 0.3});