2018-07-09 15:07:59 +00: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/daterangepicker.min.css') }}" rel="stylesheet" type="text/css" />
|
|
|
|
|
<!-- JS -->
|
|
|
|
|
<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.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>
|
|
|
|
|
<script language="javascript" src="{{ url_for('static', filename='js/moment.min.js') }}"></script>
|
|
|
|
|
<script language="javascript" src="{{ url_for('static', filename='js/jquery.daterangepicker.min.js') }}"></script>
|
|
|
|
|
<script language="javascript" src="{{ url_for('static', filename='js/d3.min.js') }}"></script>
|
|
|
|
|
<style>
|
2018-07-12 15:07:17 +00:00
|
|
|
line.link {
|
|
|
|
|
stroke: #666;
|
|
|
|
|
}
|
|
|
|
|
line.link:hover{
|
|
|
|
|
stroke: red;
|
|
|
|
|
stroke-width: 2px
|
|
|
|
|
}
|
|
|
|
|
.line_sparkline {
|
|
|
|
|
fill: none;
|
|
|
|
|
stroke: #000;
|
|
|
|
|
stroke-width: 2.0px;
|
|
|
|
|
}
|
|
|
|
|
.node {
|
|
|
|
|
pointer-events: all;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
circle {
|
|
|
|
|
stroke: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.graph_text_node {
|
|
|
|
|
font: 8px sans-serif;
|
|
|
|
|
pointer-events: none;
|
|
|
|
|
}
|
|
|
|
|
|
2018-07-13 09:54:14 +00:00
|
|
|
.graph_node_icon {
|
|
|
|
|
pointer-events: none;
|
|
|
|
|
}
|
|
|
|
|
|
2018-07-12 15:07:17 +00:00
|
|
|
.node text {
|
|
|
|
|
font: 8px sans-serif;
|
|
|
|
|
pointer-events: auto;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
div.tooltip {
|
|
|
|
|
position: absolute;
|
|
|
|
|
text-align: center;
|
|
|
|
|
padding: 2px;
|
|
|
|
|
font: 12px sans-serif;
|
|
|
|
|
background: #ebf4fb;
|
|
|
|
|
border: 2px solid #b7ddf2;
|
|
|
|
|
border-radius: 8px;
|
|
|
|
|
pointer-events: none;
|
|
|
|
|
color: #000000;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.graph_panel {
|
|
|
|
|
padding: unset;
|
|
|
|
|
}
|
2018-07-16 14:45:36 +00:00
|
|
|
|
|
|
|
|
.line_graph {
|
|
|
|
|
fill: none;
|
|
|
|
|
stroke: steelblue;
|
|
|
|
|
stroke-width: 2px;
|
|
|
|
|
stroke-linejoin: round;
|
|
|
|
|
stroke-linecap: round;
|
|
|
|
|
stroke-width: 1.5;
|
|
|
|
|
/*attr('stroke', '#bcbd22').*/
|
|
|
|
|
}
|
2018-07-09 15:07:59 +00:00
|
|
|
</style>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
|
|
|
|
|
{% include 'navbar.html' %}
|
|
|
|
|
|
|
|
|
|
<div id="page-wrapper">
|
|
|
|
|
<div class="row">
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- /#page-wrapper -->
|
|
|
|
|
<div class="panel panel-info">
|
|
|
|
|
<div class="panel-heading panelText">
|
|
|
|
|
<h3>{{ hash }} :</h3>
|
|
|
|
|
<span class="pull-right"> </span>
|
|
|
|
|
<span class="badge pull-right">6 / 26</span>
|
|
|
|
|
<ul class="list-group"><li class="list-group-item">
|
|
|
|
|
|
|
|
|
|
<div class="row">
|
|
|
|
|
<div class="col-md-10">
|
|
|
|
|
|
|
|
|
|
<table class="table table-condensed">
|
|
|
|
|
<thead>
|
|
|
|
|
<tr>
|
|
|
|
|
<th>Estimated type</th>
|
|
|
|
|
<th>First_seen</th>
|
|
|
|
|
<th>Last_seen</th>
|
|
|
|
|
<th>Size (Kb)</th>
|
|
|
|
|
<th>nb_seen_in_all_pastes</th>
|
|
|
|
|
</tr>
|
|
|
|
|
</thead>
|
|
|
|
|
<tbody>
|
|
|
|
|
<tr>
|
|
|
|
|
<td class="panelText"><i class="fa {{ file_icon }}"></i> {{ estimated_type }}</td>
|
|
|
|
|
<td class="panelText">{{ first_seen }}</td>
|
|
|
|
|
<td class="panelText">{{ last_seen }}</td>
|
|
|
|
|
<td class="panelText">{{ size }}</td>
|
|
|
|
|
<td class="panelText">{{ nb_seen_in_all_pastes }}</td>
|
|
|
|
|
</tr>
|
|
|
|
|
</tbody>
|
|
|
|
|
</table>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="col-md-1">
|
|
|
|
|
<div id="sparkline"></div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</li></ul>
|
2018-07-17 12:23:49 +00:00
|
|
|
|
|
|
|
|
{% if vt_enabled %}
|
|
|
|
|
{% if not b64_vt %}
|
|
|
|
|
<darkbutton>
|
|
|
|
|
<button id="submit_vt_b" class="btn btn-primary" onclick="sendFileToVT('{{ hash }}')">
|
|
|
|
|
<i class="fa fa-paper-plane"></i> Send this file to VT
|
|
|
|
|
</button>
|
|
|
|
|
</darkbutton>
|
|
|
|
|
{% else %}
|
|
|
|
|
<a class="btn btn-primary" target="_blank" href="{{ b64_vt_link }}"><i class="fa fa-link"> VT Report</i></a>
|
|
|
|
|
{% endif %}
|
|
|
|
|
<button class="btn btn-default" onclick="updateVTReport('{{ hash }}')">
|
|
|
|
|
<div id="report_vt_b"><span class="glyphicon glyphicon-refresh"></span> {{ b64_vt_report }}</div>
|
|
|
|
|
</button>
|
|
|
|
|
{% else %}
|
|
|
|
|
Virus Total submission is disabled
|
|
|
|
|
{% endif %}
|
|
|
|
|
|
2018-07-18 08:09:35 +00:00
|
|
|
<a href="/base64Decoded/downloadHash?hash={{hash}}" target="blank">
|
|
|
|
|
<button class='btn btn-info pull-right'><i id="flash-tld" class="glyphicon glyphicon-download-alt " flash-tld=""></i> Download Hash file
|
|
|
|
|
</button>
|
|
|
|
|
</a>
|
2018-07-09 15:07:59 +00:00
|
|
|
</div></div>
|
2018-07-12 15:07:17 +00:00
|
|
|
|
|
|
|
|
<div class="row">
|
|
|
|
|
<div class="col-md-10">
|
|
|
|
|
|
|
|
|
|
<div class="panel panel-default">
|
|
|
|
|
<div class="panel-heading">
|
|
|
|
|
<i id="flash-tld" class="glyphicon glyphicon-flash " flash-tld=""></i> Graph
|
|
|
|
|
</div>
|
|
|
|
|
<div class="panel-body graph_panel">
|
|
|
|
|
<div id="graph">
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="col-md-2">
|
|
|
|
|
<div class="panel panel-default">
|
|
|
|
|
<div class="panel-heading">
|
|
|
|
|
<i id="flash-tld" class="glyphicon glyphicon-flash " flash-tld=""></i> Graph
|
|
|
|
|
</div>
|
|
|
|
|
<div class="panel-body" style="text-align:center;">
|
|
|
|
|
<button class="btn btn-primary" onclick="redraw_graph();">
|
|
|
|
|
<span class="glyphicon glyphicon-refresh"></span> Redraw Graph</div>
|
|
|
|
|
</button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
2018-07-16 14:45:36 +00:00
|
|
|
|
|
|
|
|
<div class="panel panel-default">
|
|
|
|
|
<div class="panel-heading">
|
2018-07-17 12:23:49 +00:00
|
|
|
<i id="flash-tld" class="glyphicon glyphicon-stats" flash-tld=""></i> Graph
|
2018-07-16 14:45:36 +00:00
|
|
|
</div>
|
|
|
|
|
<div class="panel-body ">
|
|
|
|
|
<div id="graph_line">
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
2018-07-12 15:07:17 +00:00
|
|
|
</div>
|
|
|
|
|
|
2018-07-09 15:07:59 +00:00
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
<!-- /.row -->
|
|
|
|
|
|
|
|
|
|
<script>
|
2018-07-12 15:07:17 +00:00
|
|
|
var all_graph = {};
|
2018-07-09 15:07:59 +00:00
|
|
|
$(document).ready(function(){
|
|
|
|
|
sparklines("sparkline", {{ sparkline_values }})
|
2018-07-12 15:07:17 +00:00
|
|
|
|
|
|
|
|
all_graph.node_graph = create_graph('/base64Decoded/hash_graph_node_json?hash={{hash}}');
|
2018-07-16 14:45:36 +00:00
|
|
|
all_graph.line_chart = create_line_chart('graph_line', '/base64Decoded/hash_graph_line_json?hash={{hash}}');
|
2018-07-12 15:07:17 +00:00
|
|
|
all_graph.onResize();
|
2018-07-09 15:07:59 +00:00
|
|
|
});
|
2018-07-12 15:07:17 +00:00
|
|
|
|
|
|
|
|
$(window).on("resize", function() {
|
|
|
|
|
all_graph.onResize();
|
|
|
|
|
});
|
2018-07-09 15:07:59 +00:00
|
|
|
</script>
|
|
|
|
|
<script>
|
2018-07-17 12:23:49 +00:00
|
|
|
function sendFileToVT(hash) {
|
|
|
|
|
//send file to vt
|
|
|
|
|
$.getJSON('/base64Decoded/send_file_to_vt_js?hash='+hash,
|
|
|
|
|
function(data) {
|
|
|
|
|
var content = '<a id="submit_vt_b" class="btn btn-primary" target="_blank" href="'+ data['vt_link'] +'"><i class="fa fa-link"> '+ ' VT Report' +'</i></a>';
|
|
|
|
|
$('#submit_vt_b').remove();
|
|
|
|
|
$('darkbutton').append(content);
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
2018-07-09 15:07:59 +00:00
|
|
|
function updateVTReport(hash) {
|
|
|
|
|
//updateReport
|
|
|
|
|
$.getJSON('/base64Decoded/update_vt_result?hash='+hash,
|
|
|
|
|
function(data) {
|
2018-07-17 12:23:49 +00:00
|
|
|
var content = '<span class="glyphicon glyphicon-refresh"></span> ' +data['report_vt'];
|
|
|
|
|
$( "#report_vt_b" ).html(content);
|
2018-07-09 15:07:59 +00:00
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
2018-07-12 15:07:17 +00:00
|
|
|
</script>
|
|
|
|
|
<script>
|
|
|
|
|
function redraw_graph() {
|
|
|
|
|
container_graph.attr("transform", "translate(40,0)")
|
|
|
|
|
.attr("transform", "scale(2)");
|
|
|
|
|
}
|
|
|
|
|
|
2018-07-09 15:07:59 +00:00
|
|
|
</script>
|
|
|
|
|
<script>
|
|
|
|
|
//var data = [6,3,3,2,5,3,9];
|
|
|
|
|
|
|
|
|
|
// a sparklines plot
|
|
|
|
|
function sparklines(id, points) {
|
2018-07-12 15:07:17 +00:00
|
|
|
var width_spark = 100, height_spark = 60;
|
2018-07-09 15:07:59 +00:00
|
|
|
|
|
|
|
|
var data = []
|
|
|
|
|
for (i = 0; i < points.length; i++) {
|
|
|
|
|
data[i] = {
|
|
|
|
|
'x': i,
|
|
|
|
|
'y': +points[i]
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
var x = d3.scaleLinear()
|
2018-07-12 15:07:17 +00:00
|
|
|
.range([0, width_spark - 10])
|
2018-07-09 15:07:59 +00:00
|
|
|
.domain([0,5]);
|
|
|
|
|
|
|
|
|
|
var y = d3.scaleLinear()
|
2018-07-12 15:07:17 +00:00
|
|
|
.range([height_spark, 0])
|
2018-07-09 15:07:59 +00:00
|
|
|
.domain([0,10]);
|
|
|
|
|
|
|
|
|
|
var line = d3.line()
|
|
|
|
|
.x(function(d) {return x(d.x)})
|
|
|
|
|
.y(function(d) {return y(d.y)});
|
|
|
|
|
|
|
|
|
|
d3.select("#"+id).append('svg')
|
2018-07-12 15:07:17 +00:00
|
|
|
.attr('width', width_spark)
|
|
|
|
|
.attr('height', height_spark)
|
2018-07-09 15:07:59 +00:00
|
|
|
.append('path')
|
2018-07-12 15:07:17 +00:00
|
|
|
.attr('class','line_sparkline')
|
2018-07-09 15:07:59 +00:00
|
|
|
.datum(data)
|
|
|
|
|
.attr('d', line);
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<script>
|
2018-07-12 15:07:17 +00:00
|
|
|
var width = 400,
|
|
|
|
|
height = 400;
|
|
|
|
|
|
|
|
|
|
var link;
|
|
|
|
|
|
|
|
|
|
var transform = d3.zoomIdentity;
|
|
|
|
|
|
|
|
|
|
var color = d3.scaleOrdinal(d3.schemeCategory10);
|
|
|
|
|
|
|
|
|
|
var div = d3.select("body").append("div")
|
|
|
|
|
.attr("class", "tooltip")
|
|
|
|
|
.style("opacity", 0);
|
|
|
|
|
|
|
|
|
|
var simulation = d3.forceSimulation()
|
|
|
|
|
.force("link", d3.forceLink().id(function(d) { return d.id; }))
|
|
|
|
|
.force("charge", d3.forceManyBody())
|
|
|
|
|
.force("center", d3.forceCenter(width / 2, height / 2));
|
|
|
|
|
//.on("tick", ticked);
|
|
|
|
|
|
|
|
|
|
var svg_node = d3.select("#graph").append("svg")
|
|
|
|
|
.attr("id", "graph_div")
|
|
|
|
|
.attr("width", width)
|
|
|
|
|
.attr("height", height)
|
|
|
|
|
.call(d3.zoom().scaleExtent([1, 8]).on("zoom", zoomed))
|
|
|
|
|
.on("dblclick.zoom", null)
|
|
|
|
|
|
|
|
|
|
var container_graph = svg_node.append("g")
|
|
|
|
|
.attr("transform", "translate(40,0)")
|
|
|
|
|
.attr("transform", "scale(2)");
|
|
|
|
|
|
|
|
|
|
function create_graph(url){
|
|
|
|
|
|
|
|
|
|
d3.json(url)
|
|
|
|
|
.then(function(data){
|
|
|
|
|
|
|
|
|
|
link = container_graph.append("g")
|
|
|
|
|
.selectAll("line")
|
|
|
|
|
.data(data.links)
|
|
|
|
|
.enter().append("line")
|
|
|
|
|
.attr("class", "link");
|
|
|
|
|
//.attr("stroke-width", function(d) { return Math.sqrt(d.value); })
|
|
|
|
|
|
|
|
|
|
var node = container_graph.selectAll(".node")
|
|
|
|
|
.data(data.nodes)
|
|
|
|
|
.enter().append("g")
|
|
|
|
|
.attr("class", "nodes")
|
|
|
|
|
.on("dblclick", doubleclick)
|
|
|
|
|
.on("click", click)
|
|
|
|
|
.on("mouseover", mouseovered)
|
|
|
|
|
.on("mouseout", mouseouted)
|
|
|
|
|
.call(d3.drag()
|
|
|
|
|
.on("start", drag_start)
|
|
|
|
|
.on("drag", dragged)
|
|
|
|
|
.on("end", drag_end));
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
node.append("circle")
|
|
|
|
|
.attr("r", function(d) {
|
|
|
|
|
return (d.hash) ? 6 : 5; })
|
|
|
|
|
.attr("fill", function(d) {
|
2018-07-13 09:54:14 +00:00
|
|
|
if(!d.hash){ return color(d.group);}
|
|
|
|
|
if(d.group == 1){ return "orange";}
|
|
|
|
|
return "rgb(141, 211, 199)"; });
|
2018-07-12 15:07:17 +00:00
|
|
|
|
|
|
|
|
node.append('text')
|
|
|
|
|
.attr('text-anchor', 'middle')
|
|
|
|
|
.attr('dominant-baseline', 'central')
|
2018-07-13 09:54:14 +00:00
|
|
|
.attr("class", "graph_node_icon")
|
2018-07-12 15:07:17 +00:00
|
|
|
.attr('font-family', 'FontAwesome')
|
2018-07-13 09:54:14 +00:00
|
|
|
.attr('font-size', '8px' )
|
|
|
|
|
.attr('pointer-events', 'none')
|
2018-07-12 15:07:17 +00:00
|
|
|
.text(function(d) {
|
|
|
|
|
if(d.hash){
|
|
|
|
|
return d.icon
|
|
|
|
|
} });
|
2018-07-09 15:07:59 +00:00
|
|
|
|
2018-07-12 15:07:17 +00:00
|
|
|
/* node.append("text")
|
|
|
|
|
.attr("dy", 3)
|
|
|
|
|
.attr("dx", 7)
|
|
|
|
|
.attr("class", "graph_text_node")
|
|
|
|
|
//.style("text-anchor", function(d) { return d.children ? "end" : "start"; })
|
|
|
|
|
.text(function(d) { return d.id; });*/
|
|
|
|
|
|
|
|
|
|
simulation
|
|
|
|
|
.nodes(data.nodes)
|
|
|
|
|
.on("tick", ticked);
|
|
|
|
|
|
|
|
|
|
simulation.force("link")
|
|
|
|
|
.links(data.links);
|
|
|
|
|
|
|
|
|
|
function ticked() {
|
|
|
|
|
link
|
|
|
|
|
.attr("x1", function(d) { return d.source.x; })
|
|
|
|
|
.attr("y1", function(d) { return d.source.y; })
|
|
|
|
|
.attr("x2", function(d) { return d.target.x; })
|
|
|
|
|
.attr("y2", function(d) { return d.target.y; });
|
|
|
|
|
|
|
|
|
|
/*node
|
|
|
|
|
.attr("cx", function(d) { return d.x; })
|
|
|
|
|
.attr("cy", function(d) { return d.y; });*/
|
|
|
|
|
node.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function zoomed() {
|
|
|
|
|
container_graph.attr("transform", d3.event.transform);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function doubleclick (d) {
|
|
|
|
|
window.open(d.url, '_blank');
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function click (d) {
|
|
|
|
|
console.log('clicked')
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function drag_start(d) {
|
|
|
|
|
if (!d3.event.active) simulation.alphaTarget(0.3).restart();
|
|
|
|
|
d.fx = d.x;
|
|
|
|
|
d.fy = d.y;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function dragged(d) {
|
|
|
|
|
d.fx = d3.event.x;
|
|
|
|
|
d.fy = d3.event.y;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function drag_end(d) {
|
|
|
|
|
if (!d3.event.active) simulation.alphaTarget(0);
|
|
|
|
|
d.fx = d.x;
|
|
|
|
|
d.fy = d.y;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function mouseovered(d) {
|
|
|
|
|
|
|
|
|
|
// tooltip
|
|
|
|
|
var content;
|
|
|
|
|
|
|
|
|
|
if(d.hash == true){
|
|
|
|
|
content = "<b>"+d.id+"</b>"+"<br/>"+
|
|
|
|
|
"<br/>"+
|
|
|
|
|
"<i>First seen</i>: "+d.first_seen+"<br/>"+
|
|
|
|
|
"<i>Last seen</i>: "+d.last_seen+"<br/>"+
|
|
|
|
|
"<i>nb_seen_in_paste</i>: "+d.nb_seen_in_paste+"<br/>"+
|
|
|
|
|
"<i>Size (kb)</i>: "+d.size+"<br/>"+
|
|
|
|
|
"<br/>"+
|
|
|
|
|
"<i>Estimated type</i>: "+d.estimated_type;
|
|
|
|
|
} else {
|
|
|
|
|
content = "<b>"+d.id+"</b>"+"<br/>";
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
div.transition()
|
|
|
|
|
.duration(200)
|
|
|
|
|
.style("opacity", .9);
|
|
|
|
|
div.html(content)
|
|
|
|
|
.style("left", (d3.event.pageX) + "px")
|
|
|
|
|
.style("top", (d3.event.pageY - 28) + "px");
|
|
|
|
|
|
|
|
|
|
//links
|
|
|
|
|
/*link.style("stroke-opacity", function(o) {
|
|
|
|
|
return o.source === d || o.target === d ? 1 : opacity;
|
|
|
|
|
});*/
|
|
|
|
|
link.style("stroke", function(o){
|
|
|
|
|
return o.source === d || o.target === d ? "#666" : "#ddd";
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function mouseouted() {
|
|
|
|
|
div.transition()
|
|
|
|
|
.duration(500)
|
|
|
|
|
.style("opacity", 0);
|
|
|
|
|
|
|
|
|
|
link.style("stroke", "#666");
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
all_graph.onResize = function () {
|
|
|
|
|
var aspect = 1000 / 500, all_graph = $("#graph_div");
|
|
|
|
|
var targetWidth = all_graph.parent().width();
|
|
|
|
|
all_graph.attr("width", targetWidth);
|
|
|
|
|
all_graph.attr("height", targetWidth / aspect);
|
|
|
|
|
}
|
2018-07-09 15:07:59 +00:00
|
|
|
|
2018-07-12 15:07:17 +00:00
|
|
|
window.all_graph = all_graph;
|
2018-07-16 14:45:36 +00:00
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
function create_line_chart(id, url){
|
|
|
|
|
|
|
|
|
|
var width = 900;
|
|
|
|
|
var height = Math.round(width / 4);
|
|
|
|
|
|
|
|
|
|
var margin = {top: 20, right: 55, bottom: 50, left: 40};
|
|
|
|
|
|
|
|
|
|
var x = d3.scaleTime().range([0, width]);
|
|
|
|
|
var y = d3.scaleLinear().rangeRound([height, 0]);
|
|
|
|
|
|
|
|
|
|
var xAxis = d3.axisBottom(x);
|
|
|
|
|
var yAxis = d3.axisLeft(y);
|
|
|
|
|
|
|
|
|
|
var parseTime = d3.timeParse("%Y-%m-%d");
|
|
|
|
|
|
|
|
|
|
var line = d3.line()
|
|
|
|
|
.x(function(d) {
|
|
|
|
|
return x(d.date);
|
|
|
|
|
}).y(function(d) {
|
|
|
|
|
return y(d.value);
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
var svg_line = d3.select('#'+id).append('svg')
|
|
|
|
|
.attr("id", "graph_div")
|
|
|
|
|
.attr("width", width + margin.left + margin.right)
|
|
|
|
|
.attr("height", height + margin.top + margin.bottom)
|
|
|
|
|
.append('g')
|
|
|
|
|
.attr('transform', "translate("+ margin.left +","+ margin.top +")");
|
|
|
|
|
|
|
|
|
|
var div = d3.select('body').append('div')
|
|
|
|
|
.attr('class', 'tooltip')
|
|
|
|
|
.style('opacity', 0);
|
|
|
|
|
|
|
|
|
|
//add div tooltip
|
|
|
|
|
|
|
|
|
|
d3.json(url)
|
|
|
|
|
.then(function(data){
|
|
|
|
|
|
|
|
|
|
data.forEach(function(d) {
|
2018-07-17 12:23:49 +00:00
|
|
|
d.date_label = d.date;
|
2018-07-16 14:45:36 +00:00
|
|
|
d.date = parseTime(d.date);
|
|
|
|
|
d.value = +d.value;
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
// fit the data
|
|
|
|
|
x.domain(d3.extent(data, function(d) { return d.date; }));
|
|
|
|
|
//x.domain(data.map(function (d) { return d.date; })); //E
|
|
|
|
|
y.domain([0, d3.max(data, function(d){ return d.value ; })]);
|
|
|
|
|
|
|
|
|
|
//line
|
|
|
|
|
svg_line.append("path")
|
|
|
|
|
.data([data])
|
|
|
|
|
.attr("class", "line_graph")
|
|
|
|
|
.attr("d", line);
|
|
|
|
|
|
|
|
|
|
// add X axis
|
|
|
|
|
svg_line.append("g")
|
|
|
|
|
.attr("transform", "translate(0," + height + ")")
|
|
|
|
|
.call(d3.axisBottom(x))
|
|
|
|
|
.selectAll("text")
|
|
|
|
|
.style("text-anchor", "end")
|
|
|
|
|
.attr("transform", "rotate(-45)" );
|
|
|
|
|
|
|
|
|
|
// Add the Y Axis
|
|
|
|
|
svg_line.append("g")
|
|
|
|
|
.call(d3.axisLeft(y));
|
|
|
|
|
|
2018-07-17 12:23:49 +00:00
|
|
|
//add a dot circle
|
2018-07-16 14:45:36 +00:00
|
|
|
svg_line.selectAll('dot')
|
|
|
|
|
.data(data).enter()
|
|
|
|
|
.append('circle')
|
|
|
|
|
.attr('r', 2)
|
|
|
|
|
.attr('cx', function(d) { return x(d.date); })
|
|
|
|
|
.attr('cy', function(d) { return y(d.value); })
|
|
|
|
|
|
|
|
|
|
.on('mouseover', function(d) {
|
|
|
|
|
div.transition().style('opacity', .9);
|
2018-07-17 12:23:49 +00:00
|
|
|
div.html('' + d.date_label+ '<br/>' + d.value).style('left', (d3.event.pageX) + 'px')
|
|
|
|
|
.style("left", (d3.event.pageX) + "px")
|
|
|
|
|
.style("top", (d3.event.pageY - 28) + "px");
|
2018-07-16 14:45:36 +00:00
|
|
|
})
|
|
|
|
|
.on('mouseout', function(d)
|
|
|
|
|
{
|
|
|
|
|
div.transition().style('opacity', 0);
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
});
|
|
|
|
|
}
|
2018-07-09 15:07:59 +00:00
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
</body>
|
|
|
|
|
|
|
|
|
|
</html>
|
