Merge pull request #1054 from plotly/plot-call-signature

Modify Plotly.plot to accept frames #1014

Author: rreusser

src/plot_api/plot_api.js

@@ -47,11 +47,21 @@ var subroutines = require('./subroutines');
  *
  */
 Plotly.plot = function(gd, data, layout, config) {
+    var frames;
+
     gd = helpers.getGraphDiv(gd);
 
     // Events.init is idempotent and bails early if gd has already been init'd
     Events.init(gd);
 
+    if(Lib.isPlainObject(data)) {
+        var obj = data;
+        data = obj.data;
+        layout = obj.layout;
+        config = obj.config;
+        frames = obj.frames;
+    }
+
     var okToPlot = Events.triggerHandler(gd, 'plotly_beforeplot', [data, layout, config]);
     if(okToPlot === false) return Promise.reject();
 
@@ -62,6 +72,12 @@ Plotly.plot = function(gd, data, layout, config) {
             'but this container doesn\'t yet have a plot.', gd);
     }
 
+    function addFrames() {
+        if(frames) {
+            return Plotly.addFrames(gd, frames);
+        }
+    }
+
     // transfer configuration options to gd until we move over to
     // a more OO like model
     setPlotContext(gd, config);
@@ -329,6 +345,7 @@ Plotly.plot = function(gd, data, layout, config) {
 
     Lib.syncOrAsync([
         Plots.previousPromises,
+        addFrames,
         drawFramework,
         marginPushers,
         marginPushersAgain,

test/jasmine/tests/plot_api_test.js

@@ -11,6 +11,7 @@ var subroutines = require('@src/plot_api/subroutines');
 var d3 = require('d3');
 var createGraphDiv = require('../assets/create_graph_div');
 var destroyGraphDiv = require('../assets/destroy_graph_div');
+var fail = require('../assets/fail_test');
 
 
 describe('Test plot api', function() {
@@ -22,6 +23,69 @@ describe('Test plot api', function() {
         });
     });
 
+    describe('Plotly.plot', function() {
+        var gd;
+
+        beforeEach(function() {
+            gd = createGraphDiv();
+        });
+
+        afterEach(destroyGraphDiv);
+
+        it('accepts gd, data, layout, and config as args', function(done) {
+            Plotly.plot(gd,
+                [{x: [1, 2, 3], y: [1, 2, 3]}],
+                {width: 500, height: 500},
+                {editable: true}
+            ).then(function() {
+                expect(gd.layout.width).toEqual(500);
+                expect(gd.layout.height).toEqual(500);
+                expect(gd.data.length).toEqual(1);
+                expect(gd._context.editable).toBe(true);
+            }).catch(fail).then(done);
+        });
+
+        it('accepts gd and an object as args', function(done) {
+            Plotly.plot(gd, {
+                data: [{x: [1, 2, 3], y: [1, 2, 3]}],
+                layout: {width: 500, height: 500},
+                config: {editable: true},
+                frames: [{y: [2, 1, 0], name: 'frame1'}]
+            }).then(function() {
+                expect(gd.layout.width).toEqual(500);
+                expect(gd.layout.height).toEqual(500);
+                expect(gd.data.length).toEqual(1);
+                expect(gd._transitionData._frames.length).toEqual(1);
+                expect(gd._context.editable).toBe(true);
+            }).catch(fail).then(done);
+        });
+
+        it('allows adding more frames to the initial set', function(done) {
+            Plotly.plot(gd, {
+                data: [{x: [1, 2, 3], y: [1, 2, 3]}],
+                layout: {width: 500, height: 500},
+                config: {editable: true},
+                frames: [{y: [7, 7, 7], name: 'frame1'}]
+            }).then(function() {
+                expect(gd.layout.width).toEqual(500);
+                expect(gd.layout.height).toEqual(500);
+                expect(gd.data.length).toEqual(1);
+                expect(gd._transitionData._frames.length).toEqual(1);
+                expect(gd._context.editable).toBe(true);
+
+                return Plotly.addFrames(gd, [
+                    {y: [8, 8, 8], name: 'frame2'},
+                    {y: [9, 9, 9], name: 'frame3'}
+                ]);
+            }).then(function() {
+                expect(gd._transitionData._frames.length).toEqual(3);
+                expect(gd._transitionData._frames[0].name).toEqual('frame1');
+                expect(gd._transitionData._frames[1].name).toEqual('frame2');
+                expect(gd._transitionData._frames[2].name).toEqual('frame3');
+            }).catch(fail).then(done);
+        });
+    });
+
     describe('Plotly.relayout', function() {
         var gd;