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

This commit is contained in:
Starbeamrainbowlabs 2019-01-19 22:04:51 +00:00
parent 8bff9acbd8
commit 4a9d67e292
Signed by: sbrl
GPG key ID: 1BE5172E637709C2
5 changed files with 58 additions and 20 deletions

View file

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

View file

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

View file

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

View file

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

View file

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