1 |
<script type="text/javascript"> |
---|
2 |
<!-- |
---|
3 |
var maingraph; |
---|
4 |
var current_graph_id = ''; |
---|
5 |
var debug_graph_edit = false; |
---|
6 |
var graphinfo= {}; |
---|
7 |
var displayinfo = { start : 14*86400, cnt: '', end: '' }; |
---|
8 |
var color_pool = Array('#33aa33','#4a00dc','#caac00','#3377cc','#00acfa','#cc3333') |
---|
9 |
var color_sel = 0; |
---|
10 |
var locked = true; |
---|
11 |
|
---|
12 |
function graph_locked(warning) { |
---|
13 |
if(locked) { |
---|
14 |
modal_warning("Graph Locked!", warning); |
---|
15 |
return locked; |
---|
16 |
} |
---|
17 |
return locked; |
---|
18 |
} |
---|
19 |
|
---|
20 |
function lock_forms() { |
---|
21 |
$("input[name='lines']").attr("disabled", "true"); |
---|
22 |
$("input[name='math1']").attr("disabled", "true"); |
---|
23 |
$("input[name='math2']").attr("disabled", "true"); |
---|
24 |
$("input[name='view']").attr("disabled", "true"); |
---|
25 |
$("input[class='graphType']").attr("disabled", "true"); |
---|
26 |
$("select[name='derive']").attr("disabled", "true"); |
---|
27 |
$("select[class='av_stacks']").attr("disabled", "true"); |
---|
28 |
|
---|
29 |
$("h2#graphTitle").unbind(); |
---|
30 |
$(".datatitle").unbind(); |
---|
31 |
$(".combinable").each( function() { $(this).draggable('destroy'); }); |
---|
32 |
$(".composite_function").each( function() { $(this).droppable('destroy'); }); |
---|
33 |
} |
---|
34 |
|
---|
35 |
function unlock_forms() { |
---|
36 |
|
---|
37 |
$("input[name='lines']").removeAttr("disabled"); |
---|
38 |
$("input[name='math1']").removeAttr("disabled"); |
---|
39 |
$("input[name='math2']").removeAttr("disabled"); |
---|
40 |
$("input[name='view']").removeAttr("disabled"); |
---|
41 |
//leave the graph type disabled, since we dont use it anywhere rightnow |
---|
42 |
//$("input[class='graphType']").removeAttr("disabled"); |
---|
43 |
$("select[name='derive']").removeAttr("disabled"); |
---|
44 |
$("select[class='av_stacks']").removeAttr("disabled"); |
---|
45 |
|
---|
46 |
$("h2#graphTitle").editable(function(value, settings) { |
---|
47 |
graphinfo.title = value; |
---|
48 |
update_current_graph(false); |
---|
49 |
return(value); |
---|
50 |
}, { }); |
---|
51 |
|
---|
52 |
$(".datatitle").editable(function(value, settings) { |
---|
53 |
graphinfo.datapoints[$(".datatitle").index(this)].name = value; |
---|
54 |
update_current_graph(true); |
---|
55 |
return(value); |
---|
56 |
}, { }); |
---|
57 |
|
---|
58 |
make_composite_draggables(); |
---|
59 |
} |
---|
60 |
|
---|
61 |
function make_composite_draggables() { |
---|
62 |
|
---|
63 |
$(".combinable").each ( function() { |
---|
64 |
$(this).draggable({ cursor: 'move' }); |
---|
65 |
}); |
---|
66 |
|
---|
67 |
$(".composite_function").each( function () { $(this).droppable({ |
---|
68 |
drop: function(event, ui) { |
---|
69 |
var data_index = $(".datatitle").index(ui.draggable); |
---|
70 |
fbox = $(this).find("input[name='math2']"); |
---|
71 |
fbox.val(fbox.val()+"["+data_index+"]"); |
---|
72 |
var my_index = $("input[name='math2']").index(fbox); |
---|
73 |
graphinfo.datapoints[my_index].math2 = fbox.val(); |
---|
74 |
update_current_graph(true); |
---|
75 |
} |
---|
76 |
}); |
---|
77 |
}); |
---|
78 |
|
---|
79 |
} |
---|
80 |
function update_graph_permalink(id, start, end, gran){ |
---|
81 |
$("#gpermalink a").attr("href", "drawing_board.php?otype=graph&id="+id+"&start="+start+"&end="+end+"&gran="+gran); |
---|
82 |
} |
---|
83 |
|
---|
84 |
function stop_streaming_graph (){ |
---|
85 |
streaming = false; |
---|
86 |
$('#streambox').html(''); |
---|
87 |
$(".stream-log").hide(); |
---|
88 |
$("#graph_datetool").show(); |
---|
89 |
$("#play_pause_graph").html('PLAY'); |
---|
90 |
$("#stopstream_graph").hide(); |
---|
91 |
$("#osliderg").hide(); |
---|
92 |
$(".stream_controls").width(""); |
---|
93 |
} |
---|
94 |
//overlay mode: stackadd=false: we just add new stacks for any the incoming graph has |
---|
95 |
//stack mode: stackadd=trule, push new stacks onto matching stack indexes, else append |
---|
96 |
function aggregate_graph(id, stackadd) { |
---|
97 |
if(!graph_locked("Click 'Edit Graph' to unlock.")){ |
---|
98 |
if(id) $.getJSON("json/graph/info/" + id, function(g) { |
---|
99 |
|
---|
100 |
var max_old = (graphinfo.datapoints.length) ? graphinfo.datapoints.length : 0; |
---|
101 |
|
---|
102 |
for(var i=0; i<g.datapoints.length; i++) { |
---|
103 |
graphinfo.datapoints.push(g.datapoints[i]); |
---|
104 |
} |
---|
105 |
|
---|
106 |
if(g.stacks) { |
---|
107 |
//we must use indexes for datapoints that are updated |
---|
108 |
for(var i=0; i<g.stacks.length; i++) { |
---|
109 |
for(var j=0; j<g.stacks[i].length; j++) { |
---|
110 |
g.stacks[i][j] += max_old; |
---|
111 |
} |
---|
112 |
} |
---|
113 |
|
---|
114 |
if(stackadd) { |
---|
115 |
for(var i=0; i<g.stacks.length; i++){ |
---|
116 |
if(graphinfo.stacks[i]) graphinfo.stacks[i] = graphinfo.stacks[i].concat(g.stacks[i]); |
---|
117 |
else graphinfo.stacks.push(g.stacks[i]); |
---|
118 |
} |
---|
119 |
} |
---|
120 |
else { |
---|
121 |
for(var i=0; i<g.stacks.length; i++){ |
---|
122 |
graphinfo.stacks.push(g.stacks[i]); |
---|
123 |
} |
---|
124 |
} |
---|
125 |
} |
---|
126 |
update_current_graph(true); |
---|
127 |
refresh_graph_from_json(graphinfo); |
---|
128 |
}); |
---|
129 |
} |
---|
130 |
} |
---|
131 |
|
---|
132 |
function set_current_graph_id(id) { |
---|
133 |
stop_streaming_graph(); |
---|
134 |
$(".rememberGraph").fadeOut('fast'); |
---|
135 |
if(id!='') { |
---|
136 |
graphinfo.saved = true; |
---|
137 |
locked = true; |
---|
138 |
lock_forms(); |
---|
139 |
$(".editGraph").html('Edit Graph').fadeIn('slow'); |
---|
140 |
} |
---|
141 |
else { |
---|
142 |
locked = false; |
---|
143 |
unlock_forms(); |
---|
144 |
$(".editGraph").html('Editing!').fadeIn('slow'); |
---|
145 |
} |
---|
146 |
current_graph_id = id; |
---|
147 |
update_graph_permalink(current_graph_id, "", "", ""); |
---|
148 |
fetch_graph_info(current_graph_id); |
---|
149 |
} |
---|
150 |
var recurse = 0; |
---|
151 |
function update_current_graph(redraw, f) { |
---|
152 |
if(recurse > 0) return; |
---|
153 |
stop_streaming_graph(); |
---|
154 |
if(graphinfo.id) update_graph_permalink(current_graph_id, "", "", ""); |
---|
155 |
var str = JSON.stringify(graphinfo); |
---|
156 |
if(debug_graph_edit) $("#payload").html(str); |
---|
157 |
$.post("json/graph/store", |
---|
158 |
{'json':str}, |
---|
159 |
function(d) { |
---|
160 |
recurse++; |
---|
161 |
graphinfo.id = current_graph_id = d.id; |
---|
162 |
|
---|
163 |
if(d.error) $("#gtool-error").html(d.error).fadeIn('fast'); |
---|
164 |
else $("#gtool-error").fadeOut('fast'); |
---|
165 |
if(graphinfo.id && graphinfo.saved != true && |
---|
166 |
$(".rememberGraph:visible").length == 0) { |
---|
167 |
graphinfo.saved=false; |
---|
168 |
$(".rememberGraph").html('"Remember" this graph.').fadeIn('slow'); |
---|
169 |
$(".rememberGraph").click(function() { |
---|
170 |
graphinfo.saved = true; |
---|
171 |
if(graphinfo.stacks == undefined) graphinfo.stacks = Array(); |
---|
172 |
update_current_graph(false, function(r) { |
---|
173 |
if(r.error) { |
---|
174 |
graphinfo.saved = false; |
---|
175 |
$("#gtool-error").html(r.error).fadeIn('fast'); |
---|
176 |
} |
---|
177 |
else $(".rememberGraph").html('Remebered').fadeOut('slow'); |
---|
178 |
}); |
---|
179 |
}); |
---|
180 |
} |
---|
181 |
if(redraw && maingraph) maingraph.ReconGraphRefresh({graphid: graphinfo.id, type: graphinfo.type}); |
---|
182 |
if(f) f(d); |
---|
183 |
recurse--; |
---|
184 |
}, 'json'); |
---|
185 |
} |
---|
186 |
|
---|
187 |
function graph_add_datapoint(d) { |
---|
188 |
if(!graph_locked("Click 'Edit Graph' to unlock.")){ |
---|
189 |
for(i=0; i<graphinfo.datapoints.length; i++){ |
---|
190 |
if( (graphinfo.datapoints[i].sid==d.sid) && (graphinfo.datapoints[i].metric_name == d.metric_name) ) { |
---|
191 |
modal_warning("Error", "Graphs cannot have duplicate datasets!"); |
---|
192 |
return; |
---|
193 |
} |
---|
194 |
} |
---|
195 |
if(d.axis == undefined) { d.axis = 'l'; } |
---|
196 |
if(d.name == undefined) { d.name = d.target + '`' + d.metric_name; } |
---|
197 |
graphinfo.datapoints.push(d); |
---|
198 |
gtool_add_datapoint(d); |
---|
199 |
update_current_graph(true); |
---|
200 |
} |
---|
201 |
} |
---|
202 |
function gtool_add_composite() { |
---|
203 |
var d ={}; |
---|
204 |
d.metric_type = 'composite'; |
---|
205 |
graphinfo.datapoints.push(d); |
---|
206 |
gtool_add_datapoint(d); |
---|
207 |
update_current_graph(true); |
---|
208 |
} |
---|
209 |
function gtool_add_guide() { |
---|
210 |
var d = {}; |
---|
211 |
d.metric_type = 'guide'; |
---|
212 |
graphinfo.datapoints.push(d); |
---|
213 |
gtool_add_datapoint(d); |
---|
214 |
update_current_graph(true); |
---|
215 |
} |
---|
216 |
|
---|
217 |
function gtool_add_datapoint(d) { |
---|
218 |
var o; |
---|
219 |
if(d.metric_type == 'guide') { |
---|
220 |
o = $("#guideeditor").clone(); |
---|
221 |
} |
---|
222 |
else if(d.metric_type == 'composite') { |
---|
223 |
o = $("#compositeeditor").clone(); |
---|
224 |
} |
---|
225 |
else if(d.metric_type == 'text') { |
---|
226 |
o = $("#textdatapointeditor").clone(); |
---|
227 |
} |
---|
228 |
else { |
---|
229 |
o = $("#datapointeditor").clone(); |
---|
230 |
} |
---|
231 |
recurse++; |
---|
232 |
|
---|
233 |
if(d.color == null) { |
---|
234 |
d.color = color_pool[color_sel]; |
---|
235 |
color_sel = (color_sel + 1) % color_pool.length; |
---|
236 |
} |
---|
237 |
o.find('.colorPickerHolder').ColorPicker({ |
---|
238 |
flat: true, |
---|
239 |
color: '#ffffff', |
---|
240 |
onSubmit: (function(dpo,dp) { |
---|
241 |
var cs = dpo.find('.colorSelector'); |
---|
242 |
return function(hsb, hex, rgb) { |
---|
243 |
dp.color = '#' + hex; |
---|
244 |
cs.css('border', '1px solid ' + dp.color); |
---|
245 |
cs.find('div').css('backgroundColor', dp.color) |
---|
246 |
.css('opacity', 0.2); |
---|
247 |
cs.parent().find('.colorPickerHolder').stop().animate({height:0},500); |
---|
248 |
update_current_graph(true); |
---|
249 |
} |
---|
250 |
})(o,d) |
---|
251 |
}); |
---|
252 |
o.find('.colorPickerHolder > div').css('position', 'absolute'); |
---|
253 |
o.find('.colorSelector').css('border', '1px solid ' + d.color); |
---|
254 |
o.find('.colorSelector div').css('backgroundColor', d.color) |
---|
255 |
.css('opacity', |
---|
256 |
(d.opacity == null) ? 0.2 : d.opacity); |
---|
257 |
o.find('.colorSelector').bind('click', function() { |
---|
258 |
if(!locked){ |
---|
259 |
var activecp = $(this).parent().find('.colorPickerHolder'); |
---|
260 |
var h = activecp.height(); |
---|
261 |
$("#gtool #dataPoints .colorPickerHolder").filter(function(index) { |
---|
262 |
return ($(this) != activecp); |
---|
263 |
}).stop().animate({height:0}, 0);; |
---|
264 |
$(this).parent().find('.colorPickerHolder').stop().animate({height: h != 0 ? 0 : 173}, 500); |
---|
265 |
} |
---|
266 |
}); |
---|
267 |
|
---|
268 |
o.find(d.axis == "l" ? ".axisl" : ".axisr").addClass("axison"); |
---|
269 |
o.find("span.axis").click(function(){ |
---|
270 |
if(!locked) { |
---|
271 |
$(this).siblings().removeClass("axison"); |
---|
272 |
$(this).addClass("axison"); |
---|
273 |
d.axis = $(this).hasClass("axisl") ? "l" : "r"; |
---|
274 |
update_current_graph(true); |
---|
275 |
} |
---|
276 |
}); |
---|
277 |
|
---|
278 |
if(!d.hidden){o.find('input[name="view"]').attr("checked","checked");} |
---|
279 |
o.find('input[name="view"]').change(function(){ |
---|
280 |
d.hidden = !($(this).attr("checked")); |
---|
281 |
update_current_graph(true); |
---|
282 |
}).change(); |
---|
283 |
|
---|
284 |
o.find('select[id="datastack"]').change(function(){ |
---|
285 |
var si = find_in_stacks($(".av_stacks").index(this)); |
---|
286 |
if(si != -1) graphinfo.stacks[si.i].splice(si.j, 1); |
---|
287 |
|
---|
288 |
if(graphinfo.stacks[ $(this).val() ]) { |
---|
289 |
graphinfo.stacks[ $(this).val()].push($(".av_stacks").index(this)); |
---|
290 |
graphinfo.stacks[ $(this).val()].sort(function(a,b){return a - b}); |
---|
291 |
} |
---|
292 |
update_current_graph(true); |
---|
293 |
|
---|
294 |
$(".graphStacks").empty(); |
---|
295 |
|
---|
296 |
for(var i=0; i<graphinfo.stacks.length; i++) { |
---|
297 |
$(".graphStacks").append('<br>Stack '+i+': '); |
---|
298 |
for(var j=0; j<graphinfo.stacks[i].length; j++){ |
---|
299 |
$(".graphStacks").append(graphinfo.datapoints[graphinfo.stacks[i][j]].name + ","); |
---|
300 |
} |
---|
301 |
} |
---|
302 |
}).change(); |
---|
303 |
|
---|
304 |
|
---|
305 |
o.find('.deletedatapoint').click(function(){ |
---|
306 |
if(!locked){ |
---|
307 |
for(var i=0; i<graphinfo.datapoints.length; i++) { |
---|
308 |
if(graphinfo.datapoints[i] == d) { |
---|
309 |
graphinfo.datapoints.splice(i,1); |
---|
310 |
var si = find_in_stacks(i); |
---|
311 |
if(si != -1) graphinfo.stacks[si.i].splice(si.j, 1); |
---|
312 |
|
---|
313 |
//we must decrement the datapoint indexes in the stack array as well |
---|
314 |
for(var k=0; k<graphinfo.stacks.length; k++) { |
---|
315 |
for(var j=0; j<graphinfo.stacks[k].length; j++) { |
---|
316 |
if(graphinfo.stacks[k][j]>i) graphinfo.stacks[k][j]-=1; |
---|
317 |
} |
---|
318 |
} |
---|
319 |
//TODO do we wanna decrement the indexes referred in composite functions for the user? |
---|
320 |
break; |
---|
321 |
} |
---|
322 |
} |
---|
323 |
update_current_graph(true); |
---|
324 |
refresh_graph_from_json(graphinfo); |
---|
325 |
} |
---|
326 |
return false; |
---|
327 |
}); |
---|
328 |
|
---|
329 |
if(d.metric_type == 'text') { |
---|
330 |
// o.find('tr.mathbox').remove(); |
---|
331 |
o.find('select[name="derive"]').val('false'); |
---|
332 |
o.find('input[name="lines"]').attr('checked', d.math1=='lines'); |
---|
333 |
o.find('input[name="lines"]').change(function(){ |
---|
334 |
d.math1 = $(this).is(':checked') ? 'lines':'' ; |
---|
335 |
update_current_graph(true); |
---|
336 |
}); |
---|
337 |
} |
---|
338 |
else { |
---|
339 |
if(d.derive){ |
---|
340 |
o.find('select[name="derive"]').val(d.derive); |
---|
341 |
} |
---|
342 |
o.find('select[name="derive"]').change(function(){ |
---|
343 |
d.derive = $(this).find(":selected").val(); |
---|
344 |
update_current_graph(true); |
---|
345 |
}).change(); |
---|
346 |
|
---|
347 |
o.find('input[name="math1"]').val(d.math1); |
---|
348 |
o.find('input[name="math1"]').change(function(){ |
---|
349 |
d.math1 = $(this).val(); |
---|
350 |
update_current_graph(true); |
---|
351 |
}); |
---|
352 |
o.find('input[name="math2"]').val(d.math2); |
---|
353 |
o.find('input[name="math2"]').change(function(){ |
---|
354 |
d.math2 = $(this).val(); |
---|
355 |
update_current_graph(true); |
---|
356 |
}); |
---|
357 |
} |
---|
358 |
|
---|
359 |
d.mouse_title = ( (d.target!=undefined) ? d.target+"`": '') + |
---|
360 |
( (d.module!=undefined) ? d.module+"`": '') + |
---|
361 |
( (d.orig_name!=undefined)? d.orig_name+"`": '') + |
---|
362 |
( (d.metric_name!=undefined)? "`"+d.metric_name: ''); |
---|
363 |
|
---|
364 |
o.find(".datatitle").html(d.name); |
---|
365 |
o.find(".datatitle").attr("title", d.mouse_title); |
---|
366 |
|
---|
367 |
if (!locked) { |
---|
368 |
o.find(".datatitle").editable(function(value, settings) { |
---|
369 |
graphinfo.datapoints[$(".datatitle").index(this)].name = value; |
---|
370 |
update_current_graph(true); |
---|
371 |
return(value); |
---|
372 |
}, { }); |
---|
373 |
} |
---|
374 |
|
---|
375 |
recurse--; |
---|
376 |
$("#gtool #dataPoints").append(o.children()); |
---|
377 |
if(!locked){ make_composite_draggables();} |
---|
378 |
} |
---|
379 |
|
---|
380 |
function find_in_stacks(dnum) { |
---|
381 |
for(var i=0; i<graphinfo.stacks.length; i++) { |
---|
382 |
for(var j=0; j<graphinfo.stacks[i].length; j++) { |
---|
383 |
if(graphinfo.stacks[i][j] == dnum) { |
---|
384 |
var r = { i: i, j: j}; return r; |
---|
385 |
} |
---|
386 |
} |
---|
387 |
} |
---|
388 |
return -1; |
---|
389 |
} |
---|
390 |
//this function works on the maingraph dom element, which is used througout in graph editing |
---|
391 |
function refresh_graph_from_json(j) { |
---|
392 |
graphinfo = j; |
---|
393 |
if(graphinfo.stacks == undefined) graphinfo.stacks = Array(); |
---|
394 |
if(graphinfo.datapoints == undefined) graphinfo.datapoints = Array(); |
---|
395 |
$("h2#graphTitle").html(graphinfo.title ? graphinfo.title : 'Graph Title (click to edit)'); |
---|
396 |
|
---|
397 |
$("input[name='graphtype']:checked").removeAttr("checked"); |
---|
398 |
$("input[name='graphtype']") |
---|
399 |
.filter(function(i){return $(this).val() == graphinfo.type;}) |
---|
400 |
.attr("checked","checked"); |
---|
401 |
$("#dataPoints").empty(); |
---|
402 |
|
---|
403 |
for(var i=0; i<graphinfo.datapoints.length; i++) { |
---|
404 |
gtool_add_datapoint(graphinfo.datapoints[i]); |
---|
405 |
} |
---|
406 |
|
---|
407 |
$(".graphStacks").empty(); |
---|
408 |
$('.av_stacks').find('option').remove().end().append('<option value="-1">select </option>') |
---|
409 |
|
---|
410 |
for(var i=0; i<graphinfo.stacks.length; i++) { |
---|
411 |
$(".graphStacks").append('<br>Stack '+i+': '); |
---|
412 |
$('.av_stacks').append('<option value="'+i+'">Stack '+i+'</option>'); |
---|
413 |
|
---|
414 |
for(var j=0; j<graphinfo.stacks[i].length; j++){ |
---|
415 |
$(".graphStacks").append(graphinfo.datapoints[graphinfo.stacks[i][j]].name + ","); |
---|
416 |
} |
---|
417 |
} |
---|
418 |
|
---|
419 |
$('select[id="datastack"]').each( function() { |
---|
420 |
var si = find_in_stacks($(".av_stacks").index(this)); |
---|
421 |
if(si != -1) $(this).val(si.i); |
---|
422 |
}); |
---|
423 |
|
---|
424 |
if(maingraph) { |
---|
425 |
if(graphinfo.id) |
---|
426 |
maingraph.ReconGraphRefresh({graphid: graphinfo.id, type: graphinfo.type, stacks: graphinfo.stacks}); |
---|
427 |
else |
---|
428 |
maingraph.ReconGraphReset(); |
---|
429 |
} |
---|
430 |
} |
---|
431 |
function fetch_graph_info(id) { |
---|
432 |
graphinfo.id = id; |
---|
433 |
if(id) $.getJSON("json/graph/info/" + id, refresh_graph_from_json); |
---|
434 |
else refresh_graph_from_json({}); |
---|
435 |
} |
---|
436 |
--> |
---|
437 |
</script> |
---|
438 |
<!--<p><a href="">username</a> / <a href="#">worksheet</a></p>--> |
---|
439 |
<p/> |
---|
440 |
<span class="rememberGraph"></span> |
---|
441 |
<span class="blankGraph">New Blank</span> |
---|
442 |
<span class="exportcsv" id="exportcsvg"><a>CSV</a></span> |
---|
443 |
<span class="exportcsv" id="exportpngg" onclick="exportCanvasAsPNG('#maingraph')">PNG</span> |
---|
444 |
<span class="stream_controls"> |
---|
445 |
<span id="play_pause_graph">PLAY</span> |
---|
446 |
<span id="stopstream_graph">STOP</span> |
---|
447 |
<div id="osliderg" style="display:none"> |
---|
448 |
<div id="pollsliderg"></div> |
---|
449 |
<div id="polltimeg"></div> |
---|
450 |
</div> |
---|
451 |
</span> |
---|
452 |
<span class="editGraph">Edit Graph</span> |
---|
453 |
<span class="permalink" id="gpermalink"><a href="">Link</a></span> |
---|
454 |
|
---|
455 |
<h2 id="graphTitle"></h2> |
---|
456 |
<!-- date range box --> |
---|
457 |
<script type="text/javascript"> |
---|
458 |
$(document).ready(function(){ |
---|
459 |
|
---|
460 |
lock_forms(); |
---|
461 |
|
---|
462 |
var time_windows = { '2d' : 86400*2, |
---|
463 |
'1w' : 86400*7, |
---|
464 |
'2w' : 86400*14, |
---|
465 |
'4w' : 86400*28, |
---|
466 |
'1y' : 86400*365, |
---|
467 |
}; |
---|
468 |
var state = false; |
---|
469 |
|
---|
470 |
//only allow graph editing if not streaming |
---|
471 |
$(".editGraph").click(function() { |
---|
472 |
if(!streaming){ |
---|
473 |
if(locked){ |
---|
474 |
locked = false; |
---|
475 |
unlock_forms(); |
---|
476 |
$(".editGraph").html('Editing!').fadeIn('slow'); |
---|
477 |
} |
---|
478 |
else if(!locked){ |
---|
479 |
locked = true; |
---|
480 |
lock_forms(); |
---|
481 |
$(".editGraph").html('Edit Graph').fadeIn('slow'); |
---|
482 |
} |
---|
483 |
} |
---|
484 |
}); |
---|
485 |
|
---|
486 |
$(".editStacks").click(function() { |
---|
487 |
if(!graph_locked("Unlock by clicking 'Edit Graph'.") && graphinfo.id) { |
---|
488 |
graphinfo.stacks.push([]); |
---|
489 |
var ns = graphinfo.stacks.length - 1; |
---|
490 |
$(".graphStacks").append('<p>Stack '+ns+'</p>'); |
---|
491 |
$('.av_stacks').append('<option value="'+ns+'">Stack '+ns+'</option>'); |
---|
492 |
update_current_graph(true); |
---|
493 |
} |
---|
494 |
}); |
---|
495 |
//only allow stream toggling if the graph is locked and saved |
---|
496 |
$("#play_pause_graph").click(function() { |
---|
497 |
if(locked && graphinfo.saved) { |
---|
498 |
if($(this).html() == 'PLAY') { |
---|
499 |
$(this).html('PAUSE'); |
---|
500 |
//if we are playing for the frist time |
---|
501 |
if(!streaming) { |
---|
502 |
$('#graph_datetool').hide(); |
---|
503 |
$(".stream-log").show().html("stream log_"); |
---|
504 |
$("#stopstream_graph").show(); |
---|
505 |
$("#osliderg").show(); |
---|
506 |
//theres probably a better way to make sure stuff fits in the stream_controls div |
---|
507 |
$(".stream_controls").width("290px"); |
---|
508 |
} |
---|
509 |
//setup/restart the plotting |
---|
510 |
stream_data(graphinfo.id, maingraph, $('#streambox')); |
---|
511 |
} |
---|
512 |
else if($(this).html() == 'PAUSE') { |
---|
513 |
$(this).html('PLAY'); |
---|
514 |
//this is where we pause for a bit |
---|
515 |
maingraph.stopTime(); |
---|
516 |
} |
---|
517 |
} |
---|
518 |
}); |
---|
519 |
|
---|
520 |
$("#stopstream_graph").click(function() { |
---|
521 |
stop_streaming_graph(); |
---|
522 |
update_current_graph(true); |
---|
523 |
}); |
---|
524 |
|
---|
525 |
$("#polltimeg").html(polltime+" ms"); |
---|
526 |
|
---|
527 |
$("#pollsliderg").slider({orientation: 'horizontal', value: polltime, max: 10000, min: 1000, step: 1000, |
---|
528 |
change: function (event, ui) { |
---|
529 |
polltime = $(this).slider('option', 'value'); |
---|
530 |
$("#polltimeg").html(polltime+" ms"); |
---|
531 |
if(streaming) { |
---|
532 |
streaming = false; |
---|
533 |
$('#streambox').html(''); |
---|
534 |
$("#play_pause_graph").html('PAUSE'); |
---|
535 |
stream_data(graphinfo.id, maingraph, $('#streambox')); |
---|
536 |
} |
---|
537 |
} |
---|
538 |
}); |
---|
539 |
|
---|
540 |
$("#graph_datetool .btn-slide").click(function(){ |
---|
541 |
$("#graph_widgetCalendar").stop().animate({ |
---|
542 |
height: state ? 0 : |
---|
543 |
$('#graph_widgetCalendar div.datepicker').get(0).offsetHeight |
---|
544 |
}, 500); |
---|
545 |
state = !state; |
---|
546 |
$(this).toggleClass("active"); |
---|
547 |
return false; |
---|
548 |
}); |
---|
549 |
$("#graph_datetool .datechoice").click(function(){ |
---|
550 |
$("#graph_datetool .range a.btn-slide").html("YYYY/MM/DD - YYYY/MM/DD"); |
---|
551 |
$("#graph_widgetCalendar").slideUp("slow"); |
---|
552 |
$("#graph_datetool .datechoice").removeClass("selected"); |
---|
553 |
|
---|
554 |
//start here will be in seconds |
---|
555 |
displayinfo.start = time_windows[$(this).html()]; |
---|
556 |
displayinfo.end = ''; |
---|
557 |
$(this).addClass("selected"); |
---|
558 |
var cdate = new Date(); |
---|
559 |
update_graph_permalink(graphinfo.id, parseInt(cdate.getTime() - displayinfo.start*1000), "", ""); |
---|
560 |
maingraph.ReconGraphRefresh({graphid: graphinfo.id, start: time_windows[$(this).html()], end: '', type: graphinfo.type}); |
---|
561 |
return false; |
---|
562 |
}); |
---|
563 |
$('#graph_widgetCalendar').DatePicker({ |
---|
564 |
flat: true, |
---|
565 |
format: 'Y/m/d', |
---|
566 |
date: [new Date(), new Date()], |
---|
567 |
calendars: 3, |
---|
568 |
mode: 'range', |
---|
569 |
starts: 1, |
---|
570 |
onChange: function(formated) { |
---|
571 |
var dates; |
---|
572 |
dates = formated[0].split('/'); |
---|
573 |
var start = new Date(dates[0], dates[1]-1, dates[2], 0, 0, 0); |
---|
574 |
dates = formated[1].split('/'); |
---|
575 |
var end = new Date((new Date(dates[0], dates[1]-1, dates[2], 0, 0, 0)).getTime() + 86400000); |
---|
576 |
displayinfo.start = start.toUTCString(); |
---|
577 |
displayinfo.end = end.toUTCString(); |
---|
578 |
update_graph_permalink(graphinfo.id, parseInt(start.getTime()), parseInt(end.getTime()), ""); |
---|
579 |
maingraph.ReconGraphRefresh({graphid: graphinfo.id, start: displayinfo.start, end: displayinfo.end, type: graphinfo.type}); |
---|
580 |
$('#graph_datetool .range a.btn-slide').get(0).innerHTML = formated.join(' - '); |
---|
581 |
} |
---|
582 |
}); |
---|
583 |
$(".graphType").change(function(){ |
---|
584 |
graphinfo.type = $(this).val(); |
---|
585 |
update_current_graph(true); |
---|
586 |
}); |
---|
587 |
$("#gtool-error").click(function(){ |
---|
588 |
$("#gtool-error").fadeOut("slow"); |
---|
589 |
}); |
---|
590 |
$(".addGuide").click(function() { |
---|
591 |
if(!locked){ |
---|
592 |
gtool_add_guide(); |
---|
593 |
} |
---|
594 |
}); |
---|
595 |
$(".addComposite").click(function() { |
---|
596 |
if(!locked){ |
---|
597 |
gtool_add_composite(); |
---|
598 |
} |
---|
599 |
}) |
---|
600 |
|
---|
601 |
$("span.blankGraph").click(function() { |
---|
602 |
|
---|
603 |
stop_streaming_graph(); |
---|
604 |
|
---|
605 |
// current graph is saved, so just give a new one. |
---|
606 |
if(graphinfo.saved) set_current_graph_id(''); |
---|
607 |
|
---|
608 |
// otherwise make sure the user wants to move on, and if so, give a new graph and orphan the unsaved one. |
---|
609 |
else if(graphinfo.saved!=undefined && graphinfo.saved==false) { |
---|
610 |
confirm("I will forget the current graph. Are you sure?", function() { |
---|
611 |
set_current_graph_id(''); |
---|
612 |
}); |
---|
613 |
} |
---|
614 |
|
---|
615 |
return false; |
---|
616 |
}); |
---|
617 |
|
---|
618 |
set_current_graph_id(''); |
---|
619 |
maingraph = $('<div></div>').attr("id", "maingraph").ReconGraph({graphid: graphinfo.id, width: 780, height: 400}); |
---|
620 |
$("#maingraphHolder").append(maingraph); |
---|
621 |
}); |
---|
622 |
</script> |
---|
623 |
|
---|
624 |
<div id="graph_datetool"> |
---|
625 |
<div class="zoom"> |
---|
626 |
<dl> |
---|
627 |
<dt>Zoom:</dt> |
---|
628 |
<dd><a href="#" class="first datechoice">2d</a></dd> |
---|
629 |
<dd><a href="#" class="datechoice">1w</a></dd> |
---|
630 |
<dd><a href="#" class="selected datechoice">2w</a></dd> |
---|
631 |
<dd><a href="#" class="datechoice">4w</a></dd> |
---|
632 |
<dd><a href="#" class="datechoice">1y</a></dd> |
---|
633 |
</dl> |
---|
634 |
</div> |
---|
635 |
<div class="range"> |
---|
636 |
<dl> |
---|
637 |
<dt>Date Range:</dt> |
---|
638 |
<dd><a href="" class="btn-slide">YYYY/MM/DD - YYYY/MM/DD</a></dd> |
---|
639 |
</dl> |
---|
640 |
</div> |
---|
641 |
<br/> |
---|
642 |
<div id="graph_widgetCalendar" class="widgetCalendar"></div> |
---|
643 |
</div> |
---|
644 |
|
---|
645 |
<!-- confirm box --> |
---|
646 |
<div id="confirm" style="display:none"> |
---|
647 |
<a href="#" title="Close" class="modalCloseX modalClose">x</a> |
---|
648 |
<div class="header"><span>Confirm</span></div> |
---|
649 |
<p class="message"></p> |
---|
650 |
<div class="buttons"> |
---|
651 |
<div class="no modalClose">No</div><div class="yes">Yes</div> |
---|
652 |
</div> |
---|
653 |
</div> |
---|
654 |
|
---|
655 |
<div> |
---|
656 |
<div id="maingraphHolder"> |
---|
657 |
</div> |
---|
658 |
<div class='stream-log' style='display:none'></div> |
---|
659 |
<form action="#" name="form4" id="form4" style="margin:1em 0;text-align:center;"> |
---|
660 |
<fieldset> |
---|
661 |
<legend style="display:none;">View</legend> |
---|
662 |
<label for="std_view"><input class="graphType" type="radio" name="graphtype" id="std_view" value="standard"/> Standard View</label> |
---|
663 |
</fieldset> |
---|
664 |
</form> |
---|
665 |
|
---|
666 |
</div> |
---|
667 |
<span class="graphStacks"></span> |
---|
668 |
<div><span class="editStacks">Add Stack Set</span></div> |
---|
669 |
<div style="float:right"><span class="addGuide">Add Guide</span></div> |
---|
670 |
<div style="float:right"><span class="addComposite">Add Composite</span></div> |
---|
671 |
<br style="clear:right" /> |
---|
672 |
<div class="error"><p class="error" id="gtool-error"></p></div> |
---|
673 |
<table id="gtool"> |
---|
674 |
<tr> |
---|
675 |
<th></th> |
---|
676 |
|
---|
677 |
<th class="data">Data Points</th> |
---|
678 |
<th>Stacking</th> |
---|
679 |
<th>Color</th> |
---|
680 |
<th>Derivative</th> |
---|
681 |
<th>Axis</th> |
---|
682 |
<th></th> |
---|
683 |
<th></th> |
---|
684 |
</tr> |
---|
685 |
<tbody id="dataPoints"> |
---|
686 |
</tbody> |
---|
687 |
</table> |
---|
688 |
|
---|
689 |
<div style="display:none"> |
---|
690 |
<form id="hiddeneditor"> |
---|
691 |
<table> |
---|
692 |
<tbody id="guideeditor"> |
---|
693 |
<tr> |
---|
694 |
<td><input name="view" type="checkbox" value="1" /></td> |
---|
695 |
<td class="data datatitle"></td> |
---|
696 |
<td> </td> |
---|
697 |
<td><div class="colorPicker"><div class="colorSelector"><div style="background-color: #fff"></div></div><div class="colorPickerHolder"></div></div></td> |
---|
698 |
<td> </td> |
---|
699 |
<td> </td> |
---|
700 |
<td><a href="#" class="deletedatapoint"><span>delete</span></a></td> |
---|
701 |
<td class="math">math</td> |
---|
702 |
</tr> |
---|
703 |
<tr class="mathbox"> |
---|
704 |
<td colspan="7"> |
---|
705 |
<div> |
---|
706 |
<label for="math">Display Math</label> <input name="math1" type="text" value="" style="width:380px;" /> |
---|
707 |
</div> |
---|
708 |
<div> |
---|
709 |
<label for="math">Percentile</label> <input name="math2" type="text" value="" style="width:380px;" /> |
---|
710 |
</div> |
---|
711 |
</td> |
---|
712 |
</tr> |
---|
713 |
</tbody> |
---|
714 |
<tbody id="compositeeditor"> |
---|
715 |
<tr> |
---|
716 |
<td><input name="view" type="checkbox" value="1" /></td> |
---|
717 |
<td class="data datatitle"></td> |
---|
718 |
<td> </td> |
---|
719 |
<td><div class="colorPicker"><div class="colorSelector"><div style="background-color: #fff"></div></div><div class="colorPickerHolder"></div></div></td> |
---|
720 |
<td> </td> |
---|
721 |
<td><span class="axis axisl"> L</span> <span class="axis axisr"> R</span></td> |
---|
722 |
<td><a href="#" class="deletedatapoint"><span>delete</span></a></td> |
---|
723 |
<td class="math">math</td> |
---|
724 |
</tr> |
---|
725 |
<tr class="mathbox"> |
---|
726 |
<td colspan="7"> |
---|
727 |
<div> |
---|
728 |
<label for="math">Display Math</label> <input name="math1" type="text" value="" style="width:380px;" /> |
---|
729 |
</div> |
---|
730 |
<div class="composite_function"> |
---|
731 |
<label for="math">Function</label> <input name="math2" type="text" value="" style="width:380px;" /> |
---|
732 |
</div> |
---|
733 |
</td> |
---|
734 |
</tr> |
---|
735 |
</tbody> |
---|
736 |
<tbody id="datapointeditor"> |
---|
737 |
<tr> |
---|
738 |
<td><input name="view" type="checkbox" value="1"/></td> |
---|
739 |
<td class="data datatitle combinable"></td> |
---|
740 |
<td><select id="datastack" class="av_stacks"><option value='na'>select</option></select></td> |
---|
741 |
<td><div class="colorPicker"><div class="colorSelector"><div style="background-color: #fff"></div></div><div class="colorPickerHolder"></div></div></td> |
---|
742 |
<td><select name="derive"><option value="false">no</option><option value="derive">derive</option><option value="counter">counter</option></select></td> |
---|
743 |
<td><span class="axis axisl"> L</span> <span class="axis axisr"> R</span></td> |
---|
744 |
<td><a href="#" class="deletedatapoint"><span>delete</span></a></td> |
---|
745 |
<td class="math">math</td> |
---|
746 |
</tr> |
---|
747 |
<tr class="mathbox"> |
---|
748 |
<td colspan="7"> |
---|
749 |
<div> |
---|
750 |
<label for="math">Display Math</label> <input name="math1" type="text" value="" style="width:380px;" /> |
---|
751 |
</div> |
---|
752 |
<div> |
---|
753 |
<label for="math">Source Math</label> <input name="math2" type="text" value="" style="width:380px;" /> |
---|
754 |
</div> |
---|
755 |
</td> |
---|
756 |
</tr> |
---|
757 |
</tbody> |
---|
758 |
<tbody id="textdatapointeditor"> |
---|
759 |
<tr> |
---|
760 |
<td><input name="view" type="checkbox" value="1"/></td> |
---|
761 |
<td class="data datatitle"></td> |
---|
762 |
<td> </td> |
---|
763 |
<td><div class="colorPicker"><div class="colorSelector"><div style="background-color: #fff"></div></div><div class="colorPickerHolder"></div></div></td> |
---|
764 |
<td> </td> |
---|
765 |
<td><span class="axis axisl"> L</span> <span class="axis axisr"> R</span></td> |
---|
766 |
<td><a href="#" class="deletedatapoint"><span>delete</span></a></td> |
---|
767 |
</tr> |
---|
768 |
<tr class="mathbox"> |
---|
769 |
<td colspan="7"> |
---|
770 |
<div> |
---|
771 |
<label for="math">Draw vertical lines</label> <input type="checkbox" name="lines" /> |
---|
772 |
</div> |
---|
773 |
</td> |
---|
774 |
</tr> |
---|
775 |
</tbody> |
---|
776 |
</table> |
---|
777 |
</form> |
---|
778 |
</div> |
---|
779 |
|
---|
780 |
<div id="payload"> |
---|
781 |
</div> |
---|