`views/index_detail.ejs`

36 lines
<%- include('partials/head') %>
<main class="container">
  <p class="crumbs"><a href="/">← Console</a></p>
  <h1><%= out.index.name %></h1>
  <p class="muted mono">slug: <%= out.index.slug %> · methodology: <%= out.index.methodology_version %></p>

  <section>
    <h2>Definition</h2>
    <pre class="json"><%= JSON.stringify(out.index.definition, null, 2) %></pre>
  </section>

  <section>
    <h2>Time series (<%= out.points.length %> points)</h2>
    <div class="trend">
      <%- include('partials/sparkline', { points: out.points, width: 480, height: 80 }) %>
    </div>
    <table>
      <thead><tr><th>As of</th><th>Value</th><th>Δ%</th></tr></thead>
      <tbody>
        <% out.points.forEach(p => { %>
          <tr>
            <td><%= fmtDate(p.as_of) %></td>
            <td class="num">$<%= money(p.value) %></td>
            <td class="num"><%= p.change_pct == null ? '—' : (p.change_pct * 100).toFixed(2) + '%' %></td>
          </tr>
        <% }) %>
      </tbody>
    </table>
  </section>
</main>
<%
function money(v){ if(v==null||v==='') return '—'; var n=parseFloat(v); return isFinite(n)?n.toLocaleString('en-US',{maximumFractionDigits:0}):'—'; }
function fmtDate(v){ if(!v) return '—'; try { return new Date(v).toISOString().slice(0,10); } catch(e){ return String(v); } }
%>
<%- include('partials/foot') %>