mirror of
https://github.com/ail-project/ail-framework.git
synced 2024-11-30 01:37:17 +00:00
fixed multiple binding bug in moduleStats + Added multiple bar display for 'other pie part' + Added ModuleStats tab in all other pages
This commit is contained in:
parent
5a02a7ffce
commit
acec508f53
6 changed files with 51 additions and 49 deletions
|
@ -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:
|
||||
|
|
|
@ -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);
|
||||
|
||||
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]]);
|
||||
}
|
||||
|
|
|
@ -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(){
|
||||
|
|
|
@ -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 -->
|
||||
|
|
|
@ -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 -->
|
||||
|
|
|
@ -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 -->
|
||||
|
|
Loading…
Reference in a new issue