AIL/ail-framework
7
0
Fork 0
mirror of https://github.com/ail-project/ail-framework.git synced 2024-11-10 08:38:28 +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

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

@ -1,7 +1,14 @@
function Graph(id_pannel, path){ function Graph(id_pannel, path, header_size){
this.path = path; this.path = path;
this.id_pannel = id_pannel; this.id_pannel = id_pannel;
// 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( g2 = new Dygraph(
document.getElementById(this.id_pannel), document.getElementById(this.id_pannel),
// path to CSV file // path to CSV file
@ -15,6 +22,7 @@ function Graph(id_pannel, path){
//drawPoints: true, //drawPoints: true,
//fillGraph: true, //fillGraph: true,
logscale: true, logscale: true,
animatedZooms: true, animatedZooms: true,
labelsKMB: true, labelsKMB: true,
highlightCircleSize: 3, highlightCircleSize: 3,
@ -69,8 +77,11 @@ function Graph(id_pannel, path){
// calculate start of highlight for next Saturday // calculate start of highlight for next Saturday
w += 7*24*3600*1000; w += 7*24*3600*1000;
} }
} },
visibility: false_tab
}); });
this.graph = g2;
this.setVisibility = setVis;
onclick = function(ev) { onclick = function(ev) {
if (g2.isSeriesLocked()) { if (g2.isSeriesLocked()) {
@ -97,4 +108,27 @@ function Graph(id_pannel, path){
valueRange:null 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);
}
}
} }

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

@ -1,7 +1,7 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
@ -17,8 +17,8 @@
<script src="{{ url_for('static', filename='js/jquery-1.4.2.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> <script language="javascript" src="{{ url_for('static', filename='js/jquery.js')}}"></script>
</head> </head>
<body> <body>
<div id="wrapper"> <div id="wrapper">
<nav class="navbar navbar-default navbar-static-top" role="navigation" style="margin-bottom: 0"> <nav class="navbar navbar-default navbar-static-top" role="navigation" style="margin-bottom: 0">
@ -141,17 +141,29 @@
<!-- instanciate and plot graphs --> <!-- instanciate and plot graphs -->
<script type="text/javascript"> <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){ $('.nav-tabs a').on('shown.bs.tab', function(event){
console.log($(event.target).attr('data-pannel')); // active tab create_and_plot($(event.target).attr('data-pannel'), $(event.target).attr('data-path'));
console.log($(event.target).attr('data-path')); // active tab
var graph_domain = new Graph($(event.target).attr('data-pannel'), $(event.target).attr('data-path'));
}); });
</script> </script>
<script> <script>
$(document).ready(function(){ $(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> </script>
</div> </div>