PiFrame/monit-dashboard
PiFrame/monit-dashboard
1
0
Fork 0
Code Issues Pull requests Releases Activity

add pie chart for showing services status

Browse source
This commit is contained in:
saravanan30erd 2019-08-16 18:36:40 +04:00
parent 00509afc34
commit bce596438f
2 changed files with 37 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

29
static/monit-dashboard.js
View file

@ -6,4 +6,31 @@ for (i = 0; i < acc.length; i++) {
this.classList.toggle("active"); this.classList.toggle("active");
this.nextElementSibling.classList.toggle("show"); this.nextElementSibling.classList.toggle("show");
} }
} }
function draw(data) {
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var colors = ['#40ff00', '#ff0000'];
var angles = [Math.PI * 1.5, Math.PI * data];
var offset = 0;
var beginAngle = 0;
var endAngle = 0;
var offsetX, offsetY, medianAngle;
for(var i = 0; i < angles.length; i = i + 1) {
beginAngle = endAngle;
endAngle = endAngle + angles[i];
medianAngle = (endAngle + beginAngle) / 2;
offsetX = Math.cos(medianAngle) * offset;
offsetY = Math.sin(medianAngle) * offset;
ctx.beginPath();
ctx.fillStyle = colors[i % colors.length];
ctx.moveTo(200 + offsetX, 200 + offsetY);
ctx.arc(200 + offsetX, 200 + offsetY, 120, beginAngle, endAngle);
ctx.lineTo(200 + offsetX, 200 + offsetY);
ctx.stroke();
ctx.fill();
}
}

10
templates/index.html
View file

@ -1,5 +1,11 @@
$def with (output, now) $def with (output, now)
$ data = 0.5
<html>
<head>
<script src="static/monit-dashboard.js" type="text/javascript"></script>
</head>
<body onload='draw($data);'>
$ errors = 0 $ errors = 0
$ color = "green" $ color = "green"
$for server in range(len(output)): $for server in range(len(output)):
@ -79,4 +85,6 @@ $for server in range(len(output)):
Latest update: $now.day/$now.month/$now.year, $now.hour:$now.minute:$now.second Latest update: $now.day/$now.month/$now.year, $now.hour:$now.minute:$now.second
<br><br> <br><br>
<script src="static/monit-dashboard.js" type="text/javascript"></script> <canvas id="canvas" width="400" height="400"></canvas>
</body>
</html>