aboutsummaryrefslogtreecommitdiff
path: root/assets/js
diff options
context:
space:
mode:
authorDeterminant <[email protected]>2014-12-28 13:44:27 +0800
committerDeterminant <[email protected]>2014-12-28 13:44:27 +0800
commit1759c270db273939feeff5b241e9143cb067aa32 (patch)
tree0fcdf9aaddffff95e8853412c8d0dfb695b9c8fe /assets/js
parent64bee3cc1884d74887b3d02af996cd435cfbc5dc (diff)
support multiline graph
Diffstat (limited to 'assets/js')
-rw-r--r--assets/js/monitor.js203
1 files changed, 116 insertions, 87 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;
}));
}