completed the plotting submodule; with tests

README.md

@@ -1,5 +1,5 @@
 # lomath
-[![Build Status](https://travis-ci.org/kengz/lomath.svg?branch=master)](https://travis-ci.org/kengz/lomath) [![Coverage Status](https://coveralls.io/repos/kengz/lomath/badge.svg?branch=master)](https://coveralls.io/r/kengz/lomath?branch=master) [![Dependency Status](https://gemnasium.com/kengz/lomath.svg)](https://gemnasium.com/kengz/lomath)
+[![npm version](https://badge.fury.io/js/lomath.svg)](http://badge.fury.io/js/lomath) [![Build Status](https://travis-ci.org/kengz/lomath.svg?branch=master)](https://travis-ci.org/kengz/lomath) [![Coverage Status](https://coveralls.io/repos/kengz/lomath/badge.svg?branch=master)](https://coveralls.io/r/kengz/lomath?branch=master) [![Dependency Status](https://gemnasium.com/kengz/lomath.svg)](https://gemnasium.com/kengz/lomath)
 
 A high performance, professional math module extending lodash.
 
@@ -21,10 +21,20 @@ console.log(_.functions(_)) // all the functions in lodash, prepended with lomat
 
 Docs and tests coming soon.
 
+## visualizer Roadmap
+- ✓auto serializer and injector
+- ✓json template; use with injector when plot() is called. Serialize.
+- ✓charts image export/save button.
+- ✓Nope can't do. Image autosave in folder.
+- ✓1) more image formats
+- ✓2) fully offline: download highcharts pkg
+- ✓3) online or local package as backup
+- ✓plot() wrapped gulp task in JS function, auto run gulp. Terminates browserSync for non-dev.
+
 ## Roadmap
 - add aliases
 - sample usage
 - docs
-- tests
+- ✓tests
 - performance benchmark
-- data visualization
+- ✓data visualization

chart/plot.js

@@ -0,0 +1,100 @@
+// module that takes data sets,
+// serialize them wrt number of total options,
+// generate highcharts options with serialized target,
+// save into optionArr.json
+// and inject target into html with src
+// generate chart.js for bundling
+// run gulp task browser sync
+
+// dependencies
+var fs = require('fs');
+var q = require('q');
+var _ = require('lodash');
+
+// imports
+var tmpOpt = require(__dirname + '/src/template-option.json');
+
+// definition of plot package, uses highcharts
+function p() {
+
+    // global promise object to wait for all plot options to be completed before writing
+    this.promises = [];
+    // global array for options to plot
+    this.optArray = [];
+
+    // simple plot
+    this.plot = function(seriesArr, title, yLabel, xLabel) {
+        // console.log("plotting")
+        var defer = q.defer();
+        this.promises.push(defer.promise);
+
+        title = title || false;
+        yLabel = yLabel || false;
+        xLabel = xLabel || false;
+
+        var opt = _.cloneDeep(tmpOpt),
+        set = _.set.bind(null, opt);
+
+        set('series', seriesArr);
+        set('title.text', title);
+        set('yAxis.title.text', yLabel);
+        set('xAxis.title.text', xLabel);
+
+        // setTimeout(function() {}, 2000);
+        this.optArray.push(opt);
+        defer.resolve();
+        return opt;
+    };
+
+    // advance plot = specify your own highcharts options
+    this.advPlot = function(opt) {
+        var defer = q.defer();
+        this.promises.push(defer.promise);
+        optArray.push(opt);
+        defer.resolve();
+
+        return opt;
+    };
+
+    // write highchart options to json for rendering
+    // if autosave is true, charts will save on view
+    this.write = function(autosave) {
+        var defer = q.defer();
+        for (var i = 0; i < this.optArray.length; i++) {
+            _.set(this.optArray[i], 'chart.renderTo', 'hchart' + i);
+            _.set(this.optArray[i], 'autosave', autosave);
+        }
+        fs.writeFile(__dirname + '/src/options.json', JSON.stringify(this.optArray), defer.resolve);
+
+        return defer.promise;
+    };
+
+    // serialize optArray and write to
+    this.serialize = function(autosave) {
+        var defer = q.defer();
+
+        q.all(this.promises)
+        .then(this.write(autosave))
+        .then(defer.resolve());
+
+        return defer.promise;
+    };
+
+    // finally, render after all plots specified
+    // if autosave is true, charts will save on view
+    this.render = function(autosave) {
+        var gulpplot = require(__dirname + '/../gulpfile.js').gulpplot;
+
+        this.serialize(autosave)
+        .then(gulpplot)
+    };
+
+    this.dynrender = function() {
+        this.serialize()
+        // .then(dyngulpplot)
+    };
+}
+
+exports.p = p;
+
+

chart/src/index.html

@@ -1,25 +1,21 @@
-<!DOCTYPE HTML>
+<!DOCTYPE html>
 <html>
   <head>
     <meta charset="utf-8">
     <title>lomath chart visualizer</title>
 
-    <!-- library scripts: jQuery and highcharts -->
-    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
-    <!-- highcharts -->
-    <script src="http://code.highcharts.com/highcharts.js"></script>
+    <!-- head:js -->
+    <!-- endinject -->
+
 
   </head>
   <body>
-    <h1>Shutup YH I know it's ugly</h1>
-    <div id="container" style="width:100%; height:400px;"></div>
-    <h2>my chart2</h2>
-    <div id="container2" style="width:100%; height:400px;"></div>
-
+  <!-- <h1>Mehehe</h1> -->
     <!-- inject:div -->
     <!-- endinject -->
 
     <!-- inject:js -->
     <!-- endinject -->
+
   </body>
 </html>

chart/src/js/render.js

@@ -0,0 +1,72 @@
+var _ = require('../../../index.js');
+var optArray = require('./../options.json');
+
+$(function() {
+  // local save via svg -> canvas -> png/jpeg
+  Highcharts.Chart.prototype.createCanvas = function(title, ext, index) {
+    var svg = this.getSVG(),
+    width = parseInt(svg.match(/width="([0-9]+)"/)[1]),
+    height = parseInt(svg.match(/height="([0-9]+)"/)[1]),
+    canvas = document.createElement('canvas');
+
+    canvas.setAttribute('width', width);
+    canvas.setAttribute('height', height);
+
+    if (canvas.getContext && canvas.getContext('2d')) {
+
+      // uses canvg
+      canvg(canvas, svg);
+
+      // download
+      var filename = title.text ? title.text: 'chart'+index;
+      var link = document.createElement('a');
+      link.href = canvas.toDataURL('image/' + ext);
+      link.download = filename + '.' + ext;
+      link.click();
+
+    } 
+    else {
+      alert("Your browser doesn't support this feature, please use a modern browser");
+    }
+  }
+
+  // extending exporting properties for local save
+  function localExport(opt) {
+    var ind = _.reGet(/\d/)(opt.chart.renderTo);
+    _.assign(opt, {
+      'exporting': {
+        'buttons': {
+          'contextButton': {
+            'y': -10,
+            'menuItems': [{
+              'text': 'Save as PNG',
+              onclick: function() {
+                this.createCanvas(opt.title, 'png', ind);
+              },
+              'separator': false
+            }, {
+              'text': 'Save as JPEG',
+              onclick: function() {
+                this.createCanvas(opt.title, 'jpeg', ind);
+              },
+              'separator': false
+            }]
+          }
+        }
+      }
+    })
+    return opt;
+  }
+
+  // call for each chart in optArray
+  for (var i = 0; i < optArray.length; i++) {
+    var c = new Highcharts.Chart(
+      localExport(optArray[i])
+      )
+    // auto-call download png if autosave is true in render(autosave)
+    if (optArray[i].autosave) {
+      c.createCanvas(optArray[i].title, 'png', i);
+    }
+  };
+
+});