tearing apart gulp tasks

javascript/LICENSE

+MIT License
+
+Copyright (c) 2017 lavacharts
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

javascript/README.md

+# Lava.js
+
+[![Build Status](https://travis-ci.org/lavacharts/lava.js.svg?branch=master)](https://travis-ci.org/lavacharts/lava.js)
+
+Lava.js is a javsacript module that accompanies the [Lavacharts PHP library](https://github.com/kevinkhill/lavacharts)
+
+## New!
+As of v4.0, Lava.js can be used independently from Lavacharts if you feel so inclined.
+
+

javascript/gulp-functions/Compile.js

@@ -5,28 +5,50 @@ import notifier from 'node-notifier';
 import browserify from 'browserify';
 import uglify from 'gulp-uglify';
 import babelify from 'babelify';
-// import stripify from 'stripify';
 import watchify from 'watchify';
 import streamify from 'gulp-streamify';
 import versionify from 'browserify-versionify';
 import { dest } from 'gulp';
 import { log } from 'gulp-util';
 import { red, green } from 'chalk';
-import { create } from 'browser-sync';
-const browserSync = create();
-export default function compile(prod, watch, sync) {
-    let bundler = browserify({
-        debug: true,
-        entries: ['./src/lava.entry.es6'],
-        cache: {},
-        packageCache: {}
-    });
-    bundler.transform(babelify, { presets: ['es2015'] });
+import { create as createBrowserSync } from 'browser-sync';
+const browserSync = createBrowserSync();
+let bundler = browserify({
+    debug: true,
+    entries: ['./src/lava.entry.es6'],
+    cache: {},
+    packageCache: {}
+});
+
+function rebundle(prod = false) {
+    return bundler.bundle()
+        .on('error', err => {
+            if (err instanceof SyntaxError) {
+                log(red('Syntax Error'));
+                log(err.message);
+                // log(err.filename+":"+err.loc.line);
+                log(err.codeFrame);
+            } else {
+                log(red('Error'), err.message);
+            }
+
+            this.emit('end');
+        })
+        .pipe(source('lava.js'))
+        .pipe(gulpif(prod, streamify(uglify())))
+        .pipe(dest('dist'));
+}
+export default function compile(prod, watch, sync) {
+    bundler.transform(babelify, {presets: ['es2015'] });
     bundler.transform(versionify);
+    if (prod) {
+        bundler.transform('stripify');
+    }
+
     if (watch) {
         bundler = watchify(bundler);
@@ -35,43 +57,18 @@ export default function compile(prod, watch, sync) {
                 proxy: "localhost:" + args.port || 8000
             });
         }
-    }
-
-    if (prod) {
-        bundler.transform('stripify');
-    }
-    function rebundle() {
-        return bundler.bundle()
-            .on('error', err => {
-                if (err instanceof SyntaxError) {
-                    log(red('Syntax Error'));
-                    log(err.message);
-                    // log(err.filename+":"+err.loc.line);
-                    log(err.codeFrame);
-                } else {
-                    log(red('Error'), err.message);
-                }
-
-                this.emit('end');
-            })
-            .pipe(source('lava.js'))
-            .pipe(gulpif(prod, streamify(uglify())))
-            .pipe(dest('dist'));
-    }
-
-    if (watch) {
         bundler.on('update', () => {
-            const msg = 'lava.js re-bundling...';
+            const msg = 'Lava.js re-bundling...';
             log(green(msg));
             notifier.notify({
                 title: 'Browserify',
-                message:msg
+                message: msg
             });
-            rebundle();
+            rebundle(prod);
         });
         bundler.on('log', msg => {
@@ -83,5 +80,5 @@ export default function compile(prod, watch, sync) {
         });
     }
-    return rebundle();
+    return rebundle(prod);
 }

javascript/gulpfile.babel.js

@@ -4,11 +4,18 @@ import gulp from 'gulp';
 import yargs from 'yargs';
 import bump from 'gulp-bump';
 import replace from 'gulp-replace';
+import babel from 'gulp-babel';
+import source from 'vinyl-source-stream';
+import browserify from 'browserify';
 import compile from './gulp-functions/Compile';
 import renderChart from './gulp-functions/Renderer';
 import getChartTypes from './gulp-functions/GetChartTypes';
 import { cpus } from 'os'
 import { map } from 'bluebird';
+import { log } from 'gulp-util';
+import { readFileSync } from 'fs';
+
+const pkg = JSON.parse(readFileSync('./package.json'));
 gulp.task('default', ['dev']);
@@ -23,6 +30,28 @@ gulp.task('prod',  () => { compile(true,  false, false) });
 gulp.task('watch', () => { compile(false, true, false)  });
 gulp.task('sync',  () => { compile(false, true, true)   });
+gulp.task('lavajs', () =>
+    gulp.src('src/lava/lava.es6')
+        .pipe(babel({
+            presets: ['es2015']
+        }))
+        .pipe(tap(file => {
+
+            log('bundling ' + file.path);
+
+            // replace file contents with browserify's bundle stream
+            file.contents = browserify(file.path, {debug: true})
+
+                .transform('versionify')
+                .bundle();
+
+        }))
+        // .pipe(source('lava.js'))
+        // .pipe(gulpif(prod, streamify(uglify())))
+        .pipe(replace('__VERSION__', pkg.version))
+        .pipe(gulp.dest('dist'))
+);
+
 /**
  * Render a specific chart.
  *

javascript/package.json

@@ -10,28 +10,33 @@
     "node": "0.12.*"
   },
   "dependencies": {
-    "babel-register": "^6.24.1",
     "lodash": "^4.17.4"
   },
   "devDependencies": {
     "@angular/core": "^4.2.4",
+    "babel-cli": "^6.26.0",
+    "babel-preset-env": "^1.6.0",
     "babel-preset-es2015": "^6.24.1",
+    "babel-register": "^6.24.1",
     "babelify": "^7.3.0",
     "bluebird": "^3.5.0",
     "browser-sync": "^2.18.12",
     "browserify": "^14.4.0",
+    "browserify-replace": "^0.9.0",
     "browserify-versionify": "^1.0.6",
     "glob": "^7.1.2",
     "gulp": "^3.9.1",
+    "gulp-babel": "^7.0.0",
     "gulp-bump": "^0.3.0",
     "gulp-connect-php": "^1.0.1",
     "gulp-if": "^2.0.0",
     "gulp-jshint": "^1.10.0",
     "gulp-notify": "^3.0.0",
     "gulp-rename": "^1.2.2",
-    "gulp-replace": "^0.5.4",
+    "gulp-replace": "^0.6.1",
     "gulp-spawn": "^0.3.0",
     "gulp-streamify": "^1.0.2",
+    "gulp-tap": "^1.0.1",
     "gulp-uglify": "^1.5.3",
     "gulp-util": "^3.0.8",
     "jasmine-core": "^2.6.4",

javascript/src/lava.entry.es6

-import { LavaJs } from './lava/Lava.es6';
-import { addEvent, domLoaded } from './lava/Utils.es6';
+/* jshint browser:true */
+/* globals __OPTIONS__:true */
+
+import LavaJs from './lava/Lava.es6';
+import { domLoaded } from './lava/Utils.es6';
 /**
  * Assign the Lava.js module to the window and
@@ -11,27 +14,11 @@ let $lava = window.lava = new LavaJs();
  * Once the DOM has loaded...
  */
 domLoaded().then(() => {
-    /**
-     * Adding the resize event listener for redrawing charts if
-     * the option responsive is set to true.
-     */
-    if ($lava.options.responsive === true) {
-        let debounced = null;
-
-        addEvent(window, 'resize', () => {
-            let redraw = $lava.redrawAll.bind($lava);
-
-            clearTimeout(debounced);
-
-            debounced = setTimeout(() => {
-                console.log('[lava.js] Window re-sized, redrawing...');
-
-                redraw();
-            }, $lava.options.debounce_timeout);
-        });
+    if (typeof __OPTIONS__ !== 'undefined') {
+        $lava.options = __OPTIONS__;
     }
     if ($lava.options.auto_run === true) {
-        $lava.run();
+        $lava.run(window);
     }
 });

javascript/src/lava/Chart.es6

@@ -28,7 +28,7 @@ import { stringToFunction } from './Utils.es6';
  * @property {Function} render    - Renders the chart.
  * @property {Function} uuid      - Creates identification string for the chart.
  */
-export class Chart extends Renderable
+export default class Chart extends Renderable
 {
     /**
      * Chart Class

javascript/src/lava/Dashboard.es6

@@ -24,7 +24,7 @@ import { stringToFunction } from './Utils.es6';
  * @property {Function} render    - Renders the Dashboard.
  * @property {Function} uuid      - Unique identifier for the Dashboard.
  */
-export class Dashboard extends Renderable
+export default class Dashboard extends Renderable
 {
     constructor(json) {
         super(json);

javascript/src/lava/Lava.es6

+/* jshint browser:true */
+/* globals google:true */
+
 /**
  * lava.js module
  *
@@ -8,26 +11,27 @@
  */
 import _forIn from 'lodash/forIn';
 import EventEmitter from 'events';
-import { Chart } from './Chart.es6';
-import { Dashboard } from './Dashboard.es6';
-import { noop } from './Utils.es6';
+import Chart from './Chart.es6';
+import Dashboard from './Dashboard.es6';
+import defaultOptions from './Options.js';
+import { noop, addEvent } from './Utils.es6';
 import { InvalidCallback, RenderableNotFound } from './Errors.es6'
 /**
- * @property {string}             VERSION        Version of the module.
- * @property {Chart}              Chart          Chart class.
- * @property {Dashboard}          Dashboard      Dashboard class.
- * @property {object}             _errors
- * @property {string}             GOOGLE_LOADER_URL     Url to Google's static loader
- * @property {object}             options        Options for the module
+ * @property {string}             VERSION
+ * @property {string}             GOOGLE_API_VERSION
+ * @property {string}             GOOGLE_LOADER_URL
+ * @property {Chart}              Chart
+ * @property {Dashboard}          Dashboard
+ * @property {object}             options
  * @property {function}           _readyCallback
  * @property {Array.<string>}     _packages
  * @property {Array.<Renderable>} _renderables
  */
-export class LavaJs extends EventEmitter
+export default class LavaJs extends EventEmitter
 {
-    constructor() {
+    constructor(newOptions) {
         super();
         /**
@@ -76,7 +80,7 @@ export class LavaJs extends EventEmitter
          * @type {Object}
          * @public
          */
-        this.options = OPTIONS_JSON;
+        this.options = newOptions || defaultOptions;
         /**
          * Array of visualization packages for charts and dashboards.
@@ -113,9 +117,9 @@ export class LavaJs extends EventEmitter
      * @return {Renderable}
      */
     createChart(json) {
-        console.log('JSON_PAYLOAD', json);
-        this._addPackages(json.packages);
+        console.log('Creating Chart', json);
+        this._addPackages(json.packages); // TODO: move this into the store method?
         return new this.Chart(json);
     }
@@ -127,7 +131,7 @@ export class LavaJs extends EventEmitter
      * @see createChart
      * @param {object} json
      */
-    addNewChart(json) {
+    addNewChart(json) { //TODO: rename to storeNewChart(json) ?
         this.store(this.createChart(json));
     }
@@ -141,7 +145,7 @@ export class LavaJs extends EventEmitter
      * @return {Dashboard}
      */
     createDashboard(json) {
-        console.log('JSON_PAYLOAD', json);
+        console.log('Creating Dashboard', json);
         this._addPackages(json.packages);
@@ -158,7 +162,7 @@ export class LavaJs extends EventEmitter
      * @param  {object} json
      * @return {Dashboard}
      */
-    addNewDashboard(json) {
+    addNewDashboard(json) { //TODO: rename to storeNewDashboard(json) ?
         this.store(this.createDashboard(json));
     }
@@ -167,15 +171,37 @@ export class LavaJs extends EventEmitter
      *
      * @public
      */
-    run() {
+    run(window) {
         const $lava = this;
+        if ($lava.options.responsive === true) {
+            let debounced = null;
+
+            addEvent(window, 'resize', () => {
+                let redraw = $lava.redrawAll.bind($lava);
+
+                clearTimeout(debounced);
+
+                debounced = setTimeout(() => {
+                    console.log('[lava.js] Window re-sized, redrawing...');
+
+                    redraw();
+                }, $lava.options.debounce_timeout);
+            });
+        }
+
         console.log('[lava.js] Running...');
         console.log('[lava.js] Loading options:', this.options);
         $lava._loadGoogle().then(() => {
             console.log('[lava.js] Google is ready.');
+            /**
+             * Convenience map for google.visualization to be accessible
+             * via lava.visualization
+             */
+            this.visualization = google.visualization;
+
             _forIn($lava._renderables, renderable => {
                 console.log(`[lava.js] Rendering ${renderable.uuid()}`);
@@ -201,6 +227,40 @@ export class LavaJs extends EventEmitter
         this._renderables[renderable.label] = renderable;
     }
+    /**
+     * Returns the LavaChart javascript objects
+     *
+     *
+     * The LavaChart object holds all the user defined properties such as data, options, formats,
+     * the GoogleChart object, and relative methods for internal use.
+     *
+     * The GoogleChart object is available as ".chart" from the returned LavaChart.
+     * It can be used to access any of the available methods such as
+     * getImageURI() or getChartLayoutInterface().
+     * See https://google-developers.appspot.com/chart/interactive/docs/gallery/linechart#methods
+     * for some examples relative to LineCharts.
+     *
+     * @public
+     * @param  {string}   label
+     * @param  {Function} callback
+     * @throws InvalidLabel
+     * @throws InvalidCallback
+     * @throws RenderableNotFound
+     */
+    get(label, callback) {
+        if (typeof callback !== 'function') {
+            throw new InvalidCallback(callback);
+        }
+
+        let renderable = this._renderables[label];
+
+        if (! renderable) {
+            throw new RenderableNotFound(label);
+        }
+
+        callback(renderable);
+    }
+
     /**
      * Assigns a callback for when the charts are ready to be interacted with.
      *
@@ -288,47 +348,34 @@ export class LavaJs extends EventEmitter
      * to make the charts responsive to the browser resizing.
      */
     redrawAll() {
+        if (this._renderables.length === 0) {
+            console.log(`[lava.js] Nothing to redraw.`);
+
+            return false;
+        } else {
+            console.log(`[lava.js] Redrawing ${this._renderables.length} renderables.`);
+        }
+
         for (let renderable of this._renderables) {
             console.log(`[lava.js] Redrawing ${renderable.uuid()}`);
-            const redraw = renderable.draw.bind(renderable);
+            let redraw = renderable.draw.bind(renderable);
             redraw();
         }
+
+        return true;
     }
     /**
-     * Returns the LavaChart javascript objects
-     *
-     *
-     * The LavaChart object holds all the user defined properties such as data, options, formats,
-     * the GoogleChart object, and relative methods for internal use.
-     *
-     * The GoogleChart object is available as ".chart" from the returned LavaChart.
-     * It can be used to access any of the available methods such as
-     * getImageURI() or getChartLayoutInterface().
-     * See https://google-developers.appspot.com/chart/interactive/docs/gallery/linechart#methods
-     * for some examples relative to LineCharts.
+     * Aliasing google.visualization.arrayToDataTable to lava.arrayToDataTable
      *
      * @public
-     * @param  {string}   label
-     * @param  {Function} callback
-     * @throws InvalidLabel
-     * @throws InvalidCallback
-     * @throws RenderableNotFound
+     * @param {Array} arr
+     * @return {google.visualization.DataTable}
      */
-    get(label, callback) {
-        if (typeof callback !== 'function') {
-            throw new InvalidCallback(callback);
-        }
-
-        let renderable = this._renderables[label];
-
-        if (! renderable) {
-            throw new RenderableNotFound(label);
-        }
-
-        callback(renderable);
+    arrayToDataTable(arr) {
+        return this.visualization.arrayToDataTable(arr);
     }
     /**

javascript/src/lava/Options.js

+const defaultOptions = {
+    "auto_run"        : true,
+    "locale"          : "en",
+    "timezone"        : "America/Los_Angeles",
+    "datetime_format" : "",
+    "maps_api_key"    : "",
+    "responsive"      : true,
+    "debounce_timeout": 250
+};
+
+export default defaultOptions;

src/Javascript/ScriptManager.php

@@ -225,7 +225,7 @@ class ScriptManager implements Customizable
         $buffer = new ScriptBuffer($this->getLavaJsSource());
-        $buffer->pregReplace('/OPTIONS_JSON/', $this->options->toJson());
+        $buffer->pregReplace('/__OPTIONS__/', $this->options->toJson());
         return $buffer;
     }