67 lines
1.6 KiB
HTML
67 lines
1.6 KiB
HTML
<!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>
|