Analytics Board

Signed-off-by: Sean Smith <ssmith@iol.unh.edu>
Change-Id: Id942628ff04cd2f3808f8608ac45989360717f34

2 files changed, 277 insertions, 67 deletions

diff --git a/src/templates/base/booking/stats.html b/src/templates/base/booking/stats.html
index 4c06b71..3429acf 100644
--- a/src/templates/base/booking/stats.html
+++ b/src/templates/base/booking/stats.html
@@ -1,78 +1,288 @@
 {% extends "base.html" %}
 {% load staticfiles %}
 
-{% block extrahead %}
-{{ block.super }}
-<script src="{% static "node_modules/plotly.js-dist/plotly.js" %}"></script>
+{% block content %}
+<div class="row">
+    <div class="col-lg-12">
+        <div class="card">
+            <div class="card-header no-border-bottom">
+                <h2 class="card-title">Booking Statistics</h2>
+            </div>
+            <div class="card-content">
+                <div class="card-body">
+                    <div class="row justify-content-md-center">
+                        <div class="col-lg-4">
+                            <div class="container">
+                                <canvas id="util-gauge"></canvas>
+                            </div>
+                        </div>
+                        <div class="col-4 border-left border-right">
+                            <div class="container">
+                                <canvas id="resources-time-series"></canvas>
+                            </div>
+                        </div>
+                        <div class="col-lg-4">
+                            <div class="container">
+                                <canvas id="project-chart"></canvas>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="row border-top">
+                        <div class="col-6">
+                            <div class="container">
+                                <canvas id="booking-time-series"></canvas>
+                            </div>
+                        </div>
+                        <div class="col-6">
+                            <div class="container">
+                                <canvas id="users-time-series"></canvas>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.3/dist/Chart.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],
-        line: {shape: "hv"},
-        type: "scatter",
-        mode: "lines+makers",
+    function processTimeSeriesData(data_dict, colors) {
+        let output = [];
+        let i = 0;
+
+        for (let key in data_dict) {
+            output.push({
+                label: key,
+                data: data_dict[key][1],
+                steppedLine: true,
+                fill: false,
+                backgroundColor: colors[i],
+                borderColor: colors[i]
+            });
+
+            i += 1;
+        }
+
+        return output
+    }
+
+    let booking_chart = document.getElementById('booking-time-series').getContext('2d');
+    let users_chart = document.getElementById('users-time-series').getContext('2d');
+    let util_chart = document.getElementById('util-gauge').getContext('2d');
+    let project_chart = document.getElementById('project-chart').getContext('2d');
+    let resources_chart = document.getElementById('resources-time-series').getContext('2d');
+
+    let data = {{data | safe}};
+    let booking = data['booking'];
+    let users = data['user'];
+    let projects = data['projects'];
+    let colors = data['colors'];
+
+    let primary_color = colors[0];
+    let secondary_color = colors[1];
+    let accent_color = colors[2];
+
+    let booking_config = {
+        type: 'line',
+        data: {
+            labels: booking[0],
+            datasets: [{
+                label: 'Bookings',
+                data: booking[1],
+                steppedLine: true,
+                fill: false,
+                backgroundColor: primary_color,
+                borderColor: primary_color
+            }]
+        },
+        options: {
+            responsive: true,
+            interaction: {
+                intersect: false,
+                axis: 'x'
+            },
+            title: {
+                display: true,
+                text: 'Active Bookings'
+            },
+            legend: {
+                display: true
+            },
+            elements: {
+                point: {
+                    radius: 0
+                }
+            }
+        }
     };
