[Reconnoiter-devel] [reconnoiter commit] r496 - in trunk/ui/web/htdocs: . css js

svn-commit at lists.omniti.com svn-commit at lists.omniti.com
Wed Oct 15 15:08:35 EDT 2008


Author: jesus
Date: 2008-10-15 15:08:35 -0400 (Wed, 15 Oct 2008)
New Revision: 496

Added:
   trunk/ui/web/htdocs/js/recon.js
Modified:
   trunk/ui/web/htdocs/css/style.css
   trunk/ui/web/htdocs/index.php
   trunk/ui/web/htdocs/worksheet_panel.inc
Log:
encapsulate the graphing stuff, refs #22

Modified: trunk/ui/web/htdocs/css/style.css
===================================================================
--- trunk/ui/web/htdocs/css/style.css	2008-10-15 03:06:54 UTC (rev 495)
+++ trunk/ui/web/htdocs/css/style.css	2008-10-15 19:08:35 UTC (rev 496)
@@ -555,8 +555,7 @@
 }
 div.tooltip {
 background:white none repeat scroll 0 0;
-border:1px solid #999999;
-opacity:0.9;
+border:1px solid #333;
 padding:0 3px;
 }
 #graphlist p.paginate {

Modified: trunk/ui/web/htdocs/index.php
===================================================================
--- trunk/ui/web/htdocs/index.php	2008-10-15 03:06:54 UTC (rev 495)
+++ trunk/ui/web/htdocs/index.php	2008-10-15 19:08:35 UTC (rev 496)
@@ -16,6 +16,7 @@
 <script src="js/jquery.cookie.js" type="text/javascript"></script>
 <script src="js/jquery.treeview.js" type="text/javascript"></script>
 <script src="js/jquery.treeview.async.js" type="text/javascript"></script>
+<script src="js/recon.js" type="text/javascript"></script>
 
 <!-- color picker -->
 <link rel="stylesheet" href="css/colorpicker.css">

Added: trunk/ui/web/htdocs/js/recon.js
===================================================================
--- trunk/ui/web/htdocs/js/recon.js	                        (rev 0)
+++ trunk/ui/web/htdocs/js/recon.js	2008-10-15 19:08:35 UTC (rev 496)
@@ -0,0 +1,91 @@
+(function ($) {
+  var ReconGraph = function() {
+    var displayinfo = { start : 14*86400, end: '', width: 380, height: 180 };
+    return {
+      init:
+        function(options) {
+          this.graphinfo = $.extend({}, displayinfo, options||{});
+          if(!this.graphinfo.cnt) this.graphinfo.cnt = this.graphinfo.width / 2;
+          this.attr("id", this.graphinfo.graphid)
+              .append($('<h3>').addClass("graphTitle")
+                               .html(this.graphinfo.title))
+              .append($('<div></div>').addClass("plot-area")
+                                      .css('width', this.width + 'px')
+                                      .css('height', this.height + 'px'))
+              .append($('<div></div>').addClass("plot-legend"));
+          return this;
+        },
+      refresh:
+        function() {
+          var url = "flot/graph/settings/" + this.graphinfo.graphid;
+          this.find(".plot-area")
+              .html('<div class="centered"><div class="loading">&nbsp;</div></div>');
+          $.getJSON(url, {'cnt':this.graphinfo.cnt,
+                          'start':this.graphinfo.start,
+                          'end':this.graphinfo.end},
+                    (function(o) { return function (r) { o.ReconGraphPlot(r, function() { o.ReconGraphRefresh(); }) }})(this));
+          return this;
+        },
+      plot:
+        function (r, redraw) {
+          this.find("h3.graphTitle").html(this.graphinfo.title);
+          var placeholder = this.find("> div.plot-area");
+          placeholder.bind("plotselected", (function (o) {
+            return function (event, ranges) {
+              var start = new Date(Math.floor(ranges.xaxis.from));
+              var end = new Date(Math.floor(ranges.xaxis.to));
+              o.graphinfo.start = start.toUTCString();
+              o.graphinfo.end = end.toUTCString();
+              if(redraw) redraw();
+            };
+          })(this));
+          if(!r.options.grid) r.options.grid = {};
+          r.options.grid.hoverable = true;
+          $("div.tooltip").remove();
+          r.options.legend.container = this.find("div.plot-legend");
+          r.options.grid.autoHighlight = false;
+          if(!r.options.yaxis) r.options.yaxis = {};
+          if(r.options.yaxis.suffix)
+            r.options.yaxis.tickFormatter = function (val, axis) {
+              return val.toFixed(axis.tickDecimals) + r.options.yaxis.suffix;
+            };
+          var plot = $.plot(placeholder, r.data, r.options);
+
+          var hovering;
+          placeholder.bind("plothover", function (event, pos, item) {
+            if(hovering) plot.unhighlight(hovering.series, hovering.datapoint);
+            if(item && (item.datapoint[1] != "" || item.datapoint[2] != null)) {
+              // Emulate opacity on white
+              var soft = 'rgb(' +
+                         (item.series.color.match(/\((.+)\)/))[1]
+                                           .split(',')
+                                           .map(function(a) {
+                                             return Math.round(255-(255-a)*0.1);
+                                           })
+                                           .join(',') +
+                         ')';
+              if(! $("div.tooltip")[0])
+                $('<div class="tooltip"></div>').appendTo($('body'));
+              $("div.tooltip")
+                .html((item.datapoint[2] ? item.datapoint[2] : item.datapoint[1]) + " (" + item.series.label + ")")
+                .css( { top: item.pageY - 15,
+                        left: item.pageX + 10,
+                        border: '1px solid ' + item.series.color,
+                        backgroundColor: soft,
+                        position: 'absolute',
+                        'z-index': 1000 });
+              hovering = item;
+              plot.highlight(item.series, item.datapoint);
+              return true;
+            }
+            $("div.tooltip").remove();
+            return false;
+          });
+        }
+    };
+  }();
+  $.fn.extend({ ReconGraph: ReconGraph.init,
+                ReconGraphRefresh: ReconGraph.refresh,
+                ReconGraphPlot: ReconGraph.plot
+              });
+})(jQuery);

