Stat-Dashboard/mockups/overview-mockup.html

<!doctype html>
<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Overview — Statboard</title><link rel="stylesheet" href="mockup.css"></head>
<body data-page="overview"><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="active" 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="" 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">Overview</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>Overview</h1><div class="subtitle">Game-wide analytics from PostgreSQL. Missing or unreported values 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><section class="health-reports section-gap"><article class="card card-pad overview-analysis"><details class="health-report-disclosure" open><summary class="health-report-summary"><span class="health-report-heading"><span class="health-report-title">Everything at a glance</span><span class="health-report-actions"><span class="pill">Sample analysis</span><svg class="health-report-chevron" viewBox="0 0 24 24" aria-hidden="true"><path d="m9 5 7 7-7 7"/></svg></span></span><span class="card-note" data-analysis-dates>Loading analysis...</span></summary><div class="health-report-content health-report-body" data-overview-analysis></div><div class="card-note health-report-updated" data-analysis-updated></div></details></article><div class="grid health-report-grid section-gap"><article class="card card-pad health-report" data-health-report="1"><details class="health-report-disclosure" open><summary class="health-report-summary"><span class="health-report-heading"><span class="health-report-title">Yesterday</span><span class="health-report-actions"><span class="pill">Sample analysis</span><svg class="health-report-chevron" viewBox="0 0 24 24" aria-hidden="true"><path d="m9 5 7 7-7 7"/></svg></span></span><span class="card-note" data-health-dates>Loading report...</span></summary><div class="health-report-content"><div class="health-report-body" data-health-body></div><div class="health-report-notes" data-health-notes></div><div class="card-note health-report-updated" data-health-updated></div></div></details></article><article class="card card-pad health-report" data-health-report="7"><details class="health-report-disclosure" open><summary class="health-report-summary"><span class="health-report-heading"><span class="health-report-title">Past 7 days</span><span class="health-report-actions"><span class="pill">Sample analysis</span><svg class="health-report-chevron" viewBox="0 0 24 24" aria-hidden="true"><path d="m9 5 7 7-7 7"/></svg></span></span><span class="card-note" data-health-dates>Loading report...</span></summary><div class="health-report-content"><div class="health-report-body" data-health-body></div><div class="health-report-notes" data-health-notes></div><div class="card-note health-report-updated" data-health-updated></div></div></details></article></div></section><div class="grid metrics"><article class="card card-pad metric-card"><div class="metric-label">Unique players</div><div class="metric-value" data-metric="players" data-format="number">N/A</div><div class="metric-foot">Players with a session in the selected period</div></article><article class="card card-pad metric-card"><div class="metric-label">Sessions</div><div class="metric-value" data-metric="sessions" data-format="number">N/A</div><div class="metric-foot">Session starts in the selected period</div></article><article class="card card-pad metric-card"><div class="metric-label">Average session</div><div class="metric-value" data-metric="avgSession" data-format="duration">N/A</div><div class="metric-foot">Completed sessions only</div></article><article class="card card-pad metric-card"><div class="metric-label">Day 1 retention</div><div class="metric-value" data-metric="retention" data-format="percent">N/A</div><div class="metric-foot">Exact next-day return; mature cohorts</div></article><article class="card card-pad metric-card"><div class="metric-label">Visits</div><div class="metric-value" data-metric="visits" data-format="number">N/A</div><div class="metric-foot">Game-level daily visit samples in the period</div></article><article class="card card-pad metric-card"><div class="metric-label">Latest CCU</div><div class="metric-value" data-metric="ccu" data-format="number">N/A</div><div class="metric-foot">Latest game-level report; unknown reports stay N/A</div></article><article class="card card-pad metric-card"><div class="metric-label">Events</div><div class="metric-value" data-metric="events" data-format="number">N/A</div><div class="metric-foot">Player and game-level events</div></article><article class="card card-pad metric-card"><div class="metric-label">Latest event</div><div class="metric-value" data-metric="latestEvent" data-format="date">N/A</div><div class="metric-foot">Most recent event in selected period</div></article></div><div class="grid two-col"><article class="card"><div class="card-head"><div><div class="card-title">Players and sessions</div><div class="card-note">Grouped by UTC date</div></div></div><div class="chart-wrap" data-chart="trend"><div class="empty">N/A</div></div></article><article class="card"><div class="card-head"><div><div class="card-title">Top events</div><div class="card-note">Recorded event counts</div></div></div><div class="chart-wrap" data-chart="events"><div class="empty">N/A</div></div></article></div><div class="grid two-col section-gap"><article class="card"><div class="card-head"><div><div class="card-title">Concurrent players</div><div class="card-note">Daily average of reported CCU samples</div></div></div><div class="chart-wrap" data-chart="ccu"><div class="empty">N/A</div></div></article></div><div class="section-gap"><div class="grid metrics"><article class="card card-pad metric-card"><div class="metric-label">DAU today</div><div class="metric-value" data-metric="dau" data-format="number">N/A</div><div class="metric-foot">Distinct active players today · UTC</div></article><article class="card card-pad metric-card"><div class="metric-label">Rolling MAU today</div><div class="metric-value" data-metric="mau" data-format="number">N/A</div><div class="metric-foot">Distinct active players in last 30 calendar days</div></article><article class="card card-pad metric-card"><div class="metric-label">New users today</div><div class="metric-value" data-metric="newUsersToday" data-format="number">N/A</div><div class="metric-foot">First seen today</div></article><article class="card card-pad metric-card"><div class="metric-label">Returning users today</div><div class="metric-value" data-metric="returningUsersToday" data-format="number">N/A</div><div class="metric-foot">Active today, first seen before today</div></article></div></div><div class="grid two-col"><article class="card"><div class="card-head"><div><div class="card-title">Daily and monthly active users</div><div class="card-note">MAU is calculated separately for every day</div></div></div><div class="chart-wrap" data-chart="active-users"><div class="empty">N/A</div></div></article><article class="card"><div class="card-head"><div><div class="card-title">New and returning daily users</div><div class="card-note">UTC daily counts</div></div></div><div class="chart-wrap" data-chart="new-returning"><div class="empty">N/A</div></div></article></div></section></main></div><nav class="mobile-nav"><a class="active" href="overview-mockup.html"><span class="nav-icon">◫</span>Overview</a><a class="" 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>