Browse Source

[client/device-graph] It works. Yay! :D

pull/26/head
Starbeamrainbowlabs 4 years ago
parent
commit
27e8602354
Signed by: sbrl
GPG Key ID: 1BE5172E637709C2
  1. 32
      client_src/js/DeviceReadingDisplay.mjs
  2. 1
      package.json

32
client_src/js/DeviceReadingDisplay.mjs

@ -4,9 +4,10 @@ @@ -4,9 +4,10 @@
// We're using the git repo for now until an update is released, and rollup doesn't like that apparently
import CreateElement from '../../node_modules/dom-create-element-query-selector/src/index.js';
import moment from 'moment';
// 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 Chart from '../../node_modules/chart.js/dist/Chart.bundle.min.js';
import GetFromUrl from './Helpers/GetFromUrl.mjs';
import Postify from './Helpers/Postify.mjs';
@ -61,17 +62,37 @@ class DeviceReadingDisplay { @@ -61,17 +62,37 @@ class DeviceReadingDisplay {
}
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),
datasets: [{
label: this.reading_type.friendly_text,
data
}]
},
options: {
scales: {
xAxes: [{
type: "time",
time: {
format: "YYYY-MM-DD HH:mm",
tooltipFormat: 'll HH:mm'
},
scaleLabel: {
display: true,
labelString: "Time"
}
}],
yAxes: [{
scaleLabel: {
display: true,
labelString: "Value"
}
}]
}
}
}
);
@ -82,14 +103,13 @@ class DeviceReadingDisplay { @@ -82,14 +103,13 @@ class DeviceReadingDisplay {
action: "device-data",
"device-id": this.device_id,
"reading-type": this.reading_type.id,
// Need to work in milliseconds here, not seconds
start: new Date(new Date - 1000*60*60*24).toISOString(),
end: (new Date()).toISOString(),
start: moment().subtract(1, "days").toISOString(),
end: moment().toISOString(),
"average-seconds": 3600
})));
return new_data.map((data_point) => { return {
x: new Date(data_point.datetime),
t: moment(data_point.datetime),
y: data_point.value
}});
}

1
package.json

@ -23,6 +23,7 @@ @@ -23,6 +23,7 @@
"leaflet-fullscreen": "^1.0.2",
"leaflet-timedimension": "^1.1.0",
"leaflet.markercluster": "^1.4.1",
"moment": "^2.23.0",
"smartsettings": "^1.2.3"
},
"devDependencies": {

Loading…
Cancel
Save