Merge pull request #674 from danvk/module

Use ES6 modules
danvk · Oct 25, 2015 · ce31caf · ce31caf
2 parents a4c3ece + ca8c858
commit ce31caf
Show file tree

Hide file tree

Showing 216 changed files with 2,034 additions and 3,683 deletions.
diff --git a/.gitignore b/.gitignore
@@ -3,3 +3,5 @@ docs/options.html
 node_modules
 env
 dist
+coverage
+*.log
diff --git a/.travis.yml b/.travis.yml
@@ -4,6 +4,10 @@ node_js:
 
 sudo: false  # Use container-based architecture
 script: >
-    gulp travis &&
+    npm run build &&
+    npm run build-tests &&
+    npm run test &&
+    npm run coverage &&
+    ./scripts/post-coverage.sh &&
     curl -O https://raw.githubusercontent.com/danvk/travis-weigh-in/master/weigh_in.py &&
     python weigh_in.py dist/dygraph-combined.js
diff --git a/DEVELOP.md b/DEVELOP.md
@@ -8,19 +8,25 @@ This is a step-by-step guide explaining how to do it.
 
 To build dygraphs, run
 
-    gulp dist
+    npm run build
 
 To run the tests, run:
 
-    gulp test
+    npm run build-tests
+    npm run test
 
-To iterate on the code, open `tests/demo.html` (or one of the other demos) in your browser.
+To iterate on the code, run:
 
-To iterate on a unit test, change `it` to `it.only` in the Mocha test. Then run
+    npm run watch
 
-    ./node_modules/karma/bin/karma start auto_tests/chrome.karma.conf.js
+and open `tests/demo.html` (or one of the other demos) in your browser.
 
-and hit "DEBUG" in the Karma UI.
+To iterate on a unit test, run the `watch` command above and open
+
+    auto_tests/runner.html
+
+in your browser. You can use the Mocha UI to run just a single test or suite.
+Or you can change `it` to `it.only` to do run just one test in code.
 
 ### dygraphs style
 

diff --git a/README.md b/README.md
@@ -51,19 +51,11 @@ seeing demonstrations of what dygraphs can do in the
 To get going, clone the repo and run:
 
     npm install
-    gulp dist
+    npm run build
+
+Then open `tests/demo.html` in your browser.
 
 Read more about the dygraphs development process in the [developer guide](/DEVELOP.md).
 
 ## License(s)
-dygraphs uses:
- - UglifyJS (BSD License)
- - JsDoc Toolkit (MIT license)
- - console-polyfill (MIT license)
-
-automated tests use:
- - auto_tests/lib/jquery-1.4.2.js (MIT & GPL2)
- - auto_tests/lib/Asserts.js (Apache 2.0 License)
- - auto-tests/lib/JsTestDriver-1.3.3cjar (Apache 2.0 License)
-
 dygraphs is available under the MIT license, included in LICENSE.txt.
