AIL/ail-framework
7
0
Fork 0
mirror of https://github.com/ail-project/ail-framework.git synced 2024-09-20 07:58:29 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Added link to data in analysis trending + fixed tooltip bug in sparkline

Browse source
This commit is contained in:
Mokaddem 2016-08-15 12:57:39 +02:00
parent 6c7f660052
commit d8c84ec674
2 changed files with 214 additions and 129 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1,16 +1,4 @@
/* ---------- Sparkline Charts ---------- */
//generate random number for charts
randNum = function(){
var num = Math.random();
if(num > 0.5)
num = -1+num;
//console.log(Math.floor(num*101));
return Math.floor(num*101);
//return (Math.floor( Math.random()* (1+40-20) ) ) + 20;
}
var sparklineOptions = { var sparklineOptions = {
height: 80,//Height of the chart - Defaults to 'auto' (line height of the containing tag) height: 80,//Height of the chart - Defaults to 'auto' (line height of the containing tag)
@ -23,7 +11,8 @@ randNum = function(){
barWidth: 2, barWidth: 2,
barColor: '#00bf5f', barColor: '#00bf5f',
negBarColor: '#f22929', negBarColor: '#f22929',
zeroColor: '#ffff00' zeroColor: '#ffff00',
}; };
@ -39,12 +28,17 @@ $.getJSON("/sentiment_analysis_getplotdata/",
var oneHour = 60*60; var oneHour = 60*60;
var oneWeek = oneHour*24*7; var oneWeek = oneHour*24*7;
var all_graph_day_sum = 0.0;
var all_graph_hour_sum = 0.0;
for (graphNum=0; graphNum<8; graphNum++) { for (graphNum=0; graphNum<8; graphNum++) {
var max_value = 0.0;
var graph_data = []; var graph_data = [];
var spark_data = []; var spark_data = [];
var curr_provider = array_provider[graphNum]; var curr_provider = array_provider[graphNum];
var curr_sum = 0.0; var curr_sum = 0.0;
var day_sum = 0.0; var day_sum = 0.0;
var hour_sum = 0.0;
for(curr_date=dateStart; curr_date<dateStart+oneWeek; curr_date+=oneHour){ for(curr_date=dateStart; curr_date<dateStart+oneWeek; curr_date+=oneHour){
var data_array = data[curr_provider][curr_date]; var data_array = data[curr_provider][curr_date];
@ -52,7 +46,7 @@ $.getJSON("/sentiment_analysis_getplotdata/",
if (data_array.length == 0){ if (data_array.length == 0){
graph_data.push({'neg': 0.0, 'neu': 0.0, 'pos': 0.0, 'compoundPos': 0.0, 'compoundNeg': 0.0}); graph_data.push({'neg': 0.0, 'neu': 0.0, 'pos': 0.0, 'compoundPos': 0.0, 'compoundNeg': 0.0});
spark_data.push(0); spark_data.push(0);
} else { //compute avg } else { //compute avg for a given date for a given graph
var compPosAvg = 0; var compPosAvg = 0;
var compNegAvg = 0; var compNegAvg = 0;
var pos = 0; var pos = 0;
@ -77,23 +71,35 @@ $.getJSON("/sentiment_analysis_getplotdata/",
graph_data.push({'neg': neg, 'neu': neu, 'pos': pos, 'compoundPos': compPosAvg, 'compoundNeg': compNegAvg}); graph_data.push({'neg': neg, 'neu': neu, 'pos': pos, 'compoundPos': compPosAvg, 'compoundNeg': compNegAvg});
spark_data.push(pos-neg); spark_data.push(pos-neg);
curr_sum += (pos-neg); curr_sum += (pos-neg);
max_value = Math.abs(pos-neg) > max_value ? Math.abs(pos-neg) : max_value;
if(curr_date >= dateStart+oneWeek-24*oneHour){ if(curr_date >= dateStart+oneWeek-24*oneHour){
day_sum += (pos-neg); day_sum += (pos-neg);
} }
if(curr_date >= dateStart+oneWeek-oneHour){
hour_sum += (pos-neg);
}
} }
} }
all_graph_day_sum += day_sum;
all_graph_hour_sum += hour_sum;
var curr_avg = curr_sum / (oneWeek/oneHour); var curr_avg = curr_sum / (oneWeek/oneHour);
graph_avg.push(curr_avg); //var curr_avg = curr_sum / (spark_data.length);
graph_avg.push([curr_provider, curr_avg]);
plot_data.push(spark_data); plot_data.push(spark_data);
all_data.push(graph_data); all_data.push(graph_data);
sparklineOptions.chartRangeMax = max_value;
sparklineOptions.chartRangeMin = -max_value;
// print week // print week
var num = graphNum + 1; var num = graphNum + 1;
var placeholder = '.sparkLineStatsWeek' + num; var placeholder = '.sparkLineStatsWeek' + num;
$(placeholder).sparkline(plot_data[graphNum], sparklineOptions); $(placeholder).sparkline(plot_data[graphNum], sparklineOptions);
//console.log(plot_data[graphNum]); $(placeholder+'t').text(curr_provider);
$(placeholder+'s').text(curr_avg.toFixed(5));
sparklineOptions.barWidth = 7; sparklineOptions.barWidth = 7;
$(placeholder+'b').sparkline([curr_avg], sparklineOptions); $(placeholder+'b').sparkline([curr_avg], sparklineOptions);
@ -106,26 +112,18 @@ $.getJSON("/sentiment_analysis_getplotdata/",
placeholder = '.sparkLineStatsToday' + num; placeholder = '.sparkLineStatsToday' + num;
sparklineOptions.barWidth = 14; sparklineOptions.barWidth = 14;
$(placeholder).sparkline(data_today, sparklineOptions); $(placeholder).sparkline(data_today, sparklineOptions);
$(placeholder+'t').text(curr_provider);
//console.log(day_sum);
sparklineOptions.barWidth = 7; sparklineOptions.barWidth = 7;
$(placeholder+'b').sparkline([day_sum/24], sparklineOptions); $(placeholder+'b').sparkline([day_sum/24], sparklineOptions);
//$(placeholder+'b').sparkline(10, sparklineOptions);
sparklineOptions.barWidth = 2; sparklineOptions.barWidth = 2;
}//for loop }//for loop
}
);
/* ---------------- Gauge ---------------- */
var gaugeOptions = {
/* ---------------- Gauge ---------------- */
var gaugeOptions = {
animateEasing: true, animateEasing: true,
elementWidth: 200, elementWidth: 200,
@ -144,40 +142,65 @@ var gaugeOptions = {
colorArcFg: '#FF3300', colorArcFg: '#FF3300',
animateSpeed: 1, animateSpeed: 1,
}; };
// Clone object // Clone object
var gaugeOptions2 = jQuery.extend(true, {}, gaugeOptions); var gaugeOptions2 = jQuery.extend(true, {}, gaugeOptions);
var gaugeOptions3 = jQuery.extend(true, {}, gaugeOptions); var gaugeOptions3 = jQuery.extend(true, {}, gaugeOptions);
gaugeOptions.appendTo = '#gauge_today_last_hour'; gaugeOptions.appendTo = '#gauge_today_last_hour';
gaugeOptions.dialLabel = 'Last hour'; gaugeOptions.dialLabel = 'Last hour';
gaugeOptions.elementId = 'gauge1'; gaugeOptions.elementId = 'gauge1';
gaugeOptions.inc = -0.9; gaugeOptions.inc = all_graph_hour_sum / 8;
var gauge_today_last_hour = new FlexGauge(gaugeOptions); var gauge_today_last_hour = new FlexGauge(gaugeOptions);
gaugeOptions2.appendTo = '#gauge_today_last_days'; gaugeOptions2.appendTo = '#gauge_today_last_days';
gaugeOptions2.dialLabel = 'Today'; gaugeOptions2.dialLabel = 'Today';
gaugeOptions2.elementId = 'gauge2'; gaugeOptions2.elementId = 'gauge2';
gaugeOptions2.inc = 0.4; gaugeOptions2.inc = all_graph_day_sum / 8;
var gauge_today_last_days = new FlexGauge(gaugeOptions2); var gauge_today_last_days = new FlexGauge(gaugeOptions2);
gaugeOptions3.appendTo = '#gauge_week'; gaugeOptions3.appendTo = '#gauge_week';
gaugeOptions3.dialLabel = 'Week'; gaugeOptions3.dialLabel = 'Week';
gaugeOptions3.elementId = 'gauge3'; gaugeOptions3.elementId = 'gauge3';
gaugeOptions3.inc = -0.3;
var gauge_today_last_days = new FlexGauge(gaugeOptions3); var graph_avg_sum = 0.0;
for (i=0; i<graph_avg.length; i++)
graph_avg_sum += graph_avg[i][1];
gaugeOptions3.inc = graph_avg_sum / graph_avg.length;
var gauge_today_last_days = new FlexGauge(gaugeOptions3);
/* --------- Sort providers -------- */
graph_avg.sort(function(a, b){return b[1]-a[1]});
for (i=1; i<6; i++){
$('.worst'+i).text(graph_avg[7-(i-1)][0]);
$('.best'+i).text(graph_avg[i-1][0]);
}
/* ----------- CanvasJS ------------ */
var gauge_data = graph_data.slice(graph_data.length-24*2, graph_data.length-24*1);
var comp_sum_day_pos = 0.0;
var comp_sum_day_neg = 0.0;
var comp_sum_hour_pos = 0.0;
var comp_sum_hour_neg = 0.0;
for (i=1; i< gauge_data.length; i++){
comp_sum_day_pos += gauge_data[i].compoundPos;
comp_sum_day_neg += gauge_data[i].compoundNeg;
if(i >= 24){
comp_sum_hour_pos += gauge_data[i].compoundPos;
comp_sum_hour_neg += gauge_data[i].compoundNeg;
}
}
var options_canvasJS_1 = {
/* ----------- CanvasJS ------------ */
var options_canvasJS = {
animationEnabled: true, animationEnabled: true,
axisY: { axisY: {
@ -196,22 +219,72 @@ var options_canvasJS = {
type: "bar", type: "bar",
color: "green", color: "green",
dataPoints: [ dataPoints: [
{y: 25} {y: comp_sum_hour_pos/8}
] ]
}, },
{ {
type: "bar", type: "bar",
color: "red", color: "red",
dataPoints: [ dataPoints: [
{y: -13} {y: comp_sum_hour_neg/8}
] ]
} }
] ]
}; };
var chart_canvas1 = new CanvasJS.Chart("bar_today_last_hour", options_canvasJS_1);
var options_canvasJS_2 = {
animationEnabled: true,
axisY: {
tickThickness: 0,
lineThickness: 0,
valueFormatString: " ",
gridThickness: 0
},
axisX: {
tickThickness: 0,
lineThickness: 0,
labelFontSize: 0.1,
},
data: [
{
type: "bar",
color: "green",
dataPoints: [
{y: comp_sum_day_pos/8}
]
},
{
type: "bar",
color: "red",
dataPoints: [
{y: comp_sum_day_neg/8}
]
}
]
};
var chart_canvas2 = new CanvasJS.Chart("bar_today_last_days", options_canvasJS_2);
chart_canvas1.render();
chart_canvas2.render();
}
);
var chart_canvas1 = new CanvasJS.Chart("bar_today_last_hour", options_canvasJS);
var chart_canvas2 = new CanvasJS.Chart("bar_today_last_days", options_canvasJS);
chart_canvas1.render();
chart_canvas2.render();

64
var/www/templates/sentiment_analysis_trending.html
View file

@ -18,6 +18,10 @@
<script src="{{ url_for('static', filename='js/jquery.canvasjs.min.js') }}"></script> <script src="{{ url_for('static', filename='js/jquery.canvasjs.min.js') }}"></script>
<style> <style>
.jqstooltip{
box-sizing: content-box;
}
strong { strong {
font-size: 16px; font-size: 16px;
} }
@ -116,7 +120,7 @@
<div class="sparkLineStats"> <div class="sparkLineStats">
<div id="panel-today" class="panel panel-default"> <div id="panel-today" class="panel panel-default">
<div class="panel-heading"> <div class="panel-heading">
<strong>Graph 1</strong> <strong class="sparkLineStatsToday1t">Graph 1</strong>
</div> </div>
<div class="panel-body panelInside"> <div class="panel-body panelInside">
<table class="table"> <table class="table">
@ -131,7 +135,7 @@
</div> </div>
<div id="panel-today" class="panel panel-default"> <div id="panel-today" class="panel panel-default">
<div class="panel-heading"> <div class="panel-heading">
<strong>Graph 2</strong> <strong class="sparkLineStatsToday2t">Graph 2</strong>
</div> </div>
<div class="panel-body panelInside"> <div class="panel-body panelInside">
<table class="table"> <table class="table">
@ -146,7 +150,7 @@
</div> </div>
<div id="panel-today" class="panel panel-default"> <div id="panel-today" class="panel panel-default">
<div class="panel-heading"> <div class="panel-heading">
<strong>Graph 3</strong> <strong class="sparkLineStatsToday3t">Graph 3</strong>
</div> </div>
<div class="panel-body panelInside"> <div class="panel-body panelInside">
<table class="table"> <table class="table">
@ -161,7 +165,7 @@
</div> </div>
<div id="panel-today" class="panel panel-default"> <div id="panel-today" class="panel panel-default">
<div class="panel-heading"> <div class="panel-heading">
<strong>Graph 4</strong> <strong class="sparkLineStatsToday4t">Graph 4</strong>
</div> </div>
<div class="panel-body panelInside"> <div class="panel-body panelInside">
<table class="table"> <table class="table">
@ -180,7 +184,7 @@
<div class="sparkLineStats"> <div class="sparkLineStats">
<div id="panel-today" class="panel panel-default"> <div id="panel-today" class="panel panel-default">
<div class="panel-heading"> <div class="panel-heading">
<strong>Graph 5</strong> <strong class="sparkLineStatsToday5t">Graph 5</strong>
</div> </div>
<div class="panel-body panelInside"> <div class="panel-body panelInside">
<table class="table"> <table class="table">
@ -195,7 +199,7 @@
</div> </div>
<div id="panel-today" class="panel panel-default"> <div id="panel-today" class="panel panel-default">
<div class="panel-heading"> <div class="panel-heading">
<strong>Graph 6</strong> <strong class="sparkLineStatsToday6t">Graph 6</strong>
</div> </div>
<div class="panel-body panelInside"> <div class="panel-body panelInside">
<table class="table"> <table class="table">
@ -210,7 +214,7 @@
</div> </div>
<div id="panel-today" class="panel panel-default"> <div id="panel-today" class="panel panel-default">
<div class="panel-heading"> <div class="panel-heading">
<strong>Graph 7</strong> <strong class="sparkLineStatsToday7t">Graph 7</strong>
</div> </div>
<div class="panel-body panelInside"> <div class="panel-body panelInside">
<table class="table"> <table class="table">
@ -225,7 +229,7 @@
</div> </div>
<div id="panel-today" class="panel panel-default"> <div id="panel-today" class="panel panel-default">
<div class="panel-heading"> <div class="panel-heading">
<strong>Graph 8</strong> <strong class="sparkLineStatsToday8t">Graph 8</strong>
</div> </div>
<div class="panel-body panelInside"> <div class="panel-body panelInside">
<table class="table"> <table class="table">
@ -284,7 +288,8 @@
<div class="sparkLineStats"> <div class="sparkLineStats">
<div id="panel-week" class="panel panel-default"> <div id="panel-week" class="panel panel-default">
<div class="panel-heading"> <div class="panel-heading">
<strong>Graph 1</strong> <strong class="sparkLineStatsWeek1t">Graph 1</strong>
<strong class="sparkLineStatsWeek1s pull-right">Avg</strong>
</div> </div>
<div class="panel-body panelInside"> <div class="panel-body panelInside">
<table class="table"> <table class="table">
@ -299,7 +304,8 @@
</div> </div>
<div id="panel-week" class="panel panel-default"> <div id="panel-week" class="panel panel-default">
<div class="panel-heading"> <div class="panel-heading">
<strong>Graph 2</strong> <strong class="sparkLineStatsWeek2t">Graph 2</strong>
<strong class="sparkLineStatsWeek2s pull-right">Avg</strong>
</div> </div>
<div class="panel-body panelInside"> <div class="panel-body panelInside">
<table class="table"> <table class="table">
@ -314,7 +320,8 @@
</div> </div>
<div id="panel-week" class="panel panel-default"> <div id="panel-week" class="panel panel-default">
<div class="panel-heading"> <div class="panel-heading">
<strong>Graph 3</strong> <strong class="sparkLineStatsWeek3t">Graph 3</strong>
<strong class="sparkLineStatsWeek3s pull-right">Avg</strong>
</div> </div>
<div class="panel-body panelInside"> <div class="panel-body panelInside">
<table class="table"> <table class="table">
@ -329,7 +336,8 @@
</div> </div>
<div id="panel-week" class="panel panel-default"> <div id="panel-week" class="panel panel-default">
<div class="panel-heading"> <div class="panel-heading">
<strong>Graph 4</strong> <strong class="sparkLineStatsWeek4t">Graph 4</strong>
<strong class="sparkLineStatsWeek4s pull-right">Avg</strong>
</div> </div>
<div class="panel-body panelInside"> <div class="panel-body panelInside">
<table class="table"> <table class="table">
@ -348,7 +356,8 @@
<div class="sparkLineStats"> <div class="sparkLineStats">
<div id="panel-week" class="panel panel-default"> <div id="panel-week" class="panel panel-default">
<div class="panel-heading"> <div class="panel-heading">
<strong>Graph 5</strong> <strong class="sparkLineStatsWeek5t">Graph 5</strong>
<strong class="sparkLineStatsWeek5s pull-right">Avg</strong>
</div> </div>
<div class="panel-body panelInside"> <div class="panel-body panelInside">
<table class="table"> <table class="table">
@ -363,7 +372,8 @@
</div> </div>
<div id="panel-week" class="panel panel-default"> <div id="panel-week" class="panel panel-default">
<div class="panel-heading"> <div class="panel-heading">
<strong>Graph 6</strong> <strong class="sparkLineStatsWeek6t">Graph 6</strong>
<strong class="sparkLineStatsWeek6s pull-right">Avg</strong>
</div> </div>
<div class="panel-body panelInside"> <div class="panel-body panelInside">
<table class="table"> <table class="table">
@ -378,7 +388,8 @@
</div> </div>
<div id="panel-week" class="panel panel-default"> <div id="panel-week" class="panel panel-default">
<div class="panel-heading"> <div class="panel-heading">
<strong>Graph 7</strong> <strong class="sparkLineStatsWeek7t">Graph 7</strong>
<strong class="sparkLineStatsWeek7s pull-right">Avg</strong>
</div> </div>
<div class="panel-body panelInside"> <div class="panel-body panelInside">
<table class="table"> <table class="table">
@ -393,7 +404,8 @@
</div> </div>
<div id="panel-week" class="panel panel-default"> <div id="panel-week" class="panel panel-default">
<div class="panel-heading"> <div class="panel-heading">
<strong>Graph 8</strong> <strong class="sparkLineStatsWeek8t">Graph 8</strong>
<strong class="sparkLineStatsWeek8s pull-right">Avg</strong>
</div> </div>
<div class="panel-body panelInside"> <div class="panel-body panelInside">
<table class="table"> <table class="table">
@ -425,24 +437,24 @@
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td>Pastebin</td> <td class="worst1">Pastebin</td>
<td>Ideone</td> <td class="best1">Ideone</td>
</tr> </tr>
<tr> <tr>
<td>Pastebin</td> <td class="worst2">Pastebin</td>
<td>Ideone</td> <td class="best2">Ideone</td>
</tr> </tr>
<tr> <tr>
<td>Pastebin</td> <td class="worst3">Pastebin</td>
<td>Ideone</td> <td class="best3">Ideone</td>
</tr> </tr>
<tr> <tr>
<td>Pastebin</td> <td class="worst4">Pastebin</td>
<td>Ideone</td> <td class="best4">Ideone</td>
</tr> </tr>
<tr> <tr>
<td>Pastebin</td> <td class="worst5">Pastebin</td>
<td>Ideone</td> <td class="best5">Ideone</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>