mirror of
https://github.com/ail-project/ail-framework.git
synced 2024-11-26 15:57:16 +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:
|
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:
|
||||||
|
|
|
@ -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]]);
|
||||||
}
|
}
|
||||||
|
|
|
@ -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(){
|
||||||
|
|
|
@ -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 -->
|
||||||
|
|
|
@ -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 -->
|
||||||
|
|
|
@ -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 -->
|
||||||
|
|
Loading…
Reference in a new issue