{% extends "base.html" %}

{% block title %}Charts · {{ project.title }} · Projects · {{ project.owner }}{% endblock %}

{% block mainclass %} class="wide"{% endblock %}

{% block content %}

<div class="head"><h1>{{ project.title }} <small><a href="/projects/{{ project.owner }}">{{ project.owner }}'s projects</a> · #{{ project.number }}</small></h1></div>

<nav class="board-tabs" aria-label="Views of this board">

  <a class="board-tab" href="/projects/{{ project.owner }}/{{ project.number }}">Board</a>

  {% for v in views %}<a class="board-tab" href="/projects/{{ project.owner }}/{{ project.number }}?view={{ v.name|urlencode }}">{{ v.name }} <span class="small mute">{{ v.layout }}</span></a>{% endfor %}

  <a class="board-tab on" href="/projects/{{ project.owner }}/{{ project.number }}/charts" aria-current="page">Charts</a>

</nav>

<p class="small mute">From the board's own history: when each card joined each column. No estimates; the forecasts sample the weeks the board has had.</p>

<section aria-labelledby="fc-h">

<h2 id="fc-h">Forecasts</h2>

<form class="board-filter" method="get" action="/projects/{{ project.owner }}/{{ project.number }}/charts" role="search">

  <label class="visually-hidden" for="fc-q">Forecast the cards matching</label><input type="search" id="fc-q" name="q" value="{{ q }}" placeholder="forecast cards matching: label:bug, milestone:…, repo:…">

  <button type="submit" class="small">FORECAST</button>

</form>

<div class="table-wrap"><table class="board-table">

  <thead><tr><th scope="col">Cards</th><th scope="col">Left</th><th scope="col">50% done by</th><th scope="col">85% done by</th></tr></thead>

  <tbody>{% for f in c.forecasts %}<tr><td>{{ f.scope }}</td><td>{{ f.remaining }}</td>

    {% match f.p50 %}{% when Some(d) %}<td><strong>{{ d }}</strong></td>{% when None %}<td class="mute" colspan="2">no forecast: no card has reached Done in the weeks it draws from</td>{% endmatch %}

    {% if let Some(d) = f.p85 %}<td>{{ d }}</td>{% else if f.p50.is_some() %}<td class="mute">beyond ten years</td>{% endif %}</tr>{% endfor %}</tbody>

</table></div>

{% if let Some(f) = c.forecasts.first() %}<p class="small mute">From {{ f.weeks_of_history }} week{% if f.weeks_of_history != 1 %}s{% endif %} of throughput (cards reaching Done each week), sampled {{ crate::web::board_charts::TRIALS_SHOWN }} times; the same history gives the same dates all day.</p>{% endif %}

</section>

<div class="chart-grid">

<figure class="chart-card wide-card" id="timeline"><figcaption>Timeline</figcaption>

  {% if timeline_svg.is_empty() %}<p class="mute">No iterations yet, and no open card with a milestone. Start an iteration on the board, or give cards milestones, and they appear here.</p>

  {% else %}{{ timeline_svg|safe }}

  <div class="legend"><span class="key s-main">open iteration</span><span class="key s-mute">past iteration</span><span class="key s-warn">forecast: 50% to 85%</span><span class="key s-bad">milestone due</span></div>{% endif %}

</figure>

{% if let Some((name, _, days)) = c.burn %}

<figure class="chart-card"><figcaption>{{ name }}: burn-down</figcaption>{{ burn_svg|safe }}

  <div class="legend"><span class="key s-main">cards left</span><span class="key s-mute">scope</span></div>

  <p class="small mute">{% if let Some((l, s)) = days.last() %}{{ l }} left of {{ s }} after {{ days.len() }} day{% if days.len() != 1 %}s{% endif %}{% endif %}.</p>

</figure>

{% endif %}

<figure class="chart-card"><figcaption>Cycle time</figcaption>

  {% match c.cycle_median_days %}{% when Some(m) %}<p class="kpi"><span class="kpi-v">{{ m }} d</span> <span class="kpi-l">median</span> · <span class="kpi-v">{% if let Some(p) = c.cycle_p85_days %}{{ p }}{% endif %} d</span> <span class="kpi-l">85th percentile</span></p>

  <p class="small mute">From leaving the first column to reaching Done, over {{ c.cycle_finished }} finished card{% if c.cycle_finished != 1 %}s{% endif %}.</p>

  {% when None %}<p class="mute">No card has gone from started to Done yet.</p>{% endmatch %}

</figure>

<figure class="chart-card"><figcaption>Throughput: cards done each week</figcaption>{{ throughput_svg|safe }}

  <details><summary class="small">the numbers</summary><table class="board-table"><thead><tr><th scope="col">Week from</th><th scope="col">Done</th></tr></thead><tbody>{% for (w, n) in week_table %}<tr><td>{{ w }}</td><td>{{ n }}</td></tr>{% endfor %}</tbody></table></details>

</figure>

<figure class="chart-card wide-card"><figcaption>Cumulative flow</figcaption>{{ flow_svg|safe }}

  <div class="legend">{% for name in c.columns %}<span class="key cf-key cf-{% if loop.last %}5{% else %}{{ loop.index0 % 5 }}{% endif %}">{{ name }}</span>{% endfor %}</div>

  <p class="small mute">Cards in each column at the end of each day. A band that keeps widening is where work waits.</p>

  <details><summary class="small">the last fortnight's numbers</summary><div class="table-wrap"><table class="board-table"><thead><tr><th scope="col">Day</th>{% for name in c.columns %}<th scope="col">{{ name }}</th>{% endfor %}</tr></thead><tbody>{% for (d, row) in flow_table %}<tr><td>{{ d }}</td>{% for n in row %}<td>{{ n }}</td>{% endfor %}</tr>{% endfor %}</tbody></table></div></details>

</figure>

</div>

{% endblock %}