[client] Display chart, but it's not working right just yet.

Also do some re-organisation in the pop-up to install a flexbox.

client_src/css/main.css

@@ -50,6 +50,7 @@ main {
     z-index: 100 !important;
 }
 
+h2.device-name { text-align: center; }
 .device-name::after {
     content: "#" attr(data-id);
     float: right; margin-right: 1em;
@@ -57,6 +58,12 @@ main {
     font-size: 80%;
     color: hsl(230, 45%, 65%);
 }
+
+.device-data {
+    display: flex;
+    flex-direction: row;
+}
+
 .device-property-table {
     border-collapse: collapse;
 }

client_src/js/DeviceReadingDisplay.mjs

@@ -5,6 +5,8 @@
 import CreateElement from '../../node_modules/dom-create-element-query-selector/src/index.js';
 
 // import Chart from 'chart.js';
+// Chart.js pollutes the global scope, but the main entry point is going to change soon in v2.8 - which should fix our issue here
+import Chart from '../../node_modules/chart.js/dist/Chart.min.js';
 
 import GetFromUrl from './Helpers/GetFromUrl.mjs';
 import Postify from './Helpers/Postify.mjs';

client_src/js/LayerDeviceMarkers.mjs

@@ -47,6 +47,7 @@ class LayerDeviceMarkers {
 		// Create the popup
 		let popup = L.popup({
 			className: "popup-device",
+			maxWidth: 640,
 			autoPanPadding: L.point(100, 100)
 		}).setContent("⌛ Loading..."); // TODO: Display a nice loading animation here
 		marker.on("popupopen", this.marker_popup_open_handler.bind(this, device.id));
@@ -73,11 +74,21 @@ class LayerDeviceMarkers {
 	render_device_info(device_info) {
 		let result = document.createDocumentFragment();
 		
+		// ----------------------------------
+		
 		result.appendChild(CreateElement("h2.device-name",
 			`Device: ${device_info.name}`
 		));
 		result.querySelector(".device-name").dataset.id = device_info.id;
 		
+		// ----------------------------------
+		
+		let data_container = CreateElement("div.device-data",
+			CreateElement("div.device-params")
+		);
+		result.appendChild(data_container);
+		let params_container = data_container.querySelector(".device-params");
+		
 		let info_list = [];
 		for(let property in device_info) {
 			// Filter out properties we're handling specially
@@ -103,16 +114,20 @@ class LayerDeviceMarkers {
 				CreateElement("td.value", value)
 			));
 		}
-		result.appendChild(CreateElement("table.device-property-table", ...info_list));
+		params_container.appendChild(CreateElement("table.device-property-table", ...info_list));
 		
-		result.appendChild(CreateElement("p.device-notes",
+		params_container.appendChild(CreateElement("p.device-notes",
 			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);
+		data_container.appendChild(chart_device_data.display);
+		
+		// ----------------------------------
 		
 		return result;
 	}

package-lock.json

@@ -371,6 +371,39 @@
         "supports-color": "^5.3.0"
       }
     },
+    "chart.js": {
+      "version": "2.7.3",
+      "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-2.7.3.tgz",
+      "integrity": "sha512-3+7k/DbR92m6BsMUYP6M0dMsMVZpMnwkUyNSAbqolHKsbIzH2Q4LWVEHHYq7v0fmEV8whXE0DrjANulw9j2K5g==",
+      "requires": {
+        "chartjs-color": "^2.1.0",
+        "moment": "^2.10.2"
+      }
+    },
+    "chartjs-color": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/chartjs-color/-/chartjs-color-2.2.0.tgz",
+      "integrity": "sha1-hKL7dVeH7YXDndbdjHsdiEKbrq4=",
+      "requires": {
+        "chartjs-color-string": "^0.5.0",
+        "color-convert": "^0.5.3"
+      },
+      "dependencies": {
+        "color-convert": {
+          "version": "0.5.3",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-0.5.3.tgz",
+          "integrity": "sha1-vbbGnOZg+t/+CwAHzER+G59ygr0="
+        }
+      }
+    },
+    "chartjs-color-string": {
+      "version": "0.5.0",
+      "resolved": "https://registry.npmjs.org/chartjs-color-string/-/chartjs-color-string-0.5.0.tgz",
+      "integrity": "sha512-amWNvCOXlOUYxZVDSa0YOab5K/lmEhbFNKI55PWc4mlv28BDzA7zaoQTGxSBgJMHIW+hGX8YUrvw/FH4LyhwSQ==",
+      "requires": {
+        "color-name": "^1.0.0"
+      }
+    },
     "clap": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/clap/-/clap-1.2.3.tgz",
@@ -484,8 +517,7 @@
     "color-name": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
-      "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=",
+      "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU="
-      "dev": true
     },
     "color-string": {
       "version": "0.3.0",
@@ -1705,6 +1737,11 @@
         "minimist": "0.0.8"
       }
     },
+    "moment": {
+      "version": "2.23.0",
+      "resolved": "https://registry.npmjs.org/moment/-/moment-2.23.0.tgz",
+      "integrity": "sha512-3IE39bHVqFbWWaPOMHZF98Q9c3LDKGTmypMiTM2QygGXXElkFWIH7GxfmlwmY2vwa+wmNsoYZmG2iusf1ZjJoA=="
+    },
     "ms": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",

package.json

@@ -17,6 +17,7 @@
   },
   "homepage": "https://github.com/sbrl/ConnectedHumber-Air-Quality-Interface#readme",
   "dependencies": {
+    "chart.js": "^2.7.3",
     "dom-create-element-query-selector": "github:hekigan/dom-create-element-query-selector",
     "leaflet": "^1.4.0",
     "leaflet-fullscreen": "^1.0.2",

rollup.config.js

@@ -13,7 +13,7 @@ export default {
 	input: 'client_src/js/index.mjs',
 	output: {
 		file: 'app/app.js',
-		format: 'es'
+		format: 'esm'
 	},
 	plugins: [
 		resolve({