{% extends "layout.html" %}
{% block title %}{{ zone.slug }} statistics — Abilian CDN{% endblock %}
{% block content %}
<h1>{{ zone.slug }}</h1>
<p class="subtitle">Statistics — last {{ days }} days, UTC</p>

<p class="actions">
  <a class="button" href="/_/ui/zones/{{ zone.slug }}/">Files</a>
  {% for range in ranges %}
  <a class="button{% if range == days %} primary{% endif %}"
     href="/_/ui/zones/{{ zone.slug }}/stats?days={{ range }}">{{ range }} days</a>
  {% endfor %}
  <span class="spacer"></span>
  <a class="button" href="/_/ui/zones/{{ zone.slug }}/stats?days={{ days }}&csv=1">Export CSV</a>
</p>

<div class="tiles">
  <div class="card tile">
    <span class="label">Requests</span>
    <strong>{{ summary.requests }}</strong>
  </div>
  <div class="card tile">
    <span class="label">Traffic</span>
    <strong>{{ summary.bytes_sent | filesize }}</strong>
  </div>
  <div class="card tile">
    <span class="label">Cache hit ratio</span>
    <strong>
      {%- if summary.hit_ratio is none -%}
      <span class="muted">no downloads</span>
      {%- else -%}
      {{ (summary.hit_ratio * 100) | round(1) }}%
      {%- endif -%}
    </strong>
  </div>
</div>

<h2>Requests per day</h2>
<div class="card chart-card">
  <div class="chart">
    {% for point in series %}
    <div class="bar" style="height: {{ (point.requests * 100 / busiest_day) | round(1) }}%"
         title="{{ point.day.date() }} — {{ point.requests }} requests, {{ point.bytes_sent | filesize }}"></div>
    {% endfor %}
  </div>
  <p class="axis">
    <span>{{ series[0].day.date() }}</span>
    <span class="muted">peak {{ busiest_day }} / day</span>
    <span>{{ series[-1].day.date() }}</span>
  </p>
</div>

<h2>Outcomes</h2>
<div class="card">
  {% if summary.by_outcome %}
  <table>
    <thead><tr><th>Outcome</th><th class="numeric">Requests</th><th class="numeric">Traffic</th></tr></thead>
    <tbody>
      {% for outcome, counted in summary.by_outcome | dictsort(by='value', reverse=true) %}
      <tr>
        <td>{{ outcome }}</td>
        <td class="numeric">{{ counted[0] }}</td>
        <td class="numeric muted">{{ counted[1] | filesize }}</td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
  {% else %}
  <p class="empty">Nothing delivered yet. Numbers appear within a minute of the first download.</p>
  {% endif %}
</div>

<h2>Busiest paths</h2>
<div class="card">
  {% if top_paths %}
  <table>
    <thead><tr><th>Path</th><th class="numeric">Requests</th><th class="numeric">Traffic</th></tr></thead>
    <tbody>
      {% for row in top_paths %}
      <tr>
        <td><code>{{ row.path }}</code></td>
        <td class="numeric">{{ row.requests }}</td>
        <td class="numeric muted">{{ row.bytes_sent | filesize }}</td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
  {% else %}
  <p class="empty">No requests in this window.</p>
  {% endif %}
</div>
{% endblock %}