class liveGraph {
  // Constructor to initialize the graph
  constructor(id) {
    this.timeArray = [];
    this.tempArray = [];
    this.humiArray = [];
    this.eco2Array = [];
    this.tvocArray = [];
    this.cnt = 0;
    this.nodeId = "liveGraph" + id;
  }

  // Fuction to create a graph
  makeGraph() {
    Plotly.plot(this.nodeId, [
      {
        x: this.timeArray, // Use timeArray as x values
        y: this.tempArray,
        mode: "lines",
        line: { color: "#80CAF6" },
        name: "Temperature",
      },
    ]);
  }

  // Function to update the graph with new values
  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.nodeId, minuteView);
    if (this.cnt === 10) clearInterval(interval);
  }

  updateData(temperature, humidity, eCO2, TVOC) {
    // Update the graph
    this.tempArray.push(temperature);
    this.humiArray.push(humidity);
    this.eco2Array.push(eCO2);
    this.tvocArray.push(TVOC);
  }
}