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

fixed multiple binding bug in moduleStats + Added multiple bar display for 'other pie part' + Added ModuleStats tab in all other pages

Browse source
This commit is contained in:
Mokaddem 2016-07-28 09:52:07 +02:00
parent 5a02a7ffce
commit acec508f53
6 changed files with 51 additions and 49 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
var/www/Flask_server.py
View file

@ -196,6 +196,7 @@ def modulesCharts():
for date in date_range: for date in date_range:
curr_value = r_serv_charts.hget(date, module_name+'-'+keyword_name) curr_value = r_serv_charts.hget(date, module_name+'-'+keyword_name)
bar_values.append([date[0:4]+'/'+date[4:6]+'/'+date[6:8], int(curr_value if curr_value is not None else 0)]) bar_values.append([date[0:4]+'/'+date[4:6]+'/'+date[6:8], int(curr_value if curr_value is not None else 0)])
bar_values.insert(0, keyword_name)
return jsonify(bar_values) return jsonify(bar_values)
else: else:
@ -220,6 +221,7 @@ def providersChart():
for date in date_range: for date in date_range:
curr_value = r_serv_charts.hget(keyword_name+'_'+module_name, date) curr_value = r_serv_charts.hget(keyword_name+'_'+module_name, date)
bar_values.append([date[0:4]+'/'+date[4:6]+'/'+date[6:8], float(curr_value if curr_value is not None else 0.0)]) bar_values.append([date[0:4]+'/'+date[4:6]+'/'+date[6:8], float(curr_value if curr_value is not None else 0.0)])
bar_values.insert(0, keyword_name)
return jsonify(bar_values) return jsonify(bar_values)
else: else:

63
var/www/static/js/moduleTrending.js
View file

