const plotElement = document.getElementById("plot");

const layout = {
  title: "Real-Time Complex Data Visualization",
  xaxis: { title: "Time (ms)" },
  yaxis: { title: "Value" },
};

Plotly.newPlot(
  plotElement,
  [
    {
      x: [],
      y: [],
      type: "scatter",
      mode: "lines+markers", // Line + markers
    },
  ],
  layout,
);

const socket = new WebSocket("ws://" + location.host + "/data");
socket.onopen = function () {
  console.log("Connected to the server");
  socket.send("0 0 0");
};
socket.addEventListener("message", function (msg) {
  Plotly.extendTraces(
    plotElement,
    {
      x: [[msg.timeStamp]],
      y: [[msg.data]],
    },
    [0],
    300,
  );
});

function changeSubcarrier() {
  const subcarrier = document.getElementById("subcarrier").value;
  socket.send(subcarrier + " 0 0");
}