diff options
| -rw-r--r-- | assets/js/monitor.js | 203 | ||||
| -rwxr-xr-x | 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; })); } @@ -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 |