Expand dashboard analytics and document production implementation

mockups/retention-mockup.html

@@ -1,3 +1,3 @@
 <!doctype html>
 <html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Retention — Statboard</title><link rel="stylesheet" href="mockup.css"></head>
-<body data-page="retention"><div class="app"><aside class="sidebar"><a class="brand" href="overview-mockup.html"><span class="brand-mark">S</span>Statboard</a><div class="project-select"><div class="project-label">Current game</div><select class="select game-select" data-game-select aria-label="Game"><option>N/A</option></select></div><div class="nav-label">Workspace</div><nav class="nav"><a class="" href="overview-mockup.html"><span class="nav-icon">◫</span>Overview</a><a class="" href="sessions-mockup.html"><span class="nav-icon">◷</span>Sessions</a><a class="active" href="retention-mockup.html"><span class="nav-icon">↗</span>Retention</a><a class="" href="players-mockup.html"><span class="nav-icon">♙</span>Players</a><a class="" href="events-mockup.html"><span class="nav-icon">⌘</span>Events</a><a class="" href="activities-mockup.html"><span class="nav-icon">⟿</span>Activity sessions</a><a class="" href="monetization-mockup.html"><span class="nav-icon">◇</span>Monetization</a><a class="" href="settings-mockup.html"><span class="nav-icon">⚙</span>Project settings</a></nav><div class="sidebar-bottom"><span class="pill">PostgreSQL sample</span></div></aside><main class="main"><header class="topbar"><div class="breadcrumbs">Retention</div><select class="select mobile-game-select" data-game-select aria-label="Game"><option>N/A</option></select><div class="top-actions"><span class="status">PostgreSQL · UTC</span></div></header><section class="page"><div class="error-banner" data-error hidden></div><div class="page-heading"><div><h1>Retention</h1><div class="subtitle">Exact-day return rates from stored player sessions; incomplete cohorts display N/A.</div></div><div class="page-controls"><select class="select" data-days aria-label="Date range"><option value="7">Last 7 days</option><option value="14" selected>Last 14 days</option><option value="30">Last 30 days</option><option value="90">Last 90 days</option></select></div></div><div class="grid metrics"><article class="card card-pad metric-card"><div class="metric-label">Day 1 return rate</div><div class="metric-value" data-metric="retention" data-format="percent">N/A</div><div class="metric-foot">Weighted across mature cohorts</div></article><article class="card card-pad metric-card"><div class="metric-label">Day 7 return rate</div><div class="metric-value" data-metric="day7" data-format="percent">N/A</div><div class="metric-foot">Exact day 7, with a complete observation day</div></article><article class="card card-pad metric-card"><div class="metric-label">New players</div><div class="metric-value" data-metric="newPlayers" data-format="number">N/A</div><div class="metric-foot">First seen in selected period</div></article><article class="card card-pad metric-card"><div class="metric-label">Returning players</div><div class="metric-value" data-metric="returningPlayers" data-format="number">N/A</div><div class="metric-foot">First seen before selected period</div></article></div><div class="grid two-col"><article class="card"><div class="card-head"><div><div class="card-title">Retention by cohort</div><div class="card-note">First-session date and percentage returning on the exact day · UTC</div></div></div><div class="table-wrap"><div class="retention-grid" data-retention></div></div></article><article class="card"><div class="card-head"><div><div class="card-title">Return rate trend</div><div class="card-note">N/A observations are gaps in the chart</div></div></div><div class="chart-wrap" data-chart="trend"><div class="empty">N/A</div></div></article></div></section></main></div><nav class="mobile-nav"><a class="" href="overview-mockup.html"><span class="nav-icon">◫</span>Overview</a><a class="active" href="sessions-mockup.html"><span class="nav-icon">◷</span>Analytics</a><a class="" href="players-mockup.html"><span class="nav-icon">♙</span>Players</a><a class="" href="events-mockup.html"><span class="nav-icon">⌘</span>Events</a><a class="" href="settings-mockup.html"><span class="nav-icon">···</span>More</a></nav><script src="mockup.js"></script></body></html>
+<body data-page="retention"><div class="app"><aside class="sidebar"><a class="brand" href="overview-mockup.html"><span class="brand-mark">S</span>Statboard</a><div class="project-select"><div class="project-label">Current game</div><select class="select game-select" data-game-select aria-label="Game"><option>N/A</option></select></div><div class="nav-label">Workspace</div><nav class="nav"><a class="" href="overview-mockup.html"><span class="nav-icon">◫</span>Overview</a><a class="" href="sessions-mockup.html"><span class="nav-icon">◷</span>Sessions</a><a class="active" href="retention-mockup.html"><span class="nav-icon">↗</span>Retention</a><a class="" href="players-mockup.html"><span class="nav-icon">♙</span>Players</a><a class="" href="events-mockup.html"><span class="nav-icon">⌘</span>Events</a><a class="" href="activities-mockup.html"><span class="nav-icon">⟿</span>Activity sessions</a><a class="" href="monetization-mockup.html"><span class="nav-icon">◇</span>Monetization</a><a class="" href="settings-mockup.html"><span class="nav-icon">⚙</span>Project settings</a></nav><div class="sidebar-bottom"><span class="pill">PostgreSQL sample</span></div></aside><main class="main"><header class="topbar"><div class="breadcrumbs">Retention</div><select class="select mobile-game-select" data-game-select aria-label="Game"><option>N/A</option></select><div class="top-actions"><span class="status">PostgreSQL · UTC</span></div></header><section class="page"><div class="error-banner" data-error hidden></div><div class="page-heading"><div><h1>Retention</h1><div class="subtitle">Exact-day return rates from stored player sessions; incomplete cohorts display N/A.</div></div><div class="page-controls"><select class="select" data-days aria-label="Date range"><option value="7">Last 7 days</option><option value="14" selected>Last 14 days</option><option value="30">Last 30 days</option><option value="90">Last 90 days</option></select></div></div><div class="grid metrics"><article class="card card-pad metric-card"><div class="metric-label">Day 1 return rate</div><div class="metric-value" data-metric="retention" data-format="percent">N/A</div><div class="metric-foot">Weighted across mature cohorts</div></article><article class="card card-pad metric-card"><div class="metric-label">Day 7 return rate</div><div class="metric-value" data-metric="day7" data-format="percent">N/A</div><div class="metric-foot">Exact day 7, with a complete observation day</div></article><article class="card card-pad metric-card"><div class="metric-label">New players</div><div class="metric-value" data-metric="newPlayers" data-format="number">N/A</div><div class="metric-foot">First seen in selected period</div></article><article class="card card-pad metric-card"><div class="metric-label">Returning players</div><div class="metric-value" data-metric="returningPlayers" data-format="number">N/A</div><div class="metric-foot">First seen before selected period</div></article></div><div class="grid two-col"><article class="card"><div class="card-head"><div><div class="card-title">Retention by cohort</div><div class="card-note">First-session date and percentage returning on the exact day · UTC</div></div></div><div class="table-wrap"><div class="retention-grid" data-retention></div></div></article><article class="card"><div class="card-head"><div><div class="card-title">Return rate trend</div><div class="card-note">N/A observations are gaps in the chart</div></div></div><div class="chart-wrap" data-chart="trend"><div class="empty">N/A</div></div></article></div><div class="section-gap"><article class="card"><div class="card-head"><div><div class="card-title">First-week retention</div><div class="card-note">Day 1–7 exact-day returns · same mature cohorts at every point</div></div></div><div class="chart-wrap" data-chart="retention-week"><div class="empty">N/A</div></div></article></div></section></main></div><nav class="mobile-nav"><a class="" href="overview-mockup.html"><span class="nav-icon">◫</span>Overview</a><a class="active" href="sessions-mockup.html"><span class="nav-icon">◷</span>Analytics</a><a class="" href="players-mockup.html"><span class="nav-icon">♙</span>Players</a><a class="" href="events-mockup.html"><span class="nav-icon">⌘</span>Events</a><a class="" href="settings-mockup.html"><span class="nav-icon">···</span>More</a></nav><script src="mockup.js"></script></body></html>