feat: better hero stats

Author: lucas-guerin-44

src/routes/public.py

@@ -9,12 +9,14 @@
 
 Cached server-side so a hot-loop can't pound DuckDB.
 """
+import os
 import threading
 import time
 from datetime import datetime, timezone
 
 from fastapi import APIRouter, Request
 
+from src.config import DUCKDB_PATH
 from src.core.datalake import get_db_connection
 from src.middleware.logging_config import get_logger
 from src.middleware.ratelimit import limiter
@@ -26,6 +28,9 @@
 _cache_lock = threading.Lock()
 _cache: dict = {"expires_at": 0.0, "value": None}
 
+# Canonical chronological order for timeframes; anything unknown falls to the end.
+_TIMEFRAME_ORDER = {"M1": 0, "M5": 1, "M15": 2, "M30": 3, "H1": 4, "H4": 5, "D1": 6, "W1": 7, "MN1": 8, "TICK": 99}
+
 
 def _compute_stats() -> dict:
     with get_db_connection() as con:
@@ -37,13 +42,14 @@ def _compute_stats() -> dict:
             "  UNION SELECT instrument FROM tick_data"
             ")"
         ).fetchone()[0]
-        timeframes = [
+        raw_timeframes = [
             r[0] for r in con.execute(
-                "SELECT DISTINCT timeframe FROM ohlc_data ORDER BY timeframe"
+                "SELECT DISTINCT timeframe FROM ohlc_data"
             ).fetchall()
         ]
         if tick_rows > 0:
-            timeframes.append("TICK")
+            raw_timeframes.append("TICK")
+        timeframes = sorted(raw_timeframes, key=lambda t: _TIMEFRAME_ORDER.get(t, 50))
 
         ohlc_range = con.execute(
             "SELECT MIN(timestamp), MAX(timestamp) FROM ohlc_data"
@@ -57,13 +63,19 @@ def _compute_stats() -> dict:
     start = min(mins).isoformat() if mins else None
     end = max(maxs).isoformat() if maxs else None
 
+    try:
+        disk_bytes = os.path.getsize(DUCKDB_PATH)
+    except OSError:
+        disk_bytes = None
+
     return {
         "ohlc_rows": ohlc_rows,
         "tick_rows": tick_rows,
         "total_rows": ohlc_rows + tick_rows,
         "instruments": instrument_count,
         "timeframes": timeframes,
         "date_range": {"start": start, "end": end},
+        "disk_bytes": disk_bytes,
         "last_refresh": datetime.now(timezone.utc).isoformat(),
         "cache_ttl_seconds": _CACHE_TTL_SECONDS,
     }

web/src/components/Hero.astro

@@ -1,5 +1,5 @@
 ---
-const repoUrl = "https://github.com/lucasguerin/datalake-api";
+const repoUrl = "https://github.com/lucas-guerin-44/datalake-api";
 ---
 
 <section class="relative overflow-hidden">

web/src/components/Stack.astro

@@ -1,13 +1,16 @@
 ---
+// Each tool has a dominant brand-ish colour. Shown as a fixed radial aura
+// (center of the card, not cursor-tracking) that fades in on hover, with a
+// tiled SVG noise overlay to stop it feeling plasticky.
 const items = [
-  { name: "FastAPI", role: "REST + WebSocket API" },
-  { name: "DuckDB", role: "OHLC + tick storage" },
-  { name: "PostgreSQL", role: "users + API keys" },
-  { name: "Caddy", role: "TLS reverse proxy" },
-  { name: "Docker Compose", role: "container orchestration" },
-  { name: "Wine", role: "runs MT5 on Linux" },
-  { name: "systemd + fail2ban", role: "ops on the host" },
-  { name: "Hetzner", role: "VPS" },
+  { name: "FastAPI",             role: "REST + WebSocket API",    color: "#009688" },
+  { name: "DuckDB",              role: "OHLC + tick storage",     color: "#F4C430" },
+  { name: "PostgreSQL",          role: "users + API keys",        color: "#336791" },
+  { name: "Caddy",               role: "TLS reverse proxy",       color: "#30D094" },
+  { name: "Docker Compose",      role: "container orchestration", color: "#2496ED" },
+  { name: "Wine",                role: "runs MT5 on Linux",       color: "#7B1F1F" },
+  { name: "systemd + fail2ban",  role: "ops on the host",         color: "#E3542D" },
+  { name: "Hetzner",             role: "VPS",                     color: "#D50C2D" },
 ];
 ---
 
@@ -21,11 +24,67 @@ const items = [
     </div>
     <ul class="grid grid-cols-2 gap-px overflow-hidden rounded-lg border border-ink-800 bg-ink-800 sm:grid-cols-4">
       {items.map((it) => (
-        <li class="bg-ink-900 p-5">
-          <div class="font-medium text-ink-100">{it.name}</div>
-          <div class="mt-1 text-xs text-ink-500">{it.role}</div>
+        <li class="stack-card relative overflow-hidden bg-ink-900 p-5" style={`--aura: ${it.color}`}>
+          <div class="relative z-10">
+            <div class="font-medium text-ink-100 transition-colors">{it.name}</div>
+            <div class="mt-1 text-xs text-ink-500 transition-colors">{it.role}</div>
+          </div>
         </li>
       ))}
     </ul>
   </div>
 </section>
+
+<style>
+  .stack-card::before,
+  .stack-card::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+    opacity: 0;
+    transition: opacity 500ms cubic-bezier(0.22, 1, 0.36, 1);
+  }
+
+  /* The coloured aura: the radial origin sits BELOW the card's bottom edge
+     so the glow reads as light spilling up from underneath rather than a
+     point-source inside. Ellipse stretches it wider-than-tall for a gentler
+     fall-off across the width. Multiple stops + heavy blur = smooth. */
+  .stack-card::before {
+    background: radial-gradient(
+      ellipse 140% 110% at 50% 118%,
+      color-mix(in srgb, var(--aura) 95%, transparent) 0%,
+      color-mix(in srgb, var(--aura) 70%, transparent) 18%,
+      color-mix(in srgb, var(--aura) 40%, transparent) 40%,
+      color-mix(in srgb, var(--aura) 15%, transparent) 65%,
+      transparent 88%
+    );
+    filter: blur(28px);
+    z-index: 0;
+  }
+
+  /* SVG noise layer — feTurbulence at high frequency gives the grainy
+     texture; the feColorMatrix collapses it to grey and dials alpha. */
+  .stack-card::after {
+    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
+    background-size: 160px 160px;
+    mix-blend-mode: overlay;
+    z-index: 1;
+  }
+
+  .stack-card:hover::before {
+    opacity: 0.75;
+  }
+  .stack-card:hover::after {
+    opacity: 0.22;
+  }
+
+  /* Reduced motion: skip the fade transition entirely. The aura still
+     appears on hover, it just snaps instead of easing. */
+  @media (prefers-reduced-motion: reduce) {
+    .stack-card::before,
+    .stack-card::after {
+      transition: none;
+    }
+  }
+</style>

web/src/components/StatsStrip.astro

@@ -13,47 +13,82 @@
       </p>
     </div>
 
+    <!--
+      Pre-filled with reasonable last-known-good values so the strip never
+      renders as an empty skeleton. On page load the fetch replaces them with
+      live numbers; if the fetch fails these stay and the refresh stamp reads
+      "stats unavailable".
+    -->
     <div class="grid grid-cols-2 gap-6 sm:grid-cols-4">
       <div>
-        <div class="text-[11px] uppercase tracking-wider text-ink-500">Total rows</div>
-        <div class="mt-1 font-mono text-3xl text-ink-50 sm:text-4xl tabular-nums" data-counter="0">0</div>
-        <div class="mt-1 text-xs text-ink-500">OHLC + ticks</div>
+        <div class="text-[11px] uppercase tracking-wider text-ink-500">On disk</div>
+        <div class="mt-1 font-mono text-3xl text-ink-50 sm:text-4xl tabular-nums" data-disk>~4 GB</div>
+        <div class="mt-1 text-xs text-ink-500" data-disk-sub>DuckDB, compressed</div>
       </div>
       <div>
         <div class="text-[11px] uppercase tracking-wider text-ink-500">Instruments</div>
-        <div class="mt-1 font-mono text-3xl text-ink-50 sm:text-4xl tabular-nums" data-counter="0">0</div>
-        <div class="mt-1 text-xs text-ink-500">FX, metals, indices, crypto, commodities</div>
+        <div class="mt-1 font-mono text-3xl text-ink-50 sm:text-4xl tabular-nums" data-counter>73</div>
+        <div class="mt-1 text-xs text-ink-500">across asset classes</div>
       </div>
       <div>
         <div class="text-[11px] uppercase tracking-wider text-ink-500">Timeframes</div>
-        <div class="mt-1 font-mono text-3xl text-ink-50 sm:text-4xl tabular-nums" data-timeframe-count>0</div>
-        <div class="mt-1 text-xs text-ink-500 truncate" data-timeframes>M1 → D1 + TICK</div>
+        <div class="mt-1 font-mono text-3xl text-ink-50 sm:text-4xl tabular-nums" data-timeframe-count>8</div>
+        <div class="mt-1 text-xs text-ink-500">M1 → D1, plus ticks</div>
       </div>
       <div>
-        <div class="text-[11px] uppercase tracking-wider text-ink-500">Date range</div>
-        <div class="mt-1 font-mono text-xl text-ink-50 sm:text-2xl tabular-nums" data-date-range>— → —</div>
-        <div class="mt-1 text-xs text-ink-500">UTC</div>
+        <div class="text-[11px] uppercase tracking-wider text-ink-500">Years of coverage</div>
+        <div class="mt-1 font-mono text-3xl text-ink-50 sm:text-4xl tabular-nums" data-years>25</div>
+        <div class="mt-1 text-xs text-ink-500" data-years-sub>2000-07-16 → 2026-04-20</div>
       </div>
     </div>
   </div>
 </section>
 
 <script is:inline>
 (function () {
+  // Fallback values that render immediately in the HTML. If the fetch below
+  // fails, the page keeps showing these rather than an empty skeleton.
+  // Count-up animations interpolate FROM these to the live numbers.
+  const FALLBACK = {
+    instruments: 73,
+    timeframes_count: 8,
+  };
+
   const formatNumber = (n) => {
     if (n >= 1_000_000_000) return (n / 1_000_000_000).toFixed(2) + "B";
     if (n >= 1_000_000) return (n / 1_000_000).toFixed(2) + "M";
     if (n >= 1_000) return (n / 1_000).toFixed(1) + "k";
     return String(n);
   };
 
+  const formatBytes = (n) => {
+    if (n == null) return "—";
+    if (n >= 1024 ** 4) return (n / 1024 ** 4).toFixed(2) + " TB";
+    if (n >= 1024 ** 3) return (n / 1024 ** 3).toFixed(2) + " GB";
+    if (n >= 1024 ** 2) return (n / 1024 ** 2).toFixed(1) + " MB";
+    if (n >= 1024) return (n / 1024).toFixed(0) + " KB";
+    return n + " B";
+  };
+
+  const yearsBetween = (startIso, endIso) => {
+    if (!startIso || !endIso) return null;
+    const start = new Date(startIso);
+    const end = new Date(endIso);
+    if (Number.isNaN(start.getTime()) || Number.isNaN(end.getTime())) return null;
+    return (end - start) / (365.25 * 24 * 3600 * 1000);
+  };
+
   const easeOutCubic = (t) => 1 - Math.pow(1 - t, 3);
 
-  function countUp(el, target, duration) {
+  function countUp(el, target, duration, fromValue = 0) {
+    if (fromValue === target) {
+      el.textContent = formatNumber(target);
+      return;
+    }
     const start = performance.now();
     const tick = (now) => {
       const t = Math.min(1, (now - start) / duration);
-      const v = Math.round(target * easeOutCubic(t));
+      const v = Math.round(fromValue + (target - fromValue) * easeOutCubic(t));
       el.textContent = formatNumber(v);
       if (t < 1) requestAnimationFrame(tick);
       else el.textContent = formatNumber(target);
@@ -87,28 +122,45 @@
   async function render() {
     const counters = document.querySelectorAll("[data-counter]");
     const tfCount = document.querySelector("[data-timeframe-count]");
-    const tfList = document.querySelector("[data-timeframes]");
-    const range = document.querySelector("[data-date-range]");
+    const diskEl = document.querySelector("[data-disk]");
+    const diskSubEl = document.querySelector("[data-disk-sub]");
+    const yearsEl = document.querySelector("[data-years]");
+    const yearsSubEl = document.querySelector("[data-years-sub]");
     const refreshEl = document.querySelector("[data-stats-refresh-value]");
 
     try {
       const res = await fetch("/api/public/stats", { headers: { accept: "application/json" } });
       if (!res.ok) throw new Error("status " + res.status);
       const data = await res.json();
 
-      const totals = [data.total_rows ?? 0, data.instruments ?? 0];
-      counters.forEach((el, i) => countUp(el, totals[i] ?? 0, 1200));
+      // Instruments — animate from fallback to live (small jump most of the time).
+      const liveInstruments = data.instruments ?? FALLBACK.instruments;
+      counters.forEach((el) => countUp(el, liveInstruments, 1200, FALLBACK.instruments));
+
+      const tfCountLive = (data.timeframes || []).length || FALLBACK.timeframes_count;
+      if (tfCount) tfCount.textContent = String(tfCountLive);
+
+      // Only overwrite disk/years if the API actually returned usable values.
+      // Null or malformed → leave the static fallback in place.
+      if (diskEl && data.disk_bytes != null) {
+        diskEl.textContent = formatBytes(data.disk_bytes);
+      }
+      if (diskSubEl && data.total_rows != null) {
+        diskSubEl.textContent = formatNumber(data.total_rows) + " rows, compressed";
+      }
 
-      if (tfCount) tfCount.textContent = String((data.timeframes || []).length);
-      if (tfList) tfList.textContent = (data.timeframes || []).join(" · ") || "—";
-      if (range) {
-        range.textContent =
-          formatDate(data.date_range?.start) + " → " + formatDate(data.date_range?.end);
+      const years = yearsBetween(data.date_range?.start, data.date_range?.end);
+      if (yearsEl && years != null) yearsEl.textContent = years.toFixed(1);
+      if (yearsSubEl && data.date_range?.start && data.date_range?.end) {
+        yearsSubEl.textContent =
+          formatDate(data.date_range.start) + " → " + formatDate(data.date_range.end);
       }
+
       if (refreshEl) refreshEl.textContent = relativeTime(data.last_refresh);
     } catch (err) {
-      counters.forEach((el) => (el.textContent = "—"));
-      if (refreshEl) refreshEl.textContent = "unavailable";
+      // Fetch failed — leave every value at its HTML fallback. Only signal
+      // that the numbers aren't fresh via the refresh stamp.
+      if (refreshEl) refreshEl.textContent = "stats unavailable";
     }
   }