[Openautomation-svn] SF.net SVN: openautomation:[304] CometVisu/trunk/visu

[<net...@us...>]

Revision: 304
          http://openautomation.svn.sourceforge.net/openautomation/?rev=304&view=rev
Author:   netzkind
Date:     2011-02-24 12:01:21 +0000 (Thu, 24 Feb 2011)

Log Message:
-----------
allow for tooltips in popup-diagrams (all designs); tooltips can be enabled via the editor for each diagram; format of timestamp is "toLocale"; tooltipped diagrams can be clicked without closing them

Modified Paths:
--------------
    CometVisu/trunk/visu/designs/discreet/basic.css
    CometVisu/trunk/visu/designs/discreet_sand/basic.css
    CometVisu/trunk/visu/designs/discreet_slim/basic.css
    CometVisu/trunk/visu/designs/pure/basic.css
    CometVisu/trunk/visu/plugins/diagram/structure_plugin.js

Modified: CometVisu/trunk/visu/designs/discreet/basic.css
===================================================================
--- CometVisu/trunk/visu/designs/discreet/basic.css	2011-02-22 21:44:41 UTC (rev 303)
+++ CometVisu/trunk/visu/designs/discreet/basic.css	2011-02-24 12:01:21 UTC (rev 304)
@@ -360,4 +360,13 @@
 .diagram_preview {
     width: 240px;
     height: 2em;
+}
+
+#diagramTooltip {
+	z-index: 1000;
+	color: black;
+	border: 1px solid #fdd;
+	padding: 2px;
+	background-color: #fee;
+	opacity: 0.80;
 }
\ No newline at end of file

Modified: CometVisu/trunk/visu/designs/discreet_sand/basic.css
===================================================================
--- CometVisu/trunk/visu/designs/discreet_sand/basic.css	2011-02-22 21:44:41 UTC (rev 303)
+++ CometVisu/trunk/visu/designs/discreet_sand/basic.css	2011-02-24 12:01:21 UTC (rev 304)
@@ -365,4 +365,13 @@
 
 .tickLabel {
     color: #453420;
+}
+
+#diagramTooltip {
+	z-index: 1000;
+	color: black;
+	border: 1px solid #fdd;
+	padding: 2px;
+	background-color: #fee;
+	opacity: 0.80;
 }
\ No newline at end of file

Modified: CometVisu/trunk/visu/designs/discreet_slim/basic.css
===================================================================
--- CometVisu/trunk/visu/designs/discreet_slim/basic.css	2011-02-22 21:44:41 UTC (rev 303)
+++ CometVisu/trunk/visu/designs/discreet_slim/basic.css	2011-02-24 12:01:21 UTC (rev 304)
@@ -349,4 +349,13 @@
 .diagram_preview {
     width: 100%;
     height: 2em;
+}
+
+#diagramTooltip {
+	z-index: 1000;
+	color: black;
+	border: 1px solid #fdd;
+	padding: 2px;
+	background-color: #fee;
+	opacity: 0.80;
 }
\ No newline at end of file

Modified: CometVisu/trunk/visu/designs/pure/basic.css
===================================================================
--- CometVisu/trunk/visu/designs/pure/basic.css	2011-02-22 21:44:41 UTC (rev 303)
+++ CometVisu/trunk/visu/designs/pure/basic.css	2011-02-24 12:01:21 UTC (rev 304)
@@ -311,4 +311,13 @@
 
 .clickable {
     cursor: pointer;
+}
+
+#diagramTooltip {
+	z-index: 1000;
+	color: black;
+	border: 1px solid #fdd;
+	padding: 2px;
+	background-color: #fee;
+	opacity: 0.80;
 }
\ No newline at end of file

Modified: CometVisu/trunk/visu/plugins/diagram/structure_plugin.js
===================================================================
--- CometVisu/trunk/visu/plugins/diagram/structure_plugin.js	2011-02-22 21:44:41 UTC (rev 303)
+++ CometVisu/trunk/visu/plugins/diagram/structure_plugin.js	2011-02-24 12:01:21 UTC (rev 304)
@@ -103,15 +103,54 @@
         diagram.data("refresh", $p.attr("refresh"));
 
         var bDiagram = $("<div class=\"diagram\" id=\"" + id + "_big\"/>");
-
+        
         diagram.addClass("clickable");
+        var data = jQuery.extend({}, diagram.data());
 
         diagram.bind("click", function() {
-            bDiagram.data(jQuery.extend({}, diagram.data()));
+            bDiagram.data(data);
             bDiagram.css({height: "90%"});
+
             showPopup("unknown", {title: page.textContent, content: bDiagram});
             bDiagram.parent("div").css({height: "100%", width: "90%", margin: "auto"}); // define parent as 100%!
-            refreshDiagram(bDiagram, {yaxis: {labelWidth: null}});
+ 
+            var bDiagramOpts = {yaxis: {labelWidth: null}};
+            if ($p.attr("tooltip") == "true") {
+                // if we want to display a tooltip, we need to listen to the event
+                var previousPoint = null;
+                jQuery(bDiagram).bind("plothover", function (event, pos, item) {
+                    jQuery("#x").text(pos.x.toFixed(2));
+                    jQuery("#y").text(pos.y.toFixed(2));
+                    
+                    if (item) {
+                        if (previousPoint != item.datapoint) {
+                            previousPoint = item.datapoint;
+                            
+                            $("#diagramTooltip").remove();
+                            var x = item.datapoint[0],
+                                y = item.datapoint[1].toFixed(2);
+                            
+                            var dte = new Date(x);
+                            
+                            showDiagramTooltip(item.pageX, item.pageY,
+                                        dte.toLocaleString() + ": " + y + jQuery(this).data("unit"));
+                        }
+                    }
+                    else {
+                        $("#diagramTooltip").remove();
+                        previousPoint = null;            
+                    }
+
+                })
+                .bind("click", function(event) {
+                    // don't let the popup know about the click, or it will close on touch-displays
+                    event.stopPropagation();
+                });
+                
+                bDiagramOpts = jQuery.extend(bDiagramOpts, {grid: {hoverable: true, clickable: true} });
+            }
+
+            refreshDiagram(bDiagram, bDiagramOpts);
             return false;
         });
 
@@ -123,7 +162,8 @@
         rrd:        {type: "string", required: true},
         unit:       {type: "string", required: false},
         series:     {type: "list", required: false, list: {day: "1 day", week: "1 week", month: "1 month", year: "1 year"}},
-        refresh:    {type: "numeric", required: false}
+        refresh:    {type: "numeric", required: false},
+        tooltip:    {type: "list", required: false, list: {true: "yes", false: "no"}},
     },
     content: {type: "string", required: true}
 });
@@ -132,6 +172,16 @@
     data: $("<span class='link'><a href='#' /></a>").find("a").css("color")
 };
 
+function showDiagramTooltip(x, y, contents) {
+    $('<div id="diagramTooltip">' + contents + '</div>').css( {
+        position: 'absolute',
+        display: 'none',
+        top: y + 5,
+        left: x + 5,
+    }).appendTo("body").fadeIn(200);
+}
+
+
 function refreshDiagram(diagram, flotoptions, data) {
     var diagram = $(diagram);
     var config = jQuery.extend(true, {series: diagram.data("series")}, data || {});


This was sent by the SourceForge.net collaborative development platform, the world's largest Open Source development site.