root/ui/web/htdocs/graph_panel.inc

Revision 8ea07be0a527c4fb8256ad375157caee1f2d1bdc, 16.9 kB (checked in by Umar Farooq <umar@omniti.com>, 5 years ago)

live stream window scrolling goodness, text metrics only pop on changes, window and poll params still hardcoded

  • Property mode set to 100644
Line 
1 <script type="text/javascript" src="js/eye/datepicker.js"></script>
2 <script type="text/javascript" src="js/eye/colorpicker.js"></script>
3 <script type="text/javascript" src="js/eye/eye.js"></script>
4 <script type="text/javascript" src="js/eye/utils.js"></script>
5 <script type="text/javascript" src="js/jquery.timers.js"></script>
6 <script type="text/javascript">
7 <!--
8 var maingraph;
9 var current_graph_id = '';
10 var debug_graph_edit = false;
11 var graphinfo= {};
12 var displayinfo = { start : 14*86400, cnt: '', end: '' };
13 var color_pool = Array('#33aa33','#4a00dc','#caac00','#3377cc','#00acfa','#cc3333')
14 var color_sel = 0;
15 var locked = true;
16 var gstreaming = false;
17                
18 function lock_forms() {
19         $("input[@name='math1']").attr("disabled", "true");
20         $("input[@name='math2']").attr("disabled", "true");
21         $("input[@name='view']").attr("disabled", "true");
22         $("input[@class='graphType']").attr("disabled", "true");
23         $("select[@name='derive']").attr("disabled", "true");
24
25         $("h2#graphTitle").unbind();
26         $(".datatitle").unbind();
27 }
28
29 function unlock_forms() {
30
31         $("input[@name='math1']").removeAttr("disabled");
32         $("input[@name='math2']").removeAttr("disabled");
33         $("input[@name='view']").removeAttr("disabled");
34         $("input[@class='graphType']").removeAttr("disabled");
35         $("select[@name='derive']").removeAttr("disabled");
36
37         $("h2#graphTitle").editable(function(value, settings) {
38            graphinfo.title = value;
39            update_current_graph(false);
40            return(value);
41            }, { });
42
43         $(".datatitle").editable(function(value, settings) {     
44            d.name = value;
45            update_current_graph(true);
46            return(value);
47         }, { });
48 }
49
50
51 function graph_stream_data() {
52
53 polltime = 5000;
54 time_width = 50000;
55 stream_object = maingraph;
56 stream_dirty = false;
57 maingraph.ReconGraphPrepareStream(time_width, polltime);
58
59
60 sids = "";
61 var sidneed = new Object();
62 for(var i=0; i<graphinfo.datapoints.length; i++) {
63     if(graphinfo.datapoints[i].sid) {
64       sidneed[graphinfo.datapoints[i].sid] = polltime;
65     }
66 }
67 for(var sid in sidneed) {
68     sids+= "/"+sid+"@"+sidneed[sid];
69 }
70
71 maingraph.everyTime(1000, function() {
72     if(!gstreaming) {   
73        $('#gstreambox').html('');
74        maingraph.stopTime();
75     }
76     else {
77     if(stream_dirty){
78         maingraph.ReconGraphPlotPoints();     
79         stream_dirty=false;
80    }
81 }
82 });
83
84 //console.log("sids requestd from noit server = ", sids);
85
86 $('#gstreambox').html('<iframe src="http://bob.office.omniti.com/data'+sids+'"></iframe>');
87
88 }
89 function set_current_graph_id(id) {
90   $(".rememberGraph").fadeOut('fast');
91   if(id!='')  {
92     graphinfo.saved = true;
93     locked = true;
94     gstreaming = false;
95     lock_forms();
96     $(".editGraph").html('Edit Graph').fadeIn('slow');   
97     $(".streamData").html('Stream Data').fadeIn('slow');
98   }
99   else {       
100     locked = false;
101     unlock_forms();   
102     $(".editGraph").html('Editing!').fadeIn('slow');
103   }
104   current_graph_id = id;
105   fetch_graph_info(current_graph_id);
106 }
107 var recurse = 0;
108 function update_current_graph(redraw, f) {
109   if(recurse > 0) return;
110   gstreaming = false;
111   $(".streamData").html('Stream Data').fadeIn('slow');
112
113   var str = JSON.stringify(graphinfo);
114   if(debug_graph_edit) $("#payload").html(str);
115   $.post("json/graph/store",
116          {'json':str},
117          function(d) {
118            recurse++;
119            graphinfo.id = d.id;
120            if(d.error) $("#gtool-error").html(d.error).fadeIn('fast');
121            else $("#gtool-error").fadeOut('fast');     
122            if(graphinfo.id && graphinfo.saved != true &&
123               $(".rememberGraph:visible").length == 0) {
124               graphinfo.saved=false;
125              $(".rememberGraph").html('"Remember" this graph.').fadeIn('slow');
126              $(".rememberGraph").click(function() {
127                graphinfo.saved = true;
128                update_current_graph(false, function(r) {
129                  if(r.error) graphinfo.saved = false;
130                  else $(".rememberGraph").html('Remebered').fadeOut('slow');
131                });
132              });
133            }
134            if(redraw && maingraph) maingraph.ReconGraphRefresh({graphid: graphinfo.id, type: graphinfo.type});
135            if(f) f(d);
136            recurse--;
137          }, 'json');
138 }
139 function graph_add_datapoint(d) {
140   if(!locked){           
141     if(d.axis == undefined) { d.axis = 'l'; }
142     if(d.name == undefined) { d.name = d.target + '`' + d.metric_name; }
143     graphinfo.datapoints.push(d);
144     gtool_add_datapoint(d);
145     update_current_graph(true);
146   }
147 }
148 function gtool_add_guide() {
149   var d = {};
150   d.metric_type = 'guide';
151   graphinfo.datapoints.push(d);
152   gtool_add_datapoint(d);
153   update_current_graph(true);
154 }
155
156 function gtool_add_datapoint(d) {
157   var o;
158   if(d.metric_type == 'guide') {
159     o = $("#guideeditor").clone();
160   }
161   else {
162     o = $("#datapointeditor").clone();
163   }
164   recurse++;
165  
166   if(d.color == null) {
167     d.color = color_pool[color_sel];
168     color_sel = (color_sel + 1) % color_pool.length;
169   }
170   o.find('.colorPickerHolder').ColorPicker({
171     flat: true,
172     color: '#ffffff',
173     onSubmit: (function(dpo,dp) {
174       var cs = dpo.find('.colorSelector');
175       return function(hsb, hex, rgb) {
176         dp.color = '#' + hex;
177         cs.css('border', '1px solid ' + dp.color);
178         cs.find('div').css('backgroundColor', dp.color)
179                       .css('opacity', 0.2);
180         cs.parent().find('.colorPickerHolder').stop().animate({height:0},500);
181         update_current_graph(true);
182       }
183     })(o,d)
184   });
185   o.find('.colorPickerHolder > div').css('position', 'absolute');
186   o.find('.colorSelector').css('border', '1px solid ' + d.color);
187   o.find('.colorSelector div').css('backgroundColor', d.color)
188                               .css('opacity',
189                                    (d.opacity == null) ? 0.2 : d.opacity);
190   o.find('.colorSelector').bind('click', function() {
191     if(!locked){
192         var activecp = $(this).parent().find('.colorPickerHolder');
193         var h = activecp.height();
194         $("#gtool #dataPoints .colorPickerHolder").filter(function(index) {
195              return ($(this) != activecp);
196         }).stop().animate({height:0}, 0);;
197         $(this).parent().find('.colorPickerHolder').stop().animate({height: h != 0 ? 0 : 173}, 500);
198     }
199   });
200
201   o.find(d.axis == "l" ? ".axisl" : ".axisr").addClass("axison");
202   o.find("span.axis").click(function(){
203     if(!locked) {
204        $(this).siblings().removeClass("axison");
205        $(this).addClass("axison");
206        d.axis = $(this).hasClass("axisl") ? "l" : "r";
207        update_current_graph(true);
208     }
209   });
210   if(!d.hidden){o.find('input[@name="view"]').attr("checked","checked");}
211   o.find('input[@name="view"]').change(function(){
212     d.hidden = !($(this).attr("checked"));
213     update_current_graph(true);
214   }).change();
215
216   o.find('.deletedatapoint').click(function(){
217     if(!locked){
218        for(var i=0; i<graphinfo.datapoints.length; i++) {
219          if(graphinfo.datapoints[i] == d) {
220            graphinfo.datapoints.splice(i,1);
221            break;
222          }
223        }
224        update_current_graph(true);
225        refresh_graph_from_json(graphinfo);
226        }
227     return false;
228   });
229
230   if(d.metric_type == 'text') {
231     o.find('tr.mathbox').remove();
232     o.find('select[@name="derive"]').val('false');
233   }
234   else {
235     if(d.derive){
236       o.find('select[@name="derive"]').val(d.derive);
237     }
238     o.find('select[@name="derive"]').change(function(){
239       d.derive = $(this).find(":selected").val();
240       update_current_graph(true);
241     }).change();
242
243     o.find('input[@name="math1"]').val(d.math1);
244     o.find('input[@name="math1"]').change(function(){
245       d.math1 = $(this).val();
246       update_current_graph(true);
247     });
248     o.find('input[@name="math2"]').val(d.math2);
249     o.find('input[@name="math2"]').change(function(){
250       d.math2 = $(this).val();
251       update_current_graph(true);
252     });
253   }
254
255   o.find(".datatitle").html(d.name);
256  
257
258   recurse--;
259   $("#gtool #dataPoints").append(o.children());
260 }
261 function refresh_graph_from_json(j) {
262   graphinfo = j;
263   if(graphinfo.datapoints == undefined) graphinfo.datapoints = Array();
264   $("h2#graphTitle").html(graphinfo.title ? graphinfo.title : 'Graph Title (click to edit)');
265
266   $("input[@name='graphtype']:checked").removeAttr("checked");
267   $("input[@name='graphtype']")
268     .filter(function(i){return $(this).val() == graphinfo.type;})
269     .attr("checked","checked");
270   $("#dataPoints").empty();
271   for(var i=0; i<graphinfo.datapoints.length; i++) {
272     gtool_add_datapoint(graphinfo.datapoints[i]);
273   }
274   if(maingraph) {
275     if(graphinfo.id)
276       maingraph.ReconGraphRefresh({graphid: graphinfo.id, type: graphinfo.type});
277     else
278       maingraph.ReconGraphReset();
279   }
280 }
281 function fetch_graph_info(id) {
282   graphinfo.id = id;
283   if(id) $.getJSON("json/graph/info/" + id, refresh_graph_from_json);
284   else refresh_graph_from_json({});
285   $("span.blankGraph").click(function() {
286     if(graphinfo.saved) set_current_graph_id('');
287     else if(graphinfo.saved!=undefined && graphinfo.saved==false) {
288          confirm("I will forget the current graph.  Are you sure?", function() {
289              $.getJSON('json/graph/forget/' + graphinfo.id,
290                function (r) {
291                  if(r.error) alert(r.error);
292                  else set_current_graph_id('');
293                });
294
295          });
296     }
297     return false;
298   });
299 }
300 -->
301 </script>
302 <!--<p><a href="">username</a> / <a href="#">worksheet</a></p>-->
303 <p/>
304 <span class="rememberGraph"></span>
305 <span class="blankGraph">New Blank</span>
306 <span class="editGraph">Edit Graph</span>
307 <span class="streamData ">Stream Data</span>
308 <h2 id="graphTitle"></h2>
309 <!-- date range box -->
310 <script type="text/javascript">
311 $(document).ready(function(){
312
313         lock_forms();
314
315         var time_windows = { '2d' : 86400*2,
316                               '1w' : 86400*7,
317                               '2w' : 86400*14,
318                               '4w' : 86400*28,
319                               '1y' : 86400*365,
320                             };
321         var state = false;
322
323         $(".editGraph").click(function() {             
324                 if(locked){
325                     locked = false;                 
326                     unlock_forms();
327                     $(".editGraph").html('Editing!').fadeIn('slow');
328                 }
329                 else if(!locked){
330                     locked = true;     
331                     lock_forms();
332                     $(".editGraph").html('Edit Graph').fadeIn('slow');
333                     if(gstreaming) {
334                       gstreaming = false;
335                       $('#gstreambox').html('');
336                       $(this).html('Stream Data').fadeIn('slow');
337                       update_current_graph(true);
338                       }
339                 }
340         });
341
342
343         $(".streamData").click(function() {
344
345                if(!locked && graphinfo.id) {           
346                     if(!gstreaming) {
347                         gstreaming = true;
348                         $(this).html('Streaming!').fadeIn('slow');
349                         graph_stream_data();
350                     }
351                     else if(gstreaming) {
352                         gstreaming = false;
353                         $('#gstreambox').html('');
354                         $(this).html('Stream Data').fadeIn('slow');
355                         update_current_graph(true);
356                     }
357                 }
358         });
359         $("#graph_datetool .btn-slide").click(function(){
360                 $("#graph_widgetCalendar").stop().animate({
361                      height: state ? 0 :
362                        $('#graph_widgetCalendar div.datepicker').get(0).offsetHeight
363                   }, 500);
364                 state = !state;
365                 $(this).toggleClass("active");
366                 return false;
367         });
368         $("#graph_datetool .datechoice").click(function(){
369                 $("#graph_datetool .range a.btn-slide").html("YYYY/MM/DD - YYYY/MM/DD");
370                 $("#graph_widgetCalendar").slideUp("slow");
371                 $("#graph_datetool .datechoice").removeClass("selected");
372                 displayinfo.start = time_windows[$(this).html()];
373                 displayinfo.end = '';
374                 $(this).addClass("selected");
375                 maingraph.ReconGraphRefresh({graphid: graphinfo.id, start: time_windows[$(this).html()], end: '', type: graphinfo.type});
376                 return false;
377         });
378         $('#graph_widgetCalendar').DatePicker({
379                 flat: true,
380                 format: 'Y/m/d',
381                 date: [new Date(), new Date()],
382                 calendars: 3,
383                 mode: 'range',
384                 starts: 1,
385                 onChange: function(formated) {
386                         var dates;
387                         dates = formated[0].split('/');
388                         var start = new Date(dates[0], dates[1]-1, dates[2], 0, 0, 0);
389                         dates = formated[1].split('/');
390                         var end = new Date((new Date(dates[0], dates[1]-1, dates[2], 0, 0, 0)).getTime() + 86400000);
391                         displayinfo.start = start.toUTCString();
392                         displayinfo.end = end.toUTCString();
393                         maingraph.ReconGraphRefresh({graphid: graphinfo.id, start: displayinfo.start, end: displayinfo.end, type: graphinfo.type});
394                         $('#graph_datetool .range a.btn-slide').get(0).innerHTML = formated.join(' - ');
395                 }
396         });
397         $(".graphType").change(function(){
398                 graphinfo.type = $(this).val();
399                 update_current_graph(true);
400         });
401         $("#gtool-error").click(function(){
402           $("#gtool-error").fadeOut("slow");
403         });
404         $("span.addGuide").click(function() {
405           if(!locked){
406             gtool_add_guide();
407           }
408         });
409         set_current_graph_id('');
410         maingraph = $('<div></div>').attr("id", "maingraph").ReconGraph({graphid: graphinfo.id, width: 780, height: 400});
411         $("#maingraphHolder").append(maingraph);
412 });
413 </script>
414
415 <div id="graph_datetool">
416         <div class="zoom">
417                 <dl>
418                         <dt>Zoom:</dt>
419                         <dd><a href="#" class="first datechoice">2d</a></dd>
420                         <dd><a href="#" class="datechoice">1w</a></dd>
421                         <dd><a href="#" class="selected datechoice">2w</a></dd>
422                         <dd><a href="#" class="datechoice">4w</a></dd>
423                         <dd><a href="#" class="datechoice">1y</a></dd>
424                 </dl>
425         </div>
426         <div class="range">
427                 <dl>
428                         <dt>Date Range:</dt>
429                         <dd><a href="" class="btn-slide">YYYY/MM/DD - YYYY/MM/DD</a></dd>
430                 </dl>
431         </div>
432 <br/>
433         <div id="graph_widgetCalendar" class="widgetCalendar"></div>
434 </div>
435                        
436 <!-- confirm box -->
437 <div id="confirm" style="display:none">
438         <a href="#" title="Close" class="modalCloseX modalClose">x</a>
439         <div class="header"><span>Confirm</span></div>
440         <p class="message"></p>
441         <div class="buttons">
442                 <div class="no modalClose">No</div><div class="yes">Yes</div>
443         </div>
444 </div>
445 <div id="gstreambox" style="display:none"></div>
446
447 <div>
448         <div id="maingraphHolder">
449         </div>
450         <form action="#" name="form4" id="form4" style="margin:1em 0;text-align:center;">
451         <fieldset>
452         <legend style="display:none;">View</legend>
453         <label for="std_view"><input class="graphType" type="radio" name="graphtype" id="std_view" value="standard"/> Standard View</label> &nbsp;&nbsp;&nbsp;
454         <label for="stacked_view"><input class="graphType" type="radio" name="graphtype" id="stacked_view" value="stacked" /> Stack Left Axis</label>
455         </fieldset>
456         </form>
457        
458 </div>
459 <div style="float:right"><span class="addGuide">Add Guide</span></div>
460 <br style="clear:right" />
461 <div class="error"><p class="error" id="gtool-error"></p></div>
462 <table id="gtool">
463         <tr>
464                 <th></th>
465                
466                 <th class="data">Data Points</th>
467                 <th>Color</th>
468                 <th>Derivative</th>
469                 <th>Axis</th>
470                 <th></th>
471                 <th></th>
472         </tr>
473         <tbody id="dataPoints">
474         </tbody>
475 </table>
476
477 <div style="display:none">
478 <form id="hiddeneditor">
479         <table>
480         <tbody id="guideeditor">
481         <tr>
482                 <td><input name="view" type="checkbox" value="1" /></td>
483                 <td class="data datatitle"></td>
484                 <td><div class="colorPicker"><div class="colorSelector"><div style="background-color: #fff"></div></div><div class="colorPickerHolder"></div></div></td>
485                 <td></td>
486                 <td></td>
487                 <td><a href="#" class="deletedatapoint"><span>delete</span></a></td>
488                 <td class="math">math</td>
489         </tr>
490         <tr class="mathbox">
491                 <td colspan="7">
492                 <div>
493                         <label for="math">Display Math</label> <input name="math1" type="text" value="" style="width:380px;" />
494                 </div>
495                 <div>
496                         <label for="math">Percentile</label> <input name="math2" type="text" value="" style="width:380px;" />
497                 </div>
498                 </td>
499         </tr>
500         </tbody>
501         <tbody id="datapointeditor">
502         <tr>
503                 <td><input name="view" type="checkbox" value="1"/></td>
504                 <td class="data datatitle"></td>
505                 <td><div class="colorPicker"><div class="colorSelector"><div style="background-color: #fff"></div></div><div class="colorPickerHolder"></div></div></td>
506                 <td><select name="derive"><option value="false">no</option><option value="derive">derive</option><option value="counter">counter</option></select></td>
507                 <td><span class="axis axisl"> L</span> <span class="axis axisr"> R</span></td>
508                 <td><a href="#" class="deletedatapoint"><span>delete</span></a></td>
509                 <td class="math">math</td>
510         </tr>
511         <tr class="mathbox">
512                 <td colspan="7">
513                 <div>
514                         <label for="math">Display Math</label> <input name="math1" type="text" value="" style="width:380px;" />
515                 </div>
516                 <div>   
517                         <label for="math">Source Math</label> <input name="math2" type="text" value="" style="width:380px;" />
518                 </div>
519                 </td>
520         </tr>
521         </tbody>
522         </table>
523 </form>
524 </div>
525
526 <div id="payload">
527 </div>
Note: See TracBrowser for help on using the browser.