{% extends "base.html" %}
{% block title %}Explore — Myrdal{% endblock %}
{% block head %}
  <script src="/static/_shared/plotly.min.js"></script>
  <script src="/static/_shared/ark-plotly.js"></script>
  <script src="/static/_shared/ark-downloads.js"></script>
{% endblock %}
{% block content %}
<section class="ark-wrap ark-prose">
  <h1>Explore</h1>
  <p class="ark-lede">{{ meta.counts.series_chartable }} of the {{ meta.counts.series_published }} published series can be drawn straight from their file, across {{ meta.counts.categories }} source families. Nothing here is smoothed, interpolated or rebased — a chart shows the rows that are in the CSV, and where a panel is too large to draw every line the chart says so.</p>

  <div class="ark-explore-controls">
    <label for="ark-cat">Source family</label>
    <select id="ark-cat"><option value="">Loading…</option></select>
    <label for="ark-series">Series</label>
    <select id="ark-series" disabled><option value="">—</option></select>
    <label for="ark-measure" id="ark-measure-label" hidden>Measure</label>
    <select id="ark-measure" hidden></select>
  </div>

  <div id="ark-series-meta" class="ark-fineprint"></div>
  <div id="ark-chart" style="width:100%;height:520px;"></div>
  <div id="ark-cap-note" class="ark-fineprint"></div>

  <div class="ark-provenance" id="ark-prov" hidden>
    <h3>This series</h3>
    <dl>
      <dt>Source</dt><dd id="ark-prov-source">—</dd>
      <dt>Units</dt><dd id="ark-prov-units">—</dd>
      <dt>Last real observation</dt><dd id="ark-prov-live">—</dd>
      <dt>Rows in the file</dt><dd id="ark-prov-rows">—</dd>
    </dl>
    <div id="ark-prov-dl" class="ark-btn-group"></div>
  </div>

  <noscript><p>The interactive explorer needs JavaScript. Every series is downloadable as CSV, XLSX and Parquet from <a href="/data">Data</a>, and the whole set is one bundle.</p></noscript>
</section>

