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

87 lines
1.9 KiB
JavaScript
Raw Normal View History

2019-10-14 12:31:29 +02:00
// Link quality gauge for ChartJS
2020-03-06 19:57:16 +01:00
// Support for dark theme
2019-10-20 19:29:32 +02:00
theme = getCookie('theme');
2020-03-06 19:57:16 +01:00
if (theme == 'lightsout.css') {
var bgColor1 = '#141414';
var bgColor2 = '#141414';
var borderColor = 'rgba(37, 153, 63, 1)';
var labelColor = 'rgba(37, 153, 63, 1)';
2019-10-20 19:29:32 +02:00
} else {
2020-02-02 14:40:41 +01:00
var bgColor1 = '#d4edda';
var bgColor2 = '#eaecf4';
var borderColor = 'rgba(147, 210, 162, 1)';
var labelColor = 'rgba(130, 130, 130, 1)';
2019-10-20 19:29:32 +02:00
}
2019-10-14 12:31:29 +02:00
let data1 = {
2020-02-02 14:40:41 +01:00
datasets: [{
data: [linkQ, 100-linkQ],
backgroundColor: [bgColor1, bgColor2],
borderColor: borderColor,
}],
2019-10-14 12:31:29 +02:00
};
let config = {
2020-02-02 14:40:41 +01:00
type: 'doughnut',
data: data1,
options: {
aspectRatio: 2,
responsive: true,
maintainAspectRatio: false,
tooltips: {enabled: false},
hover: {mode: null},
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 + "%"
},
plugins: [{
beforeDraw: function(chart) {
if (chart.config.centerText.display !== null &&
typeof chart.config.centerText.display !== 'undefined' &&
chart.config.centerText.display) {
drawLinkQ(chart);
}
}
}]
2019-10-14 12:31:29 +02:00
};
2019-10-19 23:56:26 +02:00
function drawLinkQ(chart) {
2019-10-14 12:31:29 +02:00
2020-02-02 14:40:41 +01:00
let width = chart.chart.width;
let height = chart.chart.height;
let ctx = chart.chart.ctx;
2019-10-14 12:31:29 +02:00
2020-02-02 14:40:41 +01:00
ctx.restore();
let fontSize = (height / 100).toFixed(2);
ctx.font = fontSize + "em sans-serif";
ctx.fillStyle = labelColor;
ctx.textBaseline = "middle";
2019-10-14 12:31:29 +02:00
2020-02-02 14:40:41 +01:00
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();
2019-10-14 12:31:29 +02:00
}
window.onload = function() {
2020-02-02 14:40:41 +01:00
let ctx = document.getElementById("divChartLinkQ").getContext("2d");
var chart = new Chart(ctx, config);
2019-10-14 12:31:29 +02:00
};