[client] Try Chart.JS, but it's causing an error!

client_src/js/DeviceReadingDisplay.mjs

@@ -7,35 +7,58 @@ import CreateElement from '../../node_modules/dom-create-element-query-selector/
 import Chart from 'chart.js';
 
 import GetFromUrl from './Helpers/GetFromUrl.mjs';
+import Postify from './Helpers/Postify.mjs';
 
 
 class DeviceReadingDisplay {
-	get device_id() { return this._device_id; }
-	set device_id(value) {
-		this._device_id = value;
-		this.update_display();
-	}
-	
-	constructor(in_config, in_device_id) {
-		this.setup_display();
-		
+	constructor(in_config, in_device_id, in_reading_type) {
 		this.config = in_config;
-		this._device_id = in_device_id; // We don't want to update until we have everything we need
+		/** @type {int} */
+		this.device_id = in_device_id;
+		// TODO: Allow the user to change this
+		/** @type {Object} */
+		this.reading_type = in_reading_type;
+		
+		this.setup_display();
 	}
 	
-	setup_display() {
+	async setup_display() {
+		/** @type {HTMLElement} */
 		this.display = CreateElement("div.chart-device-data",
 			CreateElement("canvas.canvas-chart"),
 			CreateElement("ul.reading-types")
 		);
-	}
-	set_reading_types(new_reading_types, starting_index) {
-		this.reading_types = new_reading_types;
-		this.selected_reading_type = this.reading_types[starting_index];
+		
+		this.chart = new Chart(
+			this.display.querySelector("canvas").getContext("2d"), {
+				type: "line",
+				data: {
+					datasets: [{
+						label: this.reading_type.friendly_text,
+						data: await this.get_data
+					}]
+				},
+				options: {
+					
+				}
+			}
+		);
 	}
 	
-	async update_display() {
-		let new_data = JSON.parse(await GetFromUrl(`${this.config.api_root}?action=`))
+	async get_data() {
+		let new_data = JSON.parse(await GetFromUrl(`${this.config.api_root}?` + Postify({
+			action: "device-data",
+			"device-id": this.device_id,
+			"reading-type": this.reading_type.id,
+			start: (new Date()).toISOString(),
+			end: new Date(new Date - 60*60*24),
+			"average-seconds": 3600
+		})));
+		
+		return new_data.map((data_point) => { return {
+			x: new Date(data_point.datetime),
+			y: data_point.value
+		}});
 	}
 }
 

client_src/js/Helpers/Postify.mjs

@@ -0,0 +1,9 @@
+"use strict";
+
+function Postify(obj) {
+    return Object.keys(obj).map(function (key) {
+        return [key, encodeURIComponent(obj[key])].join("=");
+    }).join("&");
+}
+
+export default Postify;

client_src/js/LayerDeviceMarkers.mjs

@@ -7,6 +7,7 @@ import 'leaflet.markercluster';
 import CreateElement from '../../node_modules/dom-create-element-query-selector/src/index.js';
 
 import Config from './Config.mjs';
+import DeviceReadingDisplay from './DeviceReadingDisplay.mjs';
 import GetFromUrl from './Helpers/GetFromUrl.mjs';
 
 class LayerDeviceMarkers {
@@ -108,6 +109,11 @@ class LayerDeviceMarkers {
 			CreateElement("em", device_info.other)
 		));
 		
+		// TODO: Allow the user to change the reading type
+		let chart_device_data = new DeviceReadingDisplay(Config, device_info.id, "PM25");
+		
+		result.appendChild(chart_device_data.display);
+		
 		return result;
 	}
 }

client_src/js/MapManager.mjs

@@ -11,7 +11,7 @@ import LayerDeviceMarkers from './LayerDeviceMarkers.mjs';
 import LayerHeatmap from './LayerHeatmap.mjs';
 import UI from './UI.mjs';
 
-class Map {
+class MapManager {
 	constructor() {
 		
 	}

client_src/js/index.mjs

@@ -4,9 +4,9 @@ import '../css/main.css';
 
 // ----------------------------------------------------------------------------
 
-import Map from './Map.mjs';
+import MapManager from './MapManager.mjs';
 
 window.addEventListener("load", function(_event) {
-	window.map = new Map();
+	window.map = new MapManager();
 	window.map.setup();
 });