diff options
| author | Peter Wu | 2014-08-02 16:26:17 +0200 |
|---|---|---|
| committer | Peter Wu | 2014-08-02 16:30:29 +0200 |
| commit | c4d31153e76caf0dbccdfe108574afc4b030c926 (patch) | |
| tree | 7fdb35c051432d055697b54c94833b01ce0d226d /js | |
| parent | jsrrdgraph: Fix error functions. Error prototype. (diff) | |
| download | apt-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 (limited to 'js')
| -rw-r--r-- | js/CGP-async.js | 21 | ||||
| -rw-r--r-- | js/CGP-sync.js | 21 | ||||
| -rw-r--r-- | js/CGP.js | 227 |
3 files changed, 129 insertions, 140 deletions
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 @@ | |||
| 1 | function 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 | |||
| 11 | function 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 | |||
| 21 | window.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 @@ | |||
| 1 | function 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 | |||
| 11 | function 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 | |||
| 21 | window.onload = drawAll() | ||
| @@ -1,108 +1,139 @@ | |||
| 1 | var mouse_move = function (e) { | 1 | var 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 | }; | ||
| 22 | var mouse_up = function (e) { | ||
| 23 | this.rrdgraph.mousedown = false; | ||
| 24 | this.style.cursor="default"; | ||
| 25 | }; | ||
| 26 | var 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 | }; | ||
| 32 | var 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 | ||
| 65 | function 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 | }()); | ||
