...

2 files changed, 60 insertions, 0 deletions

diff --git a/static/assets/css/monitor.css b/static/assets/css/monitor.css
index 25a9430..8b44e4f 100644
--- a/static/assets/css/monitor.css
+++ b/static/assets/css/monitor.css
@@ -1,4 +1,5 @@
 path {
+    pointer-events: none;
     stroke-width: 2;
     fill: none;
 }
@@ -23,3 +24,18 @@ path {
     margin-left: auto;
     margin-right: auto;
 }
+
+.overlay {
+    fill: none;
+    pointer-events: all;
+}
+
+.focus circle {
+    pointer-events: none;
+    fill: none;
+    stroke: steelblue;
+}
+
+.focus text {
+    pointer-events: none;
+}
diff --git a/static/assets/js/monitor.js b/static/assets/js/monitor.js
index 3a670c3..69a1ae9 100644
--- a/static/assets/js/monitor.js
+++ b/static/assets/js/monitor.js
@@ -262,8 +262,39 @@ LineGraph.prototype.setup = function(elem, d, i, b) {
         .attr("width", this.inner_width)
         .attr("height", this.height);
 
+    svg.append("rect")
+        .attr("class", "overlay")
+        .attr("width", this.inner_width)
+        .attr("height", this.height)
+        .on("mouseover", function() {
+                //console.log("over");
+                for (var i = 0; i < graph.pdata.length; i++)
+                    graph.focus[i].style("display", null)
+                               // .transition().duration(300)
+                                .style("stroke-opacity", 1); })
+        .on("mouseout", function() {
+                //console.log("out");
+                for (var i = 0; i < graph.pdata.length; i++)
+                    graph.focus[i]
+                            //.transition().duration(300)
+                            .style("stroke-opacity", 1e-6)
+                            .transition()
+                            .style("display", "none"); })
+        .on("mousemove", mousemove);
+    function mousemove() {
+        var x0 = graph.x.invert(d3.mouse(this)[0]);
+        for (var i = 0; i < graph.pdata.length; i++)
+        {
+            var d = graph.pdata[i][Math.round(x0)];
+            var f = graph.focus[i];
+            f.transition().duration(100).attr("transform", "translate(" + graph.x(d.x) + "," + graph.y(d.y) + ")");
+            f.select("text").text(d.y);
+        }
+    }
+
     this.pdata = [];
     this.line = [];
+    this.focus = [];
     d3.select(this.elem).transition()
         .duration(750)
         .style("height", this.height + this.margin.top + this.margin.bottom + "px")
@@ -292,6 +323,19 @@ LineGraph.prototype.setup = function(elem, d, i, b) {
                         path.attr("stroke-dasharray", "");
                         graph.line.push(path);
                     }}(data, path)));
+
+            }
+            for (var i = 0; i < mdata.length; i++)
+            {
+                var f = svg.append("g")
+                            .attr("class", "focus")
+                            .style("display", "none");
+                f.append("circle")
+                 .attr("r", 4.5);
+                f.append("text")
+                 .attr("x", 9)
+                 .attr("dy", ".35em");
+                graph.focus.push(f);
             }
             graph.pdata = mdata;
         }));