[client/device-graph] Refactor reading for customising the reading type

client_src/js/DeviceReadingDisplay.mjs

@@ -21,6 +21,10 @@ class DeviceReadingDisplay {
 		/** The current reading type to display a graph for. @type {Object} */
 		this.reading_type = null;
 		
+		this.default_colours = {
+			borderColor: "hsla(0, 0%, 50%, 1)",
+			backgroundColor: "hsla(0, 0%, 65%, 0.5)"
+		};
 		this.reading_type_colours = {
 			"PM10": {
 				borderColor: "hsla(0, 82%, 56%, 1)",
@@ -71,33 +75,17 @@ class DeviceReadingDisplay {
 		
 		// ----------------------------------------------------
 		
-		let data = null;
+		this.setup_chart();
-		try {
-			data = await this.get_data();
-		} catch(error) {
-			// TODO: Display a nice error message here instead of an alert()
-			alert(error);
-			console.error(error);
-			return false;
 	}
 	
-		this.setup_chart(data);
+	setup_chart() {
-	}
+		this.chart = new Chart(this.display.querySelector("canvas").getContext("2d"), {
-	
-	setup_chart(data) {
-		console.log("[marker/popup/device-graph] Data:", data);
-		this.chart = new Chart(
-			this.display.querySelector("canvas").getContext("2d"), {
 			type: "line",
 			data: {
-					labels: data.map((point) => point.t),
+				// We need to define an initial dataset here because otherwise
-					datasets: [{
+				// Chart.js gets confused 'cause it has nothing to animate from
-						borderColor: this.reading_type_colours[this.reading_type.id].borderColor,
+				labels: [],
-						backgroundColor: this.reading_type_colours[this.reading_type.id].backgroundColor,
+				datasets: []
-						
-						label: this.reading_type.friendly_text,
-						data
-					}]
 			},
 			options: {
 				scales: {
@@ -120,12 +108,15 @@ class DeviceReadingDisplay {
 					}]
 				}
 			}
-			}
+		});
-		);
+		
+		this.update_chart();
 	}
 	
 	async get_data() {
-		let new_data = JSON.parse(await GetFromUrl(`${this.config.api_root}?` + Postify({
+		let new_data = null;
+		try {
+			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,
@@ -133,6 +124,14 @@ class DeviceReadingDisplay {
 				end: moment().toISOString(),
 				"average-seconds": 3600
 			})));
+		} catch(error) {
+			// TODO: Display a nice error message here instead of an alert()
+			alert(error);
+			console.error(error);
+			return false;
+		}
+		
+		console.log("[marker/popup/device-graph] Fetched data:", new_data);
 		
 		return new_data.map((data_point) => { return {
 			t: moment(data_point.datetime),
@@ -143,6 +142,41 @@ class DeviceReadingDisplay {
 	async fetch_reading_types() {
 		this.reading_types = JSON.parse(await GetFromUrl(`${this.config.api_root}?action=list-reading-types`));
 	}
+	
+	async switch_graph_type_handler(event) {
+		// Figure out what the new reading type is
+		this.reading_type = this.reading_types.find((type) => type.id == event.target.dataset.id);
+		
+		await this.update_chart();
+	}
+	
+	async update_chart() {
+		this.chart.data.datasets.length = 0;
+		
+		// Get the Chart.js data object
+		let new_data_obj = {
+			label: this.reading_type.friendly_text,
+			data: await this.get_data()
+		};
+		
+		// Update the colour
+		if(typeof this.reading_type_colours[this.reading_type.id] !== "undefined") {
+			new_data_obj.borderColor = this.reading_type_colours[this.reading_type.id].borderColor;
+			new_data_obj.backgroundColor = this.reading_type_colours[this.reading_type.id].backgroundColor;
+		}
+		else {
+			new_data_obj.borderColor = this.default_colours.borderColor;
+			new_data_obj.backgroundColor = this.default_colours.backgroundColor;
+		}
+		
+		this.chart.data.datasets.push(new_data_obj);
+		
+		// Update the x axis labels
+		this.chart.data.labels = new_data_obj.data.map((point) => point.t);
+		
+		// Update the chart
+		this.chart.update();
+	}
 }
 
 export default DeviceReadingDisplay;