d4-core/server/web/templates/index.html

318 lines
7.9 KiB
HTML
Raw Normal View History

2019-01-17 15:33:44 +01:00
<!DOCTYPE html>
<html>
<head>
2019-01-21 16:53:40 +01:00
<title>D4-Project</title>
<link rel="icon" href="{{ url_for('static', filename='img/d4-logo.png')}}">
2019-01-17 15:33:44 +01:00
<!-- 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">
2019-01-17 15:33:44 +01:00
<!-- JS -->
2019-04-03 14:36:50 +02:00
<script src="{{ url_for('static', filename='js/jquery.js')}}"></script>
2019-01-21 16:53:40 +01:00
<script src="{{ url_for('static', filename='js/bootstrap.min.js')}}"></script>
2019-01-17 15:33:44 +01:00
<script src="{{ url_for('static', filename='js/d3.min.js')}}"></script>
<style>
#div_chart{
width:600px;
margin:20px;
margin: 0;
padding: 0;
border: 0;
font: inherit;
font-size: 100%;
vertical-align: baseline;
font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: inherit;
}
#chart{
width:600px;
2019-01-18 15:54:16 +01:00
height:500px;
2019-01-17 15:33:44 +01:00
}
.bar{
2019-01-17 15:33:44 +01:00
fill:#eaeaea;
}
.bars:hover{
fill: aqua;
cursor: pointer;
2019-01-17 15:33:44 +01:00
}
text.label{
fill: #777777;
color: #777777;
font-size: 20px;
font-weight: bold;
}
text.category{
2019-01-17 15:33:44 +01:00
fill: #666666;
2019-01-21 16:53:40 +01:00
font-size: 18px;
}
text.categorys:hover{
fill: black;
cursor: pointer;
2019-01-17 15:33:44 +01:00
}
</style>
</head>
<body>
2019-01-21 16:53:40 +01:00
<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
<a class="navbar-brand" href="{{ url_for('index') }}">
<img src="{{ url_for('static', filename='img/d4-logo.png')}}" alt="D4 Project" style="width:80px;">
</a>
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link mr-3" href="{{ url_for('index') }}">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item" mr-3>
<a class="nav-link mr-3" href="{{ url_for('sensors_status') }}">Sensors Status</a>
</li>
<li class="nav-item mr-3">
<a class="nav-link" href="{{ url_for('server_management') }}" tabindex="-1" aria-disabled="true">Server Management</a>
</li>
</ul>
2019-01-21 16:53:40 +01:00
</nav>
<div class="row mr-0">
2019-01-17 15:33:44 +01:00
<div class="col">
2019-01-21 16:53:40 +01:00
<div class="card text-center mt-2 ml-2">
<div class="card-header bg-dark text-white">
UUID
</div>
<div class="card-body">
<div id="chart_uuid"></div>
</div>
<div class="card-footer text-muted">
{{date}}
</div>
</div>
2019-01-17 15:33:44 +01:00
</div>
<div class="col">
2019-01-21 16:53:40 +01:00
<div class="card text-center mt-2 ml-2">
<div class="card-header bg-dark text-white">
Types
</div>
<div class="card-body">
<div id="chart_type"></div>
</div>
<div class="card-footer text-muted">
{{date}}
</div>
2019-01-17 15:33:44 +01:00
</div>
</div>
</div>
{% include 'navfooter.html' %}
2019-01-17 15:33:44 +01:00
</body>
<script>
2019-04-03 14:36:50 +02:00
2019-01-17 15:33:44 +01:00
////
//http://bl.ocks.org/charlesdguthrie/11356441, updated and modified
//updating BarChart
var setup = function(targetID){
//Set size of svg element and chart
var margin = {top: 0, right: 0, bottom: 0, left: 0},
width = 600 - margin.left - margin.right,
2019-01-18 15:54:16 +01:00
height = 500 - margin.top - margin.bottom,
2019-01-17 15:33:44 +01:00
categoryIndent = 4*15 + 5,
defaultBarWidth = 2000;
//Set up scales
var x = d3.scaleLinear()
.domain([0,defaultBarWidth])
.range([0,width]);
var y = d3.scaleBand()
.rangeRound([0, height])
.padding(0.1);
d3.select(targetID).selectAll("svg").remove()
var svg = d3.select(targetID).append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var settings = {
margin:margin, width:width, height:height, categoryIndent:categoryIndent,
svg:svg, x:x, y:y, myid:targetID
2019-01-17 15:33:44 +01:00
}
return settings;
}
var redrawChart = function(div_id, targetID, newdata) {
2019-01-17 15:33:44 +01:00
//Import settings
2019-01-21 16:53:40 +01:00
var margin=targetID.margin, width=targetID.width, height=targetID.height, categoryIndent=targetID.categoryIndent,
svg=targetID.svg, x=targetID.x, y=targetID.y;
2019-01-17 15:33:44 +01:00
//Reset domains
y.domain(newdata.sort(function(a,b){
return b.value - a.value;
})
.map(function(d) { return d.key; }));
var barmax = d3.max(newdata, function(e) {
return e.value;
});
x.domain([0,barmax]);
/////////
//ENTER//
/////////
//Create chart row and move to below the bottom of the chart
var chartRow = svg.selectAll("g.chartRow")
.data(newdata, function(d){ return d.key});
var newRow = chartRow
.enter()
.append("g")
.attr("class", "chartRow")
.attr("transform", "translate(0," + height + margin.top + margin.bottom + ")");
if (div_id=='chart_uuid'){
//bars
newRow.insert("rect")
.on("click", function (d) { window.location.href = "{{ url_for('uuid_management') }}?uuid="+d.key })
.attr("class","bar bars")
.attr("x", 0)
.attr("opacity",0)
.attr("height", y.bandwidth())
.attr("width", function(d) { return x(d.value);})
} else {
//bars
newRow.insert("rect")
.attr("class","bar")
.attr("x", 0)
.attr("opacity",0)
.attr("height", y.bandwidth())
.attr("width", function(d) { return x(d.value);})
}
2019-01-17 15:33:44 +01:00
//labels
newRow.append("text")
.attr("class","label")
.attr("y", y.bandwidth()/2)
.attr("x",0)
.attr("opacity",0)
.attr("dy",".35em")
.attr("dx","0.5em")
.text(function(d){return d.value;});
if (div_id=='chart_uuid'){
//text
newRow.append("text")
.on("click", function (d) { window.location.href = "{{ url_for('uuid_management') }}?uuid="+d.key })
.attr("class","category categorys")
.attr("text-overflow","ellipsis")
.attr("y", y.bandwidth()/2)
.attr("x",categoryIndent)
.attr("opacity",0)
.attr("dy",".35em")
.attr("dx","5em")
.text(function(d){return d.key});
} else {
//text
newRow.append("text")
.attr("class","category")
.attr("text-overflow","ellipsis")
.attr("y", y.bandwidth()/2)
.attr("x",categoryIndent)
.attr("opacity",0)
.attr("dy",".35em")
.attr("dx","5em")
.text(function(d){return d.key});
}
2019-01-17 15:33:44 +01:00
//////////
//UPDATE//
//////////
//Update bar widths
chartRow.select(".bar").transition()
.duration(300)
.attr("width", function(d) { return x(d.value);})
.attr("opacity",1);
//Update data labels
chartRow.select(".label").transition()
.duration(300)
.attr("opacity",1)
.tween("text", function(d) {
var node = this, i = d3.interpolate(+this.textContent.replace(/\,/g,''), +d.value);
return function(t) {
node.textContent = Math.round(i(t));
};
});
//Fade in categories
chartRow.select(".category").transition()
.duration(300)
.attr("opacity",1);
////////
//EXIT//
////////
//Fade out and remove exit elements
chartRow.exit().transition()
.style("opacity","0")
.attr("transform", "translate(0," + (height + margin.top + margin.bottom) + ")")
.remove();
////////////////
//REORDER ROWS//
////////////////
var delay = function(d, i) { return 200 + i * 30; };
chartRow.transition()
.delay(delay)
.duration(900)
.attr("transform", function(d){ return "translate(0," + y(d.key) + ")"; });
};
var pullData = function(div_id,json_url,settings,callback){
2019-01-21 16:53:40 +01:00
d3.json(json_url, function (err, data){
2019-01-17 15:33:44 +01:00
if (err) return console.warn(err);
callback(div_id,settings,data);
2019-01-17 15:33:44 +01:00
})
}
//Sort data in descending order
var formatData = function(data){
return data.sort(function (a, b) {
return b.value - a.value;
})
.slice(0, 15); // linit to 15 items
}
var redraw = function(div_id,json_url,settings){
pullData(div_id,json_url,settings,redrawChart)
2019-01-17 15:33:44 +01:00
}
2019-01-21 16:53:40 +01:00
json_url_uuid = "{{ url_for('_json_daily_uuid_stats') }}"
json_url_type = "{{ url_for('_json_daily_type_stats') }}"
2019-01-17 15:33:44 +01:00
//setup
2019-01-21 16:53:40 +01:00
var settings = setup('#chart_uuid');
redraw('chart_uuid',json_url_uuid,settings)
redraw('chart_uuid',json_url_uuid,settings)
2019-01-21 16:53:40 +01:00
var settings_type = setup('#chart_type');
redraw('chart_type',json_url_type,settings_type)
redraw('chart_type',json_url_type,settings_type)
2019-01-17 15:33:44 +01:00
//Interval
setInterval(function(){
redraw('chart_uuid',json_url_uuid,settings)
redraw('chart_type',json_url_type,settings_type)
2019-01-17 15:33:44 +01:00
}, 4000);
////
</script>