/*! Admin heatmap overlay renderer (Hotjar-like radial blobs over page preview). */ (function () { function colorFor(t) { // green -> yellow -> red if (t < 0.33) { var k = t / 0.33; return [67 + (255 - 67) * k, 160 + (235 - 160) * k, 71 * (1 - k)]; } if (t < 0.66) { var k2 = (t - 0.33) / 0.33; return [255, 235 - (235 - 152) * k2, 0]; } var k3 = (t - 0.66) / 0.34; return [255, 152 * (1 - k3), 0]; } function paint() { var canvas = document.getElementById("admin-heatmap"); var stage = document.getElementById("admin-heatmap-stage"); if (!canvas || !stage) return; var grid = parseInt(canvas.getAttribute("data-grid"), 10) || 40; var max = parseInt(canvas.getAttribute("data-max"), 10) || 1; var cells = []; try { cells = JSON.parse(canvas.getAttribute("data-cells") || "[]"); } catch (e) { cells = []; } var width = Math.max(stage.clientWidth, 320); var height = Math.max(stage.clientHeight, 480); canvas.width = width; canvas.height = height; canvas.style.width = width + "px"; canvas.style.height = height + "px"; var ctx = canvas.getContext("2d"); ctx.clearRect(0, 0, width, height); var cellW = width / grid; var cellH = height / grid; var radius = Math.max(cellW, cellH) * 1.8; cells.forEach(function (cell) { var intensity = Math.min(1, cell.c / max); if (intensity <= 0) return; var cx = (cell.x + 0.5) * cellW; var cy = (cell.y + 0.5) * cellH; var rgb = colorFor(intensity); var grd = ctx.createRadialGradient(cx, cy, 0, cx, cy, radius); grd.addColorStop(0, "rgba(" + rgb[0] + "," + rgb[1] + "," + rgb[2] + "," + (0.2 + intensity * 0.55) + ")"); grd.addColorStop(1, "rgba(" + rgb[0] + "," + rgb[1] + "," + rgb[2] + ",0)"); ctx.fillStyle = grd; ctx.beginPath(); ctx.arc(cx, cy, radius, 0, Math.PI * 2); ctx.fill(); }); } if (document.readyState === "loading") { document.addEventListener("DOMContentLoaded", paint); } else { paint(); } window.addEventListener("resize", paint); })();