2b5bba027d
- data loading is asyncronus now - the chart as always ten labels on the y axis now
226 lines
No EOL
6.4 KiB
JavaScript
226 lines
No EOL
6.4 KiB
JavaScript
/* globals Chart:false, feather:false */
|
|
|
|
//var ctx = document.getElementById('myChart')
|
|
//var mainContent = document.getElementById('mainContent')
|
|
|
|
function setPage(page) {
|
|
document.getElementById("navbarPage" + currentPage + "Link").classList.remove("active")
|
|
document.getElementById("navbarPage" + page + "Link").classList.add("active")
|
|
currentPage = page
|
|
// page: -1 for dashboard or sensor id
|
|
var mainContent = document.getElementById('mainContent')
|
|
|
|
// set page to loading state
|
|
mainContent.innerHTML = "<div class=\"d-flex justify-content-center\"><div class=\"spinner-border\" role=\"status\"><span class=\"sr-only\">Loading...</span></div></div>"
|
|
|
|
blueweather.getLocationData(thisLoc, undefined, true, function(locationData){
|
|
// refresh sensors list
|
|
loadSensors(locationData.sensors)
|
|
|
|
// set acive page in navbar
|
|
document.getElementById("navbarPage" + page + "Link").classList.add("active")
|
|
|
|
if(page === -1) {
|
|
setPageTitle("Dashboard")
|
|
mainContent.innerHTML = "<p>This is your great dashboard :))</p>"
|
|
}
|
|
else if (page !== -1) {
|
|
loadDiagram("mainContent", locationData, page)
|
|
}
|
|
})
|
|
|
|
}
|
|
|
|
function setTimeRange(from="", to=""){
|
|
blueweather.log("changing time range; form: " + from + "; to: " + to + "; (now is: " + new Date().getTime() + ")", 3)
|
|
|
|
// set page to loading state
|
|
mainContent.innerHTML = "<div class=\"d-flex justify-content-center\"><div class=\"spinner-border\" role=\"status\"><span class=\"sr-only\">Loading...</span></div></div>"
|
|
|
|
if(from !== "") {
|
|
from = new Date().getTime() / 1000 - from
|
|
}
|
|
|
|
if(to !== "") {
|
|
to = new Date().getTime() / 1000 - parseInt(to)
|
|
}
|
|
|
|
blueweather.getLocationData(thisLoc, {from: from, to: to}, true, function(locationData){
|
|
loadDiagram("mainContent", locationData, currentPage)
|
|
})
|
|
|
|
}
|
|
|
|
function loadSensors(sensors) {
|
|
|
|
var sensorsList = document.getElementById("sensorsList")
|
|
sensorsList.innerHTML = ""
|
|
|
|
for (var i = 0; i < sensors.length; i++) {
|
|
var currentHTML = sensorsList.innerHTML
|
|
sensorsList.innerHTML = currentHTML +
|
|
"<li class=\"nav-item\"><a class=\"nav-link\" id=\"navbarPage" + sensors[i]["id"] + "Link\" href=\"#\" onclick=\"setPage(" + sensors[i]["id"] + ")\"><span data-feather=\"file\"></span>" + sensors[i]["sensorname"] + "</a></li>"
|
|
}
|
|
|
|
feather.replace()
|
|
}
|
|
|
|
function loadDiagram(parentId, locationData, sensorId){
|
|
mainContent = document.getElementById(parentId)
|
|
// get all relevant meassurement values
|
|
var vals = []
|
|
|
|
for (var i = 0; i < locationData["measvalues"].length; i++) {
|
|
var thisValue = locationData["measvalues"][i]
|
|
if (parseInt(thisValue['sensorid']) === sensorId) {
|
|
vals.push(thisValue)
|
|
}
|
|
}
|
|
|
|
// get the current sensor
|
|
var sensor;
|
|
|
|
for (i = 0; i < locationData['sensors'].length; i++) {
|
|
var thisSensor = locationData['sensors'][i]
|
|
if (parseInt(thisSensor.id) === sensorId) {
|
|
sensor = thisSensor;
|
|
break;
|
|
}
|
|
}
|
|
|
|
// get the value type
|
|
var valueType;
|
|
|
|
for (i = 0; i < locationData['valuetypes'].length; i++) {
|
|
var thisValType = locationData['valuetypes'][i]
|
|
if (parseInt(thisValType.id) === parseInt(sensor.valuetypeid)) {
|
|
valueType = thisValType;
|
|
break;
|
|
}
|
|
}
|
|
|
|
// build chart data array
|
|
var chartData = {
|
|
label: sensor.sensorname + " (" + valueType.valuetype + ")",
|
|
data: [],
|
|
range: locationData.range
|
|
}
|
|
|
|
for (i = 0; i < vals.length; i++) {
|
|
chartData.data.push({ x: vals[i]["timestamp"], y: vals[i]["measvalue"] })
|
|
}
|
|
|
|
mainContent.innerHTML = "<canvas class=\"my-4 w-100\" id=\"myChart\"></canvas>"
|
|
setPageTitle(chartData.label)
|
|
|
|
//blueweather.log("creating chart with data: " + JSON.stringify(chartData), 3)
|
|
|
|
createDiagram("myChart", chartData)
|
|
}
|
|
|
|
function createDiagram(canvasId, data) {
|
|
var pointradius = data.data.length > 500 ? 0:3
|
|
// Graphs
|
|
var ctx = document.getElementById(canvasId)
|
|
// eslint-disable-next-line no-unused-vars
|
|
|
|
var chartData = {
|
|
//labels: time,
|
|
datasets: [
|
|
{
|
|
label: data.label,
|
|
yAxisID: 'yAxis',
|
|
fill: false, pointRadius: pointradius, backgroundColor: "rgba(29, 202, 255, 0.75)", borderColor: "rgba(29, 202, 255, 1)", pointHoverBackgroundColor: "rgba(29, 202, 255, 1)", pointHoverBorderColor: "rgba(29, 202, 255, 1)",
|
|
showLine: true,
|
|
data: data.data
|
|
}
|
|
]
|
|
};
|
|
|
|
var chartOptions = {
|
|
responsive:true,
|
|
maintainAspectRatio: false,
|
|
scales: {
|
|
yAxes: [
|
|
{
|
|
id: 'yAxis',
|
|
type: 'linear',
|
|
position: 'left',
|
|
}
|
|
],
|
|
|
|
xAxes: [{
|
|
ticks: {
|
|
min: parseInt(data.range.from),
|
|
max: parseInt(data.range.to),
|
|
beginAtZero: false,
|
|
stepSize: (data.range.to - data.range.from) / 10,
|
|
userCallback: function (label, index, labels) {
|
|
var d = new Date(parseInt(label) * 1000);
|
|
var datestr =
|
|
// ("0" + d.getDate()).slice(-2) + "-" +
|
|
// ("0"+(d.getMonth()+1)).slice(-2) + "-" +
|
|
// d.getFullYear() + " " +
|
|
("0" + d.getHours()).slice(-2) + ":" +
|
|
("0" + d.getMinutes()).slice(-2) + ":" +
|
|
("0" + d.getSeconds()).slice(-2)
|
|
;
|
|
return datestr;
|
|
}
|
|
},
|
|
|
|
scaleLabel: {
|
|
display: true,
|
|
labelString: 'time'
|
|
}
|
|
}],
|
|
},
|
|
|
|
tooltips: {
|
|
callbacks: {
|
|
label: function (tooltipItem, data) {
|
|
|
|
var label = [data.datasets[tooltipItem.datasetIndex].label || ''];
|
|
|
|
if (label) {
|
|
label[0] += ': ';
|
|
}
|
|
|
|
label[0] += Math.round(tooltipItem.yLabel * 100) / 100;
|
|
|
|
var time = Math.round(tooltipItem.xLabel * 100) / 100;
|
|
|
|
var d = new Date(time * 1000);
|
|
var datestr =
|
|
// ("0" + d.getDate()).slice(-2) + "-" +
|
|
// ("0"+(d.getMonth()+1)).slice(-2) + "-" +
|
|
// d.getFullYear() + " " +
|
|
("0" + d.getHours()).slice(-2) + ":" +
|
|
("0" + d.getMinutes()).slice(-2) + ":" +
|
|
("0" + d.getSeconds()).slice(-2)
|
|
;
|
|
|
|
label.push("Time: " + datestr);
|
|
|
|
return label;
|
|
}
|
|
}
|
|
}
|
|
|
|
};
|
|
|
|
var myChart = new Chart(ctx, {
|
|
type: 'scatter',
|
|
data: chartData,
|
|
options: chartOptions
|
|
})
|
|
}
|
|
|
|
function setPageTitle(title) {
|
|
document.getElementById("titleH1").innerHTML = title
|
|
}
|
|
|
|
var blueweather = new BlueWeather()
|
|
var thisLoc = blueweather.findGetParameter("locId")
|
|
var currentPage = -1
|
|
setPage(currentPage) |