frodovdr
/
raspap-webgui
mirror of https://github.com/billz/raspap-webgui.git
1
0
Fork 0
Code Issues Releases Wiki Activity

Update beforeDraw as inline plugin

This commit is contained in:
billz 2020-02-02 13:40:41 +00:00
parent 29772f8144
commit 9dc2a67d70
1 changed files with 63 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

128
app/js/linkquality.js
View File

@ -3,86 +3,84 @@
// Support for dark terminal theme // Support for dark terminal theme
theme = getCookie('theme'); theme = getCookie('theme');
if (theme == 'terminal.css') { if (theme == 'terminal.css') {
var bgColor1 = '#000'; var bgColor1 = '#000';
var bgColor2 = '#000'; var bgColor2 = '#000';
var borderColor = 'rgba(46, 230, 0, 1)'; var borderColor = 'rgba(46, 230, 0, 1)';
var labelColor = 'rgba(46, 230, 0, 1)'; var labelColor = 'rgba(46, 230, 0, 1)';
} else { } else {
var bgColor1 = '#d4edda'; var bgColor1 = '#d4edda';
var bgColor2 = '#eaecf4'; var bgColor2 = '#eaecf4';
var borderColor = 'rgba(147, 210, 162, 1)'; var borderColor = 'rgba(147, 210, 162, 1)';
var labelColor = 'rgba(130, 130, 130, 1)'; var labelColor = 'rgba(130, 130, 130, 1)';
} }
let data1 = { let data1 = {
datasets: [{ datasets: [{
data: [linkQ, 100-linkQ], data: [linkQ, 100-linkQ],
backgroundColor: [bgColor1, bgColor2], backgroundColor: [bgColor1, bgColor2],
borderColor: borderColor, borderColor: borderColor,
}], }],
}; };
let config = { let config = {
type: 'doughnut', type: 'doughnut',
data: data1, data: data1,
options: { options: {
aspectRatio: 2, aspectRatio: 2,
responsive: true, responsive: true,
maintainAspectRatio: false, maintainAspectRatio: false,
tooltips: {enabled: false}, tooltips: {enabled: false},
hover: {mode: null}, hover: {mode: null},
legend: { legend: {
display: false, display: false,
}, },
rotation: (2/3)*Math.PI,//2+(1/3), rotation: (2/3)*Math.PI,//2+(1/3),
circumference: (1+(2/3)) * Math.PI, // * Math.PI, circumference: (1+(2/3)) * Math.PI, // * Math.PI,
cutoutPercentage: 80, cutoutPercentage: 80,
animation: { animation: {
animateScale: false, animateScale: false,
animateRotate: true animateRotate: true
}, },
tooltips: { tooltips: {
enabled: false enabled: false
} }
}, },
centerText: { centerText: {
display: true, display: true,
text: linkQ + "%" text: linkQ + "%"
} },
plugins: [{
beforeDraw: function(chart) {
if (chart.config.centerText.display !== null &&
typeof chart.config.centerText.display !== 'undefined' &&
chart.config.centerText.display) {
drawLinkQ(chart);
}
}
}]
}; };
//Chart.Chart.pluginService.register({
// beforeDraw: function(chart) {
// if (chart.config.centerText.display !== null &&
// typeof chart.config.centerText.display !== 'undefined' &&
// chart.config.centerText.display) {
// drawLinkQ(chart);
// }
// }
//});
function drawLinkQ(chart) { function drawLinkQ(chart) {
let width = chart.chart.width; let width = chart.chart.width;
let height = chart.chart.height; let height = chart.chart.height;
let ctx = chart.chart.ctx; let ctx = chart.chart.ctx;
ctx.restore(); ctx.restore();
let fontSize = (height / 100).toFixed(2); let fontSize = (height / 100).toFixed(2);
ctx.font = fontSize + "em sans-serif"; ctx.font = fontSize + "em sans-serif";
ctx.fillStyle = labelColor; ctx.fillStyle = labelColor;
ctx.textBaseline = "middle"; ctx.textBaseline = "middle";
let text = chart.config.centerText.text; let text = chart.config.centerText.text;
let textX = Math.round((width - ctx.measureText(text).width) * 0.5); let textX = Math.round((width - ctx.measureText(text).width) * 0.5);
let textY = height / 2; let textY = height / 2;
ctx.fillText(text, textX, textY); ctx.fillText(text, textX, textY);
ctx.save(); ctx.save();
} }
window.onload = function() { window.onload = function() {
let ctx = document.getElementById("divChartLinkQ").getContext("2d"); let ctx = document.getElementById("divChartLinkQ").getContext("2d");
window.myDoughnut = new Chart(ctx, config); var chart = new Chart(ctx, config);
//drawLinkQ(Chart);
}; };