{% extends "base.html" %}
{% block title %}Graphs{% endblock %}
{% block content %}
<h1>Graphs</h1>
<div class="card">
    <h3>Bandwidth</h3>
    <div id="chart-bandwidth" style="height: 300px;"></div>
</div>
<div class="card">
    <h3>Tunnels</h3>
    <div id="chart-tunnels" style="height: 300px;"></div>
</div>
<script src="https://cdn.plot.ly/plotly-2.35.2.min.js"></script>
<script>
async function loadChart(elementId, statName, title) {
    try {
        const resp = await fetch(`/graphs/data/${statName}`);
        const data = await resp.json();
        Plotly.newPlot(elementId, [{
            x: data.labels,
            y: data.values,
            type: 'scatter',
            mode: 'lines',
            name: title
        }], {
            margin: {t: 30, r: 30, b: 40, l: 50},
            xaxis: {title: 'Time'},
            yaxis: {title: title}
        });
    } catch(e) {
        document.getElementById(elementId).textContent = 'No data available';
    }
}
loadChart('chart-bandwidth', 'bandwidth.in', 'Bandwidth In (B/s)');
loadChart('chart-tunnels', 'tunnels.participating', 'Participating Tunnels');
</script>
{% endblock %}