@ -34,17 +34,17 @@ function labelFormatter(label, series) {
} }
function plot_top_graph(module_name){ function plot_top_graph(module_name, init){
/**** Pie Chart ****/ /**** Pie Chart ****/
// moduleCharts is used the decide the url to request data // moduleCharts is used the decide the url to request data
var moduleCharts = "size" == module_name ? "providersChart" : ("num" == module_name ? "providersChart" : "moduleCharts"); var moduleCharts = "size" == module_name ? "providersChart" : ("num" == module_name ? "providersChart" : "moduleCharts");
var tot_sum = 0; // used to detect elements putted in 'Other' pie's part var tot_sum = 0; // used to detect elements placed in 'Other' pie's part
var data_other = []; // used to detect elements putted in 'Other' pie's part var data_other = []; // used to detect elements placed in 'Other' pie's part
$.getJSON($SCRIPT_ROOT+"/_"+moduleCharts+"?moduleName="+module_name+"&num_day="+chart_1_num_day, var createPie = $.getJSON($SCRIPT_ROOT+"/_"+moduleCharts+"?moduleName="+module_name+"&num_day="+chart_1_num_day,
function(data) { function(data) {
var temp_data_pie = []; var temp_data_pie = [];
for(i=0; i<data.length; i++){ for(i=0; i<data.length; i++){
@ -70,12 +70,14 @@ function plot_top_graph(module_name){
$.plot($("#flot-pie-chart-"+module_name), temp_data_pie, options); $.plot($("#flot-pie-chart-"+module_name), temp_data_pie, options);
$("#flot-pie-chart-"+module_name).bind("plotclick", function (event, pos, item) { if (init){
if (item == null) $("#flot-pie-chart-"+module_name).bind("plotclick", function (event, pos, item) {
return; if (item == null)
var clicked_label = item.series.label; return;
update_bar_chart(moduleCharts, "#flot-bar-chart-"+module_name, clicked_label, item.series.color, chart_1_num_day, "%m/%d"); var clicked_label = item.series.label;
}); update_bar_chart(moduleCharts, "#flot-bar-chart-"+module_name, clicked_label, item.series.color, chart_1_num_day, "%m/%d");
});
}
}); });
@ -84,8 +86,8 @@ function plot_top_graph(module_name){
function update_bar_chart(chartUrl, chartID, involved_item, serie_color, num_day, timeformat){ function update_bar_chart(chartUrl, chartID, involved_item, serie_color, num_day, timeformat){
var barOptions = { var barOptions = {
series: { series: {
bars: { show: false, barWidth: 82800000 }, bars: { show: true, barWidth: 82800000 },
lines: { show: true, fill: true } lines: { show: false, fill: true }
}, },
xaxis: { xaxis: {
mode: "time", mode: "time",
@ -106,36 +108,33 @@ function plot_top_graph(module_name){
var all_other_temp_data = []; var all_other_temp_data = [];
var temp_data_bar = []; var temp_data_bar = [];
var promises = []; // Use to plot when everything have been received var promises = []; // Use to plot when everything have been received
var involved_item
for(i=0; i<data_other.length; i++){ // Get data for elements summed up in the part 'Other' for(i=0; i<data_other.length; i++){ // Get data for elements summed up in the part 'Other'
promises.push( involved_item = data_other[i];
$.getJSON($SCRIPT_ROOT+"/_"+chartUrl+"?keywordName="+data_other[i]+"&moduleName="+module_name+"&bar=true"+"&days="+num_day, var request = $.getJSON($SCRIPT_ROOT+"/_"+chartUrl+"?keywordName="+involved_item+"&moduleName="+module_name+"&bar=true"+"&days="+num_day,
function(data) { function(data) {
temp_data_bar = [] temp_data_bar = []
for(i=0; i<data.length; i++){ for(i=1; i<data.length; i++){
var curr_date = data[i][0].split('/'); var curr_date = data[i][0].split('/');
temp_data_bar.push([new Date(curr_date[0], curr_date[1]-1, curr_date[2]), data[i][1]]); var offset = (data_other.length/2 - data_other.indexOf(data[0]))*10000000
temp_data_bar.push([new Date(curr_date[0], curr_date[1]-1, curr_date[2]).getTime() + offset, data[i][1]]);
} }
all_other_temp_data.push(temp_data_bar); all_other_temp_data.push([ data[0], temp_data_bar ]);
} }
) )
); promises.push(request);
var barData = {
label: involved_item,
data: all_other_temp_data,
color: serie_color
};
} }
$.when.apply($, promises).done( function () { $.when.apply($, promises).done( function (arg) {
var dataBar = [] var dataBar = []
for(i=0; i<data_other.length; i++) //format data for the plot for(i=0; i<all_other_temp_data.length; i++) //format data for the plot
dataBar.push({label: data_other[i], data: all_other_temp_data[i]}) dataBar.push({bars: { barWidth: 8280000 }, label: all_other_temp_data[i][0], data: all_other_temp_data[i][1]})
$.plot($(chartID), dataBar, { $.plot($(chartID), dataBar, {
series: { series: {
stack: true, stack: false,
lines: { show: true, fill: true, steps: false }, lines: { show: false, fill: true, steps: false },
bars: { show: false, barWidth: 82800000 }, bars: { show: true},
}, },
xaxis: { xaxis: {
mode: "time", mode: "time",
@ -158,7 +157,7 @@ function plot_top_graph(module_name){
$.getJSON($SCRIPT_ROOT+"/_"+chartUrl+"?keywordName="+involved_item+"&moduleName="+module_name+"&bar=true"+"&days="+num_day, $.getJSON($SCRIPT_ROOT+"/_"+chartUrl+"?keywordName="+involved_item+"&moduleName="+module_name+"&bar=true"+"&days="+num_day,
function(data) { function(data) {
var temp_data_bar = [] var temp_data_bar = []
for(i=0; i<data.length; i++){ for(i=1; i<data.length; i++){
var curr_date = data[i][0].split('/'); var curr_date = data[i][0].split('/');
temp_data_bar.push([new Date(curr_date[0], curr_date[1]-1, curr_date[2]), data[i][1]]); temp_data_bar.push([new Date(curr_date[0], curr_date[1]-1, curr_date[2]), data[i][1]]);
} }

16
var/www/templates/Moduletrending.html
View file

@ -28,7 +28,7 @@
<div class="navbar-header"> <div class="navbar-header">
<ul class="nav navbar-nav"> <ul class="nav navbar-nav">
<li><a href="{{ url_for('index') }}"><i class="fa fa-dashboard fa-fw"></i> Dashboard</a></li> <li><a href="{{ url_for('index') }}"><i class="fa fa-dashboard fa-fw"></i> Dashboard</a></li>
<li class="active"><a href="{{ url_for('trending') }}"><i class="glyphicon glyphicon-stats"></i> Trending charts</a></li> <li><a href="{{ url_for('trending') }}"><i class="glyphicon glyphicon-stats"></i> Trending charts</a></li>
<li class="active"><a href="{{ url_for('moduletrending') }}"><i class="glyphicon glyphicon-stats"></i> Modules statistics</a></li> <li class="active"><a href="{{ url_for('moduletrending') }}"><i class="glyphicon glyphicon-stats"></i> Modules statistics</a></li>
</ul> </ul>
</div> </div>
@ -62,18 +62,18 @@
<script src="{{ url_for('static', filename='js/moduleTrending.js') }}"></script> <script src="{{ url_for('static', filename='js/moduleTrending.js') }}"></script>
<script> <script>
$(document).ready(function(){ $(document).ready(function(){
refreshPlot(); refreshPlot(true);
}); });
function refreshPlot(){ function refreshPlot(init){
refreshAnimation(); refreshAnimation();
plot_top_graph("credential"); plot_top_graph("credential", init);
plot_top_graph("mail"); plot_top_graph("mail", init);
plot_top_graph("size"); plot_top_graph("size", init);
plot_top_graph("num"); plot_top_graph("num", init);
setTimeout(refreshPlot, 10000); setTimeout(function(){ refreshPlot(false); }, 10000);
} }
function refreshAnimation(){ function refreshAnimation(){

2
var/www/templates/Trending.html
View file

@ -32,7 +32,7 @@
<ul class="nav navbar-nav"> <ul class="nav navbar-nav">
<li><a href="{{ url_for('index') }}"><i class="fa fa-dashboard fa-fw"></i> Dashboard</a></li> <li><a href="{{ url_for('index') }}"><i class="fa fa-dashboard fa-fw"></i> Dashboard</a></li>
<li class="active"><a href="{{ url_for('trending') }}"><i class="glyphicon glyphicon-stats"></i> Trending charts</a></li> <li class="active"><a href="{{ url_for('trending') }}"><i class="glyphicon glyphicon-stats"></i> Trending charts</a></li>
<li class="active"><a href="{{ url_for('moduletrending') }}"><i class="glyphicon glyphicon-stats"></i> Modules statistics</a></li> <li><a href="{{ url_for('moduletrending') }}"><i class="glyphicon glyphicon-stats"></i> Modules statistics</a></li>
</ul> </ul>
</div> </div>
<!-- /.navbar-top-links --> <!-- /.navbar-top-links -->

1
var/www/templates/index.html
View file

@ -37,6 +37,7 @@
<ul class="nav navbar-nav"> <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 class="active"><a href="{{ url_for('index') }}"><i class="fa fa-dashboard fa-fw"></i> Dashboard</a></li>
<li><a href="{{ url_for('trending') }}"><i class="glyphicon glyphicon-stats"></i> Trending charts</a></li> <li><a href="{{ url_for('trending') }}"><i class="glyphicon glyphicon-stats"></i> Trending charts</a></li>
<li><a href="{{ url_for('moduletrending') }}"><i class="glyphicon glyphicon-stats"></i> Modules statistics</a></li>
</ul> </ul>
</div> </div>
<!-- /.navbar-top-links --> <!-- /.navbar-top-links -->

16
var/www/templates/trending_graphs/Moduletrending.html
View file

@ -9,8 +9,8 @@
</div> </div>
<div class="panel-body"> <div class="panel-body">
<div class=""> <div class="">
<div class="flot-chart-content col-lg-6" id="flot-pie-chart-credential" style="height:250px; width:48%;"></div> <div class="flot-chart-content col-lg-6" id="flot-pie-chart-credential" style="height:250px; width:33%;"></div>
<div class="flot-chart-content col-lg-6" id="flot-bar-chart-credential" style="height:250px; width:48%;"><div class="alert alert-info">Click on a part</div></div> <div class="flot-chart-content col-lg-6" id="flot-bar-chart-credential" style="height:250px; width:66%;"><div class="alert alert-info">Click on a part</div></div>
</div> </div>
<!-- /.row --> <!-- /.row -->
</div> </div>
@ -34,8 +34,8 @@
</div> </div>
<div class="panel-body"> <div class="panel-body">
<div class=""> <div class="">
<div class="flot-chart-content col-lg-6" id="flot-pie-chart-mail" style="height:250px; width:48%;"></div> <div class="flot-chart-content col-lg-6" id="flot-pie-chart-mail" style="height:250px; width:33%;"></div>
<div class="flot-chart-content col-lg-6" id="flot-bar-chart-mail" style="height:250px; width:48%;"><div class="alert alert-info">Click on a part</div></div> <div class="flot-chart-content col-lg-6" id="flot-bar-chart-mail" style="height:250px; width:66%;"><div class="alert alert-info">Click on a part</div></div>
</div> </div>
<!-- /.row --> <!-- /.row -->
</div> </div>
@ -60,12 +60,12 @@
<div class="panel-body"> <div class="panel-body">
<div class=""> <div class="">
<h4>Average paste size by provider </h4> <h4>Average paste size by provider </h4>
<div class="flot-chart-content col-lg-6" id="flot-pie-chart-size" style="height:250px; width:48%;"></div> <div class="flot-chart-content col-lg-6" id="flot-pie-chart-size" style="height:250px; width:33%;"></div>
<div class="flot-chart-content col-lg-6" id="flot-bar-chart-size" style="height:250px; width:48%;"><div class="alert alert-info">Click on a part</div></div> <div class="flot-chart-content col-lg-6" id="flot-bar-chart-size" style="height:250px; width:66%;"><div class="alert alert-info">Click on a part</div></div>
<h4>Number of paste by provider </h4> <h4>Number of paste by provider </h4>
<div class="flot-chart-content col-lg-6" id="flot-pie-chart-num" style="height:250px; width:48%;"></div> <div class="flot-chart-content col-lg-6" id="flot-pie-chart-num" style="height:250px; width:33%;"></div>
<div class="flot-chart-content col-lg-6" id="flot-bar-chart-num" style="height:250px; width:48%;"><div class="alert alert-info">Click on a part</div></div> <div class="flot-chart-content col-lg-6" id="flot-bar-chart-num" style="height:250px; width:66%;"><div class="alert alert-info">Click on a part</div></div>
</div> </div>
<!-- /.row --> <!-- /.row -->