62 lines
2.1 KiB
JavaScript
62 lines
2.1 KiB
JavaScript
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
const createGauge = (ctx, label, value) => {
|
|
const normalColor = '#34A853'; // Green
|
|
const warningColor = '#F9AB00'; // Orange
|
|
const alertColor = '#EA4335'; // Red
|
|
const bgColor = '#e9ecef';
|
|
|
|
let activeColor = normalColor;
|
|
if (value >= 70 && value < 90) {
|
|
activeColor = warningColor;
|
|
} else if (value >= 90) {
|
|
activeColor = alertColor;
|
|
}
|
|
|
|
const parent = ctx.parentElement;
|
|
const valueSpan = parent.querySelector('.gauge-value');
|
|
valueSpan.textContent = `${value}%`;
|
|
valueSpan.style.color = activeColor;
|
|
|
|
new Chart(ctx, {
|
|
type: 'doughnut',
|
|
data: {
|
|
datasets: [{
|
|
data: [value, 100 - value],
|
|
backgroundColor: [activeColor, bgColor],
|
|
borderColor: [activeColor, bgColor],
|
|
borderWidth: 1,
|
|
circumference: 270, // Make it a semi-circle
|
|
rotation: 225, // Start from the bottom-left
|
|
}]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
cutout: '80%',
|
|
plugins: {
|
|
legend: { display: false },
|
|
tooltip: { enabled: false }
|
|
},
|
|
events: []
|
|
}
|
|
});
|
|
};
|
|
|
|
const gauges = [
|
|
{ id: 'gauge1', label: 'Warehouse Temp', value: 65 },
|
|
{ id: 'gauge2', label: 'Slot Humidity', value: 80 },
|
|
{ id: 'gauge3', label: 'Node-A1 CO2', value: 45 },
|
|
{ id: 'gauge4', label: 'Node-B2 Gas', value: 92 },
|
|
{ id: 'gauge5', label: 'Cooling System', value: 75 },
|
|
{ id: 'gauge6', label: 'Power Backup', value: 98 },
|
|
];
|
|
|
|
gauges.forEach(gaugeConfig => {
|
|
const ctx = document.getElementById(gaugeConfig.id);
|
|
if (ctx) {
|
|
createGauge(ctx.getContext('2d'), gaugeConfig.label, gaugeConfig.value);
|
|
}
|
|
});
|
|
});
|