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

svn-commit at lists.omniti.com svn-commit at lists.omniti.com
Wed Oct 15 18:19:44 EDT 2008


Author: jesus
Date: 2008-10-15 18:19:44 -0400 (Wed, 15 Oct 2008)
New Revision: 499

Modified:
   trunk/ui/web/htdocs/css/style.css
   trunk/ui/web/htdocs/graph_panel.inc
   trunk/ui/web/htdocs/js/recon.js
Log:
consolidation... still a bit buggy, refs #22

Modified: trunk/ui/web/htdocs/css/style.css
===================================================================
--- trunk/ui/web/htdocs/css/style.css	2008-10-15 20:26:03 UTC (rev 498)
+++ trunk/ui/web/htdocs/css/style.css	2008-10-15 22:19:44 UTC (rev 499)
@@ -106,7 +106,7 @@
 #container
 {
 	left:0;
-	overflow:auto;
+	overflow:visible;
 	padding:1em;
 	position:absolute;	
 	top:54px;

Modified: trunk/ui/web/htdocs/graph_panel.inc
===================================================================
--- trunk/ui/web/htdocs/graph_panel.inc	2008-10-15 20:26:03 UTC (rev 498)
+++ trunk/ui/web/htdocs/graph_panel.inc	2008-10-15 22:19:44 UTC (rev 499)
@@ -4,9 +4,10 @@
 <script type="text/javascript" src="js/eye/utils.js"></script>
 <script type="text/javascript">
 <!--
+var maingraph;
 var current_graph_id = '';
 var debug_graph_edit = false;
-var graphinfo;
+var graphinfo= {};
 var displayinfo = { start : 14*86400, cnt: '', end: '' };
 var color_pool = Array('#33aa33','#4a00dc','#caac00','#3377cc','#00acfa','#cc3333')
 var color_sel = 0;
@@ -16,52 +17,6 @@
   fetch_graph_info(current_graph_id);
 }
 var recurse = 0;
-function plot_id(r, domid, redraw) {
-      var placeholder = $(domid + " > div.plot-area");
-      placeholder.bind("plotselected", function (event, ranges) {
-        var start = new Date(Math.floor(ranges.xaxis.from));
-        var end = new Date(Math.floor(ranges.xaxis.to));
-        displayinfo.start = start.toUTCString();
-        displayinfo.end = end.toUTCString();
-        if(redraw) redraw();
-      });
-      if(!r.options.grid) r.options.grid = {};
-      r.options.grid.hoverable = true;
-      $("div.tooltip").remove();
-      placeholder.bind("plothover", function (event, pos, item) {
-        if(item) {
-          if(! $("div.tooltip")[0])
-            $('<div class="tooltip"></div>').appendTo($('body'));
-          $("div.tooltip")
-            .html(item.datapoint[2] ? item.datapoint[2] : item.datapoint[1])
-            .css( { top: item.pageY - 10,
-                    left: item.pageX + 5,
-                    position: 'absolute',
-                    'z-index': 1000 });
-        }
-        else {
-          $("div.tooltip").remove();
-        }
-      });
-      r.options.legend.container = $(domid + " div.plot-legend");
-      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);
-}
-function redraw_current_graph(domid) {
-  if(graphinfo.datapoints.length > 0) {
-    $(domid).slideDown("normal");
-    var url = "flot/graph/settings/" + graphinfo.id;
-    $(domid + " .plot-area").html('<div class="centered"><div class="loading">&nbsp;</div></div>');
-    $.getJSON(url, {'cnt':displayinfo.cnt, 'start':displayinfo.start, 'end':displayinfo.end}, function (r) { plot_id(r,domid, function() { redraw_current_graph("#maingraph"); }); });
-  }
-  else {
-    $(domid).slideUp("normal");
-  }
-}
 function update_current_graph(redraw, f) {
   if(recurse > 0) return;
   var str = JSON.stringify(graphinfo);
@@ -83,7 +38,7 @@
                });
              });
            }
-           if(redraw) redraw_current_graph("#maingraph");
+           if(redraw && maingraph) maingraph.ReconGraphRefresh({graphid: graphinfo.id});
            if(f) f(d);
            recurse--;
          }, 'json');
@@ -223,10 +178,17 @@
   for(var i=0; i<graphinfo.datapoints.length; i++) {
     gtool_add_datapoint(graphinfo.datapoints[i]);
   }
