Added standard/ugly boostrap menu with xAxis & interface configuration

css/style.css

@@ -4,12 +4,12 @@ html,body {
 
 #header {
   position: fixed;
+  top: 0;
   background-repeat: no-repeat;
   margin: 0;
   padding: 20 0 0 20;
   width: 100%;
-  height: 120px;
+  z-index: 99;
-  z-index: 100;
   background-color: rgba(255, 255, 255, 0.94);
 }
 
@@ -19,11 +19,41 @@ html,body {
 
 #header #focus {
   width: 200px;
-  height: 130px;
+  height: 120px;
   float: left;
   margin-left:50px;
 }
 
+#header #menu-btn {
+  margin-right: 30px;
+  margin-top: 30px;
+  float: right;
+  font-size: 25px
+}
+
+#menu {
+  height: 50px;
+  display: none;
+}
+
+#menu:after {
+  content:"";
+  background: black;
+  height: 1px;
+  width: 50%;
+}
+
+#left-menu {
+  float: left;
+}
+
+#right-menu {
+  float: right;
+  margin-right: 30px;
+  font-size: 20px;
+}
+
+
 #focus .area {
   fill: rgba(5, 103, 150, 0.69);
   clip-path: url(#clip);

index.html

@@ -10,17 +10,51 @@
   <script src="js/nv.d3.js"        type="text/javascript"></script>
   <script src="js/dashboard.js"    type="text/javascript"></script>
   <script src="js/graph.js"        type="text/javascript"></script>
+  <script src="js/bootstrap.js"    type="text/javascript"></script>
 
   <div id="main">
     <div class="page-header" id="header">
-      <h1>dstat</h1>
+
-      <div id="focus"></div>
+      <div id="menu">
-    </div>
+        <div class="btn-group" id="left-menu">
-    <div id="content">
+          <div class="btn-group">
-      <div id="drop-background"><div id="drop"><p>Drag & drop dstat files<img src="images/drop.png" alt=""/></p></div></div>
+            <button id="btn_xaxis" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="btn-primary btn">
-      <div id="dashboard" class="container-fluid list-group"></div>
+              X axis <span class="caret"></span>
+            </button>
+            <ul class="dropdown-menu">
+              <li><a href="#" onclick="change_xaxis('time')">Time</a></li>
+              <li class="divider"></li>
+              <li><a href="#" onclick="change_xaxis('seq')">Sequential</a></li>
+            </ul>
+          </div>
+          <div class="btn-group">
+            <div class="btn-group">
+              <button id="btn_xaxis" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="btn-primary btn">
+                Interface <span class="caret"></span>
+              </button>
+              <ul class="dropdown-menu">
+                <li><a href="#" onclick="change_interface('standard');">Standard</a></li>
+                <li class="divider"></li>
+                <li><a href="#" onclick="change_interface('compact')">Compact</a></li>
+              </ul>
+            </div>
+          </div>
+        </div>
+        <div class="btn-group" id="right-menu">
+          <a href"#" onclick="refresh();"><span class="glyphicon glyphicon-repeat"/></a>
+        </div>
+      </div>
+
+
+        <h1>dstat</h1>
+        <div id="focus"></div>
+        <div id="menu-btn"><a href="#" onclick="toggle_menu();"><span class="glyphicon glyphicon-menu-hamburger"></a></span></div>
+      </div>
+      <div id="content">
+        <div id="drop-background"><div id="drop"><p>Drag & drop dstat files<img src="images/drop.png" alt=""/></p></div></div>
+        <div id="dashboard" class="container-fluid list-group"></div>
+      </div>
     </div>
   </div>
-</div>
 
 </body>

js/dashboard.js

@@ -3,6 +3,7 @@
  */
 gGraphs = {};
 gCSVs   = [];
+gFiles  = [];
 
 var brush = d3.svg.brush()
   .on("brushend", brushed);
@@ -54,26 +55,25 @@ $(document).ready(function() {
 /*
  * Settings functions
  */
-var settings = { "compact": false }
+var settings = { "interface": "standard", "xaxis": 'time' }
-applySettings(settings)
 
-function applySettings(settings) {
-}
 
 /*
  * CSV Processing functions
  */
 function processFiles(files) {
-  for (f = 0; file = files[f]; f++) {
+  for (i = 0; i < files.length; i++) {
-    processFile(file);
+    gFiles.push(files[i]);
+    processFile(files[i]);
   }
 }
 
 function processFile(file) {
-  reader = new FileReader();
+  let reader = new FileReader();
+  let name   = file.name;
   reader.onload = function(e) {
-    text = reader.result;
+    text = e.target.result;
-    processCSV(text, file.name);
+    processCSV(text, name);
   }
 
   reader.readAsText(file);
@@ -151,7 +151,7 @@ function processCSV(csv, filename) {
   // First, let's merge headers and groups in a single object
   xValues = getValues(graphs, 'system', 'time');
   /* Use time for XAxis */
-  if (xValues !== null) {
+  if (xValues !== null && settings.xaxis == "time") {
     graphs.xAxis = function (xa) {
       xa.axisLabel('Time').tickFormat(function(d) {
           if (typeof d === 'string') {
@@ -392,19 +392,15 @@ function getExists(graphs, group, header) {
   return false;
 }
 
-var displayFocusGraphInitialized = false;
-
 /*
  * Create the focus graph
  * By default, use the oposite of idle cpu time
  * If not found in the CSV, take the first element
  */
 function displayFocusGraph(graphs, dmin, dmax) {
-  if (displayFocusGraphInitialized) {
+  if ($('#focus').children().size() > 0) {
     return;
   }
-
-  displayFocusGraphInitialized = true;
   data = getValues(graphs, "total cpu usage", "idl")
   if (data) { // Rollback to the first element if not found
     data = data.map(function(idl) { return {x: idl.x, y: (100 - parseFloat(idl.y)) };});
@@ -499,3 +495,26 @@ function brushed() {
     }
   }
 }
+
+function change_xaxis(type) {
+  settings.xaxis = type;
+  refresh();
+}
+
+function change_interface(type) {
+  settings.compact = (type == 'compact');
+  refresh();
+}
+
+function refresh() {
+  d3.select('#dashboard').html("");
+  d3.select('#focus').html("");
+  for (i in gFiles) {
+    processFile(gFiles[i]);
+  }
+}
+
+
+function toggle_menu() {
+  $('#menu').slideToggle('slow');
+}

js/graph.js

@@ -104,3 +104,4 @@ function mongodb_mem_graph(graph) {
 function mongodb_mem_options() {
   return { area: true };
 }
+