<script>
(function () {
  var catSel = document.getElementById('ark-cat');
  var serSel = document.getElementById('ark-series');
  var mSel = document.getElementById('ark-measure');
  var mLab = document.getElementById('ark-measure-label');
  var metaEl = document.getElementById('ark-series-meta');
  var capEl = document.getElementById('ark-cap-note');
  var prov = document.getElementById('ark-prov');
  var catalog = {};
  var current = null;
  var DEFAULT_SID = {{ default_sid | tojson }};

  function nice(s) { return String(s || '').replace(/_/g, ' '); }

  fetch('/api/series-list').then(function (r) { return r.json(); }).then(function (j) {
    if (!j.available) { catSel.innerHTML = '<option value="">catalogue unavailable</option>'; return; }
    catalog = j.by_category || {};
    var keys = Object.keys(catalog).sort();
    catSel.innerHTML = '<option value="">— choose a source family —</option>' +
      keys.map(function (c) { return '<option value="' + c + '">' + nice(c) + ' (' + catalog[c].length + ')</option>'; }).join('');
    // D5 default-chart-on-load: land on a real chart, never an empty frame.
    // DEFAULT_SID is rendered server-side from the manifest, so it can only ever
    // name a series that exists and is chartable.
    if (DEFAULT_SID) {
      var fam = null;
      keys.forEach(function (c) {
        if (catalog[c].some(function (s) { return s.sid === DEFAULT_SID; })) fam = c;
      });
      if (fam) {
        catSel.value = fam; catSel.onchange();
        serSel.value = DEFAULT_SID;
        load(DEFAULT_SID, null);
      }
    }
  }).catch(function () { catSel.innerHTML = '<option value="">catalogue unavailable</option>'; });

  catSel.onchange = function () {
    var list = catalog[catSel.value] || [];
    serSel.disabled = !list.length;
    serSel.innerHTML = '<option value="">— choose a series —</option>' + list.map(function (s) {
      // A series that cannot be charted is still listed, and says why in its own label.
      var span = s.start ? (s.start + '–' + s.end) : (s.kind === 'empty' ? 'no data rows' : s.kind.replace('_', ' '));
      return '<option value="' + s.sid + '">' + s.title + ' (' + span + ')</option>';
    }).join('');
  };

  function draw(d) {
    var traces = d.traces.map(function (t) {
      return { name: t.name, x: t.x, y: t.y, type: 'scatter', mode: 'lines' };
    });
    if (window.ArkPlotly && ArkPlotly.plot) {
      ArkPlotly.plot('ark-chart', traces,
        { xaxis: { title: d.x_label }, yaxis: { title: d.y_label } },
        { filename: 'myrdal_' + d.sid });
    } else {
      Plotly.newPlot('ark-chart', traces, {
        xaxis: { title: d.x_label }, yaxis: { title: d.y_label },
        margin: { l: 70, r: 20, t: 16, b: 44 },
        legend: { orientation: 'h', x: 0, y: -0.18 }, showlegend: traces.length > 1
      }, { responsive: true, displaylogo: false });
    }
  }

  function load(sid, measure) {
    metaEl.textContent = 'Loading…'; capEl.textContent = ''; prov.hidden = true;
    var url = '/api/series/' + encodeURIComponent(sid) + (measure ? '?measure=' + encodeURIComponent(measure) : '');
    fetch(url).then(function (r) {
      if (!r.ok) throw new Error('http ' + r.status);
      return r.json();
    }).then(function (d) {
      current = d;
      document.getElementById('ark-prov-source').textContent = d.source || '—';
      document.getElementById('ark-prov-units').textContent = d.unit || '—';
      document.getElementById('ark-prov-live').textContent =
        d.end ? (d.end + (d.projection_end ? ' (the file also carries projections to ' + d.projection_end + ', which are not observations and are excluded from this chart\'s history)' : '')) : 'no observation in the file';
      document.getElementById('ark-prov-rows').textContent = d.n_rows.toLocaleString();
      var dl = document.getElementById('ark-prov-dl');
      dl.innerHTML = '';
      if (window.ArkDownloads) {
        dl.appendChild(ArkDownloads.buttons({ csv: d.downloads.csv, xlsx: d.downloads.xlsx, parquet: d.downloads.parquet }));
      } else {
        dl.innerHTML = '<a href="' + d.downloads.csv + '">CSV</a> · <a href="' + d.downloads.xlsx + '">XLSX</a> · <a href="' + d.downloads.parquet + '">Parquet</a>';
      }
      prov.hidden = false;

      if (!d.traces.length) {
        // Honest empty state: say WHY, never draw an empty axis that reads as a flat line.
        Plotly.purge('ark-chart');
        document.getElementById('ark-chart').innerHTML =
          '<p class="ark-note"><strong>' + d.title + '</strong> — ' + d.no_chart_reason + '</p>';
        metaEl.innerHTML = '<strong>' + d.title + '</strong> — ' + nice(d.category) + ' · ' + (d.unit || 'no unit recorded');
        mSel.hidden = true; mLab.hidden = true;
        return;
      }

      if (d.measures && d.measures.length > 1) {
        mSel.hidden = false; mLab.hidden = false;
        mSel.innerHTML = d.measures.map(function (m) {
          return '<option value="' + m + '"' + (m === d.measure ? ' selected' : '') + '>' + nice(m) + '</option>';
        }).join('');
      } else { mSel.hidden = true; mLab.hidden = true; }

      metaEl.innerHTML = '<strong>' + d.title + '</strong> — ' + nice(d.category) + ' · ' +
        (d.unit || 'no unit recorded') + ' · ' + d.n_points.toLocaleString() + ' rows' +
        (d.end ? ' · through ' + d.end : '');
      capEl.textContent = d.capped_note || '';
      draw(d);
    }).catch(function () { metaEl.textContent = 'Could not load ' + sid + '.'; });
  }

  serSel.onchange = function () { if (serSel.value) load(serSel.value, null); };
  mSel.onchange = function () { if (current) load(current.sid, mSel.value); };
})();
</script>
{% endblock %}