source: Klonkt/src/views/pages/admin-stats.ejs@ 19a72df

<div class="container stats-page">
  <p><a href="/admin" class="btn">&larr; Beheer</a></p>
  <h1><%= t('astat.title') %></h1>
  <p class="stats-note"><%= t('astat.intro') %></p>

  <% var s = stats; var _max = Math.max(1, ...s.series.map(function(d){ return d.pageviews; })); %>

  <div class="stats-cards">
    <div class="stat-card"><div class="stat-num"><%= s.totals.visitors %></div><div class="stat-label"><%= t('astat.visitor_days', { n: s.days }) %></div></div>
    <div class="stat-card"><div class="stat-num"><%= s.totals.pageviews %></div><div class="stat-label"><%= t('astat.pageviews_days', { n: s.days }) %></div></div>
    <div class="stat-card"><div class="stat-num"><%= s.totals.plays %></div><div class="stat-label"><%= t('astat.plays_total') %></div></div>
    <div class="stat-card"><div class="stat-num"><%= s.totals.postViews %></div><div class="stat-label"><%= t('astat.postviews_total') %></div></div>
  </div>

  <% if (typeof s.allTime !== 'undefined') { %>
    <p class="stats-note"><%= t('astat.alltime_pre') %> <strong><%= s.allTime.pageviews %></strong> <%= t('astat.alltime_mid') %> · <strong><%= s.allTime.visitorDays %></strong> <%= t('astat.alltime_post') %></p>
  <% } %>

  <details class="stats-help">
    <summary><%= t('astat.help_summary') %></summary>
    <ul>
      <li><strong><%= t('astat.help_vd_term') %></strong> — <%= t('astat.help_vd_a') %> <em><%= t('astat.help_vd_em') %></em><%= t('astat.help_vd_b') %></li>
      <li><strong><%= t('astat.help_pv_term') %></strong> — <%= t('astat.help_pv') %></li>
      <li><strong><%= t('astat.help_plays_term') %></strong> — <%= t('astat.help_plays') %></li>
      <li><strong><%= t('astat.help_postviews_term') %></strong> — <%= t('astat.help_postviews') %></li>
    </ul>
    <p><%= t('astat.help_footer') %></p>
  </details>

  <div class="stats-period">
    <%= t('astat.period') %>
    <% [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><%= t('astat.last_n_days', { n: s.days }) %></h2>
      <div class="stats-legend">
        <span class="lg lg-vis"><%= t('astat.lg_visitor_days') %></span>
        <span class="lg lg-pv"><%= t('astat.lg_pageviews') %></span>
      </div>
    </div>
    <div class="stats-chart">
      <% var _step = s.days <= 14 ? 1 : (s.days <= 31 ? 4 : 10);
         s.series.forEach(function(d, i){
           var pvPct = Math.round(d.pageviews / _max * 100);
           var visPct = Math.round(d.visitors / _max * 100);
      %>
        <div class="sc-col" title="<%= t('astat.bar_title', { day: d.day, pv: d.pageviews, vd: d.visitors }) %>">
          <div class="sc-bar">
            <span class="sc-pv" style="height: <%= pvPct %>%"></span>
            <span class="sc-vis" style="height: <%= visPct %>%"></span>
          </div>
          <span class="sc-day"><%= (i % _step === 0) ? d.day.slice(8) : '' %></span>
        </div>
      <% }); %>
    </div>
  </section>

  <div class="stats-tops">
    <section class="stats-top">
      <h2><%= t('astat.top_posts') %></h2>
      <% if (!s.topPosts.length || s.topPosts[0].views === 0) { %>
        <p class="stats-empty"><%= t('astat.no_views') %></p>
      <% } else { %>
        <ol>
          <% s.topPosts.forEach(function(p){ %>
            <li><a href="/<%= p.slug %>"><%= p.title %></a><span class="stats-count"><%= p.views %></span></li>
          <% }); %>
        </ol>
      <% } %>
    </section>
    <section class="stats-top">
      <h2><%= t('astat.most_played') %></h2>
      <% if (!s.topTracks.length || s.topTracks[0].plays === 0) { %>
        <p class="stats-empty"><%= t('astat.no_plays') %></p>
      <% } else { %>
        <ol>
          <% s.topTracks.forEach(function(t){ %>
            <li><span><%= t.title %></span><span class="stats-count"><%= t.plays %></span></li>
          <% }); %>
        </ol>
      <% } %>
    </section>
  </div>

  <% if (typeof s.referrers !== 'undefined' && s.referrers.length) { %>
    <section class="stats-top" style="margin-top:1.2rem">
      <h2>🌐 <%= t('astat.sources') %></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">
      <h2>🔗 <%= t('astat.linkbio_clicks') %></h2>
      <ol>
        <% linkClicks.forEach(function(l){ %>
          <li><a href="<%= l.url %>" target="_blank" rel="noopener"><%= l.url.replace(/^https?:\/\//,'').slice(0,48) %></a><span class="stats-count"><%= l.clicks %></span></li>
        <% }); %>
      </ol>
    </section>
  <% } %>
</div>

<style>
.stats-page { max-width: 820px; margin: 2.5rem auto; padding: 0 1rem; }
.stats-page h1 { font-family: var(--font-display, serif); font-size: 2rem; margin: .5rem 0 .25rem; }
.stats-note { color: var(--ink-muted); font-size: .85rem; margin: 0 0 1.5rem; max-width: 60ch; }
.stats-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: .75rem; margin-bottom: 2rem; }
.stat-card { background: var(--paper-2); border: 1px solid var(--rule); border-radius: 10px; padding: 1rem 1.1rem; }
.stat-num { font-family: var(--font-display, serif); font-size: 1.9rem; line-height: 1; color: var(--accent); }
.stat-label { color: var(--ink-muted); font-size: .82rem; margin-top: .35rem; }

.stats-chart-wrap { background: var(--paper-2); border: 1px solid var(--rule); border-radius: 12px; padding: 1.1rem 1.2rem 1rem; margin-bottom: 2rem; }
.stats-chart-head { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: .5rem; }
.stats-chart-head h2 { font-size: 1.05rem; margin: 0; }
.stats-legend { display: flex; gap: .9rem; font-size: .78rem; color: var(--ink-muted); }
.lg::before { content: ""; display: inline-block; width: .7rem; height: .7rem; border-radius: 2px; margin-right: .3rem; vertical-align: -1px; }
.lg-vis::before { background: var(--accent); }
.lg-pv::before { background: color-mix(in srgb, var(--accent) 28%, transparent); }
.stats-chart { display: flex; align-items: flex-end; gap: 2px; height: 160px; margin-top: 1rem; overflow: hidden; }
.sc-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; height: 100%; justify-content: flex-end; }
.sc-bar { position: relative; width: 70%; max-width: 26px; min-width: 2px; height: 140px; display: flex; align-items: flex-end; }
.sc-day { white-space: nowrap; }
.sc-pv, .sc-vis { position: absolute; bottom: 0; left: 0; width: 100%; border-radius: 3px 3px 0 0; min-height: 2px; }
.sc-pv { background: color-mix(in srgb, var(--accent) 28%, transparent); }
.sc-vis { background: var(--accent); }
.sc-day { font-size: .68rem; color: var(--ink-muted); margin-top: .35rem; }

.stats-tops { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
@media (max-width: 560px) { .stats-tops { grid-template-columns: 1fr; } }
.stats-top { background: var(--paper-2); border: 1px solid var(--rule); border-radius: 12px; padding: 1rem 1.2rem; }
.stats-top h2 { font-size: 1.05rem; margin: 0 0 .6rem; }
.stats-top ol { margin: 0; padding-left: 1.2rem; }
.stats-top li { padding: .35rem 0; display: flex; justify-content: space-between; gap: .5rem; align-items: baseline; }
.stats-top a { color: var(--ink); text-decoration: none; }
.stats-top a:hover { color: var(--accent); }
.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>