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

Also do some re-organisation in the pop-up to install a flexbox.
pull/26/head
Starbeamrainbowlabs 4 years ago
parent 9595f9153d
commit a34efe5c25
Signed by: sbrl
GPG Key ID: 1BE5172E637709C2
  1. 7
      client_src/css/main.css
  2. 2
      client_src/js/DeviceReadingDisplay.mjs
  3. 21
      client_src/js/LayerDeviceMarkers.mjs
  4. 41
      package-lock.json
  5. 1
      package.json
  6. 2
      rollup.config.js

@ -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;
}

@ -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';

@ -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;
}

41
package-lock.json generated

@ -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=",
"dev": true
"integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU="
},
"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",

@ -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",

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

Loading…
Cancel
Save