48 lines
1.6 KiB
HTML
48 lines
1.6 KiB
HTML
{% extends "layout.html" %}
|
|
|
|
{% block content %}
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<figure>
|
|
<div id="history_graph">{{history_graph|safe}}</div>
|
|
<figcaption class="float-right pr-3 mr-4">
|
|
<span id="history_graph_zoom_out" class="h4 oi oi-zoom-out text-muted" style="cursor:pointer;"></span>
|
|
<span id="history_graph_zoom_in" class="h4 oi oi-zoom-in text-muted" style="cursor:pointer;"></span>
|
|
</figcaption>
|
|
</figure>
|
|
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block scripts %}
|
|
<script type="text/javascript" src="http://kozea.github.com/pygal.js/latest/pygal-tooltips.min.js"></script>
|
|
<script>
|
|
let dataPoints = {{data_points}};
|
|
let zoomLevel = Math.ceil(dataPoints / 2);
|
|
//console.log(dataPoints);
|
|
|
|
function updateHistoryGraph() {
|
|
$.get('/history/' + zoomLevel)
|
|
.done(function (content) {
|
|
$('#history_graph').html(content.message);
|
|
dataPoints = content.data_points
|
|
});
|
|
}
|
|
setInterval(updateHistoryGraph, 30000);
|
|
|
|
$('#history_graph_zoom_out').click(function () {
|
|
// console.log(zoomLevel);
|
|
zoomLevel = zoomLevel * 2 <= 1440 ? Math.ceil(zoomLevel * 2) : dataPoints;
|
|
updateHistoryGraph();
|
|
});
|
|
|
|
$('#history_graph_zoom_in').click(function () {
|
|
// console.log(zoomLevel);
|
|
zoomLevel = zoomLevel / 2 > 2 ? Math.ceil(zoomLevel / 2) : 2;
|
|
updateHistoryGraph();
|
|
});
|
|
|
|
</script>
|
|
{% endblock %}
|