1 files changed, 73 insertions, 0 deletions
diff --git a/src/templates/booking/stats.html b/src/templates/booking/stats.html
new file mode 100644
index 0000000..8bc68cd
--- /dev/null
+++ b/src/templates/booking/stats.html
@@ -0,0 +1,73 @@
+{% 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="container-fluid">
+        <div class="row">
+                <div class="col">
+                        <p>Number of days to plot: </p>
+                        <div class="form-group">
+                            <input id="number_days" type="number" class="form-control" min="1" step="1" style="display:inline;width:200px"/>
+                            <button class="btn btn-primary" onclick="getData();" style="display:inline;">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>
+    </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 %}