Changeset 1794fac in Klonkt for src/views/pages

Timestamp:

06/19/2026 04:07:24 AM (3 months ago)

Author:

roboburr <roboburr@…>

Branches:

main

Children:

6be57b4

Parents:

37edecd

Message:

Pro stats (premium feature #5): referrers + period selector + all-time

Extension of the cookie-free StatsService.

• DB: stat_referrer (site_id, host, count).
• StatsService: recordPageview now also counts the external referrer host (Referer header; empty/own-site/invalid skipped, www- normalised). getStats(days) clamps to 7/14/30/90 + returns top-10 referrers (instance-wide) + all-time (pageviews, visitor days).
• admin-stats route: ?days=7|14|30|90.
• admin-stats view: period buttons, dynamic labels, Sources section, all-time row.

node --check passed.

Co-Authored-By: Claude <noreply@…>

File:

• src/views/pages/admin-stats.ejs (modified) (3 diffs)

src/views/pages/admin-stats.ejs

@@ -9 +9 @@
 
   <div class="stats-cards">
-    <div class="stat-card"><div class="stat-num"><%= s.totals.visitors %></div><div class="stat-label">Bezoekers (14d)</div></div>
-    <div class="stat-card"><div class="stat-num"><%= s.totals.pageviews %></div><div class="stat-label">Weergaven (14d)</div></div>
+    <div class="stat-card"><div class="stat-num"><%= s.totals.visitors %></div><div class="stat-label">Bezoekers (<%= s.days %>d)</div></div>
+    <div class="stat-card"><div class="stat-num"><%= s.totals.pageviews %></div><div class="stat-label">Weergaven (<%= s.days %>d)</div></div>
     <div class="stat-card"><div class="stat-num"><%= s.totals.plays %></div><div class="stat-label">Plays (totaal)</div></div>
     <div class="stat-card"><div class="stat-num"><%= s.totals.postViews %></div><div class="stat-label">Post-weergaven (totaal)</div></div>
   </div>
 
+  <% if (typeof s.allTime !== 'undefined') { %>
+    <p class="stats-note">All-time: <strong><%= s.allTime.pageviews %></strong> weergaven · <strong><%= s.allTime.visitorDays %></strong> bezoeker-dagen.</p>
+  <% } %>
+
+  <div class="stats-period">
+    Periode:
+    <% [7,14,30,90].forEach(function(n){ %>
+      <a href="/admin/stats?days=<%= n %>" class="<%= s.days === n ? 'is-on' : '' %>"><%= n %>d</a>
+    <% }); %>
+  </div>
+
   <section class="stats-chart-wrap">
     <div class="stats-chart-head">
-      <h2>Laatste 14 dagen</h2>
+      <h2>Laatste <%= s.days %> dagen</h2>
       <div class="stats-legend">
         <span class="lg lg-vis">Bezoekers</span>
@@ -66 +77 @@
   </div>
 
+  <% if (typeof s.referrers !== 'undefined' && s.referrers.length) { %>
+    <section class="stats-top" style="margin-top:1.2rem">
+      <h2>🌐 Bronnen (waar bezoekers vandaan komen)</h2>
+      <ol>
+        <% s.referrers.forEach(function(r){ %>
+          <li><span><%= r.host %></span><span class="stats-count"><%= r.n %></span></li>
+        <% }); %>
+      </ol>
+    </section>
+  <% } %>
+
   <% if (typeof linkClicks !== 'undefined' && linkClicks.length) { %>
     <section class="stats-top" style="margin-top:1.2rem">
@@ -112 +134 @@
 .stats-count { color: var(--accent); font-weight: 700; font-variant-numeric: tabular-nums; }
 .stats-empty { color: var(--ink-muted); font-size: .88rem; margin: 0; }
+.stats-period { margin: .2rem 0 1.2rem; font-size: .9rem; color: var(--ink-muted); }
+.stats-period a { display: inline-block; margin-left: .4rem; padding: .2rem .6rem; border: 1px solid var(--rule); border-radius: 999px; text-decoration: none; color: var(--ink); }
+.stats-period a.is-on { background: var(--accent); color: #fff; border-color: var(--accent); }
 </style>