-  redraw_current_graph("#maingraph");
+  if(maingraph) {
+    if(graphinfo.id) 
+      maingraph.ReconGraphRefresh({graphid: graphinfo.id});
+    else
+      maingraph.ReconGraphReset();
+  }
 }
 function fetch_graph_info(id) {
-  $.getJSON("json/graph/info/" + id, refresh_graph_from_json);
+  graphinfo.id = id;
+  if(id) $.getJSON("json/graph/info/" + id, refresh_graph_from_json);
+  else refresh_graph_from_json({});
   $("span.blankGraph").click(function() {
     if(graphinfo.saved || confirm("I will forget the current graph.  Are you sure?"))
       set_current_graph_id('');
@@ -266,7 +228,7 @@
                 displayinfo.start = time_windows[$(this).html()];
                 displayinfo.end = '';
                 $(this).addClass("selected");
-                redraw_current_graph("#maingraph");
+                maingraph.ReconGraphRefresh({graphid: graphinfo.id, start: time_windows[$(this).html()], end: ''});
                 return false;
         });
         $('#graph_widgetCalendar').DatePicker({
@@ -284,7 +246,7 @@
                         var end = new Date((new Date(dates[0], dates[1]-1, dates[2], 0, 0, 0)).getTime() + 86400000);
                         displayinfo.start = start.toUTCString();
                         displayinfo.end = end.toUTCString();
-                        redraw_current_graph("#maingraph");
+                        maingraph.ReconGraphRefresh({graphid: graphinfo.id});
                         $('#graph_datetool .range a.btn-slide').get(0).innerHTML = formated.join(' - ');
                 }
         });
@@ -299,6 +261,8 @@
           gtool_add_guide();
         });
         set_current_graph_id('');
+        maingraph = $('<div></div>').attr("id", "maingraph").ReconGraph({graphid: graphinfo.id, width: 780, height: 400});
+        $("#maingraphHolder").append(maingraph);
 });
 </script>
 
@@ -334,10 +298,7 @@
 </div>
 
 <div>
-	<div id="maingraph">
-        <div class="plot-area" style="width:780px;height:400px"></div>
-        <div class="plot-legend"></div>
-        <div class="plot-debug"></div>
+	<div id="maingraphHolder">
         </div>
 	<form action="#" name="form4" id="form4" style="margin:1em 0;text-align:center;">
 	<fieldset>

Modified: trunk/ui/web/htdocs/js/recon.js
===================================================================
--- trunk/ui/web/htdocs/js/recon.js	2008-10-15 20:26:03 UTC (rev 498)
+++ trunk/ui/web/htdocs/js/recon.js	2008-10-15 22:19:44 UTC (rev 499)
@@ -6,8 +6,8 @@
         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")
+          if(!this.attr("id")) this.attr("id", this.graphinfo.graphid);
+          this.append($('<h3>').addClass("graphTitle")
                                .html(this.graphinfo.title))
               .append($('<div></div>').addClass("plot-area")
                                       .css('width', this.width + 'px')
@@ -15,8 +15,21 @@
               .append($('<div></div>').addClass("plot-legend"));
           return this;
         },
+      reset:
+        function() {
+          this.graphinfo.graphid = '';
+          if(this.flot_plot) {
+            this.find("h3.graphTitle").html('');
+            this.find("div.plot-legend").html('');
+            this.flot_plot.setData({});
+            this.flot_plot.setupGrid();
+            this.flot_plot.draw();
+          }
+          return this;
+        },
       refresh:
-        function() {
+        function(options) {
+          this.graphinfo = $.extend({}, this.graphinfo, options||{});
           var url = "flot/graph/settings/" + this.graphinfo.graphid;
           this.find(".plot-area")
               .html('<div class="centered"><div class="loading">&nbsp;</div></div>');
@@ -49,7 +62,7 @@
             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 plot = this.flot_plot = $.plot(placeholder, r.data, r.options);
 
           var hovering;
           placeholder.bind("plothover", function (event, pos, item) {
@@ -86,6 +99,7 @@
   }();
   $.fn.extend({ ReconGraph: ReconGraph.init,
                 ReconGraphRefresh: ReconGraph.refresh,
-                ReconGraphPlot: ReconGraph.plot
+                ReconGraphPlot: ReconGraph.plot,
+                ReconGraphReset: ReconGraph.reset
               });
 })(jQuery);



More information about the Reconnoiter-devel mailing list