/* globals Chart:false, feather:false */ //var ctx = document.getElementById('myChart') //var mainContent = document.getElementById('mainContent') class BlueWeatherDashboard { constructor() { // cunstruct xmlhttp this.blueweather = new BlueWeather() this.loc = this.blueweather.findGetParameter("locId") this.currentPage = -1 this.setPage(this.currentPage) } setPage(page) { document.getElementById("navbarPage" + this.currentPage + "Link").classList.remove("active") document.getElementById("navbarPage" + page + "Link").classList.add("active") this.currentPage = page // page: -1 for dashboard or sensor id var mainContent = document.getElementById('mainContent') // set page to loading state mainContent.innerHTML = "
Loading...
" this.blueweather.getLocationData(this.loc, undefined, undefined, true, function (locationData) { // refresh sensors list dashboard.loadSensors(locationData.sensors) // set acive page in navbar document.getElementById("navbarPage" + page + "Link").classList.add("active") if (page === -1) { dashboard.setPageTitle("Dashboard") mainContent.innerHTML = "

This is your great dashboard :))

" } else if (page !== -1) { dashboard.loadDiagram("mainContent", locationData, page) } }) } setTimeRange(from = "", to = "") { this.blueweather.log("changing time range; form: " + from + "; to: " + to + "; (now is: " + new Date().getTime() + ")", 3) // set page to loading state mainContent.innerHTML = "
Loading...
" if (from !== "") { from = new Date().getTime() / 1000 - from } if (to !== "") { to = new Date().getTime() / 1000 - parseInt(to) } this.blueweather.getLocationData(this.loc, { from: from, to: to }, undefined, true, function (locationData) { dashboard.loadDiagram("mainContent", locationData, dashboard.currentPage) }) } loadSensors(sensors) { var sensorsList = document.getElementById("sensorsList") sensorsList.innerHTML = "" for (var i = 0; i < sensors.length; i++) { var currentHTML = sensorsList.innerHTML sensorsList.innerHTML = currentHTML + "
  • " + sensors[i]["sensorname"] + "
  • " } feather.replace() } 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 = { data: [], datasets: [ { label: sensor.sensorname + " (" + valueType.valuetype + ")", yAxisID: 'yAxis', showLine: true, data: vals } ], range: locationData.range } for (i = 0; i < vals.length; i++) { chartData.data.push({ x: vals[i]["timestamp"], y: vals[i]["measvalue"] }) } Object.assign(chartData.datasets[0], JSON.parse(valueType.displayproperty)) Object.assign(chartData.datasets[0], {data: chartData.data, pointRadius: chartData.data.length > 500 ? 0 : 3}) mainContent.innerHTML = "" this.setPageTitle(sensor.sensorname + " (" + valueType.valuetype + ")") //blueweather.log("creating chart with data: " + JSON.stringify(chartData), 3) this.createDiagram("myChart", chartData) } createDiagram(canvasId, data) { // Graphs var ctx = document.getElementById(canvasId) // eslint-disable-next-line no-unused-vars var chartData = { //labels: time, datasets: data.datasets }; 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 }) } setPageTitle(title) { document.getElementById("titleH1").innerHTML = title } } dashboard = new BlueWeatherDashboard()