From 5384a9f745d7aa31edc1b028a8ec0119dabdd1f5 Mon Sep 17 00:00:00 2001
From: Yves Fischer <yvesf-git@xapek.org>
Date: Mon, 12 Dec 2011 00:20:51 +0100
Subject: klickbare plots

---
 ebus/webapp/static/src/d3.control.js | 86 ++++++++++++++++++++++++++----------
 1 file changed, 63 insertions(+), 23 deletions(-)

(limited to 'ebus/webapp/static/src/d3.control.js')

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") {
-- 
cgit v1.2.1