J1B3-Sensor-boxes/web/newWebsite/graph-classes.js

class Graph {
  constructor(id) {
    this.id = "graph" + id;
    this.timeArray = [];
    this.tempArray = [];
    this.humiArray = [];
    this.eco2Array = [];
    this.tvocArray = [];
  }

  // Function to create a graph
  makeGraph(line, lineColor, name) {
    let div = document.createElement("div");
    div.setAttribute("id", this.id);
    document.body.appendChild(div);
    let lineArray;
    switch (line) {
      case "temp":
        lineArray = this.tempArray;
        break;
      case "humi":
        lineArray = this.humiArray;
        break;
      case "eco2":
        lineArray = this.eco2Array;
        break;
      case "tvoc":
        lineArray = this.tvocArray;
        break;
      default:
        console.error("Invalid line");
    }
    Plotly.plot(this.id, [
      {
        x: this.timeArray,
        y: lineArray,
        mode: "lines",
        line: { color: lineColor },
        name: name,
      },
    ]);
  }

  updateData(type, value, timestamp) {
    // this.timeArray.push(timestamp);
    switch (type) {
      case "Temp":
        this.tempArray.push(value);
        break;
      case "Humi":
        this.humiArray.push(value);
        break;
      case "eCO2":
        this.eco2Array.push(value / 10);
        break;
      case "TVOC":
        this.tvocArray.push(value / 10);
        break;
      default:
        console.error("Invalid type");
    }
  }

  updateGraph() {
    let update = {
      x: [this.timeArray],
      y: [this.tempArray, this.humiArray, this.eco2Array, this.tvocArray],
    };
    console.log(update);
    Plotly.update(this.id, update);
  }
}

class LiveGraph extends Graph {
  // Constructor to initialize the graph
  constructor(id) {
    super(id);
    this.tempArray = [];
    this.humiArray = [];
    this.eco2Array = [];
    this.tvocArray = [];
    this.cnt = 0;
  }
  // Function to update the graph with new values got from updateData function
  updateGraph() {
    let time = new Date();
    this.timeArray.push(new Date());

    let update = {
      x: [[this.timeArray]],
      y: [
        [this.tempArray],
        [this.humiArray],
        [this.eco2Array],
        [this.tvocArray],
      ],
    };

    let olderTime = time.setMinutes(time.getMinutes() - 1);
    let futureTime = time.setMinutes(time.getMinutes() + 1);
    let minuteView = {
      xaxis: {
        type: "date",
        range: [olderTime, futureTime],
      },
    };
    Plotly.relayout(this.id, minuteView);
    if (this.cnt === 10) clearInterval(interval);
  }
  // function to get the new data for graph
  updateData(temperature, humidity, eCO2, TVOC) {
    // Update the graph
    this.tempArray.push(temperature);
    this.humiArray.push(humidity);
    this.eco2Array.push(eCO2 / 10);
    this.tvocArray.push(TVOC / 10);
  }
}

class DataProcessor {
  constructor(data) {
    this.data = data;
    this.graph;
  }
  // You can add more filtering methods based on different criteria if needed
  update(data) {
    this.data = data;

    console.log("Data updated");
    console.log(data);
  }

  makeGraph() {
    this.graph = new Graph(1);
    this.graph.makeGraph("temp", "red", "Temperature");
    this.graph.makeGraph("humi", "blue", "Humidity");
    this.graph.makeGraph("eco2", "green", "eCO2");
    this.graph.makeGraph("tvoc", "#F5G644", "TVOC");
  }

  updateGraph() {
    this.graph.timeArray = [];
    this.graph.tempArray = [];
    this.graph.humiArray = [];
    this.graph.eco2Array = [];
    this.graph.tvocArray = [];

    for (let i = 0; i < this.data.length; i++) {
      if (i % 4 == 0){
        this.graph.timeArray.push(this.data[i].TimeStamp);
      }
      this.graph.updateData(this.data[i].Type, this.data[i].Value, this.data[i].TimeStamp);
      console.log(this.data[i].Type, this.data[i].Value, this.data[i].TimeStamp);
    }
    this.graph.updateGraph();
  }      
}