1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
|
{% extends 'layout.html' %}
{% block headline %}{% block title %}Dashboard{% endblock %}{% endblock %}
{% block content %}
<script src="static/d3.js"></script>
<script src="static/plot.js"></script>
<script>
async function fetchDeviceData(url = "", payload = {}) {
const response = await fetch(url, {
method: "POST",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify(payload)
});
return response.json();
}
const deviceIdMap = new Map();
{% for entry in deviceList %}
deviceIdMap.set({{ entry.deviceId }}, "{{ entry.name }}");
{% endfor %}
</script>
<main>
{% if deviceList|length == 0 %}
Hmmm nothing seems to be logged yet
{% endif %}
<div id="graphAllIndoor" class="graph"></div>
<script type="module">
const url = "/data/device";
const payload = {
"devices": [ {% for entry in deviceList %} "{{ entry.deviceId }}", {% endfor %} ],
"environment": "indoor",
"measurements": ["temperature"]
};
var data = await fetchDeviceData(url, payload);
const div = document.querySelector("#graphAllIndoor");
const plot = Plot.plot({
title: "Indoor Temperatures",
subtitle: "Showing the last 24 hours",
y: {
grid: true,
label: "Temperature (F)"
},
x: {label: "Timestamp"},
color: {legend: true},
width: div.getBoundingClientRect().width,
marks: [
Plot.frame(),
Plot.lineY(data, {
x: (d) => new Date(d.timeStamp),
y: (d) => d.temperature * 9 / 5 + 32,
stroke: (d) => deviceIdMap.get(d.deviceId),
tip: true
})
]
});
div.append(plot);
</script>
{% for entry in deviceList %}
<h2> {{ entry.name }} | {{ entry.location }} </h2>
<h3> {{ entry.environment }} | {{ entry.environmentDesc }} </h3>
<div id="graph{{ entry.deviceId }}" class="graph">
<figure id="graphTemperature{{ entry.deviceId }}"></figure>
<figure id="graphHumidity{{ entry.deviceId }}"></figure>
</div>
<script type="module">
const url = "/data/device/{{ entry.deviceId }}";
const payload = {
"environment": "{{ entry.environment }}",
"measurements": ["temperature", "humidity"]
};
var data = await fetchDeviceData(url, payload);
const figTemp = document.querySelector("#graphTemperature{{ entry.deviceId }}");
const plotTemp = Plot.plot({
y: {
axis: "left",
grid: true,
label: "Temperature (F)"
},
x: {label: "Timestamp"},
width: figTemp.getBoundingClientRect().width,
marks: [
Plot.frame(),
Plot.lineY(data, {
x: (d) => new Date(d.timeStamp),
y: (d) => d.temperature * 9 / 5 + 32,
stroke: "orange",
tip: true
})
]
});
figTemp.append(plotTemp);
const figHumid = document.querySelector("#graphHumidity{{ entry.deviceId }}");
const plotHumid = Plot.plot({
y: {
axis: "left",
grid: true,
label: "Humidity (%)"
},
x: {label: "Timestamp"},
width: figHumid.getBoundingClientRect().width,
marks: [
Plot.frame(),
Plot.lineY(data, {
x: (d) => new Date(d.timeStamp),
y: "humidity",
stroke: "steelBlue",
tip: true
})
]
});
figHumid.append(plotHumid);
</script>
{% endfor %}
</main>
{% endblock %}
{% block footer %} Best by: {{ generatedAt }} {% endblock %}
|
