mirror of
https://github.com/ail-project/ail-framework.git
synced 2024-11-10 08:38:28 +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>
|
</div>
|
||||||
<!-- /.panel-heading -->
|
<!-- /.panel-heading -->
|
||||||
<div class="panel-body">
|
<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 id="TldsTrending" style="width:100%; height:800px;"></div>
|
||||||
</div>
|
</div>
|
||||||
<!-- /.panel-body -->
|
<!-- /.panel-body -->
|
||||||
</div>
|
</div>
|
||||||
</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 -->
|
<!-- /.row -->
|
||||||
</div>
|
</div>
|
||||||
<!-- /#page-wrapper -->
|
<!-- /#page-wrapper -->
|
||||||
|
<!-- import graph function -->
|
||||||
|
<script src="{{ url_for('static', filename='js/plot-graph.js') }}"></script>
|
||||||
|
<!-- instanciate and plot graphs -->
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
g2 = new Dygraph(
|
var graph_tld = new Graph("TldsTrending", "../static//csv/tldstrendingdata.csv");
|
||||||
document.getElementById("TldsTrending"),
|
var graph_domain = new Graph("DomainTrending", "../static//csv/tldstrendingdata.csv");
|
||||||
// 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
|
|
||||||
});
|
|
||||||
}
|
|
||||||
</script>
|
</script>
|
||||||
</div>
|
</div>
|
||||||
<script src="{{ url_for('static', filename='js/bootstrap.min.js') }}"></script>
|
<script src="{{ url_for('static', filename='js/bootstrap.min.js') }}"></script>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue