aboutsummaryrefslogtreecommitdiffstatshomepage
diff options
context:
space:
mode:
authorPeter Wu2014-08-02 16:26:17 +0200
committerPeter Wu2014-08-02 16:30:29 +0200
commitc4d31153e76caf0dbccdfe108574afc4b030c926 (patch)
tree7fdb35c051432d055697b54c94833b01ce0d226d
parentjsrrdgraph: Fix error functions. Error prototype. (diff)
downloadapt-panopticon_cgp-c4d31153e76caf0dbccdfe108574afc4b030c926.zip
apt-panopticon_cgp-c4d31153e76caf0dbccdfe108574afc4b030c926.tar.gz
apt-panopticon_cgp-c4d31153e76caf0dbccdfe108574afc4b030c926.tar.bz2
apt-panopticon_cgp-c4d31153e76caf0dbccdfe108574afc4b030c926.tar.xz
Merge (a)sync code, reformat CGP.js
Best viewed with `git diff -w`. Since CGP-sync.js and CGP-async.js are almost equal except for one function call, merge them into a single function. While at it, reformat CGP.js to expose a single namespace (`CGP`) which exports the symbol `drawAll`. Remove `alert()` and add a `console.error()` call instead. This is less intrustive to users (who will notice a broken graph anyway) and be more helpful for developers (who can examine the call trace in the Developer Console. Add `"use strict"` and use the standard four spaces as indent. Process the script through `js-beautify` which re-indented the code and added some spaces between operators. Replace double by single quotes for consistency. Rename `catch(e)` to `catch(ex)` to supress a jshint warning about IE8.
Diffstat
-rw-r--r--inc/html.inc.php17
-rw-r--r--js/CGP-async.js21
-rw-r--r--js/CGP-sync.js21
-rw-r--r--js/CGP.js227
4 files changed, 136 insertions, 150 deletions
diff --git a/inc/html.inc.php b/inc/html.inc.php
index c8cfbaf..117d61d 100644
--- a/inc/html.inc.php
+++ b/inc/html.inc.php
@@ -99,21 +99,18 @@ function html_end() {
99EOT; 99EOT;
100 100
101 if ($CONFIG['graph_type'] == 'canvas') { 101 if ($CONFIG['graph_type'] == 'canvas') {
102 echo <<<EOT
103<script type="text/javascript" src="{$html_weburl}js/CGP.js"></script>
104
105EOT;
106 if ($CONFIG['rrd_fetch_method'] == 'async') { 102 if ($CONFIG['rrd_fetch_method'] == 'async') {
107 echo <<<EOT 103 $js_async = 'true';
108<script type="text/javascript" src="{$html_weburl}js/CGP-async.js"></script>
109
110EOT;
111 } else { 104 } else {
105 $js_async = 'false';
106 }
112 echo <<<EOT 107 echo <<<EOT
113<script type="text/javascript" src="{$html_weburl}js/CGP-sync.js"></script> 108<script src="{$html_weburl}js/CGP.js"></script>
109<script>
110CGP.drawAll($js_async);
111</script>
114 112
115EOT; 113EOT;
116 }
117 } 114 }
118 115
119echo <<<EOT 116echo <<<EOT
diff --git a/js/CGP-async.js b/js/CGP-async.js
deleted file mode 100644
index 4976509..0000000
--- a/js/CGP-async.js
+++ /dev/null
@@ -1,21 +0,0 @@
1function draw(id) {
2 var rrdgraph = prepare_draw(id);
3
4 try {
5 rrdgraph.graph_paint_async();
6 } catch (e) {
7 alert(e+"\n"+e.stack);
8 }
9}
10
11function drawAll()
12{
13 var list=[];
14 var a=document.getElementsByClassName('rrd');
15 for (var i=0,l=a.length;i<l;i++)
16 {
17 draw(a[i].getAttribute('id'))
18 }
19}
20
21window.onload = drawAll()
diff --git a/js/CGP-sync.js b/js/CGP-sync.js
deleted file mode 100644
index 01f6b19..0000000
--- a/js/CGP-sync.js
+++ /dev/null
@@ -1,21 +0,0 @@
1function draw(id) {
2 var rrdgraph = prepare_draw(id);
3
4 try {
5 rrdgraph.graph_paint();
6 } catch (e) {
7 alert(e+"\n"+e.stack);
8 }
9}
10
11function drawAll()
12{
13 var list=[];
14 var a=document.getElementsByClassName('rrd');
15 for (var i=0,l=a.length;i<l;i++)
16 {
17 draw(a[i].getAttribute('id'))
18 }
19}
20
21window.onload = drawAll()
diff --git a/js/CGP.js b/js/CGP.js
index c30cfd2..a4fdd5b 100644
--- a/js/CGP.js
+++ b/js/CGP.js
@@ -1,108 +1,139 @@
1var mouse_move = function (e) { 1var CGP = (function() {
2 if (this.rrdgraph.mousedown) { 2 'use strict';
3 var factor = (this.rrdgraph.end - this.rrdgraph.start) / this.rrdgraph.xsize;
4 var x = e.pageX - this.offsetLeft;
5 var diff = x - this.rrdgraph.mousex;
6 var difffactor = Math.abs(Math.round(diff*factor));
7 if (diff > 0) {
8 this.rrdgraph.end -= difffactor;
9 this.rrdgraph.start -= difffactor;
10 } else {
11 this.rrdgraph.end += difffactor;
12 this.rrdgraph.start += difffactor;
13 }
14 this.rrdgraph.mousex = x;
15 try {
16 this.rrdgraph.graph_paint();
17 } catch (e) {
18 alert(e+"\n"+e.stack);
19 }
20 }
21};
22var mouse_up = function (e) {
23 this.rrdgraph.mousedown = false;
24 this.style.cursor="default";
25};
26var mouse_down = function (e) {
27 var x = e.pageX - this.offsetLeft;
28 this.rrdgraph.mousedown = true;
29 this.rrdgraph.mousex = x;
30 this.style.cursor="move";
31};
32var mouse_scroll = function (e) {
33 e = e ? e : window.event;
34 var wheel = e.detail ? e.detail * -1 : e.wheelDelta / 40;
35 var cstime = this.stime[this.stidx];
36 if (wheel < 0) {
37 this.stidx++;
38 if (this.stidx >= this.stlen) this.stidx = this.stlen-1;
39 } else {
40 this.stidx--;
41 if (this.stidx < 0) this.stidx = 0;
42 }
43 if (cstime !== this.stime[this.stidx]) {
44 var middle = this.rrdgraph.start + Math.abs(Math.round((this.rrdgraph.end - this.rrdgraph.start)/2));
45 this.rrdgraph.start = Math.round(middle - this.stime[this.stidx]/2);
46 this.rrdgraph.end = this.rrdgraph.start + this.stime[this.stidx];
47 3
48 try { 4 var mouse_move = function(e) {
49 this.rrdgraph.graph_paint(); 5 if (this.rrdgraph.mousedown) {
50 } catch (e) { 6 var factor = (this.rrdgraph.end - this.rrdgraph.start) / this.rrdgraph.xsize;
51 alert(e+"\n"+e.stack); 7 var x = e.pageX - this.offsetLeft;
52 } 8 var diff = x - this.rrdgraph.mousex;
53 } 9 var difffactor = Math.abs(Math.round(diff * factor));
10 if (diff > 0) {
11 this.rrdgraph.end -= difffactor;
12 this.rrdgraph.start -= difffactor;
13 } else {
14 this.rrdgraph.end += difffactor;
15 this.rrdgraph.start += difffactor;
16 }
17 this.rrdgraph.mousex = x;
18 try {
19 this.rrdgraph.graph_paint();
20 } catch (ex) {
21 console.error('mouse_move:', ex, ex.stack);
22 }
23 }
24 };
25 var mouse_up = function(e) {
26 this.rrdgraph.mousedown = false;
27 this.style.cursor = 'default';
28 };
29 var mouse_down = function(e) {
30 var x = e.pageX - this.offsetLeft;
31 this.rrdgraph.mousedown = true;
32 this.rrdgraph.mousex = x;
33 this.style.cursor = 'move';
34 };
35 var mouse_scroll = function(e) {
36 e = e ? e : window.event;
37 var wheel = e.detail ? e.detail * -1 : e.wheelDelta / 40;
38 var cstime = this.stime[this.stidx];
39 if (wheel < 0) {
40 this.stidx++;
41 if (this.stidx >= this.stlen) this.stidx = this.stlen - 1;
42 } else {
43 this.stidx--;
44 if (this.stidx < 0) this.stidx = 0;
45 }
46 if (cstime !== this.stime[this.stidx]) {
47 var middle = this.rrdgraph.start + Math.abs(Math.round((this.rrdgraph.end - this.rrdgraph.start) / 2));
48 this.rrdgraph.start = Math.round(middle - this.stime[this.stidx] / 2);
49 this.rrdgraph.end = this.rrdgraph.start + this.stime[this.stidx];
54 50
55 if(e.stopPropagation) 51 try {
56 e.stopPropagation(); 52 this.rrdgraph.graph_paint();
57 if(e.preventDefault) 53 } catch (ex) {
58 e.preventDefault(); 54 console.error('mouse_scroll:', ex, ex.stack);
59 e.cancelBubble = true; 55 }
60 e.cancel = true; 56 }
61 e.returnValue = false;
62 return false;
63};
64 57
65function prepare_draw(id) { 58 if (e.stopPropagation)
66 RrdGraph.prototype.mousex = 0; 59 e.stopPropagation();
67 RrdGraph.prototype.mousedown = false; 60 if (e.preventDefault)
61 e.preventDefault();
62 e.cancelBubble = true;
63 e.cancel = true;
64 e.returnValue = false;
65 return false;
66 };
68 67
69 var cmdline = document.getElementById(id).textContent; 68 function prepare_draw(id) {
70 var gfx = new RrdGfxCanvas(id); 69 RrdGraph.prototype.mousex = 0;
71 var fetch = new RrdDataFile(); 70 RrdGraph.prototype.mousedown = false;
72 var rrdcmdline = null;
73 71
74 try { 72 var cmdline = document.getElementById(id).textContent;
75 rrdcmdline = new RrdCmdLine(gfx, fetch, cmdline); 73 var gfx = new RrdGfxCanvas(id);
76 } catch (e) { 74 var fetch = new RrdDataFile();
77 alert(e+"\n"+e.stack); 75 var rrdcmdline = null;
78 }
79 76
80 var rrdgraph = rrdcmdline.graph; 77 try {
78 rrdcmdline = new RrdCmdLine(gfx, fetch, cmdline);
79 } catch (e) {
80 console.error('prepare_draw:', e, e.stack);
81 }
81 82
82 gfx.canvas.stime = [ 300, 600, 900, 1200, 1800, 3600, 7200, 21600, 43200, 86400, 172800, 604800, 2592000, 5184000, 15768000, 31536000 ]; 83 var rrdgraph = rrdcmdline.graph;
83 gfx.canvas.stlen = gfx.canvas.stime.length;
84 gfx.canvas.stidx = 0;
85 84
86 gfx.canvas.rrdgraph = rrdgraph; 85 gfx.canvas.stime = [300, 600, 900, 1200, 1800, 3600, 7200, 21600, 43200, 86400, 172800, 604800, 2592000, 5184000, 15768000, 31536000];
87 gfx.canvas.removeEventListener('mousemove', mouse_move, false); 86 gfx.canvas.stlen = gfx.canvas.stime.length;
88 gfx.canvas.addEventListener('mousemove', mouse_move, false); 87 gfx.canvas.stidx = 0;
89 gfx.canvas.removeEventListener('mouseup', mouse_up, false);
90 gfx.canvas.addEventListener('mouseup', mouse_up, false);
91 gfx.canvas.removeEventListener('mousedown', mouse_down, false);
92 gfx.canvas.addEventListener('mousedown', mouse_down, false);
93 gfx.canvas.removeEventListener('mouseout', mouse_up, false);
94 gfx.canvas.addEventListener('mouseout', mouse_up, false);
95 gfx.canvas.removeEventListener('DOMMouseScroll', mouse_scroll, false);
96 gfx.canvas.addEventListener('DOMMouseScroll', mouse_scroll, false);
97 gfx.canvas.removeEventListener('mousewheel', mouse_scroll, false);
98 gfx.canvas.addEventListener('mousewheel', mouse_scroll, false);
99 88
100 var diff = rrdgraph.end - rrdgraph.start; 89 gfx.canvas.rrdgraph = rrdgraph;
101 for (var i=0; i < gfx.canvas.stlen; i++) { 90 gfx.canvas.removeEventListener('mousemove', mouse_move, false);
102 if (gfx.canvas.stime[i] >= diff) break; 91 gfx.canvas.addEventListener('mousemove', mouse_move, false);
103 } 92 gfx.canvas.removeEventListener('mouseup', mouse_up, false);
104 if (i === gfx.canvas.stlen) gfx.canvas.stidx = gfx.canvas.stlen-1; 93 gfx.canvas.addEventListener('mouseup', mouse_up, false);
105 else gfx.canvas.stidx = i; 94 gfx.canvas.removeEventListener('mousedown', mouse_down, false);
95 gfx.canvas.addEventListener('mousedown', mouse_down, false);
96 gfx.canvas.removeEventListener('mouseout', mouse_up, false);
97 gfx.canvas.addEventListener('mouseout', mouse_up, false);
98 gfx.canvas.removeEventListener('DOMMouseScroll', mouse_scroll, false);
99 gfx.canvas.addEventListener('DOMMouseScroll', mouse_scroll, false);
100 gfx.canvas.removeEventListener('mousewheel', mouse_scroll, false);
101 gfx.canvas.addEventListener('mousewheel', mouse_scroll, false);
106 102
107 return rrdgraph; 103 var diff = rrdgraph.end - rrdgraph.start;
108} 104 for (var i = 0; i < gfx.canvas.stlen; i++) {
105 if (gfx.canvas.stime[i] >= diff) break;
106 }
107 if (i === gfx.canvas.stlen) gfx.canvas.stidx = gfx.canvas.stlen - 1;
108 else gfx.canvas.stidx = i;
109
110 return rrdgraph;
111 }
112
113 function draw(id, async) {
114 var rrdgraph = prepare_draw(id);
115 try {
116 if (async) {
117 rrdgraph.graph_paint_async();
118 } else {
119 rrdgraph.graph_paint();
120 }
121 } catch (e) {
122 console.error('draw(' + id + '):', e, e.stack);
123 }
124 }
125
126 /**
127 * For each canvas.rrd element, initialize a draggable graph.
128 */
129 function drawAll(async) {
130 var canvases = document.getElementsByClassName('rrd');
131 for (var i = 0; i < canvases.length; i++) {
132 draw(canvases[i].id, async);
133 }
134 }
135
136 return {
137 drawAll: drawAll
138 };
139}());
generated by cgit v1.1 at 2024-04-26 01:25:29 +0000