Finnished terms-plot-top-set. Also added possibility to add terms to track or blacklist.

This commit is contained in:
Mokaddem 2016-08-20 15:59:22 +02:00
parent a5117d7cad
commit fb3dea6bd2
3 changed files with 120 additions and 20 deletions

View file

@ -677,6 +677,18 @@ def terms_plot_tool():
return render_template("terms_plot_tool.html")
@app.route("/terms_plot_tool_data/")
def terms_plot_tool_data():
num_day = int(request.args.get('num_day'))
term = request.args.get('term')
if term is None:
print 'cc'
return jsonify()
@app.route("/terms_plot_top/")
def terms_plot_top():
return render_template("terms_plot_top.html")

View file

@ -76,8 +76,8 @@
<div class="form-group input-group" style="margin-top: 30px;">
<span class="input-group-addon"><span class="glyphicon glyphicon-stats"></span></span>
<input id="followTermInput" class="form-control" placeholder="Term to plot" type="text" style="max-width: 400px;">
<button class="btn btn-info btn-interaction" style="margin-left: 10px;" data-section="followTerm" data-action="add"> Plot a term</button>
<input id="TermInput" class="form-control" placeholder="Term to plot" type="text" style="max-width: 400px;">
<button id="plot-btn" class="btn btn-info btn-interaction" style="margin-left: 10px;" data-section="followTerm" data-action="add"> Plot a term</button>
</div>
</div>
@ -139,13 +139,62 @@
}
});
$( "#amount" ).val( new Date($( ".sliderRange" ).slider( "values", 0 )).toLocaleDateString() +
" - " + new Date($( ".sliderRange" ).slider( "values", 1 )).toLocaleDateString() );
$('#plot_btn').click(plotData);
$( "#amount" ).val( new Date($( ".sliderRange" ).slider( "values", 0 )).toLocaleDateString() +
" - " + new Date($( ".sliderRange" ).slider( "values", 1 )).toLocaleDateString() );
$('#plot-btn').click(plotData);
});
</script>
<script>
var graph_options = {
series: {
lines: {
show: true,
lineWidth: 2
},
bars: {show: false, barWidth: 60*60*1000},
shadowSize: 0
},
grid: {
hoverable: true,
clickable: true,
tickColor: "#f9f9f9",
borderWidth: 0
},
xaxis: {
mode: "time",
timeformat: "%m/%d",
minTickSize: [1, "day"]
},
yaxis: {
autoscaleMargin: 0.1,
},
}
function plotData(){
var curthis = $(this);
var term = $('#TermInput').val();
console.log(term);
$.getJSON("{{ url_for('terms_plot_top_data') }}", { set: set_month, num_day: 31 }, function(data, status){
var to_plot = [];
for(i=0; i<data.length; i++) {
var curr_data = [];
for(j=0; j<data[i][1].length; j++) {
curr_data.push([data[i][1][j][0]*1000, data[i][1][j][1]]);
}
to_plot.push({ data: curr_data, label: data[i][0]});
}
var plot = $.plot($("#graph"), to_plot, graph_options);
})
}
</script>
</body>
</html>

View file

