2016-08-19 13:34:02 +02:00
<!DOCTYPE html>
< html >
< head >
< meta charset = "utf-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< title > Analysis Information Leak framework Dashboard< / title >
<!-- Core CSS -->
< link href = "{{ url_for('static', filename='css/bootstrap.min.css') }}" rel = "stylesheet" >
< link href = "{{ url_for('static', filename='font-awesome/css/font-awesome.css') }}" rel = "stylesheet" >
< link href = "{{ url_for('static', filename='css/sb-admin-2.css') }}" rel = "stylesheet" >
< link href = "{{ url_for('static', filename='css/dataTables.bootstrap.css') }}" rel = "stylesheet" type = "text/css" / >
< link href = "{{ url_for('static', filename='css/jquery-ui.min.css') }}" rel = "stylesheet" type = "text/css" / >
< script language = "javascript" src = "{{ url_for('static', filename='js/jquery.js')}}" > < / script >
< script src = "{{ url_for('static', filename='js/bootstrap.min.js') }}" > < / script >
< script src = "{{ url_for('static', filename='js/jquery.dataTables.min.js') }}" > < / script >
< script src = "{{ url_for('static', filename='js/dataTables.bootstrap.js') }}" > < / script >
< script src = "{{ url_for('static', filename='js/jquery-ui.min.js') }}" > < / script >
< script src = "{{ url_for('static', filename='js/jquery.flot.js') }}" > < / script >
< script src = "{{ url_for('static', filename='js/jquery.flot.time.js') }}" > < / script >
< script src = "{{ url_for('static', filename='js/jquery.flot.stack.js') }}" > < / script >
< style >
.sparkLineStats ul {
padding-left:0;
list-style:none
}
< / style >
< / head >
< body >
< div id = "wrapper" >
< nav class = "navbar navbar-default navbar-static-top" role = "navigation" style = "margin-bottom: 0" >
{% include 'header.html' %}
<!-- /.navbar - top - links -->
< div class = "navbar-default sidebar" role = "navigation" >
< div class = "sidebar-collapse" >
< ul class = "nav" id = "side-menu" >
< li class = "sidebar-search" >
{% include 'searchbox.html' %}
< / li >
< / ul >
<!-- /#side - menu -->
< / div >
<!-- /.sidebar - collapse -->
< a href = "{{ url_for('index') }}" > < img src = "{{ url_for('static', filename='image/AIL.png') }}" / > < / a >
< / div >
<!-- /.navbar - static - side -->
< / nav >
< / div >
< div id = "page-wrapper" >
< div class = "row" >
< div class = "col-lg-12" >
2016-08-20 16:44:36 +02:00
< h1 class = "page-header" data-page = "page-termsfrequency" > Terms plot tool< / h1 >
2016-08-19 13:34:02 +02:00
< / div >
<!-- /.col - lg - 12 -->
< / div >
<!-- /.row -->
< div class = "row" >
<!-- Panel OPTIONS -->
< div class = "row" >
< div class = "col-lg-12" >
< div class = "row" >
< div class = "col-lg-12" >
< div id = "panel-today" class = "panel panel-default" >
< div class = "panel-heading" >
< strong > Select options< / strong >
< / div >
< div class = "panel-body" >
2016-08-19 16:53:46 +02:00
< div aria-disabled = "false" class = "slider sliderRange sliderBlue ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all" style = "margin-bottom: 5px;" > < / div >
2016-11-25 16:42:22 +01:00
< strong > Date:< / strong > < input type = "text" id = "amount" readonly style = "border:0; color:#f6931f; font-weight:bold;" > < button id = "plot-month" onclick = "replot(100);" class = "btn btn-info" style = "float: right;" > Plot current terms for a month< / button >
2016-08-19 16:53:46 +02:00
< div class = "form-group input-group" style = "margin-top: 30px;" >
< span class = "input-group-addon" > < span class = "glyphicon glyphicon-stats" > < / span > < / span >
2016-08-22 13:35:49 +02:00
< input id = "TermInput" class = "form-control" placeholder = "Term to plot" type = "text" style = "max-width: 400px;" data-init-plot = "{{ term }}" >
2016-08-23 11:56:32 +02:00
< button id = "plot-btn" class = "btn btn-info" style = "margin-left: 10px;" > < span class = "fa fa-caret-down" > Plot a term< / button >
< button id = "plot-btn-add" class = "btn btn-success" style = "margin-left: 6px;" > < span class = "fa fa-plus" > < / span > Add the term to the chart< / button >
2016-08-19 13:34:02 +02:00
< / div >
2016-08-19 16:53:46 +02:00
2016-08-19 13:34:02 +02:00
< / div >
<!-- /.panel - body -->
< / div >
< / div >
<!-- /.panel -->
< / div >
<!-- /.panel -->
< / div >
< / div >
<!-- Panel PLOT -->
< div class = "row" >
< div class = "col-lg-12" >
< div class = "row" >
< div class = "col-lg-12" >
< div id = "panel-today" class = "panel panel-default" >
< div class = "panel-heading" >
< strong > Graph< / strong >
< / div >
< div class = "panel-body" >
< div id = "graph" style = "height: 300px;" > < / div >
< / div >
<!-- /.panel - body -->
< / div >
< / div >
<!-- /.panel -->
< / div >
<!-- /.panel -->
< / div >
< / div >
<!-- /.row -->
< / div >
<!-- /#page - wrapper -->
< / div >
2016-08-23 12:03:23 +02:00
< div style = "position: absolute; border: 1px solid rgb(255, 221, 221); padding: 2px; background-color: #333; color:white; opacity: 0.8; top: 423px; left: 616px; display: none;" id = "tooltip" > < / div >
2016-08-19 13:34:02 +02:00
<!-- import graph function -->
< script >
$(document).ready(function(){
activePage = $('h1.page-header').attr('data-page');
$("#"+activePage).addClass("active");
2016-08-19 16:53:46 +02:00
/* Create the slider and button*/
2016-08-23 12:09:41 +02:00
$('#plot-btn-add').hide();
2016-08-19 16:53:46 +02:00
var today = Date.now();
var old_day = today - (12*31*24*60*60)*1000;
$( ".sliderRange" ).slider({
range: true,
min: old_day,
max: today,
values: [ today - (7*24*60*60)*1000, today ],
step: 24*60*60*1000,
slide: function( event, ui ) {
$( "#amount" ).val( new Date(ui.values[ 0 ]).toLocaleDateString() + " - " + new Date(ui.values[ 1 ]).toLocaleDateString() );
}
});
2016-08-20 15:59:22 +02:00
$( "#amount" ).val( new Date($( ".sliderRange" ).slider( "values", 0 )).toLocaleDateString() +
" - " + new Date($( ".sliderRange" ).slider( "values", 1 )).toLocaleDateString() );
$('#plot-btn').click(plotData);
2016-08-23 11:56:32 +02:00
$('#plot-btn-add').click(addData);
2016-08-19 16:53:46 +02:00
2016-08-22 13:35:49 +02:00
$("#TermInput").val($("#TermInput").attr("data-init-plot"));
2016-08-23 12:09:41 +02:00
if($("#TermInput").attr("data-init-plot") != "") {
$("#plot-btn").click();
}
2016-08-22 13:35:49 +02:00
2016-08-20 16:38:51 +02:00
$("#TermInput").keyup(function(event){
if(event.keyCode == 13){
$("#plot-btn").click();
$("#TermInput").val("");
}
});
2016-08-19 13:34:02 +02:00
});
< / script >
2016-08-20 15:59:22 +02:00
< script >
2016-08-23 11:56:32 +02:00
var plot;
var graph_data = [];
2016-11-25 16:42:22 +01:00
var plotted_terms = [];
2016-08-20 15:59:22 +02:00
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,
},
}
2016-08-23 11:56:32 +02:00
function plotData() {
2016-08-23 12:09:41 +02:00
$('#plot-btn-add').show("fast");
2016-08-20 15:59:22 +02:00
var curthis = $(this);
var term = $('#TermInput').val();
2016-11-25 16:42:22 +01:00
plotted_terms = [term]
2016-08-20 16:23:06 +02:00
var range_start = new Date($( ".sliderRange" ).slider( "values", 0 )).getTime() / 1000;
var range_end = new Date($( ".sliderRange" ).slider( "values", 1 )).getTime() / 1000;
2016-08-20 15:59:22 +02:00
2016-08-20 16:23:06 +02:00
$.getJSON("{{ url_for('terms_plot_tool_data') }}", { range_start: range_start, range_end: range_end, term: term }, function(data, status){
2016-08-23 11:56:32 +02:00
graph_data = [];
2016-08-20 15:59:22 +02:00
var to_plot = [];
2016-08-20 16:23:06 +02:00
var curr_data = [];
2016-11-25 16:42:22 +01:00
for(i=1; i< data.length ; i + + ) {
curr_data.push([data[i][0]*1000, data[i][1]]);
2016-08-20 15:59:22 +02:00
}
2016-08-20 16:23:06 +02:00
to_plot.push({ data: curr_data, label: term});
2016-08-23 11:56:32 +02:00
graph_data.push({ data: curr_data, label: term});
plot = $.plot($("#graph"), to_plot, graph_options);
2016-08-23 12:03:23 +02:00
$("#graph").bind("plothover", function (event, pos, item) {
if (item) {
var date = new Date(item.datapoint[0]);
var x = parseInt(date.getUTCMonth())+1 + "/" + date.getUTCDate();
var y = item.datapoint[1];
$("#tooltip").html(item.series.label + " for "+x + " = " + y)
.css({top: item.pageY-15, left: item.pageX+5})
.fadeIn(200);
} else {
$("#tooltip").hide();
}
});
2016-08-23 11:56:32 +02:00
$("#TermInput").val("");
2016-08-20 15:59:22 +02:00
})
2016-08-23 11:56:32 +02:00
}
2016-08-20 15:59:22 +02:00
2016-08-23 11:56:32 +02:00
function addData() {
var curthis = $(this);
var term = $('#TermInput').val();
2016-11-25 16:42:22 +01:00
plotted_terms.push(term)
2016-08-23 11:56:32 +02:00
var range_start = new Date($( ".sliderRange" ).slider( "values", 0 )).getTime() / 1000;
var range_end = new Date($( ".sliderRange" ).slider( "values", 1 )).getTime() / 1000;
2016-08-20 15:59:22 +02:00
2016-08-23 11:56:32 +02:00
$.getJSON("{{ url_for('terms_plot_tool_data') }}", { range_start: range_start, range_end: range_end, term: term }, function(data, status){
var curr_data = [];
2016-11-25 16:42:22 +01:00
for(i=1; i< data.length ; i + + ) {
2016-08-23 11:56:32 +02:00
curr_data.push([data[i][0]*1000, data[i][1]]);
}
graph_data.push({ data: curr_data, label: term});
plot = $.plot($("#graph"), graph_data, graph_options);
$("#TermInput").val("");
})
2016-08-20 15:59:22 +02:00
}
2016-08-23 11:56:32 +02:00
2016-11-25 16:42:22 +01:00
function replot(duration) {
console.log(plotted_terms);
graph_data = [];
for(i=0; i< plotted_terms.length ; i + + ) {
var term = plotted_terms[i];
var range_start = new Date($( ".sliderRange" ).slider( "values", 0 )).getTime() / 1000;
var range_end = new Date($( ".sliderRange" ).slider( "values", 1 )).getTime() / 1000;
$.getJSON("{{ url_for('terms_plot_tool_data') }}", { range_start: range_start, range_end: range_end, term: term }, function(data, status){
var curr_data = [];
for(i=1; i< data.length ; i + + ) {
curr_data.push([data[i][0]*1000, data[i][1]]);
}
graph_data.push({ data: curr_data, label: data[0]});
$("#TermInput").val("");
})
}
setTimeout(function() {
plot = $.plot($("#graph"), graph_data, graph_options);
}, 500);
}
2016-08-20 15:59:22 +02:00
< / script >
2016-08-19 13:34:02 +02:00
< / body >
< / html >
