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

fix: [Flask] remove hardcoded url

Browse source
This commit is contained in:
Terrtia 2018-09-25 14:37:14 +02:00
parent b575efcc46
commit b3923428e5
No known key found for this signature in database
GPG key ID: 1E1B1F50D84613D0
10 changed files with 136 additions and 70 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
var/www/modules/dashboard/templates/index.html
View file

@ -24,8 +24,7 @@
window.glob_tabvar = []; // Avoid undefined window.glob_tabvar = []; // Avoid undefined
window.threshold_stucked_module = {{ threshold_stucked_module }} window.threshold_stucked_module = {{ threshold_stucked_module }}
function update_values() { function update_values() {
$SCRIPT_ROOT = {{ request.script_root|tojson|safe }}; $.getJSON("{{ url_for('dashboard.stuff') }}",
$.getJSON($SCRIPT_ROOT+"/_stuff",
function(data) { function(data) {
window.glob_tabvar = data; window.glob_tabvar = data;
}); });
@ -189,14 +188,16 @@
</div> </div>
<script> var url_showSavedPath = "{{ url_for('showsavedpastes.showsavedpaste') }}"; </script> <script> var url_showSavedPath = "{{ url_for('showsavedpastes.showsavedpaste') }}"; </script>
<script type="text/javascript" src="{{ url_for('static', filename='js/indexjavascript.js')}}"></script> <script type="text/javascript" src="{{ url_for('static', filename='js/indexjavascript.js')}}"
data-urlstuff="{{ url_for('dashboard.stuff') }}" data-urllog="{{ url_for('dashboard.logs') }}">
</script>
<script> <script>
activePage = "page-index"; activePage = "page-index";
$("#"+activePage).addClass("active"); $("#"+activePage).addClass("active");
var tableBody = document.getElementById('tab_body') var tableBody = document.getElementById('tab_body')
$.getJSON('/_get_last_logs_json', function(data) { $.getJSON("{{ url_for('dashboard.get_last_logs_json') }}", function(data) {
data.forEach(function (d) { data.forEach(function (d) {
var tr = document.createElement('TR') var tr = document.createElement('TR')
var time = document.createElement('TD') var time = document.createElement('TD')

4
var/www/modules/sentiment/templates/sentiment_analysis_plot_tool.html
View file

@ -127,7 +127,9 @@
$("#"+activePage).addClass("active"); $("#"+activePage).addClass("active");
}); });
</script> </script>
<script src="{{ url_for('static', filename='js/sentiment_plot.js') }}"></script> <script src="{{ url_for('static', filename='js/sentiment_plot.js') }}"
data-url_sentiment_analysis="{{ url_for('sentiments.sentiment_analysis_plot_tool_getdata') }}">
</script>
</body> </body>
</html> </html>

4
var/www/modules/sentiment/templates/sentiment_analysis_trending.html
View file

@ -230,7 +230,9 @@
<!-- import graph function --> <!-- import graph function -->
<script src="{{ url_for('static', filename='js/sentiment_trending.js') }}"></script> <script src="{{ url_for('static', filename='js/sentiment_trending.js') }}"
data-url_sentiment_analysis_getplotdata="{{ url_for('sentiments.sentiment_analysis_getplotdata') }}">
</script>
<script> <script>
$("#LoadAll").hide(); $("#LoadAll").hide();

5
var/www/modules/trendingcharts/templates/Trending.html
View file

@ -55,10 +55,11 @@
<script> <script>
var chart_1_num_day = 5; var chart_1_num_day = 5;
var chart_2_num_day = 15; var chart_2_num_day = 15;
$SCRIPT_ROOT = {{ request.script_root|tojson|safe }};
</script> </script>
<script type="text/javascript" src="{{ url_for('static', filename='js/trendingchart.js')}}"></script> <script type="text/javascript" src="{{ url_for('static', filename='js/trendingchart.js')}}"
data-url_progressionCharts="{{ url_for('trendings.progressionCharts') }}">
</script>
<div class="tab-content"> <div class="tab-content">
<div class="col-lg-12 tab-pane fade in active" id="tld-tab" > <div class="col-lg-12 tab-pane fade in active" id="tld-tab" >

6
var/www/modules/trendingmodules/templates/Moduletrending.html
View file

@ -34,10 +34,12 @@
<script> <script>
var chart_1_num_day = 5; var chart_1_num_day = 5;
var chart_2_num_day = 15; var chart_2_num_day = 15;
$SCRIPT_ROOT = {{ request.script_root|tojson|safe }};
</script> </script>
<script src="{{ url_for('static', filename='js/moduleTrending.js') }}"></script> <script src="{{ url_for('static', filename='js/moduleTrending.js') }}"
data-url_providersChart="{{ url_for('trendingmodules.providersChart') }}"
data-url_moduleCharts="{{ url_for('trendingmodules.modulesCharts') }}">
</script>
<script> <script>
$(document).ready(function(){ $(document).ready(function(){
activePage = "page-modulestats" activePage = "page-modulestats"

18
var/www/static/js/indexjavascript.js
View file

@ -3,6 +3,19 @@ var data_for_processed_paste = {};
var list_feeder = []; var list_feeder = [];
window.paste_num_tabvar_all = {}; window.paste_num_tabvar_all = {};
function getSyncScriptParams() {
var scripts = document.getElementsByTagName('script');
var lastScript = scripts[scripts.length-1];
var scriptName = lastScript;
return {
urlstuff : scriptName.getAttribute('data-urlstuff'),
urllog : scriptName.getAttribute('data-urllog')
};
}
var urlstuff = getSyncScriptParams().urlstuff;
var urllog = getSyncScriptParams().urllog;
//If we do not received info from mixer, set pastes_num to 0 //If we do not received info from mixer, set pastes_num to 0
function checkIfReceivedData(){ function checkIfReceivedData(){
for (i in list_feeder) { for (i in list_feeder) {
@ -27,8 +40,7 @@ function initfunc( csvay, scroot) {
}; };
function update_values() { function update_values() {
$SCRIPT_ROOT = window.scroot ; $.getJSON(urlstuff,
$.getJSON($SCRIPT_ROOT+"/_stuff",
function(data) { function(data) {
window.glob_tabvar = data; window.glob_tabvar = data;
}); });
@ -122,7 +134,7 @@ function initfunc( csvay, scroot) {
window.scroot = scroot; window.scroot = scroot;
}; };
var source = new EventSource('/_logs'); var source = new EventSource(urllog);
source.onmessage = function(event) { source.onmessage = function(event) {
var feed = jQuery.parseJSON( event.data ); var feed = jQuery.parseJSON( event.data );

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

@ -1,10 +1,22 @@
/* Already defined variable (Before the input) /* Already defined variable (Before the input)
* *
* var chart_1_num_day = 5; * var chart_1_num_day = 5;
* var chart_2_num_day = 15; * var chart_2_num_day = 15;
* *
*/ */
function getSyncScriptParams() {
var scripts = document.getElementsByTagName('script');
var lastScript = scripts[scripts.length-1];
var scriptName = lastScript;
return {
url_providersChart : scriptName.getAttribute('data-url_providersChart'),
url_moduleCharts : scriptName.getAttribute('data-url_moduleCharts'),
};
}
var url_providersChart = getSyncScriptParams().url_providersChart;
var url_moduleCharts = getSyncScriptParams().url_moduleCharts;
/* VARIABLES */ /* VARIABLES */
var pie_threshold = 0.05 var pie_threshold = 0.05
@ -29,7 +41,7 @@
grid: { hoverable: true, clickable: true }, grid: { hoverable: true, clickable: true },
legend: { show: false }, legend: { show: false },
}; };
/* Linked graph - remember the data */ /* Linked graph - remember the data */
var plot_data_old = [] var plot_data_old = []
var plot_old = [] var plot_old = []
@ -46,23 +58,24 @@ function labelFormatter(label, series) {
function plot_top_graph(module_name, init){ 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 ? url_providersChart : ("num" == module_name ? url_providersChart : url_moduleCharts);
console.log(moduleCharts)
var tot_sum = 0; // used to detect elements placed 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 var data_other = []; // used to detect elements placed in 'Other' pie's part
var createPie = $.getJSON($SCRIPT_ROOT+"/_"+moduleCharts+"?moduleName="+module_name+"&num_day="+chart_1_num_day, var createPie = $.getJSON(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++){
if (i==0 && data[0][0] == "passed_days"){ // If there is no data today, take it from the past if (i==0 && data[0][0] == "passed_days"){ // If there is no data today, take it from the past
if (data[0][1] > 0 && data[0][1] < 7){ // If data is [1:6] day(s) old, put the panel in yellow if (data[0][1] > 0 && data[0][1] < 7){ // If data is [1:6] day(s) old, put the panel in yellow
$("#day-"+module_name).text(data[0][1] + " Day(s) ago "); $("#day-"+module_name).text(data[0][1] + " Day(s) ago ");
$("#panel-"+module_name).removeClass("panel-green"); $("#panel-"+module_name).removeClass("panel-green");
$("#panel-"+module_name).addClass("panel-yellow"); $("#panel-"+module_name).addClass("panel-yellow");
} else if (data[0][1] > 6) { // data old of more than 7 days, put the panel in red } else if (data[0][1] > 6) { // data old of more than 7 days, put the panel in red
$("#day-"+module_name).text(data[0][1] + " Day(s) ago "); $("#day-"+module_name).text(data[0][1] + " Day(s) ago ");
$("#panel-"+module_name).removeClass("panel-green"); $("#panel-"+module_name).removeClass("panel-green");
$("#panel-"+module_name).addClass("panel-red"); $("#panel-"+module_name).addClass("panel-red");
} }
@ -81,29 +94,29 @@ function plot_top_graph(module_name, init){
if (init){ //prevent multiple binding due to the refresh function if (init){ //prevent multiple binding due to the refresh function
$("#flot-pie-chart-"+module_name).bind("plotclick", function (event, pos, item) { $("#flot-pie-chart-"+module_name).bind("plotclick", function (event, pos, item) {
if (item == null) if (item == null)
return; return;
var clicked_label = item.series.label; var clicked_label = item.series.label;
if (module_name == "size"){ // if Provider pie chart clicked, draw the two bar charts if (module_name == "size"){ // if Provider pie chart clicked, draw the two bar charts
update_bar_chart(moduleCharts, module_name, "#flot-bar-chart-"+module_name, clicked_label, update_bar_chart(moduleCharts, module_name, "#flot-bar-chart-"+module_name, clicked_label,
item.series.color, "%m/%d", false); item.series.color, "%m/%d", false);
update_bar_chart(moduleCharts, "num", "#flot-bar-chart-"+"num", clicked_label, update_bar_chart(moduleCharts, "num", "#flot-bar-chart-"+"num", clicked_label,
item.series.color, "%m/%d", true); item.series.color, "%m/%d", true);
} }
else if (module_name == "num"){ else if (module_name == "num"){
update_bar_chart(moduleCharts, module_name, "#flot-bar-chart-"+module_name, clicked_label, update_bar_chart(moduleCharts, module_name, "#flot-bar-chart-"+module_name, clicked_label,
item.series.color, "%m/%d", false); item.series.color, "%m/%d", false);
update_bar_chart(moduleCharts, "size", "#flot-bar-chart-"+"size", clicked_label, update_bar_chart(moduleCharts, "size", "#flot-bar-chart-"+"size", clicked_label,
item.series.color, "%m/%d", true); item.series.color, "%m/%d", true);
} else { } else {
update_bar_chart(moduleCharts, module_name, "#flot-bar-chart-"+module_name, clicked_label, update_bar_chart(moduleCharts, module_name, "#flot-bar-chart-"+module_name, clicked_label,
item.series.color, "%m/%d", true); item.series.color, "%m/%d", true);
} }
}); });
} }
}); });
/**** Bar Chart ****/ /**** Bar Chart ****/
function update_bar_chart(chartUrl, module_name, chartID, involved_item, serie_color, timeformat, can_bind){ function update_bar_chart(chartUrl, module_name, chartID, involved_item, serie_color, timeformat, can_bind){
@ -137,7 +150,7 @@ function plot_top_graph(module_name, init){
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'
involved_item = data_other[i]; involved_item = data_other[i];
var request = $.getJSON($SCRIPT_ROOT+"/_"+chartUrl+"?keywordName="+involved_item+"&moduleName="+module_name+"&bar=true"+"&days="+num_day, var request = $.getJSON(chartUrl+"?keywordName="+involved_item+"&moduleName="+module_name+"&bar=true"+"&days="+num_day,
function(data) { function(data) {
temp_data_bar = [] temp_data_bar = []
for(i=1; i<data.length; i++){ for(i=1; i<data.length; i++){
@ -146,7 +159,7 @@ function plot_top_graph(module_name, init){
temp_data_bar.push([new Date(curr_date[0], curr_date[1]-1, curr_date[2]).getTime() + offset, data[i][1].toFixed(2)]); temp_data_bar.push([new Date(curr_date[0], curr_date[1]-1, curr_date[2]).getTime() + offset, data[i][1].toFixed(2)]);
} }
// Insert temp_data_bar in order so that color and alignement correspond for the provider graphs // Insert temp_data_bar in order so that color and alignement correspond for the provider graphs
all_other_temp_data.splice(data_other.indexOf(data[0]), 0, [ data[0], temp_data_bar, data_other.indexOf(data[0])]); all_other_temp_data.splice(data_other.indexOf(data[0]), 0, [ data[0], temp_data_bar, data_other.indexOf(data[0])]);
} }
) )
promises.push(request); promises.push(request);
@ -184,9 +197,9 @@ function plot_top_graph(module_name, init){
colors: ["#72a555", "#ab62c0", "#c57c3c", "#638ccc", "#ca5670"] colors: ["#72a555", "#ab62c0", "#c57c3c", "#638ccc", "#ca5670"]
}) })
/* rememeber the data for the two provider graph */ /* rememeber the data for the two provider graph */
if (chartUrl == "providersChart"){ if (chartUrl == url_providersChart){
if (plot_data_old.length>1){ // avoid adding plot_data for previous clicked pie part if (plot_data_old.length>1){ // avoid adding plot_data for previous clicked pie part
plot_data_old = []; plot_data_old = [];
plot_old = []; plot_old = [];
@ -201,13 +214,13 @@ function plot_top_graph(module_name, init){
binder("num"); binder("num");
else if (module_name == "num") else if (module_name == "num")
binder("size"); binder("size");
} }
}); });
} else { // Normal pie's part clicked } else { // Normal pie's part clicked
$.getJSON($SCRIPT_ROOT+"/_"+chartUrl+"?keywordName="+involved_item+"&moduleName="+module_name+"&bar=true"+"&days="+num_day, $.getJSON(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=1; i<data.length; i++){ for(i=1; i<data.length; i++){
@ -245,7 +258,7 @@ function plot_top_graph(module_name, init){
} }
}); });
} }
}; // end update_bar_chart }; // end update_bar_chart
} // end plot_top_graph } // end plot_top_graph
@ -261,7 +274,7 @@ function binder(module_name){
var formated_date = date.getMonth()+'/'+date.getDate(); var formated_date = date.getMonth()+'/'+date.getDate();
var color = item.series.color; var color = item.series.color;
var color_opac = "rgba" + color.slice(3, color.length-1)+",0.15)"; var color_opac = "rgba" + color.slice(3, color.length-1)+",0.15)";
// display the hovered value in the chart div // display the hovered value in the chart div
$("#tooltip_graph-"+module_name).html(item.series.label + " of " + formated_date + " = <b>" + y+"</b>") $("#tooltip_graph-"+module_name).html(item.series.label + " of " + formated_date + " = <b>" + y+"</b>")
.css({padding: "2px", width: 'auto', 'background': color_opac , 'border': "3px solid "+color}) .css({padding: "2px", width: 'auto', 'background': color_opac , 'border': "3px solid "+color})
@ -269,7 +282,7 @@ function binder(module_name){
/* If provider bar chart hovered, highlight and display associated value */ /* If provider bar chart hovered, highlight and display associated value */
if (module_name == "size" || module_name == "num"){ if (module_name == "size" || module_name == "num"){
new_module_name = module_name == "size" ? "num" : "size"; new_module_name = module_name == "size" ? "num" : "size";
/* Used to get the corresponding associated value for providers charts */ /* Used to get the corresponding associated value for providers charts */

28
var/www/static/js/sentiment_plot.js
View file

@ -1,10 +1,20 @@
var li_text = "<li><div class='checkbox'></div><label class='provider'><input value='" var li_text = "<li><div class='checkbox'></div><label class='provider'><input value='"
var li_text_mid = "' type='checkbox'></input> " var li_text_mid = "' type='checkbox'></input> "
var li_text_end = "</label></li>" var li_text_end = "</label></li>"
function getSyncScriptParams() {
var scripts = document.getElementsByTagName('script');
var lastScript = scripts[scripts.length-1];
var scriptName = lastScript;
return {
url_sentiment_analysis : scriptName.getAttribute('data-url_sentiment_analysis'),
};
}
var url_sentiment_analysis = getSyncScriptParams().url_sentiment_analysis;
/* Get Providers List and display them by row */ /* Get Providers List and display them by row */
$.getJSON('/sentiment_analysis_plot_tool_getdata/?getProviders=True', function(data){ $.getJSON(url_sentiment_analysis + '?getProviders=True', function(data){
for(i=0; i<data.length; i++){ for(i=0; i<data.length; i++){
var providerList = i%2 == 0 ? '#providerList1' : '#providerList2'; var providerList = i%2 == 0 ? '#providerList1' : '#providerList2';
$(providerList).append(li_text + data[i] + li_text_mid + data[i] + li_text_end); $(providerList).append(li_text + data[i] + li_text_mid + data[i] + li_text_end);
@ -29,7 +39,7 @@ $( ".sliderRange" ).slider({
$( "#amount" ).val( new Date($( ".sliderRange" ).slider( "values", 0 )).toLocaleDateString() + $( "#amount" ).val( new Date($( ".sliderRange" ).slider( "values", 0 )).toLocaleDateString() +
" - " + new Date($( ".sliderRange" ).slider( "values", 1 )).toLocaleDateString() ); " - " + new Date($( ".sliderRange" ).slider( "values", 1 )).toLocaleDateString() );
$('#plot_btn').click(plotData); $('#plot_btn').click(plotData);
/* Plot the requested data (if available) stored in slider and checkboxes */ /* Plot the requested data (if available) stored in slider and checkboxes */
function plotData(){ function plotData(){
@ -44,9 +54,9 @@ function plotData(){
bars: {show: true, barWidth: 60*60*1000}, bars: {show: true, barWidth: 60*60*1000},
shadowSize: 0 shadowSize: 0
}, },
grid: { grid: {
hoverable: true, hoverable: true,
clickable: true, clickable: true,
tickColor: "#f9f9f9", tickColor: "#f9f9f9",
borderWidth: 0 borderWidth: 0
}, },
@ -61,10 +71,10 @@ function plotData(){
} }
var query = $( "input:checked[value]" ).map(function () {return this.value;}).get().join(","); var query = $( "input:checked[value]" ).map(function () {return this.value;}).get().join(",");
var Qdate = new Date($( ".sliderRange" ).slider( "values", 0 )).toLocaleDateString() +'-'+ new Date($( ".sliderRange" ).slider( "values", 1 )).toLocaleDateString(); var Qdate = new Date($( ".sliderRange" ).slider( "values", 0 )).toLocaleDateString() +'-'+ new Date($( ".sliderRange" ).slider( "values", 1 )).toLocaleDateString();
// retreive the data from the server // retreive the data from the server
$.getJSON('/sentiment_analysis_plot_tool_getdata/?getProviders=False&query='+query+'&Qdate='+Qdate, function(data){ $.getJSON(url_sentiment_analysis + '?getProviders=False&query='+query+'&Qdate='+Qdate, function(data){
var to_plot = []; var to_plot = [];
for (provider in data){ for (provider in data){
var nltk_data = Object.keys(data[provider]).map(function (key) { return data[provider][key]; }); var nltk_data = Object.keys(data[provider]).map(function (key) { return data[provider][key]; });
@ -87,7 +97,7 @@ function plotData(){
} }
XY_data.push([nltk_key[i]*1000, pos-neg]); XY_data.push([nltk_key[i]*1000, pos-neg]);
} }
to_plot.push({ data: XY_data, label: provider}); to_plot.push({ data: XY_data, label: provider});
} }
var plot = $.plot($("#graph"), to_plot, graph_options); var plot = $.plot($("#graph"), to_plot, graph_options);
}); });

16
var/www/static/js/sentiment_trending.js
View file

@ -1,5 +1,17 @@
/* Functions and config */ /* Functions and config */
function getSyncScriptParams() {
var scripts = document.getElementsByTagName('script');
var lastScript = scripts[scripts.length-1];
var scriptName = lastScript;
return {
url_sentiment_analysis_getplotdata : scriptName.getAttribute('data-url_sentiment_analysis_getplotdata'),
};
}
var url_sentiment_analysis_getplotdata = getSyncScriptParams().url_sentiment_analysis_getplotdata;
function add_new_graph_today(id) { function add_new_graph_today(id) {
return "<div id=\"panel-today\" class=\"panel panel-default pannelToday"+id+"\">" + return "<div id=\"panel-today\" class=\"panel panel-default pannelToday"+id+"\">" +
"<div class=\"panel-heading\">" + "<div class=\"panel-heading\">" +
@ -100,7 +112,7 @@ var totNumGraph = 0;
// When everything is terminated, plot the widgets (Gauge, canvasJS, table) // When everything is terminated, plot the widgets (Gauge, canvasJS, table)
// input: all - set to 'True' if you take all providers // input: all - set to 'True' if you take all providers
function draw_page(all) { function draw_page(all) {
$.getJSON("/sentiment_analysis_getplotdata/?getProviders=True&all="+all, $.getJSON(url_sentiment_analysis_getplotdata + "?getProviders=True&all="+all,
function(data) { function(data) {
var promises = []; var promises = [];
@ -137,7 +149,7 @@ function draw_page(all) {
// input - provider: The povider name to be plotted // input - provider: The povider name to be plotted
// input - graphNum: The number of the graph (Use to plot on correct div) // input - graphNum: The number of the graph (Use to plot on correct div)
function query_and_plot(provider, graphNum) { function query_and_plot(provider, graphNum) {
var query_plot = $.getJSON("/sentiment_analysis_getplotdata/?provider="+provider, var query_plot = $.getJSON(url_sentiment_analysis_getplotdata + "?provider="+provider,
function(data) { function(data) {
var plot_data = []; var plot_data = [];
var array_provider = Object.keys(data); var array_provider = Object.keys(data);

53
var/www/static/js/trendingchart.js
View file

@ -1,11 +1,22 @@
/* Already defined variable (Before the input) /* Already defined variable (Before the input)
* *
* var chart_1_num_day = 5; * var chart_1_num_day = 5;
* var chart_2_num_day = 15; * var chart_2_num_day = 15;
* *
*/ */
function getSyncScriptParams() {
var scripts = document.getElementsByTagName('script');
var lastScript = scripts[scripts.length-1];
var scriptName = lastScript;
return {
url_progressionCharts : scriptName.getAttribute('data-url_progressionCharts'),
};
}
var url_progressionCharts = getSyncScriptParams().url_progressionCharts;
function plot_top_graph(trendingName, init){ function plot_top_graph(trendingName, init){
/**** Flot Pie Chart ****/ /**** Flot Pie Chart ****/
var tot_sum = 0; // used to detect elements placed in 'Other' pie's part var tot_sum = 0; // used to detect elements placed in 'Other' pie's part
@ -13,8 +24,8 @@ function plot_top_graph(trendingName, init){
var pie_threshold = 0.05 var pie_threshold = 0.05
var options = { var options = {
series: { series: {
pie: { pie: {
show: true, show: true,
radius: 3/5, radius: 3/5,
combine: { combine: {
@ -29,22 +40,22 @@ function plot_top_graph(trendingName, init){
opacity: 0.5, opacity: 0.5,
color: '#000' color: '#000'
} }
} }
} }
}, },
grid: { hoverable: true, clickable: true }, grid: { hoverable: true, clickable: true },
legend: { show: false } legend: { show: false }
}; };
function labelFormatter(label, series) { function labelFormatter(label, series) {
return "<div style='font-size:8pt; text-align:center; padding:2px; color:white;'>" return "<div style='font-size:8pt; text-align:center; padding:2px; color:white;'>"
+ label + "<br/>" + Math.round(series.percent) + "%</div>"; + label + "<br/>" + Math.round(series.percent) + "%</div>";
} }
// Graph1 // Graph1
$.getJSON($SCRIPT_ROOT+"/_progressionCharts?trendingName="+trendingName+"&num_day="+chart_1_num_day, $.getJSON(url_progressionCharts+"?trendingName="+trendingName+"&num_day="+chart_1_num_day,
function(data) { function(data) {
temp_data_pie = []; temp_data_pie = [];
for(i=0; i<data.length; i++){ for(i=0; i<data.length; i++){
@ -60,10 +71,10 @@ function plot_top_graph(trendingName, init){
$.plot($("#flot-pie-chart1-"+trendingName), temp_data_pie, options); $.plot($("#flot-pie-chart1-"+trendingName), temp_data_pie, options);
if (init){ //prevent multiple binding due to the refresh function if (init){ //prevent multiple binding due to the refresh function
setTimeout(function() { setTimeout(function() {
$("#flot-pie-chart1-"+trendingName).bind("plotclick", function (event, pos, item) { $("#flot-pie-chart1-"+trendingName).bind("plotclick", function (event, pos, item) {
if (item == null) if (item == null)
return; return;
var clicked_label = item.series.label; var clicked_label = item.series.label;
update_bar_chart("#flot-bar-chart1-"+trendingName, clicked_label, item.series.color, chart_1_num_day, "%m/%d"); update_bar_chart("#flot-bar-chart1-"+trendingName, clicked_label, item.series.color, chart_1_num_day, "%m/%d");
update_bar_chart("#flot-bar-chart2-"+trendingName, clicked_label, item.series.color, chart_2_num_day); update_bar_chart("#flot-bar-chart2-"+trendingName, clicked_label, item.series.color, chart_2_num_day);
@ -71,8 +82,8 @@ function plot_top_graph(trendingName, init){
}, 500); }, 500);
} }
}); });
// flot bar char // flot bar char
function update_bar_chart(chartID, involved_item, serie_color, num_day, timeformat, can_bind){ function update_bar_chart(chartID, involved_item, serie_color, num_day, timeformat, can_bind){
var barOptions = { var barOptions = {
@ -90,9 +101,9 @@ function plot_top_graph(trendingName, init){
tooltip: true, tooltip: true,
tooltipOpts: { content: "x: %x, y: %y" } tooltipOpts: { content: "x: %x, y: %y" }
}; };
if (involved_item == "Other"){ if (involved_item == "Other"){
var all_other_temp_data = []; // the data_bar of all series var all_other_temp_data = []; // the data_bar of all series
var temp_data_bar; //the data_bar associated with one serie var temp_data_bar; //the data_bar associated with one serie
var promises = []; // Use to plot when everything has been received var promises = []; // Use to plot when everything has been received
@ -100,7 +111,7 @@ function plot_top_graph(trendingName, init){
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'
involved_item = data_other[i]; involved_item = data_other[i];
var request = $.getJSON($SCRIPT_ROOT+"/_progressionCharts?attributeName="+involved_item+"&bar=true"+"&days="+num_day, var request = $.getJSON(url_progressionCharts+"?attributeName="+involved_item+"&bar=true"+"&days="+num_day,
function(data) { function(data) {
temp_data_bar = [] temp_data_bar = []
for(i=1; i<data.length; i++){ for(i=1; i<data.length; i++){
@ -108,10 +119,10 @@ function plot_top_graph(trendingName, init){
var offset = (data_other.length/2 - data_other.indexOf(data[0]))*10000000 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].toFixed(2)]); temp_data_bar.push([new Date(curr_date[0], curr_date[1]-1, curr_date[2]).getTime() + offset, data[i][1].toFixed(2)]);
//console.log(new Date(curr_date[0], curr_date[1]-1, curr_date[2]).getTime() + offset); //console.log(new Date(curr_date[0], curr_date[1]-1, curr_date[2]).getTime() + offset);
} }
// Insert temp_data_bar in order so that color and alignement correspond for the provider graphs // Insert temp_data_bar in order so that color and alignement correspond for the provider graphs
all_other_temp_data.splice(data_other.indexOf(data[0]), 0, [ data[0], temp_data_bar, data_other.indexOf(data[0])]); all_other_temp_data.splice(data_other.indexOf(data[0]), 0, [ data[0], temp_data_bar, data_other.indexOf(data[0])]);
} }
) )
promises.push(request); promises.push(request);
@ -153,7 +164,7 @@ function plot_top_graph(trendingName, init){
} else { } else {
$.getJSON($SCRIPT_ROOT+"/_progressionCharts?attributeName="+involved_item+"&bar=true"+"&days="+num_day, $.getJSON(url_progressionCharts+"?attributeName="+involved_item+"&bar=true"+"&days="+num_day,
function(data) { function(data) {
var temp_data_bar = [] var temp_data_bar = []
for(i=1; i<data.length; i++){ for(i=1; i<data.length; i++){
@ -183,7 +194,7 @@ function binder(module_name){
var formated_date = date.getMonth()+'/'+date.getDate(); var formated_date = date.getMonth()+'/'+date.getDate();
var color = item.series.color; var color = item.series.color;
var color_opac = "rgba" + color.slice(3, color.length-1)+",0.15)"; var color_opac = "rgba" + color.slice(3, color.length-1)+",0.15)";
// display the hovered value in the chart div // display the hovered value in the chart div
$("#tooltip_graph1-"+module_name).html(item.series.label + " of " + formated_date + " = <b>" + y+"</b>") $("#tooltip_graph1-"+module_name).html(item.series.label + " of " + formated_date + " = <b>" + y+"</b>")
.css({padding: "2px", width: 'auto', 'background': color_opac , 'border': "3px solid "+color}) .css({padding: "2px", width: 'auto', 'background': color_opac , 'border': "3px solid "+color})
@ -191,7 +202,7 @@ function binder(module_name){
} }
}); });
$("#flot-bar-chart2-"+module_name).bind("plothover.customHandler", function (event, pos, item) { $("#flot-bar-chart2-"+module_name).bind("plothover.customHandler", function (event, pos, item) {
if (item) { // a correct item is hovered if (item) { // a correct item is hovered
var x = item.datapoint[0] var x = item.datapoint[0]
@ -200,7 +211,7 @@ function binder(module_name){
var formated_date = date.getMonth()+'/'+date.getDate(); var formated_date = date.getMonth()+'/'+date.getDate();
var color = item.series.color; var color = item.series.color;
var color_opac = "rgba" + color.slice(3, color.length-1)+",0.15)"; var color_opac = "rgba" + color.slice(3, color.length-1)+",0.15)";
// display the hovered value in the chart div // display the hovered value in the chart div
$("#tooltip_graph2-"+module_name).html(item.series.label + " of " + formated_date + " = <b>" + y+"</b>") $("#tooltip_graph2-"+module_name).html(item.series.label + " of " + formated_date + " = <b>" + y+"</b>")
.css({padding: "2px", width: 'auto', 'background': color_opac , 'border': "3px solid "+color}) .css({padding: "2px", width: 'auto', 'background': color_opac , 'border': "3px solid "+color})