1
0
mirror of https://github.com/billz/raspap-webgui.git synced 2023-10-10 13:37:24 +02:00
raspap-webgui/app/js/linkquality.js
2019-10-14 11:31:29 +01:00

72 lines
1.7 KiB
JavaScript

// Link quality gauge for ChartJS
// console.log(linkQ);
let data1 = {
datasets: [{
data: [linkQ, 100-linkQ],
backgroundColor: ['#d4edda', '#eaecf4'],
hoverBackgroundColor: ['#c1e2c8', '#eaecf4'],
hoverBorderWidth: 0
}],
};
let config = {
type: 'doughnut',
data: data1,
options: {
responsive: true,
legend: {
display: false,
},
rotation: (2/3)*Math.PI,//2+(1/3),
circumference: (1+(2/3)) * Math.PI, // * Math.PI,
cutoutPercentage: 80,
animation: {
animateScale: false,
animateRotate: true
},
tooltips: {
enabled: false
}
},
centerText: {
display: true,
text: linkQ + "%"
}
};
Chart.Chart.pluginService.register({
beforeDraw: function(chart) {
if (chart.config.centerText.display !== null &&
typeof chart.config.centerText.display !== 'undefined' &&
chart.config.centerText.display) {
drawTotals(chart);
}
}
});
function drawTotals(chart) {
let width = chart.chart.width;
let height = chart.chart.height;
let ctx = chart.chart.ctx;
ctx.restore();
let fontSize = (height / 100).toFixed(2);
ctx.font = fontSize + "em sans-serif";
ctx.fillStyle = "rgba(25,25,25,1)";
ctx.textBaseline = "middle";
let text = chart.config.centerText.text;
let textX = Math.round((width - ctx.measureText(text).width) * 0.5);
let textY = height / 2;
ctx.fillText(text, textX, textY);
ctx.save();
}
window.onload = function() {
let ctx = document.getElementById("canvas").getContext("2d");
window.myDoughnut = new Chart(ctx, config);
};