-    var layout = {
-        title: graph_title,
-        yaxis: {
-            rangemode: 'tozero',
-            autorange: true
+
+    let resources_config = {
+        type: 'line',
+        data: {
+            labels: booking[0],
+            datasets: processTimeSeriesData(data['resources'], colors)
+        },
+        options: {
+            responsive: true,
+            interaction: {
+                intersect: false,
+                axis: 'x'
+            },
+            title: {
+                display: true,
+                text: 'Booked Resources'
+            },
+            legend: {
+                display: true
+            },
+            transitions: {
+                show: {
+                    animations: {
+                        x: {
+                            from: 100
+                        },
+                        y: {
+                            from: 1
+                        }
+                    }
+                },
+                hide: {
+                    animations: {
+                        x: {
+                            to: 0
+                        },
+                        y: {
+                            to: 100
+                        }
+                    }
+                }
+            },
+            elements: {
+                point: {
+                    radius: 0
+                }
+            }
         }
     };
-    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");
+    let users_config = {
+        type: 'line',
+        data: {
+            labels: users[0],
+            datasets: [{
+                label: 'Users',
+                data: users[1],
+                fill: false,
+                steppedLine: true,
+                backgroundColor: primary_color,
+                borderColor: primary_color
+            }]
+        },
+        options: {
+            responsive: true,
+            interaction: {
+                intersect: false,
+                axis: 'x'
+            },
+            legend: {
+                display: true
+            },
+            title: {
+                display: true,
+                text: 'Active Users'
+            },
+            elements: {
+                point: {
+                    radius: 0
+                }
+            }
         }
-    }
-    req.open("GET", url, true);
-    req.send();
-}
+    };
 
-</script>
-{% endblock %}
+    let utilization_config = {
+        type:"doughnut",
+        data: {
+            labels : ["In Use","Not In Use","Maitenance"],
+            datasets: [{
+                label: 'Lab Utilization',
+                data : [data['utils'][0], data['utils'][1], data['utils'][2]],
+                backgroundColor: [
+                    primary_color,
+                    secondary_color,
+                    accent_color,
+                ]
+            }]
+        },
+        options: {
+            circumference: Math.PI,
+            rotation : Math.PI,
+            cutoutPercentage : 80,
+            plugins: {
+                datalabels: {
+                    backgroundColor: primary_color,
+                    borderColor: secondary_color,
+                    align: 'start',
+                    anchor: 'start',
+                    offset: 10,
+                    borderRadius: 4,
+                    borderWidth: 1,
+                }
+            },
+            legend: {
+                display: false
+            },
+            tooltips: {
+                enabled: true
+            },
+            title: {
+                display: true,
+                text: "Lab Resources Utilization"
+            }
+        }
+    };
 
-{% 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");
+    let project_config = {
+        type: 'bar',
+        data: {
+            labels: projects[0],
+            datasets:[{
+                label: 'Projects',
+                data: projects[1],
+                backgroundColor: primary_color,
+                borderColor: secondary_color
+            }]
+        },
+        options: {
+            scales: {
+                yAxes: [{
+                    ticks: {
+                        beginAtZero: true
+                    }
+                }]
+            },
+            elements: {
+                bar: {
+                    borderWidth: 2,
+                }
+            },
+            responsive: true,
+            legend: {
+                display: false,
+                position: 'right'
+            },
+            title: {
+                display: true,
+                text: 'Top Represented Projects'
+            }
+        }
+    };
+
+    let bookingChart = new Chart(booking_chart, booking_config);
+    let usersChart = new Chart(users_chart, users_config);
+    let utilGauge = new Chart(util_chart, utilization_config);
+    let projectBars = new Chart(project_chart, project_config);
+    let resourceChart = new Chart(resources_chart, resources_config);
 </script>
 {% endblock content %}
diff --git a/src/templates/base/layout.html b/src/templates/base/layout.html
index edf9b6b..2132dc6 100644
--- a/src/templates/base/layout.html
+++ b/src/templates/base/layout.html
@@ -14,6 +14,9 @@
     <title>OPNFV Laas {{ title }}</title>
     {% endblock head-title %}
 
+    <!-- jQuery -->
+    <script src="{% static "node_modules/jquery/dist/jquery.min.js" %}"></script>
+
     <!-- Bootstrap Core CSS -->
     <link href="{% static "node_modules/bootstrap/dist/css/bootstrap.min.css" %}"
           rel="stylesheet">
@@ -27,9 +30,6 @@
     <!-- Favicon -->
     <link rel="shortcut icon" href="{% static 'favicon.ico' %}">
 
-    <!-- jQuery -->
-    <script src="{% static "node_modules/jquery/dist/jquery.min.js" %}"></script>
-
     {% block extrahead %}
     {% endblock extrahead %}