aboutsummaryrefslogtreecommitdiffstats
path: root/src/templates/base/booking/stats.html
diff options
context:
space:
mode:
Diffstat (limited to 'src/templates/base/booking/stats.html')
-rw-r--r--src/templates/base/booking/stats.html71
1 files changed, 71 insertions, 0 deletions
diff --git a/src/templates/base/booking/stats.html b/src/templates/base/booking/stats.html
new file mode 100644
index 0000000..94239f9
--- /dev/null
+++ b/src/templates/base/booking/stats.html
@@ -0,0 +1,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 %}