<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width; initial-scale=1">
    <meta charset="utf-8">

    <script src="https://cdn.jsdelivr.net/npm/vega@5.22.1"></script>
    <script src="https://cdn.jsdelivr.net/npm/vega-lite@5.6.0"></script>
    <script src="https://cdn.jsdelivr.net/npm/vega-embed@6.21.0"></script>
    <style>
      body {
        font-family: sans-serif; 
      }
      .vega {
        width: min(90vw, 1000px);
      }
      th {
        text-align: left;
      }
    </style>

  </head>
  <body>
    {% for t in ts %}
      <table>
        {% for k, v in t.description.items() %}
          <tr>
            <th> {{ k }} </th>
            <td> {{ v }} </td>
          </tr>
        {% endfor %}
          <tr>
            <th> period </th>
            <td>
              {{ t.data[0][0] }} .. {{ t.data[-1][0] }}
            </td>
          </tr>
      </table>
      <div id="vis{{loop.index}}" class="vega">

      </div>
      <script>
        {
          const d = {
            width: "container",
            data: {
              values: {{ t.data_json_by_row() | safe }}
            },
            mark: "point",
            encoding: {
              x: {
                field: "utc",
                // type: "quantitative",
                type: "temporal",
                //scale: { domain: [{{t.data[0][0]}}, {{t.data[-1][0]}}] },
                timeUnit: "yearmonthdatehoursminutes",
              },
              y: { field: "v", type: "quantitative" },
            },
          }
          vegaEmbed("#vis{{loop.index}}", d)
        }
      </script>
    {% endfor %}
  </body>
</html>