Make live graphs responsive
This commit is contained in:
parent
eb4cd870be
commit
15c62ddc7c
|
@ -2,20 +2,14 @@
|
|||
Live stuff requires JavaScript unfortunately
|
||||
</noscript>
|
||||
<h6>CPU</h6>
|
||||
<div class="graph">
|
||||
<svg id="cpugraph" width="400" height="200" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect class="graphframe" x="0" y="0" width="301" height="100" />
|
||||
<div class="graph w-auto p-1">
|
||||
<svg id="cpugraph" class="w-100" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMinYMin meet" viewBox="0 0 200 100">
|
||||
<rect class="graphframe" vector-effect="non-scaling-stroke" x="0" y="0" width="200" height="100" />
|
||||
</svg>
|
||||
</div>
|
||||
<h6>Memory</h6>
|
||||
<div class="graph">
|
||||
<svg id="memgraph" width="400" height="200" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect class="graphframe" x="0" y="0" width="301" height="100" />
|
||||
<div class="graph w-auto p-1">
|
||||
<svg id="memgraph" class="w-100" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMinYMin meet" viewBox="0 0 200 100">
|
||||
<rect class="graphframe" vector-effect="non-scaling-stroke" x="0" y="0" width="200" height="100" />
|
||||
</svg>
|
||||
</div>
|
||||
<script>
|
||||
d3.select('#cpugraph').attr('viewBox', '0 0 310 100');
|
||||
d3.select('#memgraph').attr('viewBox', '0 0 310 100');
|
||||
update();
|
||||
setInterval(update, 5000);
|
||||
</script>
|
||||
|
|
|
@ -7,7 +7,15 @@
|
|||
stroke-width: 3px;
|
||||
}
|
||||
.graph {
|
||||
border: solid black thin;
|
||||
}
|
||||
|
||||
.connlost {
|
||||
text-anchor: middle;
|
||||
dominant-baseline: middle;
|
||||
font-size: 50%;
|
||||
}
|
||||
|
||||
.graphframe {
|
||||
stroke: black;
|
||||
fill: none;
|
||||
|
|
|
@ -18,10 +18,11 @@
|
|||
|
||||
let heightScale = d3.scaleLinear()
|
||||
.domain([0,100])
|
||||
.range([100,0]);
|
||||
.range([99,1]);
|
||||
let timeScale = d3.scaleLinear()
|
||||
.domain([0,60])
|
||||
.range([5,305]);
|
||||
.range([10,190]);
|
||||
let connection_lost_since = false;
|
||||
|
||||
function updateGraph(data, svgid, property_class, property) {
|
||||
d3.select(svgid)
|
||||
|
@ -34,8 +35,9 @@ function updateGraph(data, svgid, property_class, property) {
|
|||
.attr('x1', function(d,i){return timeScale(i)})
|
||||
.attr('x2', function(d,i){return timeScale(i)})
|
||||
.attr('y1', function(d,i){return heightScale(0)})
|
||||
.attr('y2', 100)
|
||||
.attr('class', property_class);
|
||||
.attr('y2', 99)
|
||||
.attr('class', property_class)
|
||||
.attr('vector-effect', 'non-scaling-stroke');
|
||||
},
|
||||
function(update) {
|
||||
return update
|
||||
|
@ -54,7 +56,37 @@ function updateGraph(data, svgid, property_class, property) {
|
|||
|
||||
function update() {
|
||||
d3.json('http{% if site.content.ssl %}s{% endif %}://{{ site.content.domain_name }}/monitoring/all').then(function(data){
|
||||
d3.selectAll("text.connlost").remove();
|
||||
updateGraph(data, '#memgraph', 'mem', 'm');
|
||||
updateGraph(data, '#cpugraph', 'cpu', 'c');
|
||||
})
|
||||
.catch(() => {
|
||||
if(!connection_lost_since) {
|
||||
connection_lost_since = d3.timeSecond();
|
||||
}
|
||||
const seconds = [d3.timeSecond.count(connection_lost_since, d3.timeSecond())];
|
||||
d3.selectAll("line.cpu").remove();
|
||||
d3.selectAll("line.mem").remove();
|
||||
d3.select("#cpugraph")
|
||||
.selectAll("text")
|
||||
.data(seconds)
|
||||
.join("text")
|
||||
.attr("x", 100)
|
||||
.attr("y", 50)
|
||||
.classed("connlost", true)
|
||||
.text(d => `Connection lost ${d} seconds ago`);
|
||||
d3.select("#memgraph")
|
||||
.selectAll("text")
|
||||
.data(seconds)
|
||||
.join("text")
|
||||
.attr("x", 100)
|
||||
.attr("y", 50)
|
||||
.classed("connlost", true)
|
||||
.text(d => `Connection lost ${d} seconds ago`);
|
||||
});
|
||||
}
|
||||
|
||||
document.addEventListener("DOMContentLoaded", (event) => {
|
||||
update();
|
||||
setInterval(update, 5000);
|
||||
});
|
||||
|
|
Loading…
Reference in New Issue