blob: 9f9f8b6fe2b8c32a8ed99268b9c6e4ba3b5c647f [file] [log] [blame]
<!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>