Added tooltips + slight gauge modification

This commit is contained in:
Mokaddem 2016-08-17 10:43:43 +02:00
parent 894b9efda9
commit c12e67a35a
4 changed files with 35 additions and 21 deletions

View file

@ -157,7 +157,7 @@ class Paste(object):
self.p_nb_lines = line_id
self.p_max_length_line = max_length_line
return (self.p_nb_lines, self.p_max_length_line, array_line_above_threshold)
return (self.p_nb_lines, self.p_max_length_line)
def _get_p_encoding(self):
"""

View file

@ -65,7 +65,6 @@ function plotData(){
// retreive the data from the server
$.getJSON('/sentiment_analysis_plot_tool_getdata/?getProviders=False&query='+query+'&Qdate='+Qdate, function(data){
console.log(data);
var to_plot = [];
for (provider in data){
var nltk_data = Object.keys(data[provider]).map(function (key) { return data[provider][key]; });

View file

@ -54,10 +54,13 @@ $.getJSON("/sentiment_analysis_getplotdata/",
var all_graph_day_sum = 0.0;
var all_graph_hour_sum = 0.0;
var all_graph_hour_maxVal = 0.0;
var all_day_avg = 0.0;
var all_day_avg_maxVal = 0.0;
for (graphNum=0; graphNum<8; graphNum++) {
var max_value = 0.0;
var max_value_day = 0.0;
var graph_data = [];
var spark_data = [];
var curr_provider = array_provider[graphNum];
@ -102,10 +105,11 @@ $.getJSON("/sentiment_analysis_getplotdata/",
max_value = Math.abs(pos-neg) > max_value ? Math.abs(pos-neg) : max_value;
if(curr_date >= dateStart+oneWeek-23*oneHour){
max_value_day = Math.abs(pos-neg) > max_value_day ? Math.abs(pos-neg) : max_value_day;
day_sum += (pos-neg);
day_sum_elem++;
}
if(curr_date >= dateStart+oneWeek-oneHour){
if(curr_date > dateStart+oneWeek-2*oneHour && curr_date <=dateStart+oneWeek-oneHour){
hour_sum += (pos-neg);
}
@ -113,6 +117,7 @@ $.getJSON("/sentiment_analysis_getplotdata/",
}
all_graph_day_sum += day_sum;
all_graph_hour_sum += hour_sum;
all_graph_hour_maxVal = Math.abs(hour_sum) > all_graph_hour_maxVal ? Math.abs(hour_sum) : all_graph_hour_maxVal;
var curr_avg = curr_sum / (curr_sum_elem);
//var curr_avg = curr_sum / (oneWeek/oneHour);
@ -138,7 +143,11 @@ $.getJSON("/sentiment_analysis_getplotdata/",
$(placeholder+'b').sparkline([curr_avg], sparklineOptions);
sparklineOptions.tooltipFormat = '<span style="color: {{color}}">&#9679;</span> {{offset:names}}, {{value}} </span>'
sparklineOptions.barWidth = 2;
sparklineOptions.tooltipValueLookups = { names: offset_to_time};
sparklineOptions.chartRangeMax = max_value_day;
sparklineOptions.chartRangeMin = -max_value_day;
// print today
var data_length = plot_data[graphNum].length;
@ -155,6 +164,7 @@ $.getJSON("/sentiment_analysis_getplotdata/",
var day_avg = isNaN(day_sum/day_sum_elem) ? 0 : day_sum/day_sum_elem;
var day_avg_text = isNaN(day_sum/day_sum_elem) ? 'No data' : (day_avg).toFixed(5);
all_day_avg += day_avg;
all_day_avg_maxVal = Math.abs(day_avg) > all_day_avg_maxVal ? Math.abs(day_avg) : all_day_avg_maxVal;
$(placeholder+'b').sparkline([day_avg], sparklineOptions);
sparklineOptions.tooltipFormat = '<span style="color: {{color}}">&#9679;</span> {{offset:names}}, {{value}} </span>'
sparklineOptions.barWidth = 2;
@ -194,7 +204,7 @@ $.getJSON("/sentiment_analysis_getplotdata/",
gaugeOptions.appendTo = '#gauge_today_last_hour';
gaugeOptions.dialLabel = 'Last hour';
gaugeOptions.elementId = 'gauge1';
var piePercent = (all_graph_hour_sum / 8) / max_value;
var piePercent = (all_graph_hour_sum / 8) / all_graph_hour_maxVal;
gaugeOptions.inc = piePercent;
var gauge_today_last_hour = new FlexGauge(gaugeOptions);
@ -202,7 +212,7 @@ $.getJSON("/sentiment_analysis_getplotdata/",
gaugeOptions2.dialLabel = 'Today';
gaugeOptions2.elementId = 'gauge2';
//piePercent = (all_graph_day_sum / (8*24)) / max_value;
piePercent = (all_day_avg / 8) / max_value;
piePercent = (all_day_avg / 8) / all_day_avg_maxVal;
gaugeOptions2.inc = piePercent;
var gauge_today_last_days = new FlexGauge(gaugeOptions2);
@ -268,6 +278,7 @@ $.getJSON("/sentiment_analysis_getplotdata/",
},
data: [
{
toolTipContent: "<span style='\"'color: {color};'\"'><strong>Positive: </strong></span><span><strong>{y}</strong></span>",
type: "bar",
color: "green",
dataPoints: [
@ -275,6 +286,7 @@ $.getJSON("/sentiment_analysis_getplotdata/",
]
},
{
toolTipContent: "<span style='\"'color: {color};'\"'><strong>Negative: </strong></span><span><strong>{y}</strong></span>",
type: "bar",
color: "red",
dataPoints: [
@ -302,6 +314,7 @@ $.getJSON("/sentiment_analysis_getplotdata/",
},
data: [
{
toolTipContent: "<span style='\"'color: {color};'\"'><strong>Positive: </strong></span><span><strong>{y}</strong></span>",
type: "bar",
color: "green",
dataPoints: [
@ -309,6 +322,7 @@ $.getJSON("/sentiment_analysis_getplotdata/",
]
},
{
toolTipContent: "<span style='\"'color: {color};'\"'><strong>Negative: </strong></span><span><strong>{y}</strong></span>",
type: "bar",
color: "red",
dataPoints: [

View file

@ -110,7 +110,7 @@
<div class="col-lg-12">
<div id="panel-today" class="panel panel-default">
<div class="panel-heading">
<strong>Today's mood</strong>
<strong data-toggle="tooltip" data-placement="right" title="Providers displayed are in the top list in Module Statistics">Today's mood</strong>
</div>
<div class="panel-body">
<!-- left column -->
@ -256,15 +256,15 @@
<!-- right column -->
<div class="col-lg-3">
<div class="well text-center" style="padding: 0px;">
<strong>Mood value</strong>
<strong data-toggle="tooltip" data-placement="top" title="Percentage is computed over the last hour max value">Mood value</strong>
<div id="gauge_today_last_hour"></div>
<strong>Compound by mood</strong>
<strong data-toggle="tooltip" data-placement="top" title="Average of the sentiments' intensity">Compound by mood</strong>
<div id="bar_today_last_hour" style="height: 70px; width: 100%;"></div>
</div>
<div class="well text-center" style="padding: 0px;">
<strong>Mood value</strong>
<strong data-toggle="tooltip" data-placement="top" title="Percentage is computed over the today max value">Mood value</strong>
<div id="gauge_today_last_days"></div>
<strong>Compound by mood</strong>
<strong data-toggle="tooltip" data-placement="top" title="Average of the of sentiments' intensity">Compound by mood</strong>
<div id="bar_today_last_days" style="height: 70px; width: 100%;"></div>
</div>
</div>
@ -432,7 +432,7 @@
<!-- right column -->
<div class="col-lg-3">
<div class="well text-center" style="padding: 0px;">
<strong>Mood value</strong>
<strong data-toggle="tooltip" data-placement="top" title="Percentage is computed over the week max value">Mood value</strong>
<div id="gauge_week"></div>
</div>
<div class="well text-center" style="padding: 0px;">
@ -445,24 +445,24 @@
</thead>
<tbody>
<tr>
<td class="worst1">Pastebin</td>
<td class="best1">Ideone</td>
<td class="worst1">worst1</td>
<td class="best1">best1</td>
</tr>
<tr>
<td class="worst2">Pastebin</td>
<td class="best2">Ideone</td>
<td class="worst2">worst2</td>
<td class="best2">best2</td>
</tr>
<tr>
<td class="worst3">Pastebin</td>
<td class="best3">Ideone</td>
<td class="worst3">worst3</td>
<td class="best3">best3</td>
</tr>
<tr>
<td class="worst4">Pastebin</td>
<td class="best4">Ideone</td>
<td class="worst4">worst4</td>
<td class="best4">best4</td>
</tr>
<tr>
<td class="worst5">Pastebin</td>
<td class="best5">Ideone</td>
<td class="worst5">worst5</td>
<td class="best5">best5</td>
</tr>
</tbody>
</table>
@ -495,6 +495,7 @@
$(document).ready(function(){
activePage = $('h1.page-header').attr('data-page');
$("#"+activePage).addClass("active");
$('[data-toggle="tooltip"]').tooltip();
// Reload every 30min
setTimeout(function(){ location.reload(); }, 30*60*1000);