src/templates/base/booking/stats.html

   1 {% extends "base.html" %}
   2 {% load staticfiles %}
   3
   4 {% block content %}
   5 <div class="row">
   6     <div class="col-lg-12">
   7         <div class="card">
   8             <div class="card-header no-border-bottom">
   9                 <h2 class="card-title">Booking Statistics</h2>
  10             </div>
  11             <div class="card-content">
  12                 <div class="card-body">
  13                     <div class="row justify-content-md-center">
  14                         <div class="col-lg-4">
  15                             <div class="container">
  16                                 <canvas id="util-gauge"></canvas>
  17                             </div>
  18                         </div>
  19                         <div class="col-4 border-left border-right">
  20                             <div class="container">
  21                                 <canvas id="resources-time-series"></canvas>
  22                             </div>
  23                         </div>
  24                         <div class="col-lg-4">
  25                             <div class="container">
  26                                 <canvas id="project-chart"></canvas>
  27                             </div>
  28                         </div>
  29                     </div>
  30                     <div class="row border-top">
  31                         <div class="col-6">
  32                             <div class="container">
  33                                 <canvas id="booking-time-series"></canvas>
  34                             </div>
  35                         </div>
  36                         <div class="col-6">
  37                             <div class="container">
  38                                 <canvas id="users-time-series"></canvas>
  39                             </div>
  40                         </div>
  41                     </div>
  42                 </div>
  43             </div>
  44         </div>
  45     </div>
  46 </div>
  47
  48 <script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.3/dist/Chart.min.js"></script>
  49 <script>
  50
  51     function processTimeSeriesData(data_dict, colors) {
  52         let output = [];
  53         let i = 0;
  54
  55         for (let key in data_dict) {
  56             output.push({
  57                 label: key,
  58                 data: data_dict[key][1],
  59                 steppedLine: true,
  60                 fill: false,
  61                 backgroundColor: colors[i],
  62                 borderColor: colors[i]
  63             });
  64
  65             i += 1;
  66         }
  67
  68         return output
  69     }
  70
  71     let booking_chart = document.getElementById('booking-time-series').getContext('2d');
  72     let users_chart = document.getElementById('users-time-series').getContext('2d');
  73     let util_chart = document.getElementById('util-gauge').getContext('2d');
  74     let project_chart = document.getElementById('project-chart').getContext('2d');
  75     let resources_chart = document.getElementById('resources-time-series').getContext('2d');
  76
  77     let data = {{data | safe}};
  78     let booking = data['booking'];
  79     let users = data['user'];
  80     let projects = data['projects'];
  81     let colors = data['colors'];
  82
  83     let primary_color = colors[0];
  84     let secondary_color = colors[1];
  85     let accent_color = colors[2];
  86
  87     let booking_config = {
  88         type: 'line',
  89         data: {
  90             labels: booking[0],
  91             datasets: [{
  92                 label: 'Bookings',
  93                 data: booking[1],
  94                 steppedLine: true,
  95                 fill: false,
  96                 backgroundColor: primary_color,
  97                 borderColor: primary_color
  98             }]
  99         },
 100         options: {
 101             responsive: true,
 102             interaction: {
 103                 intersect: false,
 104                 axis: 'x'
 105             },
 106             title: {
 107                 display: true,
 108                 text: 'Active Bookings'
 109             },
 110             legend: {
 111                 display: true
 112             },
 113             elements: {
 114                 point: {
 115                     radius: 0
 116                 }
 117             }
 118         }
 119     };
 120
 121     let resources_config = {
 122         type: 'line',
 123         data: {
 124             labels: booking[0],
 125             datasets: processTimeSeriesData(data['resources'], colors)
 126         },
 127         options: {
 128             responsive: true,
 129             interaction: {
 130                 intersect: false,
 131                 axis: 'x'
 132             },
 133             title: {
 134                 display: true,
 135                 text: 'Booked Resources'
 136             },
 137             legend: {
 138                 display: true
 139             },
 140             transitions: {
 141                 show: {
 142                     animations: {
 143                         x: {
 144                             from: 100
 145                         },
 146                         y: {
 147                             from: 1
 148                         }
 149                     }
 150                 },
 151                 hide: {
 152                     animations: {
 153                         x: {
 154                             to: 0
 155                         },
 156                         y: {
 157                             to: 100
 158                         }
 159                     }
 160                 }
 161             },
 162             elements: {
 163                 point: {
 164                     radius: 0
 165                 }
 166             }
 167         }
 168     };
 169
 170     let users_config = {
 171         type: 'line',
 172         data: {
 173             labels: users[0],
 174             datasets: [{
 175                 label: 'Users',
 176                 data: users[1],
 177                 fill: false,
 178                 steppedLine: true,
 179                 backgroundColor: primary_color,
 180                 borderColor: primary_color
 181             }]
 182         },
 183         options: {
 184             responsive: true,
 185             interaction: {
 186                 intersect: false,
 187                 axis: 'x'
 188             },
 189             legend: {
 190                 display: true
 191             },
 192             title: {
 193                 display: true,
 194                 text: 'Active Users'
 195             },
 196             elements: {
 197                 point: {
 198                     radius: 0
 199                 }
 200             }
 201         }
 202     };
 203
 204     let utilization_config = {
 205         type:"doughnut",
 206         data: {
 207             labels : ["In Use","Not In Use","Maitenance"],
 208             datasets: [{
 209                 label: 'Lab Utilization',
 210                 data : [data['utils'][0], data['utils'][1], data['utils'][2]],
 211                 backgroundColor: [
 212                     primary_color,
 213                     secondary_color,
 214                     accent_color,
 215                 ]
 216             }]
 217         },
 218         options: {
 219             circumference: Math.PI,
 220             rotation : Math.PI,
 221             cutoutPercentage : 80,
 222             plugins: {
 223                 datalabels: {
 224                     backgroundColor: primary_color,
 225                     borderColor: secondary_color,
 226                     align: 'start',
 227                     anchor: 'start',
 228                     offset: 10,
 229                     borderRadius: 4,
 230                     borderWidth: 1,
 231                 }
 232             },
 233             legend: {
 234                 display: false
 235             },
 236             tooltips: {
 237                 enabled: true
 238             },
 239             title: {
 240                 display: true,
 241                 text: "Lab Resources Utilization"
 242             }
 243         }
 244     };
 245
 246     let project_config = {
 247         type: 'bar',
 248         data: {
 249             labels: projects[0],
 250             datasets:[{
 251                 label: 'Projects',
 252                 data: projects[1],
 253                 backgroundColor: primary_color,
 254                 borderColor: secondary_color
 255             }]
 256         },
 257         options: {
 258             scales: {
 259                 yAxes: [{
 260                     ticks: {
 261                         beginAtZero: true
 262                     }
 263                 }]
 264             },
 265             elements: {
 266                 bar: {
 267                     borderWidth: 2,
 268                 }
 269             },
 270             responsive: true,
 271             legend: {
 272                 display: false,
 273                 position: 'right'
 274             },
 275             title: {
 276                 display: true,
 277                 text: 'Top Represented Projects'
 278             }
 279         }
 280     };
 281
 282     let bookingChart = new Chart(booking_chart, booking_config);
 283     let usersChart = new Chart(users_chart, users_config);
 284     let utilGauge = new Chart(util_chart, utilization_config);
 285     let projectBars = new Chart(project_chart, project_config);
 286     let resourceChart = new Chart(resources_chart, resources_config);
 287 </script>
 288 {% endblock content %}