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

add legend in chart

Browse source
This commit is contained in:
saravanan30erd 2019-10-25 19:14:40 +04:00
parent 35520528e4
commit 097ea5b351
2 changed files with 18 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
bin/monit-dashboard.py
View file

@ -73,6 +73,7 @@ def getMonit():
print(datetime.datetime.now()) print(datetime.datetime.now())
output.append({'url': u'https://monit.xxx.xxx', 'result': OrderedDict([(u'staging', 32), (u'monitoring1', 0)]), 's_rate': {'green': 70.0, 'red': 30.0}, 'name': u'MY Environment2'}) output.append({'url': u'https://monit.xxx.xxx', 'result': OrderedDict([(u'staging', 32), (u'monitoring1', 0)]), 's_rate': {'green': 70.0, 'red': 30.0}, 'name': u'MY Environment2'})
output.append({'url': u'https://monit.xxx.xxx', 'result': OrderedDict([(u'staging', 0), (u'monitoring1', 0)]), 's_rate': {'green': 100.0, 'red': 0.0}, 'name': u'MY Environment3'})
return(output) return(output)
# Classes # Classes

23
static/monit-dashboard.js
View file

@ -11,6 +11,7 @@ for (i = 0; i < acc.length; i++) {
function draw(rate) { function draw(rate) {
console.log(rate) console.log(rate)
var percentage = [rate['green'], rate['red']]; var percentage = [rate['green'], rate['red']];
var status = ['Ok', 'Error'];
var green = (percentage[0]*2)/100; var green = (percentage[0]*2)/100;
var red = (percentage[1]*2)/100; var red = (percentage[1]*2)/100;
var canvas = document.getElementById("canvas"); var canvas = document.getElementById("canvas");
@ -22,6 +23,7 @@ function draw(rate) {
var endAngle = 0; var endAngle = 0;
var offsetX, offsetY, medianAngle; var offsetX, offsetY, medianAngle;
ctx.clearRect(0,0,canvas.width, canvas.height);
for(var i = 0; i < angles.length; i = i + 1) { for(var i = 0; i < angles.length; i = i + 1) {
beginAngle = endAngle; beginAngle = endAngle;
endAngle = endAngle + angles[i]; endAngle = endAngle + angles[i];
@ -31,11 +33,20 @@ function draw(rate) {
ctx.beginPath(); ctx.beginPath();
ctx.fillStyle = colors[i % colors.length]; if(percentage[i] !== 0) {
ctx.moveTo(200 + offsetX, 200 + offsetY); ctx.fillStyle = colors[i % colors.length];
ctx.arc(200 + offsetX, 200 + offsetY, 120, beginAngle, endAngle); ctx.moveTo(200 + offsetX, 200 + offsetY);
ctx.lineTo(200 + offsetX, 200 + offsetY); ctx.arc(200 + offsetX, 200 + offsetY, 120, beginAngle, endAngle);
ctx.stroke(); ctx.lineTo(200 + offsetX, 200 + offsetY);
ctx.fill(); ctx.stroke();
ctx.fill();
ctx.rect(canvas.width - 105, i * 20 + 10, 10, 10);
ctx.fill();
ctx.font = "13px sans-serif";
//ctx.font = "20px Georgia";
ctx.fillText(status[i] + " - " + Number(percentage[i]).toFixed(1) + " %",
canvas.width - 85, i * 20 + 20);
}
} }
} }