aboutsummaryrefslogtreecommitdiffstats
path: root/src/templates/booking/stats.html
blob: 94239f985736a3cd5e1e9fb2e32f8eb003305d9d (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
{% extends "base.html" %}
{% load staticfiles %}

{% block extrahead %}
{{ block.super }}
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<script>
function drawGraph(data, graph_id, graph_title){
    var container = document.getElementById(graph_id);
    var plot_data = { x: data[0],
        y: data[1],
        fill: "tonexty",
        type: "scatter",
        mode: "none",
    };
    var layout = {
        title: graph_title
    };
    Plotly.newPlot(container, [plot_data], layout);
}
function getData(){
    var req = new XMLHttpRequest();
    var url = "/booking/stats/json";
    var day_input = document.getElementById("number_days");
    var days = day_input.value;
    //var days = document.getElementById("number_days").value;
    if(days){
        url = url + "?days=" + days;
    }
    req.onreadystatechange = function(){
        if( req.readyState == XMLHttpRequest.DONE) {
            var data = JSON.parse(req.responseText);
            drawGraph(data["booking"], "booking_graph_container", "Active Bookings");
            drawGraph(data["user"], "user_graph_container", "Active Users");
        }
    }
    req.open("GET", url, true);
    req.send();
}
</script>
{% endblock %}

{% block content %}
<div class="row">
    <div class="col-auto">
        <p>Number of days to plot: </p>
        <div class="form-group d-flex align-content-center">
            <input id="number_days" type="number" class="form-control d-inline-block w-auto" min="1" step="1"/>
            <button class="btn btn-primary ml-1" onclick="getData();">Submit</button>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-12 col-md-10">
        <!-- These graphs do NOT get redrawn when the browser size is changed -->
        <div id="all_graph_container border" class="mw-100">
            <div id="booking_graph_wrapper">
                <div id="booking_graph_container"/>
            </div>
            <div id="user_graph_wrapper">
                <div id="user_graph_container"/>
            </div>
        </div>
    </div>
</div>
<script>
var data = {{data|safe}};
drawGraph(data["booking"], "booking_graph_container", "Active Bookings");
drawGraph(data["user"], "user_graph_container", "Active Users");
</script>
{% endblock content %}