From 8cf799dceba8d12350fab118d885bdd0dbc0b780 Mon Sep 17 00:00:00 2001
From: Damien Gasparina <damien.gasparina@mongodb.com>
Date: Wed, 26 Aug 2015 11:36:46 -0400
Subject: [PATCH] Added graph specifics behavior per metric

---
 index.html      |  1 +
 js/dashboard.js | 33 ++++++++++++++++++++++-----
 js/graph.js     | 60 +++++++++++++++++++++++++++++++++++++++++++++++++
 3 files changed, 89 insertions(+), 5 deletions(-)
 create mode 100644 js/graph.js

diff --git a/index.html b/index.html
index 3981311..db00822 100644
--- a/index.html
+++ b/index.html
@@ -9,6 +9,7 @@
   <script src="js/d3.min.js"       type="text/javascript"></script>
   <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>
 
   <div id="main">
     <div class="page-header" id="header">
diff --git a/js/dashboard.js b/js/dashboard.js
index e9251f8..2f2ad8f 100644
--- a/js/dashboard.js
+++ b/js/dashboard.js
@@ -24,12 +24,12 @@ var x = d3.time.scale().range([0, width]),
 $(document).on('dragenter', function (e) {
     e.stopPropagation();
     e.preventDefault();
-    $('#drop').css('border', '4px dashed #fff')
+    $('#drop').css('border', '4px solid #fff')
   });
 $(document).on('dragover', function (e) {
   e.stopPropagation();
   e.preventDefault();
-  $('#drop').css('border', '4px dashed red')
+  $('#drop').css('border', '4px solid red')
 });
 $(document).on('drop', function (e) {
   e.stopPropagation();
@@ -124,6 +124,23 @@ function processCSV(csv, filename) {
     }
   }
 
+  /* Apply specificities to data */
+  for (i in graphs) {
+    name       = graphs[i].name;
+    name       = name.replace(/[&\/\\#,+()$~%.'":*?<>{}\s]/g,'_');
+    sfname     = name + "_data";
+    gdfunction = undefined;
+
+    if (typeof window[sfname] == "function") {
+      gdfunction = window[sfname];
+    }
+    for (j in graphs[i].d) {
+      if (gdfunction !== undefined) {
+        graphs[i].d[j].values = gdfunction(graphs[i].d[j].values);
+      }
+    }
+  }
+
   /* Create the brush */
   dmin = graphs[1].d[1].values[0].x;
   dmax = graphs[1].d[0].values[graphs[1].d[0].values.length -1].x;
@@ -171,6 +188,9 @@ function displayGraph(graphName, graphData, graphFormat, panel, dmin, dmax) {
       var elt = d3.select(this);
 
       nv.addGraph(function() {
+          graphId = graphName.replace(/[&\/\\#,+()$~%.'":*?<>{}\s]/g,'_');
+          graphFu = graphId + '_graph';
+
           var chart = nv.models.lineChart()
             .margin({left: 100})
             .useInteractiveGuideline(true)
@@ -178,10 +198,10 @@ function displayGraph(graphName, graphData, graphFormat, panel, dmin, dmax) {
           ;
 
           graphs.xAxis(chart.xAxis);
-          chart.yAxis.tickFormat(graphFormat);
 
-          elt.call(chart);
-          nv.utils.windowResize(chart.update);
+          if (typeof window[graphFu] == "function") {
+            window[graphFu](chart);
+          }
 
           pb = d3.select(elt[0][0].parentNode.parentNode).select('.clickable').on("click", function() {
             pb = d3.select(this.parentNode.parentNode.parentNode).selectAll('.list-body');
@@ -190,6 +210,9 @@ function displayGraph(graphName, graphData, graphFormat, panel, dmin, dmax) {
             chart.update()
           });
 
+          elt.call(chart);
+          nv.utils.windowResize(chart.update);
+
           return chart;
         }, function(chart) {
           if (gGraphs[graphName] == undefined) gGraphs[graphName] = [];
diff --git a/js/graph.js b/js/graph.js
new file mode 100644
index 0000000..7607baf
--- /dev/null
+++ b/js/graph.js
@@ -0,0 +1,60 @@
+/*
+ * Disk
+ */
+
+function dsk_total_data(data) {
+  for (idata in data) {
+    ldata = data[idata];
+    /* Byte to MB */
+    data[idata].y = Math.round((data[idata].y / (1024 * 1024 * 1024) * 100 )) / 100;
+  }
+
+  return data;
+}
+
+function dsk_total_graph(graph) {
+  graph.yAxis.axisLabel('Trafic (MB)').tickFormat(function(d) { return d3.format('.2f')(d); });
+}
+
+/*
+ * CPU
+ */
+
+function total_cpu_usage_graph(graph) {
+  graph.yAxis.axisLabel('%');
+}
+
+
+/*
+ * Network
+ */
+
+function net_total_data(data) {
+  for (idata in data) {
+    ldata = data[idata];
+    /* Byte to MB */
+    data[idata].y = Math.round((data[idata].y / (1024 * 1024) * 100 )) / 100;
+  }
+
+  return data;
+}
+
+function net_total_graph(graph) {
+  graph.yAxis.axisLabel('Trafic (MB)').tickFormat(function(d) { return d3.format('.2f')(d); });
+}
+
+/*
+ * MongoDB
+ */
+
+function mongodb_stats_graph(graph) {
+  graph.yAxis.axisLabel('Size (MB)').tickFormat(function(d) { return d3.format('d.0')(d); });
+}
+
+function mongodb_con_graph(graph) {
+  graph.yAxis.axisLabel('Connection').tickFormat(function(d) { return d3.format('d.0')(d); });
+}
+
+function mongodb_mem_graph(graph) {
+  graph.yAxis.axisLabel('Size (MB)').tickFormat(function(d) { return d3.format('d.0')(d); });
+}