From 8c1eeea6e67af61cb2035fe3c08cdf7b6b213ddd Mon Sep 17 00:00:00 2001 From: Mokaddem Date: Mon, 4 Jul 2016 11:43:38 +0200 Subject: [PATCH] created new graph pannel for further url stats and dissociate graph script from html --- var/www/static/js/plot-graph.js | 100 ++++++++++++++++++++ var/www/templates/Tldstrending.html | 137 ++++++++-------------------- 2 files changed, 140 insertions(+), 97 deletions(-) create mode 100644 var/www/static/js/plot-graph.js diff --git a/var/www/static/js/plot-graph.js b/var/www/static/js/plot-graph.js new file mode 100644 index 00000000..22f2c178 --- /dev/null +++ b/var/www/static/js/plot-graph.js @@ -0,0 +1,100 @@ +function Graph(id_pannel, path){ + this.path = path; + this.id_pannel = id_pannel; + + g2 = new Dygraph( + document.getElementById(this.id_pannel), + // path to CSV file + //"{{ url_for('static', filename='csv/tldstrendingdata.csv') }}", + //"../static//csv/tldstrendingdata.csv", + this.path, + //window.csv, + { + rollPeriod: 1, + showRoller: true, + //drawPoints: true, + //fillGraph: true, + logscale: true, + animatedZooms: true, + labelsKMB: true, + highlightCircleSize: 3, + highlightSeriesOpts: { + strokeWidth: 3, + strokeBorderWidth: 1, + highlightCircleSize: 5, + }, + underlayCallback: function(canvas, area, g) { + canvas.fillStyle = "rgba(255, 193, 37, 0.5)"; + + function highlight_period(x_start, x_end) { + var canvas_left_x = g.toDomXCoord(x_start); + var canvas_right_x = g.toDomXCoord(x_end); + var canvas_width = canvas_right_x - canvas_left_x; + canvas.fillRect(canvas_left_x, area.y, canvas_width, area.h); + } + + var min_data_x = g.getValue(0,0); + var max_data_x = g.getValue(g.numRows()-1,0); + + // get day of week + var d = new Date(min_data_x); + var dow = d.getUTCDay(); + var ds = d.toUTCString(); + + var w = min_data_x; + // starting on Sunday is a special case + if (dow == 0) { + highlight_period(w,w+12*3600*1000); + } + // find first saturday + while (dow != 5) { + w += 24*3600*1000; + d = new Date(w); + dow = d.getUTCDay(); + } + + // shift back 1/2 day to center highlight around the point for the day + w -= 12*3600*1000; + while (w < max_data_x) { + var start_x_highlight = w; + var end_x_highlight = w + 2*24*3600*1000; + // make sure we don't try to plot outside the graph + if (start_x_highlight < min_data_x) { + start_x_highlight = min_data_x; + } + if (end_x_highlight > max_data_x) { + end_x_highlight = max_data_x; + } + highlight_period(start_x_highlight,end_x_highlight); + // calculate start of highlight for next Saturday + w += 7*24*3600*1000; + } + } + }); + + onclick = function(ev) { + if (g2.isSeriesLocked()) { + g2.clearSelection(); + } + else { + g2.setSelection(g2.getSelection(), g2.getHighlightSeries(), true); + } + }; + g2.updateOptions({clickCallback: onclick}, true); + + var linear = document.getElementById("linear"); + var log = document.getElementById("log"); + linear.onclick = function() { setLog(false); } + log.onclick = function() { setLog(true); } + var setLog = function(val) { + g2.updateOptions({ logscale: val }); + linear.disabled = !val; + log.disabled = val; + } + function unzoomGraph() { + g2.updateOptions({ + dateWindow:null, + valueRange:null + }); + } +} diff --git a/var/www/templates/Tldstrending.html b/var/www/templates/Tldstrending.html index e2706f21..6bc96cba 100644 --- a/var/www/templates/Tldstrending.html +++ b/var/www/templates/Tldstrending.html @@ -84,111 +84,54 @@
- +
+
+
+
+ Top Domain Trending +
+
+ + +
+
+
+ +
+ +
+
+ +
+
- + + + +