index.html

<div>
  <canvas id="myChart"></canvas>
</div>
<div id="example-table"></div>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<link href="https://unpkg.com/tabulator-tables@5.6.1/dist/css/tabulator.min.css" rel="stylesheet">
<script type="text/javascript" src="https://unpkg.com/tabulator-tables@5.6.1/dist/js/tabulator.min.js"></script>

<script>

  function sleep(ms) {
    return new Promise(resolve => setTimeout(resolve, ms));
  }

  function init_table(data) {
    return new Tabulator("#example-table", {
      layout:"fitColumns",
      height:"311px",
      reactiveData:true,
      columns: [
        { title: "tpep_pickup_datetime", field: "putime" },
        { title: "tpep_dropoff_datetime", field: "dotime" },
        { title: "pickup_zone", field: "puzone" },
        { title: "dropoff_zone", field: "dozone" },
        { title: "trip_distance", field: "distance" },
      ],
      data: data
    });
  }

  async function query_longest_trips() {
    const response = await fetch('http://127.0.0.1:5000/get_longest_trips')
    return await response.json();
  }

  async function render_table() {
    let data = []
    for (let i = 0; i < 10; i++) {
      data.push({
        putime: '2023-01-01 00:00:00',
        dotime: '2023-01-01 00:00:00',
        puzone: 'A',
        dozone: 'B',
        distance: 1.0
      })
    }
    init_table(data)
    while (true) {
      await sleep(500)
      let new_data = await query_longest_trips()
      console.log(new_data)
      for (let i = 0; i < 10; i++) {
        data[i]["putime"] = new_data[i][0]
        data[i]["dotime"] = new_data[i][1]
        data[i]["puzone"] = new_data[i][2]
        data[i]["dozone"] = new_data[i][3]
        data[i]["distance"] = new_data[i][4]
      }
    }
  }

  async function query_busiest_zones() {
    const response = await fetch('http://127.0.0.1:5000/get_busiest_zones')
    return await response.json();
  }

  async function chart_busiest_zones() {

    const data = {
      labels: [],
      datasets: [{
        label: 'Busiest Zones in past 1 min',
        data: [],
        borderWidth: 1
      }]
    }

    async function refresh_data() {
      const busiest_zones = await query_busiest_zones()
      const zones = busiest_zones.map(data => data[0])
      const counts = busiest_zones.map(data => data[1])
      data.labels = zones
      data.datasets.forEach((dataset) => {
        dataset.data = counts
      })
    }

    const ctx = document.getElementById('myChart');

    const chart = new Chart(ctx, {
      responsive: true,
      type: 'bar',
      data: data,
      options: {
        indexAxis: 'y',
        scales: {
          y: {
            beginAtZero: true
          }
        }
      }
    });

    while(true) {
      await sleep(100)
      await refresh_data()
      chart.update()
    }
  }

  function main() {
    render_table()
    chart_busiest_zones()
  }

  main()

</script>