// set global variables
const limit = 10000; // How many points can be on the graph before sliding occurs
const refreshInterval = 100; // Time between refresh intervals

// set functions to retrieve
function getData1() {
  if (listMeanTimeToClear.length > 0) {
    return listMeanTimeToClear[listMeanTimeToClear.length - 1];
  } else {
    return 0;
  }
}

// set chart layout
const layout1 = {
  title: {
    text: "<b>Average Time Per Passenger in This Simulation</b>",
  },
  paper_bgcolor: "rgba(0,0,0,0)",
  plot_bgcolor: "rgba(0,0,0,0)",
  xaxis: { title: "Number of passengers", rangemode: "tozero" },
  yaxis: { title: "Average time taken per passenger (s)", rangemode: "tozero" },
  font: { family: "Graphik", size: 11 },
};

// plot all charts
Plotly.newPlot(
  "tester",
  [
    {
      y: [getData1()],
      mode: "lines",
      line: {
        color: "rebeccapurple",
        width: 1,
      },
    },
  ],
  layout1,
  { responsive: true }
);

// set refresh interval and graph limit
var cnt = 0;

// to extend plot
if (isRunning == true) {
  Plotly.extendTraces("tester", { y: [[getData1()]] }, [0]);
  cnt++;
  if (cnt > limit) {
    Plotly.relayout("tester", {
      xaxis: {
        range: [cnt - limit, cnt],
      },
    });
  }
}