onFOSS
/
Gameserver
2
0
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

Make live graphs responsive

This commit is contained in:
DeathByDenim 2023-06-24 14:00:16 -04:00
parent eb4cd870be
commit 15c62ddc7c
Signed by: DeathByDenim
GPG Key ID: 4A475283D925365B
3 changed files with 50 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
website/_includes/online.html
View File

@ -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>

8
website/assets/css/serverstats.css
View File

@ -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;

40
website/js/serverstats.js
View File

@ -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);
});