[statistics] Per-location usage stats; include active lecture count

1 files changed, 44 insertions, 2 deletions

diff --git a/modules-available/statistics/templates/summary.html b/modules-available/statistics/templates/summary.html
index a71d50c0..461b4423 100644
--- a/modules-available/statistics/templates/summary.html
+++ b/modules-available/statistics/templates/summary.html
@@ -23,18 +23,60 @@
 		</div>
 	</div>
 	<div>
+		{{#json}}
 		<canvas id="usagehist" style="width:100%;height:150px"></canvas>
 		<script type="text/javascript">
 			document.addEventListener("DOMContentLoaded", function() {
+
+				var markings = {{{markings}}};
+				var markMax = Math.max(...markings) * 3;
+
+				var oldDraw = Chart.prototype._drawDatasets;
+
+				Chart.prototype._drawDatasets = function () {
+					if (this.chartArea) {
+						var ctx = this.ctx;
+						var chartArea = this.chartArea;
+
+						var meta = this.getDatasetMeta(0);
+
+						ctx.save();
+						var end = Math.min(meta.data.length, markings.length) - 1;
+						for (var i = 0; i < end; ++i) {
+							var start = meta.data[i].x;
+							var stop = meta.data[i+1].x;
+							ctx.fillStyle = 'rgba(16, 64, 255, ' + (!!markings[i] * .05 + markings[i] / markMax) + ')';
+							ctx.fillRect(start, chartArea.top, stop - start, chartArea.bottom - chartArea.top);
+						}
+						ctx.restore();
+					}
+
+					// Perform regular chart draw
+					oldDraw.call(this);
+				};
+
 				var data = {{{json}}};
 				var sel = false;
 				new Chart(document.getElementById('usagehist').getContext('2d'), {type: 'line', data: data, options: {
+					responsive: true,
 					animation: false,
-					pointHitDetectionRadius: 5,
-					plugins: { legend: {position: 'left' }}
+					pointRadius: 0,
+					pointHitRadius: 6,
+					interaction: { mode: 'index' },
+					plugins: {
+						tooltip: { callbacks: { label: function(context) {
+									if (context.dataset.label === 'Courses')
+										return null;
+									return context.dataset.label + ': ' + context.parsed.y;
+								}
+							}},
+						legend: {position: 'left' },
+					}
 				}});
+
 			}, false);
 		</script>
+		{{/json}}
 	</div>
 </div>