diff options
Diffstat (limited to 'src/templates/base/booking/stats.html')
| -rw-r--r-- | src/templates/base/booking/stats.html | 288 |
1 files changed, 0 insertions, 288 deletions
diff --git a/src/templates/base/booking/stats.html b/src/templates/base/booking/stats.html deleted file mode 100644 index 3429acf..0000000 --- a/src/templates/base/booking/stats.html +++ /dev/null @@ -1,288 +0,0 @@ -{% extends "base.html" %} -{% load staticfiles %} - -{% 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 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 - } - } - } - }; - - 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 - } - } - } - }; - - 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 - } - } - } - }; - - 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" - } - } - }; - - 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 %} |