restructuring memory widget rendering logic

filiptepper · Apr 21, 2012 · 456a1a3 · 456a1a3
1 parent c8df8d3
commit 456a1a3
Show file tree

Hide file tree

Showing 3 changed files with 75 additions and 75 deletions.
diff --git a/lib/redmon/public/redmon.css b/lib/redmon/public/redmon.css
@@ -1,4 +1,3 @@
-
 /* Override some defaults */
 html, body {
   background-color: #eee;
@@ -70,41 +69,46 @@ body {
 .hidden{ display: none; }
 
 #terminal {
-    margin: 1em 0 0;
-    padding: .25em 0;
-    height: 600px;
-    background: #000;
-    overflow: auto;
-    font-family: Monaco, monospace;
+  margin: 1em 0 0;
+  padding: .25em 0;
+  height: 600px;
+  background: #000;
+  overflow: auto;
+  font-family: Monaco, monospace;
 }
 
 #terminal div.line {
-    padding: 0;
+  padding: 0;
 }
 
 #terminal input {
-    width: 880px;
-    border: none;
-    display: inline;
-    background: #000;
-    color: #55d839;
-    font-family: Monaco, monospace;
+  width: 880px;
+  border: none;
+  display: inline;
+  background: #000;
+  color: #55d839;
+  font-family: Monaco, monospace;
 }
 
 #terminal p, #terminal pre {
-    color: #55d839;
-    color: #55d839 !important;
-    margin-bottom: 0px;
-    margin-left: 12px;
+  color: #55d839;
+  color: #55d839 !important;
+  margin-bottom: 0px;
+  margin-left: 12px;
 }
 
 #terminal a {
-    color:  #55d839;
+  color:  #55d839;
 }
 
 #terminal span.prompt {
-    color: #55d839;
-    margin-left: 12px;
+  color: #55d839;
+  margin-left: 12px;
 }
 
-#terminal input:focus{box-shadow:none;}
+#terminal input:focus{ box-shadow:none; }
+
+.chart {
+  width:880px;
+  height:225px;
+}
diff --git a/lib/redmon/public/redmon.js b/lib/redmon/public/redmon.js
@@ -137,57 +137,37 @@ var Redmon = (function() {
   //////////////////////////////////////////////////////////////////////
   // encapsulate the keyspace chart
   var memoryWidget = (function() {
+    var plot
+      , dataset;
+
     function render(data) {
-      // setup plot
-      var options = {
-          lines: {
-            show: true,
-            fill: true,
-            color: 'rgb(255,50,50)' 
-          },
-          points: { show: false },
-          series: {
-            shadowSize: 3 
-          },
-          yaxis: {
-            tickFormatter: base1024,
-            show: true
-          },
-          xaxis: {
-            mode: 'time',
-            show: true
+      var el = $("#memory-container");
+
+      dataset = points(data);
+      plot = $.plot(el, [dataset], {
+        lines: {
+          show: true,
+          fill: true,
+          color: 'rgb(255,50,50)'
+        },
+        points: { show: false },
+        series: { shadowSize: 3 },
+        yaxis: {
+          tickFormatter: base1024,
+          show: true
+        },
+        xaxis: {
+          mode: 'time',
+          show: true
+        },
+        grid: {
+          backgroundColor: {
+            colors: ["#ddd", "#fff"]
           },
-          grid: {
-            backgroundColor: {
-              colors: ["#ddd", "#fff"]
-            },
-            hoverable: true,
-            clickable: true
-          }
-      };
-
-      var dataset = points(data);
-
-      var plot = $.plot($("#memory-container"), [dataset], options);
-
-      function onData(ev, data) {
-        if (data) {
-
-          if (dataset.length >= 100) {
-            dataset = dataset.slice(1)
-          }
-
-          dataset = dataset.concat(points([data]));
-
-          plot.setData([dataset]);
-          plot.setupGrid();
-          plot.draw();
-
+          hoverable: true,
+          clickable: true
         }
-      }
-
-      // observe data events
-      events.bind('data', onData);
+      });
     }
 
     function points(data) {
@@ -196,11 +176,27 @@ var Redmon = (function() {
 
     function point(info) {
       return [
-        parseInt(info.time), 
+        parseInt(info.time),
         parseInt(info.used_memory)
       ]
     }
 
+    function onData(ev, data) {
+      if (data) {
+        if (dataset.length >= 100) {
+          dataset.shift()
+        }
+
+        dataset.push(point(data));
+        plot.setData([dataset]);
+        plot.setupGrid();
+        plot.draw();
+      }
+    }
+
+    // observe data events
+    events.bind('data', onData);
+
     return {
       render: render
     }
@@ -213,7 +209,7 @@ var Redmon = (function() {
       // setup plot
       var options = {
           series: {
-            shadowSize: 3 
+            shadowSize: 3
           },
           yaxis: {
             tickFormatter: base1024,
@@ -573,4 +569,4 @@ var Redmon = (function() {
   return  {
     init: init
   }
-})();
+})();
diff --git a/lib/redmon/views/app.haml b/lib/redmon/views/app.haml
@@ -46,13 +46,13 @@
                   .widget
                     .headbar
                       %h2 Memory Usage
-                    #memory-container{:style => "width:880px;height:225px"}
+                    #memory-container.chart{:style => ""}
               .row
                 .span15
                   .widget
                     .headbar
                       %h2 Keyspace
-                    #keyspace-container{:style => "width:880px;height:225px"}
+                    #keyspace-container.chart{:style => ""}
               .row
                 .span15
                   .widget