Links turn green and red depending on client download rate.

More code cleanup

1 files changed, 63 insertions, 50 deletions

diff --git a/static/status-dnbd3.html b/static/status-dnbd3.html
index 263d621..6f92c97 100644
--- a/static/status-dnbd3.html
+++ b/static/status-dnbd3.html
@@ -33,25 +33,31 @@ var newLinks = [];
 var links = {};
 var nodes = {};
 
+// color for links
+// color for idle links
 var idleColor = { "r": 85, "g": 102, "b": 255};
-var activeColor = { "r": 255, "g": 0, "b": 0};
+// links that are active
+var activeColor = { "r": 0, "g": 255, "b": 0};
+// links with peaking download
+var peakColor = { "r": 255, "g": 0, "b": 0};
 
 // IDs need to begin with a letter.
 function makeId(prefix, text) {
     return prefix + text.replace(/\./g, "-");
 }
 
+// Log scaling for the traffic graph
 function logarithmicScaling(value) {
     return Math.log(value/1000000+1);
 }
 
 function myGraph(el) {
-
     var changed = false;
+    // to spawn new clients near already existing nodes.
     var ccX = 0, ccY = 0, ccCount = 0;
 
-    // Add and remove elements on the graph object
-    this.addNode = function (id) {
+    // Add/update and remove elements on the graph object
+    this.updateNode = function (id) {
         x = 1;
         y = 1;
         title = id;
@@ -59,15 +65,16 @@ function myGraph(el) {
         var distance = 2;
         var radius = 4;
         var color = "#0000FF"; // Blue
-        // Other attr if server.
+
+        // Servers look different
         var s = servers[title]
         if(s) {
             distance = 6;
             radius = 15;
         }
-
         distance *= w / 2000;
         var node = findNode(id);
+
         // Add node, if it doesn't exist
         if (!node) {
             if (ccCount != 0) {
@@ -79,10 +86,10 @@ function myGraph(el) {
         } else {
             var visNode = vis.select("#" + id);
             if (visNode) {
-                visNode.select("circle").attr("r", radius);
-                // Change color if server.
+                // Change color and radius if server.
                 var s = servers[title];
                 if (s) {
+                    visNode.select("circle").attr("r", radius);
                     visNode.select("circle").style("fill", s.color);
                 }
             }
@@ -113,28 +120,15 @@ function myGraph(el) {
         }
     }
 
-
-    this.addLink = function (edge, timestamp) {
-
+    // Add/update links in the graph
+    this.updateLink = function (edge, timestamp) {
         var sourceId = edge.source;
         var targetId = edge.target;
-        var stroke = "rgb(85, 102, 255)";
+        var stroke = idleColor;
+
         // Change color to red for links between servers
         if (servers[sourceId] && servers[targetId]) stroke = "rgb(255, 0, 0)";
 
-
-        // // TODO Change color for already active links here
-        //     if(servers[sourceId]) {
-        //         var uploadRate = Math.round( ( servers[sourceId].uploadRate/ 1048576) * 100 ) / 100;
-        //         //console.log(uploadRate)
-        //                 if(uploadRate > 1) {
-        //                         //changed = true;
-        //                         stroke = "#f00";
-        //                 }
-        //     }
-
-
-
         sourceId = makeId("a", sourceId);
         targetId = makeId("a", targetId);
         var sourceNode = findNode(sourceId);
@@ -142,6 +136,7 @@ function myGraph(el) {
 
         if ((sourceNode !== undefined) && (targetNode !== undefined)) {
             var link = findLink(sourceNode, targetNode);
+            // Add non existing links
             if (!link) {
                 var index = $.inArray(sourceId + targetId, pendingLinks);
                 if (index !== -1) {
@@ -152,24 +147,50 @@ function myGraph(el) {
                 }
             } else {              
                 link.lifetime = 2;
-                //link.color = stroke;
+                
 
-                //console.log(link);
+                // calculate download rate for clients and color links.
                 if (link.lastTimestamp != 0) {
-                    var upperIntensity = 3000;
-                    link.downloadRate = ((edge.received - link.lastReceived) / (timestamp - link.lastTimestamp)) / 0.004;
-                    link.colorIntensity += link.downloadRate;
-                    if (link.colorIntensity >= upperIntensity) link.colorIntensity = upperIntensity;
-                    link.colorIntensity -= 300;
-                    if (link.colorIntensity < 0) link.colorIntensity = 0;
-                    var factor = link.colorIntensity / upperIntensity;
-                    var cFactor = 1 - factor;
+                    var maxIntensitiy = 50000;
 
+                    link.downloadRate = ((edge.received - link.lastReceived) / (timestamp - lastTime)) *4;
+                    
+                    // link.downloadRate = 30000;
+                    // fading speed
+                    var fadingValue = (link.colorIntensity*0,85) - 200;
+                    if (fadingValue > 0) link.colorIntensity = fadingValue;
 
-                    var red = cFactor * idleColor.r + factor * activeColor.r;
-                    var green = cFactor * idleColor.g + factor * activeColor.g;
-                    var blue = cFactor * idleColor.b + factor * activeColor.b;
-                    //console.log(red +", "+ green +", " +blue);
+                    if (link.colorIntensity < 0) link.colorIntensity = 0;
+                    link.colorIntensity += link.downloadRate;
+                    if (link.colorIntensity >= maxIntensitiy) link.colorIntensity = maxIntensitiy;
+
+                    var red, green, blue;
+                    // Green colors between 0 - 1 MB/s
+                    if( link.colorIntensity <= 1000 ) {
+                        // if(link.downloadRate > 1) {
+                        //     console.log("downloadRate: " + link.downloadRate);
+                        //     console.log("Intensity: " + link.colorIntensity);
+                        // }
+
+                        // Blending idle (blue) and active (green) color
+                        var factor =  link.colorIntensity / 1000; //Math.log(link.colorIntensity+1) / Math.log(maxIntensitiy);
+                        var cFactor = 1 - factor;
+                        
+                        red = cFactor * idleColor.r + factor * activeColor.r;
+                        green = cFactor * idleColor.g + factor * activeColor.g;
+                        blue = cFactor * idleColor.b + factor * activeColor.b;
+                    } else { // Over 1MB/s
+                        
+                        // Blending active (green) and peak (red) color
+                        var factor =  (link.colorIntensity - 1000)/ 49000; //Math.log(link.colorIntensity+1) / Math.log(maxIntensitiy);
+                        var cFactor = 1 - factor;
+                        
+                        red = cFactor * activeColor.r + factor * peakColor.r;
+                        green = cFactor * activeColor.g + factor * peakColor.g;
+                        blue = cFactor * activeColor.b + factor * peakColor.b;
+                    
+                    }
+                    //console.log(" " + red + " " + " " + green + " " +  " " + blue)
                     link.color = "rgb("+ Math.floor(red) + ", " + Math.floor(green) + ", " + Math.floor(blue) + ")";
 
                 } else {
@@ -317,18 +338,12 @@ function myGraph(el) {
 
             node.exit().remove();
 
-            
-
-            
-
             link.exit().remove();
 
             vis.selectAll('g.node').forEach(function(e){$('#graph').find('svg').append(e)});
 
             var render = function() {
                 var fixX = function(x) {
-    //                console.log("X:" +x + " lx:" + lx + " scale:" + scale +" offX:" + offX);
-
                     return (x - lx) * scale + 20 + offX;
                 }
                 var fixY = function(y) {
@@ -378,12 +393,11 @@ function myGraph(el) {
     update();
     $( window ).resize( update );
 }
-
 graph = new myGraph("#graph");
 
+
 var servers = {};
 var serverCount = 0;
-
 var lastTime = 0;
 
 // Get new data
@@ -394,7 +408,6 @@ setInterval( function() {
         var g = data.graph;
         var stats = data.servers;
         updateGraph(g, data);
-        //updateLinks(g.edges, data);
         // updateTrafficGraph has to be called before updateTextStatistics to populate servers
         updateTrafficGraph(stats, data);
         updateTextStatistics(stats);
@@ -411,10 +424,10 @@ setInterval( function() {
 function updateGraph(g, data){
     if (g) {
         for (var i = 0; i < g.nodes.length; ++i) {
-            graph.addNode(g.nodes[i].name); // g.nodes[i].x, g.nodes[i].y);
+            graph.updateNode(g.nodes[i].name);
         }
         for (var i = 0; i < g.edges.length; ++i) {
-            graph.addLink(g.edges[i], data.timestamp);
+            graph.updateLink(g.edges[i], data.timestamp);
         }
         pendingLinks = intLinks;
         intLinks = newLinks;