Added basic support for Tonicdev use

mdtusz · mdtusz · commit 7a360d2559d6 · 2016-01-28T15:37:14.000-05:00
diff --git a/README.md b/README.md
@@ -31,6 +31,16 @@ plotly.plot(data,graphOptions,function() {
 });
 ```
 
+Usage is also possible with [Tonicdev](https://tonicdev.com) using the following code:
+
+```javascript
+var plot = require('plotly/notebook');
+
+plot([{ x: [1,2,3], y: [4,5,6] }], { title: 'Hello World!' titleFont: { color: '#663399' } });
+```
+
+This simply returns an HTML string that will be rendered.
+
 ####Full REST API Documentation can be found here: [https://plot.ly/api/rest/](https://plot.ly/api/rest/)
 
 Sign up for plotly here: [https://plot.ly/](https://plot.ly/) and obtain your API key and Stream Tokens in your plotly settings: [https://plot.ly/settings](https://plot.ly/settings).
@@ -45,8 +55,8 @@ var plotly = require('plotly')('username', 'apiKey');
 
 ##plotly.plot(data,graphOptions[, callback])
 Plotly graphs are described declaratively with a data JSON Object and a graphOptions JSON Object.
-`data` is an array of Objects and with each object containing data and styling information of separate graph traces. Docs: [https://plot.ly/api/rest](https://plot.ly/api/rest)  
-`graphOptions` is an Object containing styling options like axis information and titles for your graph. Docs: [https://plot.ly/api/rest](https://plot.ly/api/rest)  
+`data` is an array of Objects and with each object containing data and styling information of separate graph traces. Docs: [https://plot.ly/api/rest](https://plot.ly/api/rest)
+`graphOptions` is an Object containing styling options like axis information and titles for your graph. Docs: [https://plot.ly/api/rest](https://plot.ly/api/rest)
 `callback(err,msg)` where `err` is an error Object, and `msg` is the return response Object
 
 The `msg` object has the following attributes : `msg.url`,`msg.filename`,`msg.message`,`msg.warning`,`msg.error`
@@ -180,7 +190,7 @@ plotly.getFigure('fileOwner', 'fileId', function (err, figure) {
 `options.width` | width in `px` (default : 700)
 `options.height` | height in `px` (default : 500)
 
-`callback(err, imageData)`  
+`callback(err, imageData)`
 
 `err` is an Error Object
 `imageStream` is a Stream of base-64 encoded imageData
diff --git a/notebook.js b/notebook.js
@@ -0,0 +1,27 @@
+'use strict';
+
+module.exports = function(div, data, layout) {
+    div = div || 'notebook-plot';
+    data = data || [];
+    layout = layout || {};
+
+    var timestamp = new Date().getTime();
+
+    return [
+        '<div class=\'plotly-plot\'>',
+        '<script type=\'text/javascript\' ',
+        'src=\'https://cdn.plot.ly/plotly-latest.min.js\'>',
+        '</script>',
+        '<div id=\'',
+        div,
+        '\'></div>',
+        '<script>Plotly.plot(\'',
+        div,
+        '\',',
+        JSON.stringify(data),
+        ',',
+        JSON.stringify(layout),
+        ');</script>',
+        '</div>'
+    ].join('');
+};
diff --git a/test/notebook.js b/test/notebook.js
@@ -0,0 +1,24 @@
+'use strict';
+
+var test = require('tape');
+var Plot = require('../notebook');
+
+test('works with no arguments', function(t) {
+    t.plan(1);
+
+    var html = Plot(),
+        expected = '<div class=\'plotly-plot\'><script type=\'text/javascript\' src=\'https://cdn.plot.ly/plotly-latest.min.js\'></script><div id=\'notebook-plot\'></div><script>Plotly.plot(\'notebook-plot\',[],{});</script></div>';
+
+    t.isEqual(html, expected);
+    t.end();
+});
+
+test('works with all arguments', function(t) {
+    t.plan(1);
+
+    var html = Plot('test', [{ x: [1,2,3], y: [4,5,6] }], { titlefont: { color: 'red' } }),
+        expected = '<div class=\'plotly-plot\'><script type=\'text/javascript\' src=\'https://cdn.plot.ly/plotly-latest.min.js\'></script><div id=\'test\'></div><script>Plotly.plot(\'test\',[{"x":[1,2,3],"y":[4,5,6]}],{"titlefont":{"color":"red"}});</script></div>';
+
+    t.isEqual(html, expected);
+    t.end();
+});
