Upgrade heatmaps stile Hotjar: movimenti mouse e anteprima pagina live.

Traccia i movimenti aggregati, overlay a gradienti sull’iframe della pagina e toggle click/move in admin. Co-authored-by: Cursor <cursoragent@cursor.com>
2026-08-20 23:03:12 +02:00
parent 8a07c5d569
commit b84321346f
26 changed files with 361 additions and 96 deletions
@@ -0,0 +1,67 @@
+/*! 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);
+})();