Adding JS graphs to dashboardHEADmaster

Using new api + D3 and Plot to draw fancy graphs

1 files changed, 110 insertions, 23 deletions

diff --git a/snag/templates/dashboard/dashboard.html b/snag/templates/dashboard/dashboard.html
index c061b66..668c1bc 100644
--- a/snag/templates/dashboard/dashboard.html
+++ b/snag/templates/dashboard/dashboard.html
@@ -3,37 +3,124 @@
 {% 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>
-	<table>
-		<tr>
-			{% if entry.location != "status" %}
-			<td>
-				<figure>
-					<embed type="image/png" src="/graph/humidity-temperature.png?deviceId={{ entry.deviceId }}&type={{ entry.location}}" />
-				</figure>
-			</td>
-
-			<td>
-				<figure>
-					<embed type="image/png" src="/graph/pressure.png?deviceId={{ entry.deviceId }}&type={{ entry.location}}" />
-				</figure>
-			</td>
-			{% else %}
-			<td>
-				<figure>
-					<embed type="image/png" src="/graph/battery.png?deviceId={{ entry.deviceId }}" />
-				</figure>
-			</td>
-			{% endif %}
-		</tr>
+	<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);
 	  
-	</table>
+	  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 %}