A few bug fixes there and there & code refactoring

generate_page.sh

@@ -7,9 +7,17 @@
 ## Login   <d.gasparina@gmail.com>
 ##
 ## Started on  Tue 23 Feb 20:17:04 2016 gaspar_d
-## Last update Tue 23 Feb 21:08:26 2016 gaspar_d
+## Last update Wed 11 May 17:54:27 2016 gaspar_d
 ##
 
+print_usage() {
+  cat <<EOF
+OVERVIEW: generate a standalone HTML page that you can share with your colleagues
+USAGE: $0 file1.csv file2.csv ...
+EOF
+
+}
+
 main() {
   gCSVs=""
 
@@ -40,4 +48,9 @@ main() {
 }
 
 
+if [ $# -eq 0 ]; then
+  print_usage $0
+  exit 1
+fi
+
 main $@

js/dashboard.js

@@ -1,9 +1,9 @@
 /*
  * Global variables
  */
-gGraphs = {};
+var gGraphs = {};
-gCSVs   = [];
+var gCSVs   = [];
-gFiles  = [];
+var gFiles  = [];
 
 var brush = d3.svg.brush()
   .on("brushend", brushed);
@@ -62,6 +62,9 @@ var settings = { "interface": "standard", "xaxis": 'time' }
  * CSV Processing functions
  */
 function processFiles(files) {
+  if ((files.length + gFiles.length) > 1) { // switch to sequential if multiple files are present
+    settings.xaxis = 'sequential';
+  }
   for (i = 0; i < files.length; i++) {
     gFiles.push(files[i]);
     processFile(files[i]);
@@ -245,7 +248,7 @@ function processCSV(csv, filename) {
       graphData   = graphs[gindex].d;
       graphFormat = graphs[gindex].yformat;
       panel = createPanel(graphName, graphData, filename)
-      displayGraph(graphName, graphData, graphFormat, panel, dmin, dmax);
+      displayGraph(graphName, graphData, graphFormat, panel, dmin, dmax, filename);
     }
   }
 }
@@ -273,6 +276,8 @@ function createPanel(graphName, graphData, filename) {
     if (div.empty()) {
       div    = d3.select('#dashboard').append('div').attr('class', 'list-group-item-compact').attr('id', id);
       header = d3.select('#dashboard').append('div').attr('class', 'panel-left')
+      info   = d3.select('#dashboard').append('div').attr('class', 'panel-left')
+
       d3.select('#dashboard').append('div').attr('class', 'panel-clear')
       header.append('p').attr('class', 'panel-left').text(graphName)
       colors = nv.utils.getColor()
@@ -299,22 +304,24 @@ function createInitialOptions(graphData) {
 /*
  * Create the graph d3 object
  */
-function displayGraph(graphName, graphData, graphFormat, panel, dmin, dmax) {
+function displayGraph(graphName, graphData, graphFormat, panel, dmin, dmax, filename) {
   panel.selectAll('svg').each(function() {
-      var elt = d3.select(this);
+      let elt = d3.select(this);
 
       nv.addGraph(function() {
-          graphId    = graphName.replace(/[&\/\\#,+()$~%.'":*?<>{}\s]/g,'_');
+          let graphId    = graphName.replace(/[&\/\\#,+()$~%.'":*?<>{}\s]/g,'_');
-          graphFu    = graphId + '_graph';
+          let graphFu    = graphId + '_graph';
-          graphFuPre = graphId + '_options';
+          let graphFuPre = graphId + '_options';
-          options    = createInitialOptions(graphData);
+          let options    = createInitialOptions(graphData);
 
           if (typeof window[graphFuPre] == "function") {
             options = window[graphFuPre]();
           }
 
+          let chart = null;
+
           if (options.type == 'stacked') {
-            var chart = nv.models.stackedAreaChart()
+            chart = nv.models.stackedAreaChart()
               .margin({left: 100})
               .useInteractiveGuideline(! settings.compact)
               .showLegend(! settings.compact)
@@ -322,20 +329,20 @@ function displayGraph(graphName, graphData, graphFormat, panel, dmin, dmax) {
               .interpolate("basis")
               .showControls(false)
               .showXAxis(! settings.compact)
-              .showYAxis(! settings.compact)
+              .showYAxis(true)
               ;
           } else if (options.type == 'pie') {
-            var chart = nv.models.bulletChart()
+            chart = nv.models.bulletChart()
               .margin({left: 100})
               ;
           } else {
-            var chart = nv.models.lineChart()
+            chart = nv.models.lineChart()
               .margin({left: 100})
               .useInteractiveGuideline(! settings.compact)
               .interpolate("basis")
               .showLegend(! settings.compact)
               .showXAxis(! settings.compact)
-              .showYAxis(! settings.compact)
+              .showYAxis(true)
             ;
           }
 
@@ -346,7 +353,7 @@ function displayGraph(graphName, graphData, graphFormat, panel, dmin, dmax) {
             window[graphFu](chart);
           }
 
-          pb = d3.select(elt[0][0].parentNode.parentNode).select('.clickable').on("click", function() {
+          let pb = d3.select(elt[0][0].parentNode.parentNode).select('.clickable').on("click", function() {
             pb = d3.select(this.parentNode.parentNode.parentNode).selectAll('.list-body');
             isHidden = pb.style('display') == 'none';
             pb.style('display', isHidden ? 'inherit' : 'none');
@@ -358,8 +365,8 @@ function displayGraph(graphName, graphData, graphFormat, panel, dmin, dmax) {
 
           return chart;
         }, function(chart) {
-          if (gGraphs[graphName] == undefined) gGraphs[graphName] = [];
+          if (gGraphs[graphName] == undefined) gGraphs[graphName] = {};
-          gGraphs[graphName].push({elt: elt, chart: chart, data: graphData});
+          gGraphs[graphName][filename] = {elt: elt, chart: chart, data: graphData, filename: filename};
         });
     });
 }
@@ -458,11 +465,11 @@ function displayFocusGraph(graphs, dmin, dmax) {
 }
 
 function reduceData(data) {
-  ext  = (brush.empty() || brush.extent() == null ? x.domain() : brush.extent());
+  let ext  = (brush.empty() || brush.extent() == null ? x.domain() : brush.extent());
-  extD = [ext[0] instanceof String ? Date.parse(ext[0]) : ext[0],
+  let extD = [ext[0] instanceof String ? Date.parse(ext[0]) : ext[0],
           ext[1] instanceof String ? Date.parse(ext[1]) : ext[1]];
 
-  ndata = data.map(function(d, i) {
+  let ndata = data.map(function(d, i) {
     return {
       key: d.key,
       area: d.area,
@@ -475,18 +482,18 @@ function reduceData(data) {
 
 
 function brushed() {
-  ext  = (brush.empty() || brush.extent() == null ? x.domain() : brush.extent());
+  let ext  = (brush.empty() || brush.extent() == null ? x.domain() : brush.extent());
 
   for (var name in gGraphs) {
     if (gGraphs.hasOwnProperty(name)) {
       for (gIndex in gGraphs[name]) {
-        graph = gGraphs[name][gIndex];
+        let graph = gGraphs[name][gIndex];
-        chart = graph.chart;
+        let chart = graph.chart;
-        elt   = graph.elt;
+        let elt   = graph.elt;
-        data  = graph.data;
+        let data  = graph.data;
-        ndata = reduceData(data);
+        let ndata = reduceData(data);
-        chart.xDomain(ext);
 
+        chart.xDomain(ext);
         elt.call(chart.xAxis);
         elt.datum(ndata);
 
@@ -506,6 +513,11 @@ function change_interface(type) {
   refresh();
 }
 
+/*
+ * Destroy all graphs & the focus bars
+ * and recreate them using the content of
+ * gFiles (all uploaded files)
+ */
 function refresh() {
   d3.select('#dashboard').html("");
   d3.select('#focus').html("");
@@ -515,6 +527,15 @@ function refresh() {
 }
 
 
+/*
+ * Toggle header menu
+ */
 function toggle_menu() {
-  $('#menu').slideToggle('slow');
+  if ($('#menu').is(":hidden")) {
+    $('#menu').slideDown('slow');
+    $('#dashboard').animate({ "padding-top": "+=50px" }, 'slow');
+  } else {
+    $('#menu').slideUp('slow');
+    $('#dashboard').animate({ "padding-top": "-=50px" }, 'slow');
+  }
 }