AIL/ail-framework
7
0
Fork 0
mirror of https://github.com/ail-project/ail-framework.git synced 2024-11-10 00:28:22 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Graphs now displayed the highest value. Plotting and filtering is done in its own script.

Browse source
This commit is contained in:
Mokaddem 2016-07-11 15:05:04 +02:00
parent 880359265c
commit f6c7917149
2 changed files with 75 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

40
var/www/static/js/plot-graph.js
View file

@ -1,8 +1,15 @@
function Graph(id_pannel, path){
function Graph(id_pannel, path, header_size){
this.path = path;
this.id_pannel = id_pannel;
g2 = new Dygraph(
// Hide every header during initialisation
var false_tab = [];
for(i=0; i<header_size; i++){
false_tab[i] = false;
}
this.false_tab = false_tab;
g2 = new Dygraph(
document.getElementById(this.id_pannel),
// path to CSV file
//"{{ url_for('static', filename='csv/tldstrendingdata.csv') }}",
@ -15,6 +22,7 @@ function Graph(id_pannel, path){
//drawPoints: true,
//fillGraph: true,
logscale: true,
animatedZooms: true,
labelsKMB: true,
highlightCircleSize: 3,
@ -69,8 +77,11 @@ function Graph(id_pannel, path){
// calculate start of highlight for next Saturday
w += 7*24*3600*1000;
}
}
},
visibility: false_tab
});
this.graph = g2;
this.setVisibility = setVis;
onclick = function(ev) {
if (g2.isSeriesLocked()) {
@ -97,4 +108,27 @@ function Graph(id_pannel, path){
valueRange:null
});
}
// display the top headers
function setVis(max_display){
headings = this.graph.getLabels();
headings.splice(0,1);
var sorted_list = new Array();
today = new Date().getDate();
for( i=0; i<headings.length; i++){
the_heading = headings[i];
//console.log('heading='+the_heading+' tab['+(today-1)+']['+(parseInt(i)+1)+']='+g.getValue(today-1, parseInt(i)+1));
sorted_list.push({dom: the_heading, val: this.graph.getValue(today-1, parseInt(i)+1), index: parseInt(i)});
sorted_list.sort(function(a,b) {
return b.val - a.val;
});
}
//var no_display_list = sorted_list.slice(10, sorted_list.length+1);
var display_list = sorted_list.slice(0, max_display);
for( i=0; i<display_list.length; i++){
this.graph.setVisibility(display_list[i].index, true);
}
}
}

64
var/www/templates/Tldstrending.html → var/www/templates/Trending.html
View file

@ -1,30 +1,30 @@
<!DOCTYPE html>
<html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Analysis Information Leak framework Dashboard</title>
<title>Analysis Information Leak framework Dashboard</title>
<!-- Core CSS -->
<link href="{{ url_for('static', filename='css/bootstrap.min.css') }}" rel="stylesheet">
<link href="{{ url_for('static', filename='font-awesome/css/font-awesome.css') }}" rel="stylesheet">
<link href="{{ url_for('static', filename='css/sb-admin-2.css') }}" rel="stylesheet">
<link href="{{ url_for('static', filename='css/dygraph_gallery.css') }}" rel="stylesheet" type="text/css" />
<!-- JS -->
<script type="text/javascript" src="{{ url_for('static', filename='js/dygraph-combined.js') }}"></script>
<script src="{{ url_for('static', filename='js/jquery-1.4.2.js') }}"></script>
<script language="javascript" src="{{ url_for('static', filename='js/jquery.js')}}"></script>
<!-- Core CSS -->
<link href="{{ url_for('static', filename='css/bootstrap.min.css') }}" rel="stylesheet">
<link href="{{ url_for('static', filename='font-awesome/css/font-awesome.css') }}" rel="stylesheet">
<link href="{{ url_for('static', filename='css/sb-admin-2.css') }}" rel="stylesheet">
<link href="{{ url_for('static', filename='css/dygraph_gallery.css') }}" rel="stylesheet" type="text/css" />
<!-- JS -->
<script type="text/javascript" src="{{ url_for('static', filename='js/dygraph-combined.js') }}"></script>
<script src="{{ url_for('static', filename='js/jquery-1.4.2.js') }}"></script>
<script language="javascript" src="{{ url_for('static', filename='js/jquery.js')}}"></script>
</head>
<body>
</head>
<body>
<div id="wrapper">
<nav class="navbar navbar-default navbar-static-top" role="navigation" style="margin-bottom: 0">
<div class="navbar-header">
<ul class="nav navbar-nav">
<li class="active"><a href="{{ url_for('index') }}"><i class="fa fa-dashboard fa-fw"></i> Dashboard</a></li><li><a href="{{ url_for('wordstrending') }}"><i class="glyphicon glyphicon-stats"></i> WordsTrendings</a></li><li><a href="{{ url_for('protocolstrending') }}"><i class="glyphicon glyphicon-stats"></i> ProtocolsTrendings</a></li><li><a href="{{ url_for('trending') }}"><i class="glyphicon glyphicon-stats"></i> Trending charts</a></li></ul>
<div id="wrapper">
<nav class="navbar navbar-default navbar-static-top" role="navigation" style="margin-bottom: 0">
<div class="navbar-header">
<ul class="nav navbar-nav">
<li class="active"><a href="{{ url_for('index') }}"><i class="fa fa-dashboard fa-fw"></i> Dashboard</a></li><li><a href="{{ url_for('wordstrending') }}"><i class="glyphicon glyphicon-stats"></i> WordsTrendings</a></li><li><a href="{{ url_for('protocolstrending') }}"><i class="glyphicon glyphicon-stats"></i> ProtocolsTrendings</a></li><li><a href="{{ url_for('trending') }}"><i class="glyphicon glyphicon-stats"></i> Trending charts</a></li></ul>
</div>
<!-- /.navbar-top-links -->
<div class="navbar-default sidebar" role="navigation">
@ -141,17 +141,29 @@
<!-- instanciate and plot graphs -->
<script type="text/javascript">
// Create, plot and set the limit of displayed headers
function create_and_plot(pannel, path){
//var graph_domain = new Graph($(event.target).attr('data-pannel'), $(event.target).attr('data-path'));
$.get(path, function(myContentFile) {
var lines = myContentFile.split("\r\n");
var header_size = lines[0].split(',').length-1;
var graph_obj = new Graph(pannel, path, header_size);
setTimeout(function() { graph_obj.setVisibility(10)}, 300);
}, 'text');
}
// When a pannel is shown, create_and_plot.
$('.nav-tabs a').on('shown.bs.tab', function(event){
console.log($(event.target).attr('data-pannel')); // active tab
console.log($(event.target).attr('data-path')); // active tab
var graph_domain = new Graph($(event.target).attr('data-pannel'), $(event.target).attr('data-path'));
create_and_plot($(event.target).attr('data-pannel'), $(event.target).attr('data-path'));
});
</script>
<script>
$(document).ready(function(){
var graph_tld = new Graph("TldsTrending", "../static//csv/tldstrendingdata.csv");
// Create the graph when the page has just loaded
create_and_plot("TldsTrending", '../static//csv/tldstrendingdata.csv')
});
</script>
</div>