Modified: trunk/ui/web/htdocs/worksheet_panel.inc
===================================================================
--- trunk/ui/web/htdocs/worksheet_panel.inc	2008-10-15 03:06:54 UTC (rev 495)
+++ trunk/ui/web/htdocs/worksheet_panel.inc	2008-10-15 19:08:35 UTC (rev 496)
@@ -4,36 +4,16 @@
 <script type="text/javascript">
 <!--
 var ws_displayinfo = { start : 14*86400, cnt: '100', end: '' };
-function ws_redraw_graph(info, domid) {
-  if(info.datapoints.length > 0) {
-    var url = "flot/graph/settings/" + info.graphid;
-    $(domid + " .plot-area").html('<div class="centered"><div class="loading">&nbsp;</div></div>');
-    $.getJSON(url, {'cnt':ws_displayinfo.cnt,
-                    'start':ws_displayinfo.start,
-                    'end':ws_displayinfo.end},
-              function (r) { plot_id(r,domid, function() { ws_displayinfo = displayinfo; load_worksheet(); }); });
-  }
-  else {
-    $(domid + " .plot-area").html('<div class="centered">No data</div>');
-  }
-}
-function ws_refresh_graph_from_json(info, domid) {
-  if(info.datapoints == undefined) info.datapoints = Array();
-  $(domid + " h3.graphTitle").html(info.title);
-  ws_redraw_graph(info, domid);
-}
-function ws_fetch_graph_info(id, domid) {
-  $.getJSON("json/graph/info/" + id,
-            function(r) { ws_refresh_graph_from_json(r, domid); });
-}
 function process_worksheet_json(r) {
   var ul = $("ul#worksheet-graphs");
   ul.empty();
   for(var i = 0; i < r.graphs.length; i++) {
-    var o = $("#maingraph-template").clone();
-    o.attr("id", r.graphs[i].graphid);
+    r.graphs[i].start = ws_displayinfo.start;
+    r.graphs[i].end = ws_displayinfo.end;
+    r.graphs[i].cnt = ws_displayinfo.cnt;
+    var o = $('<div></div>').ReconGraph( r.graphs[i] );
     ul.append($('<li/>').append(o));
-    ws_refresh_graph_from_json(r.graphs[i], "#" + r.graphs[i].graphid);
+    o.ReconGraphRefresh();
   }
   ul.sortable({ handle: '.graphTitle',
                 scroll: true,
@@ -43,6 +23,7 @@
                     ui.item.parent().find("> li > div").each(
                       function(i) { ol.push($(this).attr("id")); }
                     );
+                    // Store new worksheet order here
                     console.log(ol);
                   }
               });



More information about the Reconnoiter-devel mailing list