From ba15ced71d2956780dc15efc6051b81d2de8636c Mon Sep 17 00:00:00 2001
From: Tjatse <thisnamemeansnothing@gmail.com>
Date: Fri, 2 Jan 2015 18:33:23 +0800
Subject: [PATCH] fixes #3

---
 README.md                   |  4 ++++
 web/public/css/main.css     | 10 ++++++----
 web/public/js/index.html.js | 25 ++++++++++++++++++-------
 3 files changed, 28 insertions(+), 11 deletions(-)

diff --git a/README.md b/README.md
index ae88d82..ee2a22f 100644
--- a/README.md
+++ b/README.md
@@ -183,6 +183,10 @@ Tail Logs
 
 ![image](screenshots/tail-logs.jpg)
 
+## Test
+```bash
+$ npm test
+```
 
 ## License
 Licensed under the Apache License, Version 2.0 (the "License");
diff --git a/web/public/css/main.css b/web/public/css/main.css
index 0d624f9..8bef9d9 100644
--- a/web/public/css/main.css
+++ b/web/public/css/main.css
@@ -493,12 +493,12 @@ END OF REPO && VER
 ******************/
 .graph svg {
   font-size: 10px;
-  margin: 5px 20px;
+  margin: 20px auto 0 20px;
 }
 
 .graph .line {
   fill: none;
-  stroke-width: 1px;
+  stroke-width: 2px;
 }
 
 .graph .axis path,
@@ -520,14 +520,16 @@ END OF REPO && VER
 
 .graph ul {
   position: absolute;
-  right: 0;
-  top: 0;
+  right: 10px;
+  top: 10px;
 }
 
 .graph ul li {
   height: 18px;
   line-height: 18px;
   list-style-type: square;
+  font-size: 10px;
+  font-weight: normal;
 }
 
 .graph ul li span {
diff --git a/web/public/js/index.html.js b/web/public/js/index.html.js
index 8acf621..91f1e76 100644
--- a/web/public/js/index.html.js
+++ b/web/public/js/index.html.js
@@ -839,7 +839,7 @@ function appendData(proc){
     return;
   }
   var loadEl = $('#monitor>.load');
-  if(lineChart.data.length == 0){
+  if (lineChart.data.length == 0) {
     var now = proc.time,
         len = lineChart.settings.queueLength;
 
@@ -862,9 +862,7 @@ function destroyMonitor(){
     return;
   }
   sockets.proc.disconnect();
-
-  lineChart.data = [];
-  lineChart.eles = {};
+  lineChart.destroy();
 }
 
 /**
@@ -1001,8 +999,19 @@ var lineChart = {
   },
   data    : [],
   eles    : {},
-  next    : function(){
+  destroy : function(){
+    this.eles.path && this.eles.path.interrupt().transition();
+    this.eles.xAxis && this.eles.xAxis.interrupt().transition();
+    d3.timer.flush();
+    this.data = [];
+    this.eles = {};
+  },
+  next    : function(forceQuit){
     var ng = !this.eles.svg;
+    if (ng && forceQuit) {
+      return;
+    }
+
     if (ng) {
       this._graph();
     }
@@ -1024,7 +1033,9 @@ var lineChart = {
     });
 
     if (ng) {
-      return this.next();
+      return setTimeout(function(ctx){
+        ctx.next(true);
+      }, 10, this);
     }
 
     this.eles.path
@@ -1033,7 +1044,7 @@ var lineChart = {
       .ease('linear')
       .attr('transform', 'translate(' + this.eles.x(this.data[0].time) + ', ' + st.padding + ')')
       .each('end', function(){
-        lineChart.next();
+        lineChart.next(true);
       });
 
     this.eles.xAxis.transition()