{% extends "base.html" %}
{% block content %}
<h2>{{ cities[city].name }} &ndash; {{ data_set }}</h2>

<div class="box">
  <b>Tomorrow ({{ tomorrow }}), max temperature</b><br>
  {% for source, value in tomorrow_forecasts.items() %}
    {{ source }}: {{ value }} °C &nbsp;
  {% else %}
    No forecasts for tomorrow yet. Run collect.py.
  {% endfor %}
</div>

<canvas id="chart" height="110"></canvas>

<h3>Average error of each source (last 60 days)</h3>
<table>
  <tr>{% for source in errors %}<th>{{ source }}</th>{% endfor %}</tr>
  <tr>{% for value in errors.values() %}<td>{{ value }} °C</td>{% endfor %}</tr>
</table>

<h3>Latest days</h3>
<table>
  <tr><th>day</th>{% for source in sets[data_set] %}<th>{{ source }}</th>{% endfor %}<th>measured</th></tr>
  {% for day, row in rows.items() %}
  <tr><td>{{ day }}</td>
    {% for source in sets[data_set] %}<td>{{ row[source] if row[source] == row[source] else "" }}</td>{% endfor %}
    <td><b>{{ row.measured if row.measured == row.measured else "" }}</b></td></tr>
  {% endfor %}
</table>

<script>
  const chart = {{ chart | tojson }};
  const datasets = [{ label: "measured", data: chart.measured, borderColor: "black", borderWidth: 3 }];
  const colors = ["#1f77b4", "#ff7f0e", "#2ca02c"];
  Object.entries(chart.sources).forEach(([name, values], i) => {
    datasets.push({ label: name, data: values, borderColor: colors[i], borderWidth: 1 });
  });
  new Chart(document.getElementById("chart"), {
    type: "line",
    data: { labels: chart.days, datasets: datasets },
    options: { spanGaps: false, pointRadius: 1 },
  });
</script>
{% endblock %}