add support for responsive charts

package.json

@@ -142,6 +142,7 @@
     "karma-jasmine-spec-tags": "^1.0.1",
     "karma-spec-reporter": "0.0.32",
     "karma-verbose-reporter": "0.0.6",
+    "karma-viewport": "^1.0.2",
     "madge": "^3.2.0",
     "minify-stream": "^1.2.0",
     "minimist": "^1.2.0",

src/plot_api/plot_api.js

@@ -385,6 +385,15 @@ function emitAfterPlot(gd) {
         fullLayout._redrawFromAutoMarginCount--;
     } else {
         gd.emit('plotly_afterplot');
+
+        // make the figure responsive
+        if(gd._context.responsive && !gd._responsiveChartHandler) {
+            // Keep a reference to the resize handler to purge it down the road
+            gd._responsiveChartHandler = function() {Plots.resize(gd);};
+
+            // Listen to window resize
+            window.addEventListener('resize', gd._responsiveChartHandler);
+        }
     }
 }
 
@@ -3155,6 +3164,11 @@ exports.purge = function purge(gd) {
     var fullData = gd._fullData || [];
     var calcdata = gd.calcdata || [];
 
+    // remove responsive handler
+    if(gd._responsiveChartHandler) {
+        window.removeEventListener('resize', gd._responsiveChartHandler);
+    }
+
     // remove gl contexts
     Plots.cleanPlot([], {}, fullData, fullLayout, calcdata);
 

src/plot_api/plot_config.js

@@ -57,6 +57,9 @@ module.exports = {
      */
     autosizable: false,
 
+    // responsive: determines whether to change the layout size when window is resized
+    responsive: false,
+
     // set the length of the undo/redo queue
     queueLength: 0,
 

test/jasmine/.eslintrc

@@ -3,5 +3,8 @@
   "env": {
     "browser": true,
     "jasmine": true
+  },
+  "globals": {
+    "viewport": true
   }
 }

test/jasmine/karma.conf.js

@@ -137,7 +137,7 @@ func.defaultConfig = {
 
     // frameworks to use
     // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
-    frameworks: ['jasmine', 'jasmine-spec-tags', 'browserify'],
+    frameworks: ['jasmine', 'jasmine-spec-tags', 'browserify', 'viewport'],
 
     // list of files / patterns to load in the browser
     //

test/jasmine/tests/config_test.js

@@ -6,6 +6,7 @@ var destroyGraphDiv = require('../assets/destroy_graph_div');
 var click = require('../assets/click');
 var mouseEvent = require('../assets/mouse_event');
 var failTest = require('../assets/fail_test');
+var delay = require('../assets/delay');
 
 describe('config argument', function() {
 
@@ -529,4 +530,50 @@ describe('config argument', function() {
             });
         });
     });
+
+    describe('responsive figure', function() {
+        var gd;
+        var data = [{x: [1, 2, 3, 4], y: [5, 10, 2, 8]}];
+
+        beforeEach(function() {
+            viewport.reset();
+            gd = createGraphDiv();
+
+            // Make the graph fill the parent
+            gd.style.width = '100%';
+            gd.style.height = '100%';
+        });
+
+        afterEach(function() {
+            destroyGraphDiv();
+            // Reset window size
+            viewport.reset();
+        });
+
+        function checkLayoutSize(width, height) {
+            expect(gd._fullLayout.width).toBe(width);
+            expect(gd._fullLayout.height).toBe(height);
+
+            var svg = document.getElementsByClassName('main-svg')[0];
+            expect(+svg.getAttribute('width')).toBe(width);
+            expect(+svg.getAttribute('height')).toBe(height);
+        }
+
+        it('should resize when the viewport width/height changes', function(done) {
+            var newWidth = 400, newHeight = 700;
+            Plotly.newPlot(gd, data, {}, {responsive: true})
+            // Resize viewport
+            .then(function() {
+                viewport.set(newWidth, newHeight);
+            })
+            // Wait for resize to happen (Plotly.Plots.resize has a 100ms timeout)
+            .then(delay(200))
+            // Check final figure size
+            .then(function() {
+                checkLayoutSize(newWidth, newHeight);
+            })
+            .catch(failTest)
+            .then(done);
+        });
+    });
 });