diff --git a/css/style.css b/css/style.css
index b1a605b..9b2ad8d 100644
--- a/css/style.css
+++ b/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: 100;
+ z-index: 99;
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);
diff --git a/index.html b/index.html
index db00822..af8c205 100644
--- a/index.html
+++ b/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>
- <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 id="menu">
+ <div class="btn-group" id="left-menu">
+ <div class="btn-group">
+ <button id="btn_xaxis" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="btn-primary btn">
+ 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>
diff --git a/js/dashboard.js b/js/dashboard.js
index 5e54a6f..60be934 100644
--- a/js/dashboard.js
+++ b/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 }
-applySettings(settings)
+var settings = { "interface": "standard", "xaxis": 'time' }
-function applySettings(settings) {
-}
/*
* CSV Processing functions
*/
function processFiles(files) {
- for (f = 0; file = files[f]; f++) {
- processFile(file);
+ for (i = 0; i < files.length; i++) {
+ 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;
- processCSV(text, file.name);
+ text = e.target.result;
+ 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');
+}
diff --git a/js/graph.js b/js/graph.js
index 89ffdee..f6d0f00 100644
--- a/js/graph.js
+++ b/js/graph.js
@@ -104,3 +104,4 @@ function mongodb_mem_graph(graph) {
function mongodb_mem_options() {
return { area: true };
}
+