diff --git a/auto_tests/chrome.karma.conf.js b/auto_tests/chrome.karma.conf.js
diff --git a/auto_tests/coverage.html b/auto_tests/coverage.html
@@ -0,0 +1,66 @@
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>dygraphs tests</title>
+  <link rel="stylesheet" href="../node_modules/mocha/mocha.css" />
+</head>
+<body>
+  <div id="graph"></div>
+  <div id="mocha"></div>
+
+  <!-- Polyfills for PhantomJS -->
+  <script src="../node_modules/babel-core/browser-polyfill.js"></script>
+
+  <!-- Mocha -->
+  <script src="../node_modules/mocha/mocha.js"></script>
+  <script src="../node_modules/chai/chai.js"></script>
+  <script>
+  if (window.initMochaPhantomJS) {
+    window.initMochaPhantomJS();
+  }
+  </script>
+
+  <script>
+  var expect = chai.expect;
+  var assert = chai.assert;
+  function cleanupAfterEach() {
+    // Clean up the DOM before each test.
+    // This makes debugging easier than cleaning up after each test, since the
+    // DOM stays on the screen after a failure.
+    beforeEach(function() {
+      var graph = document.getElementById('graph');
+      graph.innerHTML = '';
+      graph.setAttribute('style', '');
+    });
+  }
+  function useProxyCanvas(utils, Proxy) {
+    var _origFunc = utils.getContext;
+    beforeEach(function() {
+      utils.getContext = function(canvas) {
+        return new Proxy(_origFunc(canvas));
+      }
+    });
+
+    afterEach(function() {
+      utils.getContext = _origFunc;
+    });
+  }
+  </script>
+  <script>mocha.setup('bdd')</script>
+
+  <!-- Test data -->
+  <script src="data/data.js"></script>
+
+  <!-- Bundled tests -->
+  <script src="../coverage/tests.js"></script>
+
+  <script>
+    mocha.checkLeaks();
+    if (window.mochaPhantomJS) {
+      mochaPhantomJS.run();
+    } else {
+      mocha.run();
+    }
+  </script>
+</body>
+</html>
diff --git a/auto_tests/karma.conf.js b/auto_tests/karma.conf.js
diff --git a/auto_tests/runner.html b/auto_tests/runner.html
@@ -0,0 +1,66 @@
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>dygraphs tests</title>
+  <link rel="stylesheet" href="../node_modules/mocha/mocha.css" />
+</head>
+<body>
+  <div id="graph"></div>
+  <div id="mocha"></div>
+
+  <!-- Polyfills for PhantomJS -->
+  <script src="../node_modules/babel-core/browser-polyfill.js"></script>
+
+  <!-- Mocha -->
+  <script src="../node_modules/mocha/mocha.js"></script>
+  <script src="../node_modules/chai/chai.js"></script>
+  <script>
+  if (window.initMochaPhantomJS) {
+    window.initMochaPhantomJS();
+  }
+  </script>
+
+  <script>
+  var expect = chai.expect;
+  var assert = chai.assert;
+  function cleanupAfterEach() {
+    // Clean up the DOM before each test.
+    // This makes debugging easier than cleaning up after each test, since the
+    // DOM stays on the screen after a failure.
+    beforeEach(function() {
+      var graph = document.getElementById('graph');
+      graph.innerHTML = '';
+      graph.setAttribute('style', '');
+    });
+  }
+  function useProxyCanvas(utils, Proxy) {
+    var _origFunc = utils.getContext;
+    beforeEach(function() {
+      utils.getContext = function(canvas) {
+        return new Proxy(_origFunc(canvas));
+      }
+    });
+
+    afterEach(function() {
+      utils.getContext = _origFunc;
+    });
+  }
+  </script>
+  <script>mocha.setup('bdd')</script>
+
+  <!-- Test data -->
+  <script src="data/data.js"></script>
+
+  <!-- Bundled tests -->
+  <script src="../dist/tests.js"></script>
+
+  <script>
+    mocha.checkLeaks();
+    if (window.mochaPhantomJS) {
+      mochaPhantomJS.run();
+    } else {
+      mocha.run();
+    }
+  </script>
+</body>
+</html>
diff --git a/auto_tests/tests/CanvasAssertions.js b/auto_tests/tests/CanvasAssertions.js
@@ -244,3 +244,5 @@ CanvasAssertions.match = function(predicate, call) {
   }
   return true;
 };
+
+export default CanvasAssertions;
diff --git a/auto_tests/tests/DygraphOps.js b/auto_tests/tests/DygraphOps.js
@@ -18,6 +18,7 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 // THE SOFTWARE.
 
+import * as utils from '../../src/dygraph-utils';
 
 /** 
  * @fileoverview Utility functions for Dygraphs.
@@ -109,7 +110,7 @@ DygraphOps.dispatchDoubleClick = function(g, custom) {
  * type, screenX, screenY, clientX, clientY.
  */
 DygraphOps.createOptsForPoint_ = function(g, type, x, y) {
-  var pos = Dygraph.findPos(g.canvas_);
+  var pos = utils.findPos(g.canvas_);
   var pageX = pos.x + x;
   var pageY = pos.y + y;
 
@@ -213,3 +214,5 @@ DygraphOps.dispatchMouseOut = function(g, x, y, custom) {
       custom);
 };
 
