Show
Ignore:
Timestamp:
10/15/08 22:19:44 (6 years ago)
Author:
Theo Schlossnagle <jesus@omniti.com>
git-committer:
Theo Schlossnagle <jesus@omniti.com> 1224109184 +0000
git-parent:

[ee8c14373683efab971cd2c605751c248a378989]

git-author:
Theo Schlossnagle <jesus@omniti.com> 1224109184 +0000
Message:

consolidation... still a bit buggy, refs #22

Files:

Legend:

Unmodified
Added
Removed
Modified
Copied
Moved
  • ui/web/htdocs/css/style.css

    ree8c143 r7f943cb  
    107107{ 
    108108        left:0; 
    109         overflow:auto
     109        overflow:visible
    110110        padding:1em; 
    111111        position:absolute;       
  • ui/web/htdocs/graph_panel.inc

    r72e33c5 r7f943cb  
    55<script type="text/javascript"> 
    66<!-- 
     7var maingraph; 
    78var current_graph_id = ''; 
    89var debug_graph_edit = false; 
    9 var graphinfo
     10var graphinfo= {}
    1011var displayinfo = { start : 14*86400, cnt: '', end: '' }; 
    1112var color_pool = Array('#33aa33','#4a00dc','#caac00','#3377cc','#00acfa','#cc3333') 
     
    1718} 
    1819var recurse = 0; 
    19 function plot_id(r, domid, redraw) { 
    20       var placeholder = $(domid + " > div.plot-area"); 
    21       placeholder.bind("plotselected", function (event, ranges) { 
    22         var start = new Date(Math.floor(ranges.xaxis.from)); 
    23         var end = new Date(Math.floor(ranges.xaxis.to)); 
    24         displayinfo.start = start.toUTCString(); 
    25         displayinfo.end = end.toUTCString(); 
    26         if(redraw) redraw(); 
    27       }); 
    28       if(!r.options.grid) r.options.grid = {}; 
    29       r.options.grid.hoverable = true; 
    30       $("div.tooltip").remove(); 
    31       placeholder.bind("plothover", function (event, pos, item) { 
    32         if(item) { 
    33           if(! $("div.tooltip")[0]) 
    34             $('<div class="tooltip"></div>').appendTo($('body')); 
    35           $("div.tooltip") 
    36             .html(item.datapoint[2] ? item.datapoint[2] : item.datapoint[1]) 
    37             .css( { top: item.pageY - 10, 
    38                     left: item.pageX + 5, 
    39                     position: 'absolute', 
    40                     'z-index': 1000 }); 
    41         } 
    42         else { 
    43           $("div.tooltip").remove(); 
    44         } 
    45       }); 
    46       r.options.legend.container = $(domid + " div.plot-legend"); 
    47       if(!r.options.yaxis) r.options.yaxis = {}; 
    48       if(r.options.yaxis.suffix) 
    49         r.options.yaxis.tickFormatter = function (val, axis) { 
    50           return val.toFixed(axis.tickDecimals) + r.options.yaxis.suffix; 
    51         }; 
    52       var plot = $.plot(placeholder, r.data, r.options); 
    53 } 
    54 function redraw_current_graph(domid) { 
    55   if(graphinfo.datapoints.length > 0) { 
    56     $(domid).slideDown("normal"); 
    57     var url = "flot/graph/settings/" + graphinfo.id; 
    58     $(domid + " .plot-area").html('<div class="centered"><div class="loading">&nbsp;</div></div>'); 
    59     $.getJSON(url, {'cnt':displayinfo.cnt, 'start':displayinfo.start, 'end':displayinfo.end}, function (r) { plot_id(r,domid, function() { redraw_current_graph("#maingraph"); }); }); 
    60   } 
    61   else { 
    62     $(domid).slideUp("normal"); 
    63   } 
    64 } 
    6520function update_current_graph(redraw, f) { 
    6621  if(recurse > 0) return; 
     
    8439             }); 
    8540           } 
    86            if(redraw) redraw_current_graph("#maingraph"); 
     41           if(redraw && maingraph) maingraph.ReconGraphRefresh({graphid: graphinfo.id}); 
    8742           if(f) f(d); 
    8843           recurse--; 
     
    224179    gtool_add_datapoint(graphinfo.datapoints[i]); 
    225180  } 
    226   redraw_current_graph("#maingraph"); 
     181  if(maingraph) { 
     182    if(graphinfo.id)  
     183      maingraph.ReconGraphRefresh({graphid: graphinfo.id}); 
     184    else 
     185      maingraph.ReconGraphReset(); 
     186  } 
    227187} 
    228188function fetch_graph_info(id) { 
    229   $.getJSON("json/graph/info/" + id, refresh_graph_from_json); 
     189  graphinfo.id = id; 
     190  if(id) $.getJSON("json/graph/info/" + id, refresh_graph_from_json); 
     191  else refresh_graph_from_json({}); 
    230192  $("span.blankGraph").click(function() { 
    231193    if(graphinfo.saved || confirm("I will forget the current graph.  Are you sure?")) 
     
    267229                displayinfo.end = ''; 
    268230                $(this).addClass("selected"); 
    269                 redraw_current_graph("#maingraph"); 
     231                maingraph.ReconGraphRefresh({graphid: graphinfo.id, start: time_windows[$(this).html()], end: ''}); 
    270232                return false; 
    271233        }); 
     
    285247                        displayinfo.start = start.toUTCString(); 
    286248                        displayinfo.end = end.toUTCString(); 
    287                         redraw_current_graph("#maingraph"); 
     249                        maingraph.ReconGraphRefresh({graphid: graphinfo.id}); 
    288250                        $('#graph_datetool .range a.btn-slide').get(0).innerHTML = formated.join(' - '); 
    289251                } 
     
    300262        }); 
    301263        set_current_graph_id(''); 
     264        maingraph = $('<div></div>').attr("id", "maingraph").ReconGraph({graphid: graphinfo.id, width: 780, height: 400}); 
     265        $("#maingraphHolder").append(maingraph); 
    302266}); 
    303267</script> 
     
    335299 
    336300<div> 
    337         <div id="maingraph"> 
    338         <div class="plot-area" style="width:780px;height:400px"></div> 
    339         <div class="plot-legend"></div> 
    340         <div class="plot-debug"></div> 
     301        <div id="maingraphHolder"> 
    341302        </div> 
    342303        <form action="#" name="form4" id="form4" style="margin:1em 0;text-align:center;"> 
  • ui/web/htdocs/js/recon.js

    r3cdcc06 r7f943cb  
    77          this.graphinfo = $.extend({}, displayinfo, options||{}); 
    88          if(!this.graphinfo.cnt) this.graphinfo.cnt = this.graphinfo.width / 2; 
    9           this.attr("id", this.graphinfo.graphid) 
    10               .append($('<h3>').addClass("graphTitle") 
     9          if(!this.attr("id")) this.attr("id", this.graphinfo.graphid); 
     10          this.append($('<h3>').addClass("graphTitle") 
    1111                               .html(this.graphinfo.title)) 
    1212              .append($('<div></div>').addClass("plot-area") 
     
    1616          return this; 
    1717        }, 
     18      reset: 
     19        function() { 
     20          this.graphinfo.graphid = ''; 
     21          if(this.flot_plot) { 
     22            this.find("h3.graphTitle").html(''); 
     23            this.find("div.plot-legend").html(''); 
     24            this.flot_plot.setData({}); 
     25            this.flot_plot.setupGrid(); 
     26            this.flot_plot.draw(); 
     27          } 
     28          return this; 
     29        }, 
    1830      refresh: 
    19         function() { 
     31        function(options) { 
     32          this.graphinfo = $.extend({}, this.graphinfo, options||{}); 
    2033          var url = "flot/graph/settings/" + this.graphinfo.graphid; 
    2134          this.find(".plot-area") 
     
    5063              return val.toFixed(axis.tickDecimals) + r.options.yaxis.suffix; 
    5164            }; 
    52           var plot = $.plot(placeholder, r.data, r.options); 
     65          var plot = this.flot_plot = $.plot(placeholder, r.data, r.options); 
    5366 
    5467          var hovering; 
     
    87100  $.fn.extend({ ReconGraph: ReconGraph.init, 
    88101                ReconGraphRefresh: ReconGraph.refresh, 
    89                 ReconGraphPlot: ReconGraph.plot 
     102                ReconGraphPlot: ReconGraph.plot, 
     103                ReconGraphReset: ReconGraph.reset 
    90104              }); 
    91105})(jQuery);