klickbare plots

2 files changed, 72 insertions, 27 deletions

diff --git a/ebus/webapp/static/src/d3.control.js b/ebus/webapp/static/src/d3.control.js
index 124575b..489edea 100644
--- a/ebus/webapp/static/src/d3.control.js
+++ b/ebus/webapp/static/src/d3.control.js
@@ -4,6 +4,9 @@ var d3_control = function(element, svgurl, mapping) {
     var control = this;
     d3.xml(svgurl, "image/svg+xml", function(xml) {
 	       element[0][0].appendChild(xml.documentElement);
+	       element.select("svg")
+		   .style("width","100%").style("height", "100%");
+
 	       // Setup mapping
 	       for (var element_id in this.mapping) {
 		   control.initElement(element_id);
@@ -19,33 +22,70 @@ d3_control.prototype = {
     initElement:function(element_id) {
 	var options = this.mapping[element_id];
 	d3.select(document.getElementById(element_id))
-	    .on("click", function() {
-		    var elem = d3.select(this);
-		    var popup = d3.select("body")
-			.append("div")
-			.classed("popup", true)
-			.style("top", d3.event.clientY-5)
-			.style("left", d3.event.clientX-5)
-			.on("click", function() {
-				d3.select(this).remove();
-			    });
-		    popup.append("div")
-			.text(options.sensor);
+	    .on("mouseover", 
+		function() {
+		    if( typeof(options._plot) == "undefined") {
+			options._plot = d3.select(this.ownerSVGElement)
+			    .append("svg:g")
+			    .classed("d3.control_popup", true);
+
+			var startdate = (new Date().getTime()/1000) - 7*60*60*24;
+			var enddate = (new Date().getTime()/1000);
+			var plot = d3.plot(options._plot);
+			d3.json("../sensor/"+options.sensor+"/" + startdate + "/" + enddate,
+				function(resp) {
+				    var data = resp.data.map(function(d) {
+								 return [new Date(d[0]), d[1]];
+							     });
+				    plot.draw(data);
+				});
+
+			options._plot.on("mouseout",
+					 function() {
+					     if (options._plot.node().contains(d3.event.relatedTarget))
+						 return;
+					     options._plot
+						 .transition()
+						 .duration(1000)
+						 .style("opacity", 0.0)
+						 .remove();
+					 });
+
+			var drag = d3.behavior.drag()
+			    .on("dragstart", function() {
+				    options._plot.on("mouseout", null);
+				    options._plot.transition().duration(1000).style("opacity", 1.0);
+
+				    delete options._plot;
+				    d3.select(this).select("rect")
+					.style("stroke", "gray")
+					.style("stroke-width", "3px");
+				})
+			    .on("drag", function(d,i){
+				    d=[];
+				    d.x = d3.event.x;
+				    d.y = d3.event.y;
+				    d3.select(this).attr("transform", "translate("+d.x+","+d.y+")");
+				})
+			    .on("dragend", function() {
+				    d3.select(this).on("mousedown.drag", null);
+				    d3.select(this).on("click", function() { d3.select(this).remove(); });
+				});
+
+			options._plot.call(drag);
+		    } else {
+			this.ownerSVGElement
+			    .appendChild(options._plot.node());
 
-		    var startdate = (new Date().getTime()/1000) - 7*60*60*24;
-		    var enddate = (new Date().getTime()/1000);
-		    var plot = d3.plot(popup);
-		    d3.json("../sensor/"+options.sensor+"/" + startdate + "/" + enddate,
-			    function(resp) {
-				var data = resp.data.map(function(d) {
-							     return [new Date(d[0]), d[1]];
-							 });
-				plot.draw(data);
-			    });
+			options._plot.style("opacity", 1);
+		    }
+		    
+		    var xy = d3.svg.mouse(this.ownerSVGElement);
+		    options._plot.attr("transform", "translate("+xy[0]+","+xy[1]+")");
 		});
     },
     process:function(data) {
-        for (var i in data) {
+	for (var i in data) {
             var row = data[i];
 
 	    if (typeof(console) != "undefined") {
diff --git a/ebus/webapp/static/src/d3.plot.js b/ebus/webapp/static/src/d3.plot.js
index e50cb5e..d9a7d04 100644
--- a/ebus/webapp/static/src/d3.plot.js
+++ b/ebus/webapp/static/src/d3.plot.js
@@ -4,16 +4,21 @@ function d3_plot(container) {
     this.opt = {
 	w:550, h:200, margin:30
     };
-    this.element = container.append("svg:svg")    
+    this.element = container.append("svg:g")    
 	.classed("d3.plot_plot",true)
 	.attr("width", this.opt.w)
 	.attr("height", this.opt.h);
-    
+
+    this.element.append("svg:rect")
+	.attr("width", this.opt.w)
+	.attr("height", this.opt.h)
+	.style("fill", "white");
+   
     this.element.append("svg:text")
 	.classed("d3-plot_wait", true)
 	.attr("x", this.opt.w/2)
 	.attr("y", this.opt.h/2)
-        .attr("text-anchor", "middle")
+        .attr("text-anchor", "center")
 	.text("Bitte warten");
 };
 
@@ -59,7 +64,7 @@ d3_plot.prototype = {
             .text(function(d){return tick_format(d);})
             .attr("x", function(d) {return x(d);})
             .attr("y", -5)
-            .attr("text-anchor", "middle");
+            .attr("text-anchor", "center");
 
 	g.selectAll(".ylabel")
             .data(y.ticks(5)).enter()