<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="preconnect" href="https://www.gstatic.com">
<title>Go Stats</title>
<style>
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
body {
  font: 13px system-ui, sans-serif;
  padding: 1rem;
}
.Chart {
  border: 1px solid #999;
  height: 400px;
  padding: 1rem;
}
.Chart + .Chart {
  margin-top: 1rem;
}
@media only screen and (min-device-width: 37.5rem) {
  .ChartsContainer {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(37.5rem, 1fr));
    grid-gap: 1rem;
  }
  .Chart + .Chart {
    margin-top: 0;
  }
}
</style>
<header>
  <h1>Go Stats</h1>
</header>
<main>
  <div class="ChartsContainer js-chartContainer"></div>
</main>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<script>
  const CHART_DATA = {{.DataJSON}};
  for (let chart of CHART_DATA.Charts) {
    const dateColumns = new Set(); // index -> date type
    for (let i = 0; i < chart.columns.length; i++) {
      if (chart.columns[i].type === 'date' || chart.columns[i].type === 'datetime') {
        dateColumns.add(i);
      }
    }
    if (dateColumns.size > 0) {
      for (let row = 0; row < chart.data.length; row++) {
        for (let col of dateColumns) {
          chart.data[row][col] = new Date(chart.data[row][col]);
        }
      }
    }
  }
  const data = []; // indexed by charts entry
  const googCharts = [];  // indexed by charts entry

  google.charts.load('current', {packages:['corechart']});
  google.charts.setOnLoadCallback(() => {
    for (let i = 0; i < CHART_DATA.Charts.length; i++) {
      const chart = CHART_DATA.Charts[i];
      data[i] = new google.visualization.DataTable();
      for (let col of chart.columns) {
        data[i].addColumn(col.type, col.label);
      }
      data[i].addRows(chart.data);
      const containerEl = document.createElement('div');
      containerEl.classList.add('Chart');
      document.querySelector('.js-chartContainer').appendChild(containerEl);
      googCharts[i] = new google.visualization.LineChart(containerEl);
    }
    drawCharts();
  });

  const drawCharts = () => {
    for (let i = 0; i < CHART_DATA.Charts.length; i++) {
      googCharts[i].draw(data[i], {
        title: CHART_DATA.Charts[i].title,
        chartArea: {width: '100%', height: '80%'},
        legend: {position: 'top', alignment: 'end'},
      });
    }
  };

  let debounceTimerId;
  window.addEventListener('resize', e => {
    if (debounceTimerId != null) {
      window.clearTimeout(debounceTimerId);
      debounceTimerId = null;
    }
    debounceTimerId = window.setTimeout(() => { drawCharts(); }, 50);
  });
</script>