mirror of
https://github.com/ail-project/ail-framework.git
synced 2024-11-30 01:37:17 +00:00
created new graph pannel for further url stats and dissociate graph script from html
This commit is contained in:
Mokaddem
parent
5a9eca9291
commit
8c1eeea6e6
2 changed files with 140 additions and 97 deletions
100
var/www/static/js/plot-graph.js
Normal file
100
var/www/static/js/plot-graph.js
Normal file
|
|
@ -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
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
@ -84,110 +84,53 @@
|
|||
</div>
|
||||
<!-- /.panel-heading -->
|
||||
<div class="panel-body">
|
||||
<!-- <div id="WordTrending" style="width:100%;"></div> -->
|
||||
<!-- <div id="TldsTrending" style="width:100%;"></div> -->
|
||||
<div id="TldsTrending" style="width:100%; height:800px;"></div>
|
||||
</div>
|
||||
<!-- /.panel-body -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-12">
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading">
|
||||
<i class="fa fa-bar-chart-o fa-fw"></i> Top Domain Trending
|
||||
<div class="pull-right">
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-default btn-xs dropdown-toggle" data-toggle="dropdown">
|
||||
Actions
|
||||
<span class="caret"></span>
|
||||
</button>
|
||||
<ul class="dropdown-menu pull-right" role="menu">
|
||||
<li><a href="#" id="linear">Linear Scale</a>
|
||||
</li>
|
||||
<li><a href="#" id="log">Log Scale</a>
|
||||
</li>
|
||||
<li><a href="#" id="unzoom" onclick="unzoomGraph()">Unzoom</a>
|
||||
</li>
|
||||
<li class="divider"></li>
|
||||
<li><a href="#" id="edit_graph">Edit graph words</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- /.panel-heading -->
|
||||
<div class="panel-body">
|
||||
<!-- <div id="DomainTrending" style="width:100%;"></div> -->
|
||||
<div id="DomainTrending" style="width:100%; height:800px;"></div>
|
||||
</div>
|
||||
<!-- /.panel-body -->
|
||||
</div>
|
||||
</div>
|
||||
<!-- /.row -->
|
||||
</div>
|
||||
<!-- /#page-wrapper -->
|
||||
<!-- import graph function -->
|
||||
<script src="{{ url_for('static', filename='js/plot-graph.js') }}"></script>
|
||||
<!-- instanciate and plot graphs -->
|
||||
<script type="text/javascript">
|
||||
g2 = new Dygraph(
|
||||
document.getElementById("TldsTrending"),
|
||||
// path to CSV file
|
||||
"{{ url_for('static', filename='csv/tldstrendingdata.csv') }}",
|
||||
//"../csv/wordstrendingdata.csv",
|
||||
//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
|
||||
});
|
||||
}
|
||||
var graph_tld = new Graph("TldsTrending", "../static//csv/tldstrendingdata.csv");
|
||||
var graph_domain = new Graph("DomainTrending", "../static//csv/tldstrendingdata.csv");
|
||||
</script>
|
||||
</div>
|
||||
<script src="{{ url_for('static', filename='js/bootstrap.min.js') }}"></script>
|
||||
|
|
|
|||
Loading…
Reference in a new issue