mirror of https://github.com/CIRCL/AIL-framework
101 lines
2.6 KiB
JavaScript
101 lines
2.6 KiB
JavaScript
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
|
|
});
|
|
}
|
|
}
|