CIRCL
/
AIL-framework
mirror of https://github.com/CIRCL/AIL-framework
2
1
Fork 0
Code Issues Releases Wiki Activity

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

pull/65/head
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:
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.insert(0, keyword_name)
return jsonify(bar_values)
else:
@ -220,6 +221,7 @@ def providersChart():
for date in date_range:
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.insert(0, keyword_name)
return jsonify(bar_values)
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 ****/
// moduleCharts is used the decide the url to request data
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 data_other = []; // 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 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) {
var temp_data_pie = [];
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);
$("#flot-pie-chart-"+module_name).bind("plotclick", function (event, pos, item) {
if (item == null)
return;
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");
});
if (init){
$("#flot-pie-chart-"+module_name).bind("plotclick", function (event, pos, item) {
if (item == null)
return;
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){
var barOptions = {
series: {
bars: { show: false, barWidth: 82800000 },
lines: { show: true, fill: true }
bars: { show: true, barWidth: 82800000 },
lines: { show: false, fill: true }
},
xaxis: {
mode: "time",
@ -106,36 +108,33 @@ function plot_top_graph(module_name){
var all_other_temp_data = [];
var temp_data_bar = [];
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'
promises.push(
$.getJSON($SCRIPT_ROOT+"/_"+chartUrl+"?keywordName="+data_other[i]+"&moduleName="+module_name+"&bar=true"+"&days="+num_day,
involved_item = data_other[i];
var request = $.getJSON($SCRIPT_ROOT+"/_"+chartUrl+"?keywordName="+involved_item+"&moduleName="+module_name+"&bar=true"+"&days="+num_day,
function(data) {
temp_data_bar = []
for(i=0; i<data.length; i++){
for(i=1; i<data.length; i++){
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 ]);
}
)
);
var barData = {
label: involved_item,
data: all_other_temp_data,
color: serie_color
};
)
promises.push(request);
}
$.when.apply($, promises).done( function () {
$.when.apply($, promises).done( function (arg) {
var dataBar = []
for(i=0; i<data_other.length; i++) //format data for the plot
dataBar.push({label: data_other[i], data: all_other_temp_data[i]})
for(i=0; i<all_other_temp_data.length; i++) //format data for the plot
dataBar.push({bars: { barWidth: 8280000 }, label: all_other_temp_data[i][0], data: all_other_temp_data[i][1]})
$.plot($(chartID), dataBar, {
series: {
stack: true,
lines: { show: true, fill: true, steps: false },
bars: { show: false, barWidth: 82800000 },
stack: false,
lines: { show: false, fill: true, steps: false },
bars: { show: true},
},
xaxis: {
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,
function(data) {
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('/');
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">
<ul class="nav navbar-nav">
<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>
</ul>
</div>
@ -62,18 +62,18 @@
<script src="{{ url_for('static', filename='js/moduleTrending.js') }}"></script>
<script>
$(document).ready(function(){
refreshPlot();
refreshPlot(true);
});
function refreshPlot(){
function refreshPlot(init){
refreshAnimation();
plot_top_graph("credential");
plot_top_graph("mail");
plot_top_graph("size");
plot_top_graph("num");
plot_top_graph("credential", init);
plot_top_graph("mail", init);
plot_top_graph("size", init);
plot_top_graph("num", init);
setTimeout(refreshPlot, 10000);
setTimeout(function(){ refreshPlot(false); }, 10000);
}
function refreshAnimation(){

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

@ -32,7 +32,7 @@
<ul class="nav navbar-nav">
<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('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>
</div>
<!-- /.navbar-top-links -->

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

@ -37,6 +37,7 @@
<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('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>
</div>
<!-- /.navbar-top-links -->

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

@ -9,8 +9,8 @@
</div>
<div class="panel-body">
<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-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-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:66%;"><div class="alert alert-info">Click on a part</div></div>
</div>
<!-- /.row -->
</div>
@ -34,8 +34,8 @@
</div>
<div class="panel-body">
<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-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-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:66%;"><div class="alert alert-info">Click on a part</div></div>
</div>
<!-- /.row -->
</div>
@ -60,12 +60,12 @@
<div class="panel-body">
<div class="">
<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-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-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:66%;"><div class="alert alert-info">Click on a part</div></div>
<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-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-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:66%;"><div class="alert alert-info">Click on a part</div></div>
</div>
<!-- /.row -->