v0.4.1_hotfix

internal/web/assets/app.js

@@ -99,13 +99,18 @@
     var plotW = Math.max(1, cssW - padL - padR);
     var plotH = Math.max(1, cssH - padT - padB);
 
+    var peakPoints = (data && data.peak_points) || [];
     var values = [];
     points.forEach(function (p) { if (p.v !== null && p.v !== undefined) values.push(p.v); });
+    peakPoints.forEach(function (p) { if (p.v !== null && p.v !== undefined) values.push(p.v); });
     var maxV = values.length ? Math.max.apply(null, values) : 1;
-    var top = Math.max(1, Math.ceil(maxV * 1.2));
+    var top = Math.max(1, Math.ceil(maxV * 1.15));
 
+    function xAtFor(series, i) {
+      return padL + (series.length > 1 ? (i / (series.length - 1)) * plotW : plotW / 2);
+    }
     function xAt(i) {
-      return padL + (points.length > 1 ? (i / (points.length - 1)) * plotW : plotW / 2);
+      return xAtFor(points, i);
     }
     function yAt(v) {
       return padT + plotH - (v / top) * plotH;
@@ -140,9 +145,47 @@
       });
     }
 
-    // area + line, broken into separate segments across data gaps (nulls)
-    // instead of interpolating through them
+    // For week/month/year the API also returns a MAX series. Draw it first
+    // as a subtle dashed line: the solid/filled line remains the smoothed
+    // average trend, while real historical peaks are still visible.
+    if (peakPoints.length > 1) {
+      ctx.save();
+      ctx.beginPath();
+      peakPoints.forEach(function (p, i) {
+        var v = (p.v === null || p.v === undefined) ? 0 : p.v;
+        var x = xAtFor(peakPoints, i);
+        var y = yAt(v);
+        if (i === 0) ctx.moveTo(x, y);
+        else ctx.lineTo(x, y);
+      });
+      ctx.lineJoin = 'round';
+      ctx.lineCap = 'round';
+      ctx.lineWidth = 1;
+      ctx.strokeStyle = accent;
+      ctx.globalAlpha = 0.42;
+      ctx.setLineDash([4, 4]);
+      ctx.stroke();
+      ctx.restore();
+    }
+
+    // Main average/trend line; missing samples are rendered as zero so the
+    // graph falls cleanly to the baseline instead of breaking into segments.
+    // Short windows represent a discrete user count, so draw them as steps:
+    // the value stays constant until the next sample instead of producing
+    // narrow triangular needles between 0 and 1/2 users.
+    var useSteps = data.key === 'hour' || data.key === 'day';
     var seg = [];
+
+    function traceSeries(segment) {
+      ctx.moveTo(segment[0][0], segment[0][1]);
+      for (var i = 1; i < segment.length; i++) {
+        if (useSteps) {
+          ctx.lineTo(segment[i][0], segment[i - 1][1]);
+        }
+        ctx.lineTo(segment[i][0], segment[i][1]);
+      }
+    }
+
     function flushSegment() {
       if (seg.length < 2) {
         seg = [];
@@ -150,17 +193,20 @@
       }
       ctx.beginPath();
       ctx.moveTo(seg[0][0], padT + plotH);
-      seg.forEach(function (pt) { ctx.lineTo(pt[0], pt[1]); });
+      ctx.lineTo(seg[0][0], seg[0][1]);
+      for (var i = 1; i < seg.length; i++) {
+        if (useSteps) {
+          ctx.lineTo(seg[i][0], seg[i - 1][1]);
+        }
+        ctx.lineTo(seg[i][0], seg[i][1]);
+      }
       ctx.lineTo(seg[seg.length - 1][0], padT + plotH);
       ctx.closePath();
       ctx.fillStyle = accent + '38';
       ctx.fill();
 
       ctx.beginPath();
-      seg.forEach(function (pt, idx) {
-        if (idx === 0) ctx.moveTo(pt[0], pt[1]);
-        else ctx.lineTo(pt[0], pt[1]);
-      });
+      traceSeries(seg);
       ctx.lineJoin = 'round';
       ctx.lineCap = 'round';
       ctx.lineWidth = 1.6;
@@ -169,11 +215,8 @@
       seg = [];
     }
     points.forEach(function (p, i) {
-      if (p.v === null || p.v === undefined) {
-        flushSegment();
-        return;
-      }
-      seg.push([xAt(i), yAt(p.v)]);
+      var v = (p.v === null || p.v === undefined) ? 0 : p.v;
+      seg.push([xAt(i), yAt(v)]);
     });
     flushSegment();
     return true;