root/ui/web/htdocs/graph_panel.inc

Revision cfde64ad8c6abee30449338144a3ee77b4f0ee48, 16.4 kB (checked in by Umar Farooq <umar@omniti.com>, 10 years ago)

fixed bug so that the calendar date picker now works

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