Draft for compact mode

css/style.css

@@ -59,10 +59,6 @@ html,body {
   background-color: #ABC2EF;
 }
 
-#dashboard svg {
-  height: 200px;
-}
-
 body {
   background-color: black;
 }
@@ -102,6 +98,22 @@ body {
   border: 1px solid #60668C;
 }
 
+.list-group-item-compact  {
+  width: 600px;
+  float: left;
+}
+.list-group-item-compact svg {
+  height: 50px !important;
+}
+
+.panel-left {
+  float: left;
+}
+
+.panel-clear {
+  clear: both;
+}
+
 .list-body {
   margin-right: 10px;
   margin-left: -30px;
@@ -123,6 +135,7 @@ body {
   background: rgba(0,0,0,0.8);
   z-index: 99999;
 }
+
 #drop {
   padding: 20px;
   font-size: 21px;
@@ -139,3 +152,8 @@ body {
   background-color: white;
   overflow: hidden;
 }
+
+.list-body svg {
+  height: 200px;
+}
+

js/dashboard.js

@@ -39,6 +39,15 @@ $(document).on('drop', function (e) {
 });
 
 
+/*
+ * Settings functions
+ */
+
+var settings = { "compact": false }
+applySettings(settings)
+
+function applySettings(settings) {
+}
 
 /*
  * CSV Processing functions
@@ -225,7 +234,7 @@ function processCSV(csv, filename) {
       graphName   = graphs[gindex].name;
       graphData   = graphs[gindex].d;
       graphFormat = graphs[gindex].yformat;
-      panel = createPanel(graphName, graphData, host)
+      panel = createPanel(graphName, graphData, filename)
       displayGraph(graphName, graphData, graphFormat, panel, dmin, dmax);
     }
   }
@@ -237,19 +246,34 @@ function processCSV(csv, filename) {
  */
 function createPanel(graphName, graphData, filename) {
   id  = graphName.replace(/[&\/\\#,+()$~%.'":*?<>{}\s]/g,'_');
+  data = reduceData(graphData)
   div = d3.select('#' + id);
 
-  if (div.empty()) {
+  if (! settings.compact) {
-    div = d3.select('#dashboard').append('div').attr('class', ' list-group-item').attr('id', id);
+    if (div.empty()) {
-    header = div.append('div').attr('class', 'panel-heading').append('h3').attr('class', 'panel-title');
+      div = d3.select('#dashboard').append('div').attr('class', ' list-group-item').attr('id', id);
-    header.append('span').text(graphName);
+      header = div.append('div').attr('class', 'panel-heading').append('h3').attr('class', 'panel-title');
-    header.append('span').attr('class', 'glyphicon glyphicon-chevron-right pull-right clickable');
+      header.append('span').text(graphName);
+      header.append('span').attr('class', 'glyphicon glyphicon-chevron-right pull-right clickable');
+    }
+    elt = div.append('div').attr('class', 'row list-body');
+    elt.append('p').text(filename)
+    elt.append('svg').datum(reduceData(graphData));
+  } else if (settings.compact) {
+    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')
+      d3.select('#dashboard').append('div').attr('class', 'panel-clear')
+      header.append('p').attr('class', 'panel-left').text(graphName)
+      colors = nv.utils.getColor()
+      for (i in graphData) {
+        header.append('p').attr('class', 'panel-left').text(graphData[i].key).style({color: colors(i), 'margin-left': '15px'});
+      }
+    }
+    elt = div.append('div').attr('class', 'row list-body');
+    elt.append('svg').datum(data);
   }
 
-  elt = div.append('div').attr('class', 'row list-body');
-  elt.append('p').text(filename)
-  elt.append('svg').datum(reduceData(graphData));
-
   return div;
 }
 
@@ -282,11 +306,13 @@ function displayGraph(graphName, graphData, graphFormat, panel, dmin, dmax) {
           if (options.type == 'stacked') {
             var chart = nv.models.stackedAreaChart()
               .margin({left: 100})
-              .useInteractiveGuideline(true)
+              .useInteractiveGuideline(! settings.compact)
-              .showLegend(true)
+              .showLegend(! settings.compact)
               .style('expand')
               .interpolate("basis")
               .showControls(false)
+              .showXAxis(! settings.compact)
+              .showYAxis(! settings.compact)
               ;
           } else if (options.type == 'pie') {
             var chart = nv.models.bulletChart()
@@ -295,12 +321,15 @@ function displayGraph(graphName, graphData, graphFormat, panel, dmin, dmax) {
           } else {
             var chart = nv.models.lineChart()
               .margin({left: 100})
-              .useInteractiveGuideline(true)
+              .useInteractiveGuideline(! settings.compact)
               .interpolate("basis")
-              .showLegend(true)
+              .showLegend(! settings.compact)
+              .showXAxis(! settings.compact)
+              .showYAxis(! settings.compact)
             ;
           }
 
+
           graphs.xAxis(chart.xAxis);
 
           if (typeof window[graphFu] == "function") {