60 lines
2.0 KiB
HTML
60 lines
2.0 KiB
HTML
<!-- layouts/shortcodes/gauge.html -->
|
|
<div class="gauge-small" style="width:120px; height:60px; position:relative;">
|
|
<canvas id="gauge-canvas-small"></canvas>
|
|
<div id="gauge-value-small" style="
|
|
position:absolute;
|
|
bottom:4px; left:50%;
|
|
transform:translateX(-50%);
|
|
font-size:0.8rem;
|
|
background:rgba(255,255,255,0.8);
|
|
padding:2px 6px;
|
|
border-radius:4px;
|
|
pointer-events:none;
|
|
">…</div>
|
|
</div>
|
|
<script>
|
|
(function(){
|
|
const opts = {
|
|
angle: 0.15,
|
|
lineWidth: 0.44,
|
|
radiusScale: 1,
|
|
pointer: { length: 0.6, strokeWidth: 0.035, color: '#000' },
|
|
limitMax: false, limitMin: false,
|
|
colorStart: '#4caf50', colorStop: '#4caf50',
|
|
strokeColor: '#EEEEEE',
|
|
generateGradient: false,
|
|
highDpiSupport: true
|
|
};
|
|
const canvas = document.getElementById('gauge-canvas-small');
|
|
const container = canvas.parentElement;
|
|
const dpr = window.devicePixelRatio || 1;
|
|
const { width, height } = container.getBoundingClientRect();
|
|
canvas.width = width * dpr;
|
|
canvas.height = height * dpr;
|
|
canvas.style.width = width + 'px';
|
|
canvas.style.height = height + 'px';
|
|
const gauge = new Gauge(canvas).setOptions(opts);
|
|
gauge.maxValue = 100;
|
|
gauge.setMinValue(0);
|
|
gauge.animationSpeed = 32;
|
|
async function updateSmall(){
|
|
try {
|
|
const res = await fetch('{{ .Get "url" }}', {cache:'no-store'});
|
|
if (!res.ok) throw res.status;
|
|
const pct = Math.max(0, Math.min(100, parseFloat(await res.text())));
|
|
const color = pct < 20 ? '#f44336' : pct <= 80 ? '#ff9800' : '#4caf50';
|
|
opts.colorStart = opts.colorStop = color;
|
|
gauge.setOptions(opts);
|
|
gauge.set(pct);
|
|
document.getElementById('gauge-value-small').textContent = pct.toFixed(0)+'%';
|
|
} catch(e) {
|
|
document.getElementById('gauge-value-small').textContent = 'err';
|
|
console.error(e);
|
|
}
|
|
}
|
|
updateSmall();
|
|
setInterval(updateSmall, 30000);
|
|
})();
|
|
</script>
|
|
|