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

306 lines
7.2 KiB
HTML

<!DOCTYPE html>
<html>
<head>
<title>D4-Project</title>
<link rel="icon" href="{{ url_for('static', filename='img/d4-logo.png')}}">
<!-- 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">
<!-- JS -->
<script 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/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;
height:500px;
}
.bar{
fill:#eaeaea;
}
.bars:hover{
fill: aqua;
cursor: pointer;
}
text.label{
fill: #777777;
color: #777777;
font-size: 20px;
font-weight: bold;
}
text.category{
fill: #666666;
font-size: 18px;
}
text.categorys:hover{
fill: black;
cursor: pointer;
}
</style>
</head>
<body>
{% include 'navbar.html' %}
<div class="row mr-0">
<div class="col">
<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>
</div>
<div class="col">
<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>
</div>
</div>
</div>
{% include 'navfooter.html' %}
</body>
<script>
$(document).ready(function(){
$("#nav-home").addClass("active");
} );
////
//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,
height = 500 - margin.top - margin.bottom,
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
}
return settings;
}
var redrawChart = function(div_id, targetID, newdata) {
//Import settings
var margin=targetID.margin, width=targetID.width, height=targetID.height, categoryIndent=targetID.categoryIndent,
svg=targetID.svg, x=targetID.x, y=targetID.y;
//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);})
}
//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});
}
//////////
//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){
d3.json(json_url, function (err, data){
if (err) return console.warn(err);
callback(div_id,settings,data);
})
}
//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)
}
json_url_uuid = "{{ url_for('_json_daily_uuid_stats') }}"
json_url_type = "{{ url_for('_json_daily_type_stats') }}"
//setup
var settings = setup('#chart_uuid');
redraw('chart_uuid',json_url_uuid,settings)
redraw('chart_uuid',json_url_uuid,settings)
var settings_type = setup('#chart_type');
redraw('chart_type',json_url_type,settings_type)
redraw('chart_type',json_url_type,settings_type)
//Interval
setInterval(function(){
redraw('chart_uuid',json_url_uuid,settings)
redraw('chart_type',json_url_type,settings_type)
}, 4000);
////
</script>