fix(site): show negative history deltas

Related to #19

Author: Seungpyo1007

site/src/pages/index.astro

@@ -48,8 +48,8 @@ const endpoints = [
         <span class="mark">T</span>TechAPI<span class="cursor" aria-hidden="true"></span>
       </a>
       <div class="nav-links">
-        <a href="#playground">Playground</a>
         <a href="#history">History</a>
+        <a href="#playground">Playground</a>
         <a href="#featured">devices</a>
         <a href="#endpoints">endpoints</a>
         <a href={`${base}docs`}>docs</a>
@@ -76,7 +76,8 @@ const endpoints = [
         </h1>
         <p class="tagline">Structured specs &amp; computed scores for smartphones, SoCs, GPUs and CPUs — served as plain static JSON. Free and open.</p>
         <div class="hero-cta">
-          <a class="btn primary" href="#playground">Open Playground <span class="arr">→</span></a>
+          <a class="btn primary" href="#history">View dataset history <span class="arr">→</span></a>
+          <a class="btn" href="#playground">Open Playground</a>
           <a class="btn" href={`${base}docs`}>Read the docs</a>
         </div>
       </div>

site/src/scripts/techapi.js

@@ -222,9 +222,16 @@ function countUp(node, target) {
     const prev = sumByKey(prevRows);
     return nextRows
       .map((row) => ({ key: row.key, delta: row.count - (prev[row.key] || 0) }))
-      .filter((row) => row.delta > 0)
-      .sort((a, b) => b.delta - a.delta)
-      .slice(0, 2);
+      .filter((row) => row.delta !== 0)
+      .sort((a, b) => Math.abs(b.delta) - Math.abs(a.delta))
+      .slice(0, 3);
+  }
+
+  function formatDelta(delta, baseline = false) {
+    if (baseline) return "baseline";
+    if (delta > 0) return "+" + delta.toLocaleString();
+    if (delta < 0) return delta.toLocaleString();
+    return "no change";
   }
 
   function renderHistory(points) {
@@ -234,18 +241,19 @@ function countUp(node, target) {
     const range = Math.max(1, maxTotal - minTotal);
     chartEl.innerHTML = points.map((point) => {
       const pct = 18 + ((point.total - minTotal) / range) * 82;
-      const deltaText = point.delta > 0 ? "+" + point.delta.toLocaleString() : "baseline";
+      const deltaText = formatDelta(point.delta, point.baseline);
+      const deltaClass = point.delta < 0 ? " is-negative" : "";
       return `<a class="history-bar" href="${esc(point.url)}" target="_blank" rel="noopener" style="--h:${pct.toFixed(1)}%" title="${esc(point.title)}">
         <span class="history-bar-fill"></span>
         <span class="history-bar-total">${point.total.toLocaleString()}</span>
-        <span class="history-bar-delta">${esc(deltaText)}</span>
+        <span class="history-bar-delta${deltaClass}">${esc(deltaText)}</span>
       </a>`;
     }).join("");
 
     listEl.innerHTML = points.slice().reverse().map((point) => {
       const changes = point.changes.length
-        ? point.changes.map((row) => `${shortLabel[row.key]} +${row.delta.toLocaleString()}`).join(", ")
-        : (point.delta > 0 ? `total +${point.delta.toLocaleString()}` : "baseline snapshot");
+        ? point.changes.map((row) => `${shortLabel[row.key]} ${formatDelta(row.delta)}`).join(", ")
+        : (point.baseline ? "baseline snapshot" : `total ${formatDelta(point.delta)}`);
       return `<li><span class="history-dot"></span><span>
         <a href="${esc(point.url)}" target="_blank" rel="noopener">${esc(point.title)}</a>
         <small>${esc(point.when)} - ${esc(point.sha)} - ${esc(changes)}</small>
@@ -296,6 +304,7 @@ function countUp(node, target) {
 
     for (let i = 0; i < points.length; i++) {
       const prev = points[i - 1];
+      points[i].baseline = !prev;
       points[i].delta = prev ? points[i].total - prev.total : 0;
       points[i].changes = largestChanges(prev?.rows, points[i].rows);
     }

site/src/styles/techapi.css

@@ -366,6 +366,9 @@ code, .mono { font-family: var(--mono); }
   font-size: 10px;
   color: var(--accent-text);
 }
+.history-bar-delta.is-negative {
+  color: var(--err);
+}
 .history-list li {
   display: grid;
   grid-template-columns: 12px 1fr;