Harwinder Sekhon
71 lines
2.2 KiB
JavaScript
71 lines
2.2 KiB
JavaScript
/* Gold Desk — score gauges.
|
||
*
|
||
* Draws a horizontal diverging Chart.js bar (−100…+100, zero-centered)
|
||
* into every `.gauge-container` element. The containers are created
|
||
* dynamically by dashboard.js after each snapshot poll, so this module
|
||
* exposes window.renderGauges() which dashboard.js calls after every
|
||
* card render (and on resize). Re-running it destroys and redraws each
|
||
* chart, so it is safe to call repeatedly.
|
||
*/
|
||
(function () {
|
||
"use strict";
|
||
|
||
function renderGauges() {
|
||
if (typeof Chart === "undefined") return;
|
||
document.querySelectorAll(".gauge-container").forEach(function (container) {
|
||
var score = parseFloat(container.dataset.score);
|
||
if (!isFinite(score)) return;
|
||
|
||
var canvas = container.querySelector("canvas");
|
||
if (!canvas) {
|
||
container.innerHTML = "";
|
||
canvas = document.createElement("canvas");
|
||
container.appendChild(canvas);
|
||
} else {
|
||
var existing = Chart.getChart(canvas);
|
||
if (existing) existing.destroy();
|
||
}
|
||
|
||
var pos = score >= 0;
|
||
new Chart(canvas.getContext("2d"), {
|
||
type: "bar",
|
||
data: {
|
||
labels: [container.dataset.label || ""],
|
||
datasets: [{
|
||
data: [score],
|
||
backgroundColor: pos ? "rgba(25,135,84,0.85)" : "rgba(220,53,69,0.85)",
|
||
borderColor: pos ? "#198754" : "#dc3545",
|
||
borderWidth: 1,
|
||
barThickness: 10,
|
||
maxBarThickness: 10,
|
||
borderRadius: 3
|
||
}]
|
||
},
|
||
options: {
|
||
indexAxis: "y",
|
||
scales: {
|
||
x: { min: -100, max: 100, display: false, grid: { display: false }, ticks: { display: false } },
|
||
y: { display: false, grid: { display: false } }
|
||
},
|
||
plugins: {
|
||
legend: { display: false },
|
||
tooltip: { enabled: false },
|
||
title: { display: false }
|
||
},
|
||
maintainAspectRatio: false,
|
||
responsive: true,
|
||
animation: { duration: 400, easing: "easeOutQuad" }
|
||
}
|
||
});
|
||
});
|
||
}
|
||
|
||
window.renderGauges = renderGauges;
|
||
|
||
var resizeTimer = null;
|
||
window.addEventListener("resize", function () {
|
||
clearTimeout(resizeTimer);
|
||
resizeTimer = setTimeout(renderGauges, 150);
|
||
});
|
||
})();
|