Add ployly chart for net data

public/css/main.css

@@ -171,7 +171,7 @@ label.field-with-error {
     color: red;
 }
 
-img.stats {
+.stats {
     width: 100%;
     display: block;
 }

public/js/net-plot.js

@@ -0,0 +1,48 @@
+// Load netDiv.
+const netDiv = document.getElementById("net-stats");
+
+// Enter async context. Makes things easier.
+(async function() {
+	// Fetch JSON
+	const netDataReq = await fetch("/net-in.json");
+	const netData = await netDataReq.json();
+
+	// Get list of entries
+	const legends = netData.meta.legend;
+
+	// Holds the plotly.JS data
+	const data = [];
+
+	// Create date objects for x-axis
+	const x = netData.data.map(a => new Date(a[0] * 1e3));
+	
+	// Iterate through legends, fill up data.
+	for (let i = 0; i < legends.length; i++) {
+		const name = legends[i];
+		const y = netData.data.map(a => a[i+1]);
+
+		// Add data entry to array.
+		data.push({
+			x,
+			y,
+			name,
+			type: "bar",
+		});
+	}
+
+	// Format
+	const layout = {
+		barmode: "stack",
+		title: {
+			text: "Traffic In",
+		},
+		yaxis: {
+			title: {
+				text: "Bytes/S",
+			},
+		},
+	};
+
+	// Create plot
+	Plotly.newPlot(netDiv, data, layout);
+})()

templates/main/statsPage.html.ep

@@ -9,4 +9,10 @@
     <a href="/vmstat-cpu.txt"><img class="stats" alt="CPU usage graph" src="/vmstat-cpu.png"></a>
     <a href="/vmstat-mem.txt"><img class="stats" alt="Memory usage graph" src="/vmstat-mem.png"></a>
 	<img class="stats" alt="Traffic in graph" src="/net-in.png">
+	<noscript>If you'd like, there's also an interactive JavaScript
+	chart that uses Plotly. Network traffic is hard to see well in such
+	a small graph!</noscript>
+	<script src="/js/plotly-basic-2.27.1.min.js"></script>
+	<div class="stats" style="height: 400px;" id="net-stats"></div>
+	<script src="/js/net-plot.js"></script>
 </article>