Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1" /> | |
| <title>Ring Sizer — Admin</title> | |
| <style> | |
| :root { | |
| --bg-1: #f5f1e7; | |
| --ink: #2b1f1f; | |
| --ink-soft: #4b3d3d; | |
| --accent: #bf3a2b; | |
| --sand: #f9f4ec; | |
| --shadow: rgba(34, 26, 26, 0.12); | |
| --border: rgba(45, 33, 33, 0.18); | |
| } | |
| * { box-sizing: border-box; } | |
| body { | |
| margin: 0; padding: 24px; | |
| color: var(--ink); | |
| background: var(--bg-1); | |
| font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; | |
| font-size: 14px; | |
| } | |
| h1 { font-size: 1.5rem; margin: 0 0 8px; } | |
| /* --- Login gate --- */ | |
| .login-gate { | |
| max-width: 320px; margin: 120px auto; text-align: center; | |
| } | |
| .login-gate h1 { margin-bottom: 16px; } | |
| .login-gate input { | |
| width: 100%; padding: 10px 12px; border: 1px solid var(--border); | |
| border-radius: 8px; font-size: 14px; margin-bottom: 12px; | |
| } | |
| .login-gate button { | |
| width: 100%; padding: 10px; border: none; border-radius: 8px; | |
| background: var(--accent); color: #fff; font-size: 14px; cursor: pointer; | |
| } | |
| .login-gate button:hover { opacity: 0.9; } | |
| .login-gate .error { color: var(--accent); font-size: 13px; margin-top: 8px; } | |
| .login-gate .back { display: inline-block; margin-top: 16px; color: var(--ink-soft); font-size: 13px; text-decoration: none; } | |
| /* --- Admin content --- */ | |
| .admin-content { display: none; } | |
| .toolbar { | |
| display: flex; gap: 12px; align-items: center; | |
| margin-bottom: 16px; flex-wrap: wrap; | |
| } | |
| .toolbar a, .toolbar button { | |
| padding: 6px 14px; border-radius: 6px; text-decoration: none; | |
| font-size: 13px; cursor: pointer; border: 1px solid var(--border); | |
| background: #fff; color: var(--ink); | |
| } | |
| .toolbar a:hover, .toolbar button:hover { background: var(--sand); } | |
| .toolbar .count { color: var(--ink-soft); font-size: 13px; } | |
| table { | |
| width: 100%; border-collapse: collapse; | |
| background: #fff; border-radius: 8px; | |
| box-shadow: 0 1px 4px var(--shadow); | |
| overflow: hidden; | |
| } | |
| th, td { | |
| padding: 8px 10px; text-align: left; | |
| border-bottom: 1px solid var(--border); | |
| white-space: nowrap; font-size: 13px; | |
| } | |
| th { background: var(--sand); font-weight: 600; position: sticky; top: 0; z-index: 1; } | |
| tr:hover td { background: #faf7f2; } | |
| .thumb { width: 48px; height: 48px; object-fit: cover; border-radius: 4px; cursor: pointer; } | |
| .fail { color: var(--accent); font-weight: 500; } | |
| .del-btn { | |
| padding: 2px 8px; font-size: 11px; cursor: pointer; | |
| border: 1px solid var(--accent); border-radius: 4px; | |
| background: #fff; color: var(--accent); | |
| } | |
| .del-btn:hover { background: var(--accent); color: #fff; } | |
| .finger-cell { font-size: 12px; } | |
| .finger-cell .size { font-weight: 600; } | |
| .finger-cell .detail { color: var(--ink-soft); } | |
| .empty { text-align: center; padding: 48px; color: var(--ink-soft); } | |
| .scroll-wrap { overflow-x: auto; } | |
| /* --- Tabs --- */ | |
| .tabs { | |
| display: flex; gap: 0; margin-bottom: 16px; | |
| border-bottom: 1px solid var(--border); | |
| } | |
| .tab { | |
| padding: 8px 16px; cursor: pointer; font-size: 14px; | |
| background: none; border: none; color: var(--ink-soft); | |
| border-bottom: 2px solid transparent; | |
| margin-bottom: -1px; | |
| } | |
| .tab:hover { color: var(--ink); } | |
| .tab.active { color: var(--ink); border-bottom-color: var(--accent); font-weight: 600; } | |
| .pane { display: none; } | |
| .pane.active { display: block; } | |
| /* --- Dashboard --- */ | |
| .stat-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); | |
| gap: 12px; margin-bottom: 20px; | |
| } | |
| .stat-card { | |
| background: #fff; border-radius: 8px; padding: 14px 16px; | |
| box-shadow: 0 1px 4px var(--shadow); | |
| } | |
| .stat-card .label { | |
| font-size: 11px; color: var(--ink-soft); | |
| text-transform: uppercase; letter-spacing: 0.05em; | |
| margin-bottom: 6px; | |
| } | |
| .stat-card .value { | |
| font-size: 22px; font-weight: 600; color: var(--ink); | |
| } | |
| .stat-card .sub { | |
| font-size: 12px; color: var(--ink-soft); margin-top: 4px; | |
| } | |
| .delta-up { color: #2f7a3d; } | |
| .delta-down { color: var(--accent); } | |
| .delta-flat { color: var(--ink-soft); } | |
| .chart-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); | |
| gap: 16px; | |
| } | |
| .chart-card { | |
| background: #fff; border-radius: 8px; padding: 14px 16px; | |
| box-shadow: 0 1px 4px var(--shadow); | |
| } | |
| .chart-card.wide { grid-column: 1 / -1; } | |
| .chart-card h2 { | |
| font-size: 13px; margin: 0 0 12px; | |
| color: var(--ink-soft); font-weight: 600; | |
| text-transform: uppercase; letter-spacing: 0.05em; | |
| } | |
| .chart-wrap { position: relative; height: 240px; } | |
| .chart-wrap.tall { height: 280px; } | |
| .top-kol-list { | |
| list-style: none; padding: 0; margin: 0; | |
| font-size: 13px; | |
| } | |
| .top-kol-list li { | |
| display: flex; justify-content: space-between; | |
| padding: 6px 0; border-bottom: 1px solid var(--border); | |
| } | |
| .top-kol-list li:last-child { border-bottom: none; } | |
| .top-kol-list .name { font-weight: 500; } | |
| .top-kol-list .count { color: var(--ink-soft); } | |
| </style> | |
| <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script> | |
| </head> | |
| <body> | |
| <!-- Login gate --> | |
| <div class="login-gate" id="loginGate"> | |
| <h1>Admin Access</h1> | |
| <form id="loginForm"> | |
| <input type="password" id="tokenInput" placeholder="Enter passcode" autofocus /> | |
| <button type="submit">Unlock</button> | |
| </form> | |
| <div class="error" id="loginError"></div> | |
| <a class="back" href="/">Back to Demo</a> | |
| </div> | |
| <!-- Admin content (hidden until authenticated) --> | |
| <div class="admin-content" id="adminContent"> | |
| <h1>Ring Sizer — Admin</h1> | |
| <div class="tabs"> | |
| <button class="tab active" data-pane="dashboardPane">Dashboard</button> | |
| <button class="tab" data-pane="recordsPane">Records</button> | |
| </div> | |
| <!-- Dashboard pane --> | |
| <div class="pane active" id="dashboardPane"> | |
| <div class="toolbar"> | |
| <a href="/">Back to Demo</a> | |
| <button id="dashRefreshBtn">Refresh</button> | |
| <label class="count" for="windowSelect">Window:</label> | |
| <select id="windowSelect"> | |
| <option value="7">Last 7 days</option> | |
| <option value="14">Last 14 days</option> | |
| <option value="30" selected>Last 30 days</option> | |
| <option value="60">Last 60 days</option> | |
| <option value="90">Last 90 days</option> | |
| </select> | |
| <span class="count" id="dashStatusLabel">Loading...</span> | |
| </div> | |
| <div class="stat-grid" id="statGrid"> | |
| <!-- stat cards injected --> | |
| </div> | |
| <div class="chart-grid"> | |
| <div class="chart-card wide"> | |
| <h2>Uploads Per Day</h2> | |
| <div class="chart-wrap tall"><canvas id="chartPerDay"></canvas></div> | |
| </div> | |
| <div class="chart-card"> | |
| <h2>Top KOLs</h2> | |
| <ol class="top-kol-list" id="topKolList"></ol> | |
| </div> | |
| <div class="chart-card"> | |
| <h2>Failure Reasons</h2> | |
| <div class="chart-wrap"><canvas id="chartFails"></canvas></div> | |
| </div> | |
| <div class="chart-card"> | |
| <h2>Confidence Levels</h2> | |
| <div class="chart-wrap"><canvas id="chartConf"></canvas></div> | |
| </div> | |
| <div class="chart-card"> | |
| <h2>Ring Model Usage</h2> | |
| <div class="chart-wrap"><canvas id="chartModels"></canvas></div> | |
| </div> | |
| <div class="chart-card"> | |
| <h2>Ring Size Distribution (Index, real uploads)</h2> | |
| <div class="chart-wrap"><canvas id="chartSizes"></canvas></div> | |
| </div> | |
| <div class="chart-card"> | |
| <h2>Mode (single vs multi)</h2> | |
| <div class="chart-wrap"><canvas id="chartModes"></canvas></div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Records pane --> | |
| <div class="pane" id="recordsPane"> | |
| <div class="toolbar"> | |
| <a href="/">Back to Demo</a> | |
| <a id="exportCsvLink" href="#" download>Export CSV</a> | |
| <button id="refreshBtn">Refresh</button> | |
| <button id="prevPageBtn" disabled>‹ Prev</button> | |
| <button id="nextPageBtn" disabled>Next ›</button> | |
| <span class="count" id="countLabel">Loading...</span> | |
| </div> | |
| <div class="scroll-wrap"> | |
| <table> | |
| <thead> | |
| <tr> | |
| <th>KOL</th> | |
| <th>Date</th> | |
| <th>Model</th> | |
| <th>Photo</th> | |
| <th>Index</th> | |
| <th>Middle</th> | |
| <th>Ring</th> | |
| <th>Conf</th> | |
| <th>Fail</th> | |
| <th></th> | |
| </tr> | |
| </thead> | |
| <tbody id="tableBody"> | |
| <tr><td colspan="10" class="empty">Loading...</td></tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| const loginGate = document.getElementById("loginGate"); | |
| const adminContent = document.getElementById("adminContent"); | |
| const loginForm = document.getElementById("loginForm"); | |
| const tokenInput = document.getElementById("tokenInput"); | |
| const loginError = document.getElementById("loginError"); | |
| const tbody = document.getElementById("tableBody"); | |
| const countLabel = document.getElementById("countLabel"); | |
| const prevPageBtn = document.getElementById("prevPageBtn"); | |
| const nextPageBtn = document.getElementById("nextPageBtn"); | |
| const PAGE_SIZE = 50; | |
| let allRows = []; | |
| let currentPage = 1; | |
| let adminToken = sessionStorage.getItem("admin_token") || ""; | |
| const unlock = async (token) => { | |
| const resp = await fetch(`/api/admin/measurements?token=${encodeURIComponent(token)}`); | |
| if (resp.status === 401) return false; | |
| adminToken = token; | |
| sessionStorage.setItem("admin_token", token); | |
| loginGate.style.display = "none"; | |
| adminContent.style.display = "block"; | |
| document.getElementById("exportCsvLink").href = `/api/admin/export-csv?token=${encodeURIComponent(adminToken)}`; | |
| loadStats(); | |
| loadData(); | |
| return true; | |
| }; | |
| // Auto-unlock if token saved in session | |
| if (adminToken) { | |
| unlock(adminToken).then((ok) => { | |
| if (!ok) { adminToken = ""; sessionStorage.removeItem("admin_token"); } | |
| }); | |
| } | |
| loginForm.addEventListener("submit", async (e) => { | |
| e.preventDefault(); | |
| const token = tokenInput.value.trim(); | |
| if (!token) return; | |
| const ok = await unlock(token); | |
| if (!ok) { | |
| loginError.textContent = "Incorrect passcode"; | |
| tokenInput.value = ""; | |
| tokenInput.focus(); | |
| } | |
| }); | |
| const fmtDate = (iso) => { | |
| if (!iso) return ""; | |
| const d = new Date(iso); | |
| return d.toLocaleDateString("en-CA") + " " + d.toLocaleTimeString("en-GB", { hour: "2-digit", minute: "2-digit", second: "2-digit" }); | |
| }; | |
| const fmtFinger = (pf, name) => { | |
| if (!pf || !pf[name]) return '<span class="detail">-</span>'; | |
| const f = pf[name]; | |
| if (f.status !== "ok") return `<span class="fail">${f.fail_reason || "fail"}</span>`; | |
| const size = f.best_match != null ? f.best_match : "-"; | |
| const diam = f.diameter_cm != null ? (f.diameter_cm * 10).toFixed(1) + "mm" : ""; | |
| const conf = f.confidence != null ? (f.confidence * 100).toFixed(0) + "%" : ""; | |
| return `<span class="size">${size}</span> <span class="detail">${diam} ${conf}</span>`; | |
| }; | |
| const rowHtml = (r) => { | |
| const pf = r.per_finger || {}; | |
| const photoThumb = r.photo_url | |
| ? `<img class="thumb" loading="lazy" src="${r.photo_url}" onclick="window.open('${r.photo_url}')" />` | |
| : "-"; | |
| return `<tr data-id="${r.id}"> | |
| <td><strong>${r.kol_name || "-"}</strong></td> | |
| <td>${fmtDate(r.created_at)}</td> | |
| <td>${r.ring_model || "-"}</td> | |
| <td>${photoThumb}</td> | |
| <td class="finger-cell">${fmtFinger(pf, "index")}</td> | |
| <td class="finger-cell">${fmtFinger(pf, "middle")}</td> | |
| <td class="finger-cell">${fmtFinger(pf, "ring")}</td> | |
| <td>${r.confidence != null ? (r.confidence * 100).toFixed(0) + "%" : "-"}</td> | |
| <td>${r.fail_reason ? '<span class="fail">' + r.fail_reason + "</span>" : ""}</td> | |
| <td><button class="del-btn" onclick="deleteRow(this)">Delete</button></td> | |
| </tr>`; | |
| }; | |
| const renderPage = () => { | |
| const total = allRows.length; | |
| const totalPages = Math.max(1, Math.ceil(total / PAGE_SIZE)); | |
| if (currentPage > totalPages) currentPage = totalPages; | |
| if (currentPage < 1) currentPage = 1; | |
| if (total === 0) { | |
| countLabel.textContent = "0 records"; | |
| tbody.innerHTML = '<tr><td colspan="10" class="empty">No measurements yet</td></tr>'; | |
| } else { | |
| const start = (currentPage - 1) * PAGE_SIZE; | |
| const slice = allRows.slice(start, start + PAGE_SIZE); | |
| countLabel.textContent = `${total} records · page ${currentPage}/${totalPages}`; | |
| tbody.innerHTML = slice.map(rowHtml).join(""); | |
| } | |
| prevPageBtn.disabled = currentPage <= 1; | |
| nextPageBtn.disabled = currentPage >= totalPages; | |
| }; | |
| const loadData = async () => { | |
| try { | |
| const resp = await fetch(`/api/admin/measurements?token=${encodeURIComponent(adminToken)}`); | |
| if (resp.status === 401) { | |
| sessionStorage.removeItem("admin_token"); | |
| loginGate.style.display = ""; | |
| adminContent.style.display = "none"; | |
| loginError.textContent = "Session expired. Please log in again."; | |
| return; | |
| } | |
| allRows = await resp.json(); | |
| currentPage = 1; | |
| renderPage(); | |
| } catch (e) { | |
| tbody.innerHTML = `<tr><td colspan="10" class="empty">Error loading data: ${e.message}</td></tr>`; | |
| } | |
| }; | |
| window.deleteRow = async (btn) => { | |
| if (!confirm("Delete this measurement record?")) return; | |
| const tr = btn.closest("tr"); | |
| const id = tr.dataset.id; | |
| try { | |
| const resp = await fetch(`/api/admin/measurements/${id}?token=${encodeURIComponent(adminToken)}`, { | |
| method: "DELETE", | |
| }); | |
| const result = await resp.json(); | |
| if (result.success) { | |
| allRows = allRows.filter((r) => r.id !== id); | |
| renderPage(); | |
| } else { | |
| alert("Delete failed: " + (result.error || "unknown")); | |
| } | |
| } catch (e) { | |
| alert("Network error: " + e.message); | |
| } | |
| }; | |
| prevPageBtn.addEventListener("click", () => { currentPage--; renderPage(); }); | |
| nextPageBtn.addEventListener("click", () => { currentPage++; renderPage(); }); | |
| document.getElementById("refreshBtn").addEventListener("click", loadData); | |
| // ------------------------------------------------------------------ | |
| // Tab switching | |
| // ------------------------------------------------------------------ | |
| document.querySelectorAll(".tab").forEach((btn) => { | |
| btn.addEventListener("click", () => { | |
| document.querySelectorAll(".tab").forEach((b) => b.classList.remove("active")); | |
| document.querySelectorAll(".pane").forEach((p) => p.classList.remove("active")); | |
| btn.classList.add("active"); | |
| document.getElementById(btn.dataset.pane).classList.add("active"); | |
| }); | |
| }); | |
| // ------------------------------------------------------------------ | |
| // Dashboard | |
| // ------------------------------------------------------------------ | |
| const ACCENT = "#bf3a2b"; | |
| const PALETTE = ["#bf3a2b", "#d99c4f", "#7a8b3d", "#3d6b8b", "#8a4d8e", "#4b8a82", "#a05a3c", "#5a5a3c"]; | |
| const dashStatusLabel = document.getElementById("dashStatusLabel"); | |
| const statGrid = document.getElementById("statGrid"); | |
| const topKolList = document.getElementById("topKolList"); | |
| const windowSelect = document.getElementById("windowSelect"); | |
| const charts = {}; | |
| const fmtPct = (v) => v == null ? "-" : (v * 100).toFixed(1) + "%"; | |
| const fmtInt = (v) => v == null ? "-" : v.toLocaleString(); | |
| const fmtDay = (iso) => { | |
| if (!iso) return "—"; | |
| // YYYY-MM-DD → MM-DD for compact axis labels | |
| return iso.slice(5); | |
| }; | |
| const deltaArrow = (curr, prev) => { | |
| if (!prev && !curr) return { cls: "delta-flat", txt: "no change" }; | |
| if (!prev) return { cls: "delta-up", txt: `+${curr} vs prior 7d` }; | |
| const diff = curr - prev; | |
| if (diff === 0) return { cls: "delta-flat", txt: "flat vs prior 7d" }; | |
| const pct = Math.round((diff / prev) * 100); | |
| if (diff > 0) return { cls: "delta-up", txt: `+${diff} (${pct >= 0 ? "+" : ""}${pct}%) vs prior 7d` }; | |
| return { cls: "delta-down", txt: `${diff} (${pct}%) vs prior 7d` }; | |
| }; | |
| const renderStatCards = (s) => { | |
| const t = s.totals; | |
| const last7Delta = deltaArrow(t.last_7_days, t.prev_7_days); | |
| const cards = [ | |
| { label: "Total measurements", value: fmtInt(t.total_measurements), sub: t.first_measurement_at ? `since ${t.first_measurement_at.slice(0, 10)}` : "" }, | |
| { label: "Unique KOLs", value: fmtInt(t.unique_kols), sub: "all-time, normalized" }, | |
| { label: "Last 7 days", value: fmtInt(t.last_7_days), sub: last7Delta.txt, subCls: last7Delta.cls }, | |
| { label: "Success rate", value: fmtPct(t.success_rate), sub: `${fmtInt(t.success_count)} ok · ${fmtInt(t.fail_count)} failed` }, | |
| { label: "Avg confidence", value: fmtPct(t.avg_confidence), sub: "successful runs only" }, | |
| { label: "Ground-truth coverage", value: fmtPct(t.gt_filled_rate), sub: `${fmtInt(t.gt_filled_count)} records labeled` }, | |
| ]; | |
| statGrid.innerHTML = cards.map((c) => ` | |
| <div class="stat-card"> | |
| <div class="label">${c.label}</div> | |
| <div class="value">${c.value}</div> | |
| <div class="sub ${c.subCls || ""}">${c.sub || ""}</div> | |
| </div> | |
| `).join(""); | |
| }; | |
| const renderTopKols = (kols) => { | |
| if (!kols.length) { | |
| topKolList.innerHTML = '<li><span class="name">—</span><span class="count">no KOLs yet</span></li>'; | |
| return; | |
| } | |
| topKolList.innerHTML = kols.map((k) => { | |
| const last = k.last_at ? new Date(k.last_at).toISOString().slice(0, 10) : ""; | |
| return `<li><span class="name">${k.kol_name}</span><span class="count">${k.count} · ${last}</span></li>`; | |
| }).join(""); | |
| }; | |
| const upsertChart = (key, ctx, config) => { | |
| if (charts[key]) { charts[key].destroy(); } | |
| charts[key] = new Chart(ctx, config); | |
| }; | |
| const renderCharts = (s) => { | |
| // Per-day uploads — line chart with photos, unique KOLs, fails | |
| const labels = s.per_day.map((d) => fmtDay(d.date)); | |
| upsertChart("perDay", document.getElementById("chartPerDay"), { | |
| type: "line", | |
| data: { | |
| labels, | |
| datasets: [ | |
| { label: "Photos", data: s.per_day.map((d) => d.photos), borderColor: ACCENT, backgroundColor: ACCENT + "33", tension: 0.25, fill: true }, | |
| { label: "Unique KOLs", data: s.per_day.map((d) => d.unique_kols), borderColor: "#3d6b8b", backgroundColor: "transparent", tension: 0.25 }, | |
| { label: "Failures", data: s.per_day.map((d) => d.fails), borderColor: "#a05a3c", backgroundColor: "transparent", borderDash: [4, 4], tension: 0.25 }, | |
| ], | |
| }, | |
| options: { | |
| responsive: true, maintainAspectRatio: false, | |
| interaction: { mode: "index", intersect: false }, | |
| scales: { y: { beginAtZero: true, ticks: { precision: 0 } } }, | |
| plugins: { legend: { position: "bottom" } }, | |
| }, | |
| }); | |
| // Failure reasons — doughnut. Always includes a Success slice for context. | |
| const failLabels = ["Success", ...s.fail_reasons.map((f) => f.reason)]; | |
| const failData = [s.totals.success_count, ...s.fail_reasons.map((f) => f.count)]; | |
| const failColors = ["#7a8b3d", ...s.fail_reasons.map((_, i) => PALETTE[(i + 1) % PALETTE.length])]; | |
| upsertChart("fails", document.getElementById("chartFails"), { | |
| type: "doughnut", | |
| data: { labels: failLabels, datasets: [{ data: failData, backgroundColor: failColors }] }, | |
| options: { | |
| responsive: true, maintainAspectRatio: false, | |
| plugins: { legend: { position: "right", labels: { boxWidth: 12, font: { size: 11 } } } }, | |
| }, | |
| }); | |
| // Confidence buckets — horizontal bar | |
| upsertChart("conf", document.getElementById("chartConf"), { | |
| type: "bar", | |
| data: { | |
| labels: s.confidence_buckets.map((b) => b.bucket), | |
| datasets: [{ | |
| data: s.confidence_buckets.map((b) => b.count), | |
| backgroundColor: ["#7a8b3d", "#d99c4f", "#bf3a2b"], | |
| }], | |
| }, | |
| options: { | |
| indexAxis: "y", responsive: true, maintainAspectRatio: false, | |
| plugins: { legend: { display: false } }, | |
| scales: { x: { beginAtZero: true, ticks: { precision: 0 } } }, | |
| }, | |
| }); | |
| // Ring model usage | |
| upsertChart("models", document.getElementById("chartModels"), { | |
| type: "bar", | |
| data: { | |
| labels: s.ring_models.map((m) => m.model), | |
| datasets: [{ data: s.ring_models.map((m) => m.count), backgroundColor: PALETTE }], | |
| }, | |
| options: { | |
| responsive: true, maintainAspectRatio: false, | |
| plugins: { legend: { display: false } }, | |
| scales: { y: { beginAtZero: true, ticks: { precision: 0 } } }, | |
| }, | |
| }); | |
| // Ring size distribution | |
| upsertChart("sizes", document.getElementById("chartSizes"), { | |
| type: "bar", | |
| data: { | |
| labels: s.size_distribution.map((d) => d.size), | |
| datasets: [{ data: s.size_distribution.map((d) => d.count), backgroundColor: ACCENT }], | |
| }, | |
| options: { | |
| responsive: true, maintainAspectRatio: false, | |
| plugins: { legend: { display: false } }, | |
| scales: { y: { beginAtZero: true, ticks: { precision: 0 } } }, | |
| }, | |
| }); | |
| // Mode split | |
| upsertChart("modes", document.getElementById("chartModes"), { | |
| type: "doughnut", | |
| data: { | |
| labels: s.modes.map((m) => m.mode), | |
| datasets: [{ data: s.modes.map((m) => m.count), backgroundColor: PALETTE }], | |
| }, | |
| options: { | |
| responsive: true, maintainAspectRatio: false, | |
| plugins: { legend: { position: "right" } }, | |
| }, | |
| }); | |
| }; | |
| const loadStats = async () => { | |
| dashStatusLabel.textContent = "Loading..."; | |
| const days = windowSelect.value; | |
| try { | |
| const resp = await fetch(`/api/admin/stats?token=${encodeURIComponent(adminToken)}&days=${days}`); | |
| if (resp.status === 401) { | |
| sessionStorage.removeItem("admin_token"); | |
| loginGate.style.display = ""; | |
| adminContent.style.display = "none"; | |
| loginError.textContent = "Session expired. Please log in again."; | |
| return; | |
| } | |
| const stats = await resp.json(); | |
| renderStatCards(stats); | |
| renderTopKols(stats.top_kols); | |
| renderCharts(stats); | |
| const updated = new Date().toLocaleTimeString("en-GB", { hour: "2-digit", minute: "2-digit", second: "2-digit" }); | |
| dashStatusLabel.textContent = `Updated ${updated}`; | |
| } catch (e) { | |
| dashStatusLabel.textContent = `Error: ${e.message}`; | |
| } | |
| }; | |
| document.getElementById("dashRefreshBtn").addEventListener("click", loadStats); | |
| windowSelect.addEventListener("change", loadStats); | |
| </script> | |
| </body> | |
| </html> | |