1 /**
2 * collection4 - collection.js
3 * Copyright (C) 2010 Florian octo Forster
4 *
5 * This program is free software; you can redistribute it and/or
6 * modify it under the terms of the GNU Lesser General Public
7 * License as published by the Free Software Foundation; either
8 * version 2.1 of the License, or (at your option) any later version.
9 *
10 * This program is distributed in the hope that it will be useful,
11 * but WITHOUT ANY WARRANTY; without even the implied warranty of
12 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
13 * Lesser General Public License for more details.
14 *
15 * You should have received a copy of the GNU Lesser General Public
16 * License along with this program; if not, write to the Free Software
17 * Foundation, Inc., 51 Franklin Street, Fifth Floor,
18 * Boston, MA 02110-1301 USA
19 *
20 * Authors:
21 * Florian octo Forster <ff at octo.it>
22 **/
24 var c4 =
25 {
26 instances: []
27 };
29 function instance_get_params (graph) /* {{{ */
30 {
31 var graph_selector = graph.graph_selector;
32 var inst_selector = graph.instance_selector;
33 var selector = {};
35 if (graph_selector.host == inst_selector.host)
36 {
37 selector.host = graph_selector.host;
38 }
39 else
40 {
41 selector.graph_host = graph_selector.host;
42 selector.inst_host = inst_selector.host;
43 }
45 if (graph_selector.plugin == inst_selector.plugin)
46 {
47 selector.plugin = graph_selector.plugin;
48 }
49 else
50 {
51 selector.graph_plugin = graph_selector.plugin;
52 selector.inst_plugin = inst_selector.plugin;
53 }
55 if (graph_selector.plugin_instance == inst_selector.plugin_instance)
56 {
57 selector.plugin_instance = graph_selector.plugin_instance;
58 }
59 else
60 {
61 selector.graph_plugin_instance = graph_selector.plugin_instance;
62 selector.inst_plugin_instance = inst_selector.plugin_instance;
63 }
65 if (graph_selector.type == inst_selector.type)
66 {
67 selector.type = graph_selector.type;
68 }
69 else
70 {
71 selector.graph_type = graph_selector.type;
72 selector.inst_type = inst_selector.type;
73 }
75 if (graph_selector.type_instance == inst_selector.type_instance)
76 {
77 selector.type_instance = graph_selector.type_instance;
78 }
79 else
80 {
81 selector.graph_type_instance = graph_selector.type_instance;
82 selector.inst_type_instance = inst_selector.type_instance;
83 }
85 return (selector);
86 } /* }}} instance_get_params */
88 function ident_clone (ident) /* {{{ */
89 {
90 var ret = {};
92 ret.host = ident.host;
93 ret.plugin = ident.plugin;
94 ret.plugin_instance = ident.plugin_instance;
95 ret.type = ident.type;
96 ret.type_instance = ident.type_instance;
98 return (ret);
99 } /* }}} ident_clone */
101 function graph_get_defs (graph)
102 {
103 if (!graph.def)
104 {
105 var params = ident_clone (graph.graph_selector);
106 params.action = "graph_def_json";
108 $.ajax({
109 url: "collection.fcgi",
110 async: false,
111 dataType: 'json',
112 data: params,
113 success: function (data)
114 {
115 if (!data)
116 return;
118 graph.def = data;
119 }});
120 }
122 if (graph.def)
123 return (graph.def);
124 return;
125 } /* graph_get_defs */
127 function instance_draw (inst, def, data)
128 {
129 var x_data = [];
130 var y_data = [];
131 var i;
133 if (!inst || !def || !data)
134 return;
136 for (i = 0; i < data.length; i++)
137 {
138 var ds = data[i];
140 var j;
141 var x = [];
142 var y = [];
144 for (j = 0; j < ds.data.length; j++)
145 {
146 var dp = ds.data[j];
147 var t = dp[0];
148 var v = dp[1];
150 x.push (t);
151 y.push (v);
152 }
154 x_data.push (x);
155 y_data.push (y);
156 }
158 inst.raphael.clear ();
159 if (def.title)
160 inst.raphael.g.text (250, 15, def.title);
161 if (def.vertical_label)
162 inst.raphael.g.text (5, 100, def.vertical_label).rotate (270);
163 inst.raphael.g.linechart(50, 25, 500, 150, x_data, y_data, {axis: "0 0 1 1"});
164 }
166 function json_graph_update (index)
167 {
168 var inst;
169 var def;
170 var params;
172 inst = c4.instances[index];
173 if (!inst)
174 return;
176 def = graph_get_defs (inst);
177 if (!def)
178 return;
180 if (!inst.raphael)
181 inst.raphael = Raphael ("c4-graph" + index);
183 params = instance_get_params (inst);
184 params.action = "instance_data_json";
185 params.begin = inst.begin;
186 params.end = inst.end;
188 $.getJSON ("collection.fcgi", params,
189 function (data)
190 {
191 instance_draw (inst, def, data);
192 }); /* getJSON */
193 } /* json_graph_update */
195 function format_instance(inst)
196 {
197 return ("<li class=\"instance\"><a href=\"" + location.pathname
198 + "?action=show_instance;" + inst.params + "\">" + inst.description
199 + "</a></li>");
200 }
202 function format_instance_list(instances)
203 {
204 var ret = "<ul class=\"instance_list\">";
205 var i;
207 if (instances.length == 0)
208 return ("");
210 for (i = 0; i < instances.length; i++)
211 ret += format_instance (instances[i]);
213 ret += "</ul>";
215 return (ret);
216 }
218 function format_graph(graph)
219 {
220 return ("<li class=\"graph\">" + graph.title + format_instance_list (graph.instances) + "</li>");
221 }
223 function update_search_suggestions ()
224 {
225 var term = $("#search-input").val ();
226 if (term.length < 2)
227 {
228 $("#search-suggest").hide ();
229 return (true);
230 }
232 $("#search-suggest").show ();
233 $.getJSON ("collection.fcgi",
234 { "action": "search_json", "q": term},
235 function(data)
236 {
237 var i;
238 $("#search-suggest").html ("");
239 for (i = 0; i < data.length; i++)
240 {
241 var graph = data[i];
242 $("#search-suggest").append (format_graph (graph));
243 }
244 }
245 );
246 } /* update_search_suggestions */
248 function zoom_redraw (jq_obj) /* {{{ */
249 {
250 var url = jq_obj.data ("base_url");
252 if ((jq_obj == null) || (url == null))
253 return (false);
255 if (jq_obj.data ('begin') != null)
256 url += ";begin=" + jq_obj.data ('begin');
257 if (jq_obj.data ('end') != null)
258 url += ";end=" + jq_obj.data ('end');
260 jq_obj.attr ("src", url);
261 return (true);
262 } /* }}} function zoom_redraw */
264 function zoom_reset (graph_id, diff) /* {{{ */
265 {
266 var jq_obj;
267 var end;
268 var begin;
270 jq_obj = $("#" + graph_id);
271 if (jq_obj == null)
272 return (false);
274 end = new Number ((new Date ()).getTime () / 1000);
275 begin = new Number (end - diff);
277 jq_obj.data ('begin', begin.toFixed (0));
278 jq_obj.data ('end', end.toFixed (0));
280 return (zoom_redraw (jq_obj));
281 } /* }}} function zoom_reset */
283 function zoom_hour (graph_id) /* {{{ */
284 {
285 zoom_reset (graph_id, 3600);
286 } /* }}} function zoom_hour */
288 function zoom_day (graph_id) /* {{{ */
289 {
290 zoom_reset (graph_id, 86400);
291 } /* }}} function zoom_day */
293 function zoom_week (graph_id) /* {{{ */
294 {
295 zoom_reset (graph_id, 7 * 86400);
296 } /* }}} function zoom_week */
298 function zoom_month (graph_id) /* {{{ */
299 {
300 zoom_reset (graph_id, 31 * 86400);
301 } /* }}} function zoom_month */
303 function zoom_year (graph_id) /* {{{ */
304 {
305 zoom_reset (graph_id, 366 * 86400);
306 } /* }}} function zoom_year */
308 function zoom_relative (graph_id, factor_begin, factor_end) /* {{{ */
309 {
310 var jq_obj;
311 var end;
312 var begin;
313 var diff;
315 jq_obj = $("#" + graph_id);
316 if (jq_obj == null)
317 return (false);
319 begin = jq_obj.data ('begin');
320 end = jq_obj.data ('end');
321 if ((begin == null) || (end == null))
322 return (zoom_day (graph_id));
324 begin = new Number (begin);
325 end = new Number (end);
327 diff = end - begin;
328 if ((diff <= 300) && (factor_begin > 0.0) && (factor_end < 0.0))
329 return (true);
331 jq_obj.data ('begin', begin + (diff * factor_begin));
332 jq_obj.data ('end', end + (diff * factor_end));
334 return (zoom_redraw (jq_obj));
335 } /* }}} function zoom_relative */
337 function zoom_reference (graph_id) /* {{{ */
338 {
339 var jq_obj;
340 var end;
341 var begin;
343 jq_obj = $("#" + graph_id);
344 if (jq_obj == null)
345 return (false);
347 begin = jq_obj.data ('begin');
348 end = jq_obj.data ('end');
349 if ((begin == null) || (end == null))
350 return (false);
352 $(".graph-img img").each (function ()
353 {
354 $(this).data ('begin', begin);
355 $(this).data ('end', end);
356 zoom_redraw ($(this));
357 });
358 } /* }}} function zoom_reference */
360 function zoom_earlier (graph_id) /* {{{ */
361 {
362 return (zoom_relative (graph_id, -0.2, -0.2));
363 } /* }}} function zoom_earlier */
365 function zoom_later (graph_id) /* {{{ */
366 {
367 return (zoom_relative (graph_id, +0.2, +0.2));
368 } /* }}} function zoom_later */
370 function zoom_in (graph_id) /* {{{ */
371 {
372 return (zoom_relative (graph_id, +0.2, -0.2));
373 } /* }}} function zoom_earlier */
375 function zoom_out (graph_id) /* {{{ */
376 {
377 return (zoom_relative (graph_id, (-1.0 / 3.0), (1.0 / 3.0)));
378 } /* }}} function zoom_earlier */
380 $(document).ready(function() {
381 /* $("#layout-middle-right").html ("<ul id=\"search-suggest\" class=\"graph_list\"></ul>"); */
382 $("#search-form").append ("<ul id=\"search-suggest\" class=\"graph_list\"></ul>");
383 $("#search-suggest").hide ();
385 $("#search-input").blur (function()
386 {
387 window.setTimeout (function ()
388 {
389 $("#search-suggest").hide ();
390 }, 500);
391 });
393 $("#search-input").focus (function()
394 {
395 var term = $("#search-input").val ();
396 if (term.length < 2)
397 {
398 $("#search-suggest").hide ();
399 }
400 else
401 {
402 $("#search-suggest").show ();
403 }
404 });
406 $("#search-input").keyup (function()
407 {
408 update_search_suggestions ();
409 });
411 var graph_count = 0;
412 $(".graph-img").each (function (index, elem)
413 {
414 var id = "graph" + graph_count;
415 graph_count++;
417 $(this).find ("img").each (function (img_index, img_elem)
418 {
419 var base_url;
421 $(this).attr ("id", id);
423 base_url = $(this).attr ("src").replace (/;(begin|end)=[^;]*/g, '');
424 $(this).data ("base_url", base_url);
425 });
427 $(this).append ("<div class=\"graph-buttons presets\">"
428 + "<div class=\"graph-button\" onClick=\"zoom_hour ('"+id+"');\">H</div>"
429 + "<div class=\"graph-button\" onClick=\"zoom_day ('"+id+"');\">D</div>"
430 + "<div class=\"graph-button\" onClick=\"zoom_week ('"+id+"');\">W</div>"
431 + "<div class=\"graph-button\" onClick=\"zoom_month ('"+id+"');\">M</div>"
432 + "<div class=\"graph-button\" onClick=\"zoom_year ('"+id+"');\">Y</div>"
433 + "<div class=\"graph-button\" onClick=\"zoom_reference ('"+id+"');\">!</div>"
434 + "</div>"
435 + "<div class=\"graph-buttons navigation\">"
436 + "<div class=\"graph-button\" onClick=\"zoom_earlier ('"+id+"');\">←</div>"
437 + "<div class=\"graph-button\" onClick=\"zoom_out ('"+id+"');\">−</div>"
438 + "<div class=\"graph-button\" onClick=\"zoom_in ('"+id+"');\">+</div>"
439 + "<div class=\"graph-button\" onClick=\"zoom_later ('"+id+"');\">→</div>"
440 + "</div>"
441 );
442 });
444 var i;
445 for (i = 0; i < c4.instances.length; i++)
446 {
447 json_graph_update (i);
448 }
449 });
451 /* vim: set sw=2 sts=2 et fdm=marker : */