From 1759c270db273939feeff5b241e9143cb067aa32 Mon Sep 17 00:00:00 2001
From: Determinant <ted.sybil@gmail.com>
Date: Sun, 28 Dec 2014 13:44:27 +0800
Subject: support multiline graph

---
 assets/js/monitor.js | 203 +++++++++++++++++++++++++++++----------------------
 cpu.sh               |   2 +-
 2 files changed, 117 insertions(+), 88 deletions(-)

diff --git a/assets/js/monitor.js b/assets/js/monitor.js
index 7ef1df3..05a3708 100644
--- a/assets/js/monitor.js
+++ b/assets/js/monitor.js
@@ -63,87 +63,108 @@ function random_color() {
     return "#" + hex(r) + hex(g) + hex(b);
 }
 
+var freeze_var = function(cont, i, val) { return cont[i] = function(){ return val }; };
+
 function LineGraph() {}
 
-LineGraph.prototype.recalc_y_domain = function(data) {
-    var min = d3.min(data, function(d) { return d.y; });
-    var max = d3.max(data, function(d) { return d.y; });
+LineGraph.prototype.recalc_y_domain = function(mdata) {
+    var min = d3.min($.map(mdata, function (data) {
+                return d3.min(data, function(d) { return d.y; }); }));
+    var max = d3.max($.map(mdata, function (data) {
+                return d3.max(data, function(d) { return d.y; }); }));
     var delta = max - min;
     this.y.domain([min - delta / 2.0, max + delta / 3.0]);
 }
 
-LineGraph.prototype.recalc_domain = function(data) {
-    this.x.domain(d3.extent(data, function(d) { return d.x; }));
-    this.recalc_y_domain(data);
+LineGraph.prototype.recalc_domain = function(mdata) {
+    this.x.domain(d3.extent(mdata[0], function(d) { return d.x; }));
+    this.recalc_y_domain(mdata);
 }
 
 LineGraph.prototype.parse_data = function(d) {
     var data = [];
     for (var i = 0; i < d.records.length; i++)
     {
-        var rec = d.records[i];
-        data.push({x: i, y: +rec.rec[0], rid: rec.rid});
+        var row = d.records[i];
+        while (data.length < row.rec.length)
+            data.push([]);
+        for (var j = 0; j < row.rec.length; j++)
+            data[j].push({x: i, y: +row.rec[j], rid: row.rid});
     }
     return data;
 }
 
 LineGraph.prototype.update = function(d, i, b) {
     var graph = this;
-    var data = this.parse_data(d);
-    if (data.length == 0) return;
-    var pdata = this.pdata;
-    var svg = d3.select(this.elem).select("svg");
-    var path = svg.select(".line");
-
-    var shift = pdata.length ? data[0].rid - pdata[0].rid : 0;
-    var add = pdata.length ? data[data.length - 1].rid - pdata[pdata.length - 1].rid : 0;
-    if (pdata.length == 0 || pdata[pdata.length - 1].rid < data[0].rid ||
-        pdata[0] > data[data.length - 1].rid || shift < 0 || add < 0)
+    var mdata = this.parse_data(d);
+    var freezed_i = [];
+    var recalced = false;
+    for (var i = 0; i < mdata.length; i++)
     {
-        if (data.length == 1)
+        var data = mdata[i];
+        if (data.length == 0) continue;
+        var pdata = this.pdata[i];
+        var svg = d3.select(this.elem).select("svg");
+        var path = this.line[i];
+
+        var shift = pdata.length ? data[0].rid - pdata[0].rid : 0;
+        var add = pdata.length ? data[data.length - 1].rid - pdata[pdata.length - 1].rid : 0;
+        if (pdata.length == 0 || pdata[pdata.length - 1].rid < data[0].rid ||
+            pdata[0] > data[data.length - 1].rid || shift < 0 || add < 0)
         {
-            data = [];
-            console.log("clear");
+            if (data.length == 1)
+            {
+                data = [];
+                console.log("clear");
+            }
+            if (!recalced)
+            {
+                this.recalc_domain(mdata);
+                recalced = true;
+            }
+            path.transition()
+                .duration(200)
+                .style("opacity", 1e-6)
+                .transition()
+                .attr("d", graph.valueline(data))
+                .transition()
+                .duration(200)
+                .style("opacity", 1)
+                .each(b.setHook())
+                .each("end", b.setNotifier(function(i, data) { return function() {
+                    graph.pdata[i] = data;
+                    console.log("refresh complete");
+                }}(i, data)));
+            console.log("refresh started");
         }
-        this.recalc_domain(data);
-        path.transition()
-            .duration(200)
-            .style("opacity", 1e-6)
-            .transition()
+        else
+        {
+            if (!recalced)
+            {
+                this.recalc_domain(this.pdata);
+                recalced = true;
+            }
+            //console.log("shift: " + shift + "add: " + add);
+            data = pdata.concat(data.slice(data.length - add, data.length));
+            for (var j = 0; j < data.length; j++)
+                data[j].x = j;
+            this.recalc_y_domain(mdata);
+            path.transition().duration(750)
             .attr("d", graph.valueline(data))
             .transition()
-            .duration(200)
-            .style("opacity", 1)
+            .duration(750)
+            .attr("transform", "translate(" + this.x(-shift) + ")")
             .each(b.setHook())
-            .each("end", b.setNotifier(function() {
-                graph.pdata = data;
-                console.log("refresh complete");
-            }));
-        console.log("refresh started");
-    }
-    else
-    {
-        this.recalc_domain(pdata);
-        //console.log("shift: " + shift + "add: " + add);
-        data = this.pdata.concat(data.slice(data.length - add, data.length));
-        for (var i = 0; i < data.length; i++)
-            data[i].x = i;
-        this.recalc_y_domain(data);
-        path.transition().duration(750)
-        .attr("d", graph.valueline(data))
-        .transition()
-        .duration(750)
-        .attr("transform", "translate(" + this.x(-shift) + ")")
-        .each(b.setHook())
-        .each("end", b.setNotifier(function() {
-            for (var i = 0; i < shift; i++)
-                data.shift();
-            for (var i = 0; i < data.length; i++)
-                data[i].x = i;
-            graph.pdata = data;
-            d3.select(this).attr("d", graph.valueline(data))
-                            .attr("transform", "translate(" + graph.x(0) + ")");
-        }));
+            .each("end", b.setNotifier(function(i, data) { return function() {
+                for (var j = 0; j < shift; j++)
+                    data.shift();
+                for (var j = 0; j < data.length; j++)
+                    data[j].x = j;
+                graph.pdata[i] = data;
+                d3.select(this).attr("d", graph.valueline(data))
+                                .attr("transform", "translate(" + graph.x(0) + ")");
+            }}(i, data)));
+        }
     }
     svg.transition()
        .duration(750)
@@ -157,7 +178,6 @@ LineGraph.prototype.update = function(d, i, b) {
 
 LineGraph.prototype.setup = function(elem, d, i, b) {
     var graph = this;
-    var data = this.parse_data(d);
     this.elem = elem;
     var margin = {top: 10, right: 0, bottom: 50, left: 30};
     // Adds the svg canvas
@@ -173,8 +193,8 @@ LineGraph.prototype.setup = function(elem, d, i, b) {
     // Set the ranges
     this.x = d3.scale.linear().range([0, width]);
     this.y = d3.scale.linear().range([height, 0]);
-    // Scale the range of the data
-    this.recalc_domain(data);
+    var mdata = this.parse_data(d);
+    this.recalc_domain(mdata);
     // Define the axes
     this.xAxis = d3.svg.axis().scale(this.x)
                     .orient("bottom").ticks(5).tickFormat(d3.format("d"));
@@ -185,15 +205,6 @@ LineGraph.prototype.setup = function(elem, d, i, b) {
     this.valueline = d3.svg.line()
                         .x(function(d) { return this.x(d.x); })
                         .y(function(d) { return this.y(d.y); });
-    /*
-    svg.append("text")
-        .attr("x", (width / 2))
-        .attr("y", 0 - (margin.top / 2))
-        .attr("text-anchor", "middle")
-        .style("font-size", "16px")
-        .style("text-decoration", "none")
-        .text(d.name);
-    */
     // Add the X Axis
     svg.append("g")
         .attr("class", "x axis")
@@ -211,31 +222,49 @@ LineGraph.prototype.setup = function(elem, d, i, b) {
         .attr("width", width)
         .attr("height", height);
 
+    /*
+    svg.append("text")
+        .attr("x", (width / 2))
+        .attr("y", 0 - (margin.top / 2))
+        .attr("text-anchor", "middle")
+        .style("font-size", "16px")
+        .style("text-decoration", "none")
+        .text(d.name);
+    */
+    this.pdata = [];
+    this.line = [];
+    fdata = [];
+    fpath = [];
     d3.select(this.elem).transition()
         .duration(750)
         .style("height", height + margin.top + margin.bottom + "px")
         .each(b.setHook())
         .each("end", b.setNotifier(function() {
                     // Get the data
-            var path = svg.append("g")
-                            .attr("clip-path", "url(#clip)")
-                            .append("path");
+            for (var i = 0; i < mdata.length; i++)
+            {
+                var data = mdata[i];
+                var path = svg.append("g")
+                                .attr("clip-path", "url(#clip)")
+                                .append("path");
 
-            path.attr("class", "line")
-                .style("stroke", random_color)
-                .attr("d", graph.valueline(data));
-            var totalLength = path.node().getTotalLength();
-            path.attr("stroke-dasharray", totalLength + " " + totalLength)
-                .attr("stroke-dashoffset", totalLength)
-                .transition()
-                .duration(2000)
-                .ease("linear")
-                .attr("stroke-dashoffset", 0)
-                .each(b.setHook())
-                .each("end", b.setNotifier(function() {
-                    path.attr("stroke-dasharray", "");
-                }));
-            graph.pdata = data;
+                path.attr("class", "line")
+                    .style("stroke", random_color)
+                    .attr("d", graph.valueline(data));
+                var totalLength = path.node().getTotalLength();
+                path.attr("stroke-dasharray", totalLength + " " + totalLength)
+                    .attr("stroke-dashoffset", totalLength)
+                    .transition()
+                    .duration(2000)
+                    .ease("linear")
+                    .attr("stroke-dashoffset", 0)
+                    .each(b.setHook())
+                    .each("end", b.setNotifier(function(data, path) { return function() {
+                        path.attr("stroke-dasharray", "");
+                        graph.line.push(path);
+                    }}(data, path)));
+            }
+            graph.pdata = mdata;
         }));
 }
 
diff --git a/cpu.sh b/cpu.sh
index 935d515..0487b6f 100755
--- a/cpu.sh
+++ b/cpu.sh
@@ -2,7 +2,7 @@
 export JMNAME='CPU'
 export JTYPE='linegraph'
 function trigger {
-    $CLIENT --add "$JID" $(python -c $'import psutil\nimport time\ntime.sleep(1)\nprint psutil.cpu_percent()')
+$CLIENT --add "$JID" $(python -c $'import psutil\nimport time\nprint " ".join([str(i) for i in psutil.cpu_percent(1, True)])')
 }
 export -f trigger
 ./monitor_daemon.sh
-- 
cgit v1.2.3