@ -307,6 +307,10 @@ set_today = "TopTermFreq_set_day";
set_week = "TopTermFreq_set_week";
set_month = "TopTermFreq_set_month";
var plot_today;
var plot_week;
var plot_month;
var promises = []; // Used to know when everything has been received
promises.push($.getJSON("{{ url_for('terms_plot_top_data') }}", { set: set_today, num_day: 1 }, function(data, status){
@ -323,15 +327,14 @@ promises.push($.getJSON("{{ url_for('terms_plot_top_data') }}", { set: set_today
}
to_plot.push({ data: curr_data, label: data[i][0]});
if ( i < (data.length/2))
table_today.append("<tr><td>"+data[i][0]+"</td><td>"+data[i][2]+"</td><td>"+addbuttons(data[i][0])+"</td><td>"+addcheckbox("graph-today", data[i][0])+"</td></tr>")
table_today.append("<tr><td>"+data[i][0]+"</td><td>"+data[i][2]+"</td><td>"+addbuttons(data[i][0])+"</td><td>"+addcheckbox("today", data[i][0])+"</td></tr>")
else
table_today2.append("<tr><td>"+data[i][0]+"</td><td>"+data[i][2]+"</td><td>"+addbuttons(data[i][0])+"</td><td>"+addcheckbox("graph-today", data[i][0])+"</td></tr>")
table_today2.append("<tr><td>"+data[i][0]+"</td><td>"+data[i][2]+"</td><td>"+addbuttons(data[i][0])+"</td><td>"+addcheckbox("today", data[i][0])+"</td></tr>")
}
var plot_today = $.plot($("#graph-today"), to_plot, graph_options);
plot_today = $.plot($("#graph-today"), to_plot, graph_options);
}));
promises.push($.getJSON("{{ url_for('terms_plot_top_data') }}", { set: set_week, num_day: 7 }, function(data, status){
console.log(data);
data.sort(function(a, b){return b[2]-a[2];});
// Sort data
var table = $("#table-week")
@ -344,15 +347,14 @@ promises.push($.getJSON("{{ url_for('terms_plot_top_data') }}", { set: set_week,
}
to_plot.push({ data: curr_data, label: data[i][0]});
if ( i < (data.length/2))
table.append("<tr><td>"+data[i][0]+"</td><td>"+data[i][2]+"</td><td>"+addbuttons(data[i][0])+"</td><td>"+addcheckbox("graph-week", data[i][0])+"</td></tr>")
table.append("<tr><td>"+data[i][0]+"</td><td>"+data[i][2]+"</td><td>"+addbuttons(data[i][0])+"</td><td>"+addcheckbox("week", data[i][0])+"</td></tr>")
else
table2.append("<tr><td>"+data[i][0]+"</td><td>"+data[i][2]+"</td><td>"+addbuttons(data[i][0])+"</td><td>"+addcheckbox("graph-week", data[i][0])+"</td></tr>")
table2.append("<tr><td>"+data[i][0]+"</td><td>"+data[i][2]+"</td><td>"+addbuttons(data[i][0])+"</td><td>"+addcheckbox("week", data[i][0])+"</td></tr>")
}
var plot_week = $.plot($("#graph-week"), to_plot, graph_options);
plot_week = $.plot($("#graph-week"), to_plot, graph_options);
}));
promises.push($.getJSON("{{ url_for('terms_plot_top_data') }}", { set: set_month, num_day: 31 }, function(data, status){
console.log(data);
data.sort(function(a, b){return b[2]-a[2];});
// Sort data
var table = $("#table-month")
@ -365,11 +367,11 @@ promises.push($.getJSON("{{ url_for('terms_plot_top_data') }}", { set: set_month
}
to_plot.push({ data: curr_data, label: data[i][0]});
if ( i < (data.length/2))
table.append("<tr><td>"+data[i][0]+"</td><td>"+data[i][2]+"</td><td>"+addbuttons(data[i][0])+"</td><td>"+addcheckbox("graph-month", data[i][0])+"</td></tr>")
table.append("<tr><td>"+data[i][0]+"</td><td>"+data[i][2]+"</td><td>"+addbuttons(data[i][0])+"</td><td>"+addcheckbox("month", data[i][0])+"</td></tr>")
else
table2.append("<tr><td>"+data[i][0]+"</td><td>"+data[i][2]+"</td><td>"+addbuttons(data[i][0])+"</td><td>"+addcheckbox("graph-month", data[i][0])+"</td></tr>")
table2.append("<tr><td>"+data[i][0]+"</td><td>"+data[i][2]+"</td><td>"+addbuttons(data[i][0])+"</td><td>"+addcheckbox("month", data[i][0])+"</td></tr>")
}
var plot_month = $.plot($("#graph-month"), to_plot, graph_options);
plot_month = $.plot($("#graph-month"), to_plot, graph_options);
}));
/* When everything has been received, start adding tooltip */
@ -384,9 +386,9 @@ $.when.apply($, promises).done( function (arg) {
function addbuttons(term) {
return "<button class=\"fa fa-eye btn-interaction\" data-toggle=\"tooltip\" data-placement=\"right\" title=\"Add to tracked list\" style=\"margin-right: 5px;\""+
return "<button class=\"fa fa-eye btn-interaction btn btn-success\" data-toggle=\"tooltip\" data-placement=\"right\" title=\"Add to tracked list\" style=\"margin-right: 5px;\""+
"data-section=\"followTerm\" data-term=\""+term+"\"></button>"+
"<button class=\"fa fa-eye-slash btn-interaction\" data-toggle=\"tooltip\" data-placement=\"right\" title=\"Add to black-list\""+
"<button class=\"fa fa-eye-slash btn-interaction btn btn-danger\" data-toggle=\"tooltip\" data-placement=\"right\" title=\"Add to black-list\""+
"data-section=\"blacklistTerm\" data-term=\""+term+"\"></button>";
}
@ -401,7 +403,6 @@ function perform_operation(){
var data_to_send = { section: curr_section, action:"add", term: curr_term};
console.log(data_to_send);
$.get("{{ url_for('terms_management_action') }}", data_to_send, function(data, status){
if(status == "success") {
location.reload();
@ -414,6 +415,44 @@ function hide_or_show() {
var graph = $(this).attr('data-graph');
var checked = $(this).prop('checked')
console.log(curr_term + ' ' + graph + ' ' + checked);
if(graph == "today") {
var graphData = plot_today.getData();
var index;
for(i=0; i<graphData.length; i++){
if(graphData[i].label == curr_term){
index = i;
break;
}
}
graphData[index].lines.show = checked;
plot_today.setData(graphData);
plot_today.draw();
} else if (graph == "week") {
var graphData = plot_week.getData();
var index;
for(i=0; i<graphData.length; i++){
if(graphData[i].label == curr_term){
index = i;
break;
}
}
graphData[index].lines.show = checked;
plot_week.setData(graphData);
plot_week.draw();
} else if (graph == "month") {
var graphData = plot_month.getData();
var index;
for(i=0; i<graphData.length; i++){
if(graphData[i].label == curr_term){
index = i;
break;
}
}
graphData[index].lines.show = checked;
plot_month.setData(graphData);
plot_month.draw();
}
// graph, hide curve
}