{% extends "base.html" %}
{% from "_macros.html" import rate %}
{% set nav = 'trend' %}
{% block body %}
<h1>Trend for one system</h1>
<p class="sub">A single run says whether a system is good today. Improving it needs the curve —
this is the view that answers "did the last change help?".</p>

<div class="card">
  <form class="inline" method="get">
    <div><label for="system">System</label>
      <select name="system" id="system" onchange="this.form.submit()">
        <option value="">—</option>
        {% for s in systems %}<option value="{{ s }}" {% if s==system %}selected{% endif %}>{{ s }}</option>{% endfor %}
      </select></div>
    {% if datasets %}
    <div><label for="dataset">Dataset</label>
      <select name="dataset" id="dataset">
        {% for d in datasets %}<option value="{{ d }}" {% if d==dataset %}selected{% endif %}>{{ d }}</option>{% endfor %}
      </select></div>
    {% endif %}
    <button type="submit">Show</button>
  </form>
  <p class="note">Filtered to one dataset on purpose: a rate on PMo and a rate on fixtures
  answer different questions and must not share an axis.</p>
</div>

{% if points %}
<svg id="chart" viewBox="0 0 900 300" style="width:100%;height:300px" role="img"
     aria-label="Gate rates over time"></svg>
<div class="scroll"><table>
  <thead><tr><th>Run</th><th>Version</th><th>Started</th>
    {% for g in gates %}<th>{{ g.replace('gate.','') }}</th>{% endfor %}</tr></thead>
  <tbody>
  {% for p in points %}
    <tr>
      <td><a href="/runs/{{ p.run_id }}" class="mono">{{ p.run_id }}</a></td>
      <td>{{ p.sut_version }}</td>
      <td class="muted">{{ p.started[:19] }}</td>
      {% for g in gates %}<td>{{ rate(p.rates.get(g)) }}</td>{% endfor %}
    </tr>
  {% endfor %}
  </tbody>
</table></div>

<script>
// Hand-drawn SVG rather than a charting library: four series over a handful of
// points does not justify a dependency, and this stays readable offline.
const series = {{ series|safe }};
const svg = document.getElementById('chart');
const W = 900, H = 300, pad = { l: 46, r: 120, t: 16, b: 30 };
const colours = ['#2f5fd0', '#1a7f4b', '#a86a00', '#b3261e'];
const ns = 'http://www.w3.org/2000/svg';
const el = (n, a) => { const e = document.createElementNS(ns, n);
  for (const k in a) e.setAttribute(k, a[k]); return e; };

for (let g = 0; g <= 4; g++) {
  const y = pad.t + (H - pad.t - pad.b) * (g / 4);
  svg.appendChild(el('line', { x1: pad.l, y1: y, x2: W - pad.r, y2: y,
    stroke: 'currentColor', 'stroke-opacity': .12 }));
  const label = el('text', { x: pad.l - 8, y: y + 4, 'text-anchor': 'end',
    'font-size': 11, fill: 'currentColor', 'fill-opacity': .55 });
  label.textContent = (100 - g * 25) + '%';
  svg.appendChild(label);
}

Object.keys(series).forEach((gate, i) => {
  const pts = series[gate].filter(p => p.y !== null && p.y !== undefined);
  if (!pts.length) return;
  const x = n => pad.l + (W - pad.l - pad.r) * (pts.length === 1 ? .5 : n / (pts.length - 1));
  const y = v => pad.t + (H - pad.t - pad.b) * (1 - v);
  const d = pts.map((p, n) => `${n ? 'L' : 'M'}${x(n)},${y(p.y)}`).join(' ');
  svg.appendChild(el('path', { d, fill: 'none', stroke: colours[i % colours.length],
    'stroke-width': 2 }));
  pts.forEach((p, n) => svg.appendChild(el('circle', { cx: x(n), cy: y(p.y), r: 3,
    fill: colours[i % colours.length] })));
  const key = el('text', { x: W - pad.r + 10, y: pad.t + 14 + i * 18, 'font-size': 12,
    fill: colours[i % colours.length] });
  key.textContent = gate.replace('gate.', '');
  svg.appendChild(key);
});
</script>
{% elif system %}
  <p class="muted">No scored runs for this system yet.</p>
{% endif %}
{% endblock %}