let svg linegraph to auto adjust for its y-axis

3 files changed, 71 insertions, 43 deletions

diff --git a/assets/js/monitor.js b/assets/js/monitor.js
index 05a3708..890c3f1 100644
--- a/assets/js/monitor.js
+++ b/assets/js/monitor.js
@@ -73,11 +73,15 @@ LineGraph.prototype.recalc_y_domain = function(mdata) {
     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]);
+    this.y.domain([min - Math.max(delta / 3.0, 1), max + Math.max(delta / 3.0, 1)]);
 }
 
-LineGraph.prototype.recalc_domain = function(mdata) {
+LineGraph.prototype.recalc_x_domain = function(mdata) {
     this.x.domain(d3.extent(mdata[0], function(d) { return d.x; }));
+}
+
+LineGraph.prototype.recalc_domain = function(mdata) {
+    this.recalc_x_domain(mdata);
     this.recalc_y_domain(mdata);
 }
 
@@ -99,12 +103,35 @@ LineGraph.prototype.update = function(d, i, b) {
     var mdata = this.parse_data(d);
     var freezed_i = [];
     var recalced = false;
+    var svg = d3.select(this.elem).select("svg");
+    this.recalc_y_domain(mdata);
+    var ya = svg.select(".y.axis");
+    ya.transition()
+        .duration(750)
+        .call(this.yAxis);
+    var maxw = ya.node().getBBox().width;
+    svg.select("g")
+        .attr("transform", "translate(" + (maxw + this.margin.left) + "," + this.margin.top + ")");
+    var niw = this.width - maxw;
+    if (Math.abs(niw - this.inner_width) > 1e-6)
+    {
+        this.inner_width = niw;
+        this.x = d3.scale.linear().range([0, this.inner_width]);
+        this.xAxis = d3.svg.axis().scale(this.x)
+                        .orient("bottom").ticks(5).tickFormat(d3.format("d"));
+    }
+    this.recalc_x_domain(this.pdata);
+    svg.transition()
+       .duration(750)
+       .select(".x.axis")
+       .call(this.xAxis);
+    svg.select("rect")
+        .attr("width", this.inner_width);
     for (var i = 0; i < mdata.length; i++)
     {
         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;
@@ -166,20 +193,13 @@ LineGraph.prototype.update = function(d, i, b) {
             }}(i, data)));
         }
     }
-    svg.transition()
-       .duration(750)
-       .select(".x.axis")
-       .call(this.xAxis);
-    svg.transition()
-       .duration(750)
-       .select(".y.axis")
-       .call(this.yAxis);
 }
 
 LineGraph.prototype.setup = function(elem, d, i, b) {
     var graph = this;
     this.elem = elem;
-    var margin = {top: 10, right: 0, bottom: 50, left: 30};
+    var margin = this.margin = {top: 10, right: 0, bottom: 50, left: 0};
+    var clippath_name = "clip" + d.jid;
     // Adds the svg canvas
     var svg = d3.select(this.elem)
                 .append("svg")
@@ -188,19 +208,31 @@ LineGraph.prototype.setup = function(elem, d, i, b) {
                 .append("g")
                 .attr("transform",
                     "translate(" + margin.left + "," + margin.top + ")");
-    var width = 500 - margin.left - margin.right;
-    var height = 250 - margin.top - margin.bottom;
-    // Set the ranges
-    this.x = d3.scale.linear().range([0, width]);
-    this.y = d3.scale.linear().range([height, 0]);
+    this.width = 500 - margin.left - margin.right;
+    this.height = 250 - margin.top - margin.bottom;
     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"));
 
+    this.y = d3.scale.linear().range([this.height, 0]);
+    this.recalc_y_domain(mdata);
     this.yAxis = d3.svg.axis().scale(this.y)
                     .orient("left").ticks(5);
+
+    // Add the Y Axis
+    var ya = svg.append("g")
+        .attr("class", "y axis")
+        .call(this.yAxis);
+    /*
+    ya.selectAll("text").each(function() {
+        if(this.getBBox().width > maxw) maxw = this.getBBox().width;
+    });
+    */
+    var maxw = ya.node().getBBox().width;
+    svg.attr("transform", "translate(" + (maxw + margin.left) + "," + margin.top + ")");
+    this.inner_width = this.width - maxw;
+    this.x = d3.scale.linear().range([0, this.inner_width]);
+    this.recalc_x_domain(mdata);
+    this.xAxis = d3.svg.axis().scale(this.x)
+                    .orient("bottom").ticks(5).tickFormat(d3.format("d"));
     // Define the line
     this.valueline = d3.svg.line()
                         .x(function(d) { return this.x(d.x); })
@@ -208,36 +240,22 @@ LineGraph.prototype.setup = function(elem, d, i, b) {
     // Add the X Axis
     svg.append("g")
         .attr("class", "x axis")
-        .attr("transform", "translate(0," + height + ")")
+        .attr("transform", "translate(0," + this.height + ")")
         .call(this.xAxis);
 
-    // Add the Y Axis
-    svg.append("g")
-        .attr("class", "y axis")
-        .call(this.yAxis);
-
     svg.append("defs").append("clipPath")
-        .attr("id", "clip")
+        .attr("id", clippath_name)
         .append("rect")
-        .attr("width", width)
-        .attr("height", height);
+        .attr("width", this.inner_width)
+        .attr("height", this.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")
+        .style("height", this.height + this.margin.top + this.margin.bottom + "px")
         .each(b.setHook())
         .each("end", b.setNotifier(function() {
                     // Get the data
@@ -245,7 +263,7 @@ LineGraph.prototype.setup = function(elem, d, i, b) {
             {
                 var data = mdata[i];
                 var path = svg.append("g")
-                                .attr("clip-path", "url(#clip)")
+                                .attr("clip-path", "url(#" + clippath_name + ")")
                                 .append("path");
 
                 path.attr("class", "line")
diff --git a/count.sh b/count.sh
new file mode 100755
index 0000000..3db505f
--- /dev/null
+++ b/count.sh
@@ -0,0 +1,10 @@
+#!/bin/bash
+export JMNAME='COUNTER'
+export JTYPE='linegraph'
+i=1
+function trigger {
+    $CLIENT --add "$JID" "$i"
+    let i=i+10000
+}
+export -f trigger
+./monitor_daemon.sh
diff --git a/mem.sh b/mem.sh
index e6d93fb..e8a3df6 100755
--- a/mem.sh
+++ b/mem.sh
@@ -1,8 +1,8 @@
 #!/bin/bash
-export JMNAME='MEM'
+export JMNAME='RAM'
 export JTYPE='linegraph'
 function trigger {
-    $CLIENT --add "$JID" $(python -c $'import psutil\nprint psutil.virtual_memory().free*.1/2**20')
+    $CLIENT --add "$JID" $(python -c $'import psutil\nprint psutil.virtual_memory().percent')
 }
 export -f trigger
 ./monitor_daemon.sh