blueweather/js/dashboard.js

/* 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 = "<div class=\"d-flex justify-content-center\"><div class=\"spinner-border\" role=\"status\"><span class=\"sr-only\">Loading...</span></div></div>"

    this.blueweather.getLocationData(this.loc, 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 = "<p>This is your great dashboard :))</p>"
      }
      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 = "<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)
    }

    this.blueweather.getLocationData(this.loc, { from: from, to: to }, 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 +
        "<li class=\"nav-item\"><a class=\"nav-link\" id=\"navbarPage" + sensors[i]["id"] + "Link\" href=\"#\" onclick=\"dashboard.setPage(" + sensors[i]["id"] + ")\"><span data-feather=\"file\"></span>" + sensors[i]["sensorname"] + "</a></li>"
    }

    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 = "<canvas class=\"my-4 w-100\" id=\"myChart\"></canvas>"
    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()