+
+export default DygraphOps;
diff --git a/auto_tests/tests/PixelSampler.js b/auto_tests/tests/PixelSampler.js
@@ -32,6 +32,17 @@ PixelSampler.prototype.colorAtPixel = function(x, y) {
   return [d[i], d[i+1], d[i+2], d[i+3]];
 };
 
+/**
+ * Convenience wrapper around colorAtPixel if you only care about RGB (not A).
+ * @param {number} x The screen x-coordinate at which to sample.
+ * @param {number} y The screen y-coordinate at which to sample.
+ * @return {Array.<number>} a 3D array: [R, G, B]. All three values
+ *     are in [0, 255]. A pixel which has never been touched will be [0,0,0].
+ */
+PixelSampler.prototype.rgbAtPixel = function(x, y) {
+  return this.colorAtPixel(x, y).slice(0, 3);
+};
+
 /**
  * The method samples a color using data coordinates (not screen coordinates).
  * This will round your data coordinates to the nearest screen pixel before
@@ -45,3 +56,5 @@ PixelSampler.prototype.colorAtCoordinate = function(x, y) {
   var dom_xy = this.dygraph_.toDomCoords(x, y);
   return this.colorAtPixel(Math.round(dom_xy[0]), Math.round(dom_xy[1]));
 };
+
+export default PixelSampler;
diff --git a/auto_tests/tests/Proxy.js b/auto_tests/tests/Proxy.js
@@ -75,3 +75,5 @@ Proxy.prototype.log__ = function(name, args) {
 Proxy.reset = function(proxy) {
   proxy.calls__ = [];
 }
+
+export default Proxy;
diff --git a/auto_tests/tests/Util.js b/auto_tests/tests/Util.js
@@ -3,6 +3,9 @@
  *
  * @author [email protected] (Robert Konigsberg)
  */
+
+import * as utils from '../../src/dygraph-utils';
+
 var Util = {};
 
 /**
@@ -90,14 +93,14 @@ Util.makeNumbers = function(ary) {
 /**
  * Sample a pixel from the canvas.
  * Returns an [r, g, b, a] tuple where each values is in [0, 255].
+ * This is _very_ slow! If you want to sample many pixels, use PixelSampler.
  */
 Util.samplePixel = function(canvas, x, y) {
   var ctx = canvas.getContext("2d");  // bypasses Proxy if applied.
 
-  // TODO(danvk): Any performance issues with this?
   var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
 
-  var scale = Dygraph.getContextPixelRatio(ctx);
+  var scale = utils.getContextPixelRatio(ctx);
 
   var i = 4 * (x * scale + imageData.width * y * scale);
   var d = imageData.data;
@@ -145,7 +148,7 @@ Util.overrideXMLHttpRequest = function(data) {
  * @return {string} The date formatted as YYYY-MM-DD.
  */
 Util.formatDate = function(dateMillis) {
-  return Dygraph.dateString_(dateMillis).slice(0, 10);  // 10 == "YYYY/MM/DD".length
+  return utils.dateString_(dateMillis).slice(0, 10);  // 10 == "YYYY/MM/DD".length
 };
 
 /**
@@ -168,3 +171,5 @@ Util.captureConsole = function(obj) {
     console.error = orig[2];
   };
 };
+
+export default Util;
diff --git a/auto_tests/tests/annotations.js b/auto_tests/tests/annotations.js
@@ -3,14 +3,13 @@
  *
  * @author [email protected] (Dan Vanderkam)
  */
-describe("annotations", function() {
 
-beforeEach(function() {
-  document.body.innerHTML = "<div id='graph'></div>";
-});
+import Dygraph from '../../src/dygraph';
+import Util from './Util';
 
-afterEach(function() {
-});
+describe("annotations", function() {
+
+cleanupAfterEach();
 
 it('testAnnotationsDrawn', function() {
   var opts = {