54 lines
1.4 KiB
54 lines
1.4 KiB
2 years ago
|
export const pingPoints = [];
|
||
|
|
export const batteryPoints = [];
|
||
|
|
|
||
|
|
function getChartConfig(pts, color, title, ymax=100) {
|
||
|
|
return {
|
||
|
|
type: 'line',
|
||
|
|
data: {
|
||
|
|
datasets: [{
|
||
|
|
label: title,
|
||
|
|
data: pts,
|
||
|
|
borderWidth: 1,
|
||
|
|
borderColor: color,
|
||
|
|
backgroundColor: color,
|
||
|
|
fill: 'origin'
|
||
|
|
}]
|
||
|
|
},
|
||
|
|
options: {
|
||
|
|
scales: {
|
||
|
|
x: {
|
||
|
|
type: 'time',
|
||
|
|
time: {
|
||
|
|
unit: 'minute',
|
||
|
|
displayFormats: {
|
||
|
|
second: 'h:mm a'
|
||
|
|
}
|
||
|
|
},
|
||
|
|
grid: {
|
||
|
|
color: '#222', // Grid lines color
|
||
|
|
},
|
||
|
|
ticks: {
|
||
|
|
source: 'data',
|
||
|
|
fontColor: 'rgba(255, 255, 255, 1.0)', // Y-axis label color
|
||
|
|
}
|
||
|
|
},
|
||
|
|
y: {
|
||
|
|
beginAtZero: true,
|
||
|
|
max: ymax,
|
||
|
|
grid: {
|
||
|
|
color: 'rgba(255, 255, 255, 0.1)', // Grid lines color
|
||
|
|
},
|
||
|
|
ticks: {
|
||
|
|
fontColor: 'rgba(255, 255, 255, 0.7)', // Y-axis label color
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
const ctxPing = document.getElementById('chart-ping');
|
||
|
|
const ctxBattery = document.getElementById('chart-battery');
|
||
|
|
export const chartPing = new Chart(ctxPing, getChartConfig(pingPoints, 'rgba(192, 57, 43, 0.7)', 'Controls Ping Time (ms)', 250));
|
||
|
|
export const chartBattery = new Chart(ctxBattery, getChartConfig(batteryPoints, 'rgba(41, 128, 185, 0.7)', 'Battery %', 100));
|