principal-dashboard-lib-v2 0.0.36 → 0.0.37

package/bundles/principal-dashboard-lib-v2.umd.js

@@ -1,8 +1,12 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('rxjs'), require('angular-google-charts'), require('file-saver'), require('xlsx'), require('@angular/common'), require('ng2-datepicker')) :
-    typeof define === 'function' && define.amd ? define('principal-dashboard-lib-v2', ['exports', '@angular/core', 'rxjs', 'angular-google-charts', 'file-saver', 'xlsx', '@angular/common', 'ng2-datepicker'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global['principal-dashboard-lib-v2'] = {}, global.ng.core, global.rxjs, global.angularGoogleCharts, global.FileSaver, global.XLSX, global.ng.common, global.ng2Datepicker));
-}(this, (function (exports, i0, rxjs, angularGoogleCharts, FileSaver, XLSX, common, ng2Datepicker) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('rxjs'), require('angular-google-charts'), require('file-saver'), require('xlsx'), require('@angular/common'), require('ng2-datepicker'), require('html2canvas'), require('jspdf')) :
+    typeof define === 'function' && define.amd ? define('principal-dashboard-lib-v2', ['exports', '@angular/core', 'rxjs', 'angular-google-charts', 'file-saver', 'xlsx', '@angular/common', 'ng2-datepicker', 'html2canvas', 'jspdf'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global['principal-dashboard-lib-v2'] = {}, global.ng.core, global.rxjs, global.angularGoogleCharts, global.FileSaver, global.XLSX, global.ng.common, global.ng2Datepicker, global.html2canvas, global.jspdf));
+}(this, (function (exports, i0, rxjs, angularGoogleCharts, FileSaver, XLSX, common, ng2Datepicker, html2canvas, jspdf) { 'use strict';
+
+    function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+    var html2canvas__default = /*#__PURE__*/_interopDefaultLegacy(html2canvas);
 
     var PrincipalDashboardLibV2Service = /** @class */ (function () {
         function PrincipalDashboardLibV2Service() {
@@ -29,7 +33,14 @@
             //for get details of selected user
             this.detailedviewData = new rxjs.BehaviorSubject(this.userMetadata);
             this.detailedviewData$ = this.detailedviewData.asObservable();
+            // true while the Insights tab is selected instead of the user / classroom views
+            this.isInsightsView = new rxjs.BehaviorSubject(false);
+            this.isInsightsView$ = this.isInsightsView.asObservable();
             this.openSmallTable = new rxjs.BehaviorSubject(false);
+            // colour of the timeline bar that opened the details popup
+            this.detailAccentColor = '';
+            // set when the popup should list every session of a timeline row instead of one session
+            this.detailRowRequest = null;
             this.openSmallTable$ = this.openSmallTable.asObservable();
         }
         PrincipalDashboardLibV2Service.prototype.genarateResourseReqiuredData = function (data) {
@@ -422,10 +433,7 @@
                 for (var i = 0; i < this.userConsoleData.length; i++) {
                     //console.log('bbb-->',this.userConsoleData[i].terminalLocation)
                     var roomName = this.userConsoleData[i].terminalLocation;
-                    if (roomName === "") {
-                        //roomName = "No Name"
-                    }
-                    var location = roomName + " - " + this.userConsoleData[i].terminalIP;
+                    var location = this.getRoomLabel(roomName, this.userConsoleData[i].terminalIP);
                     //console.log('bbblocation-->',location)
                     var userData = [location, this.userConsoleData[i].startTime, this.userConsoleData[i].endTime];
                     dataTableforChart.push(userData);
@@ -451,6 +459,11 @@
             dataTableforChart = this.uniq(dataTableforChart);
             return dataTableforChart;
         };
+        // Row label for classroom wise chart: room name, or IP as fallback when name is missing
+        PrincipalDashboardLibV2Service.prototype.getRoomLabel = function (roomName, roomIP) {
+            var name = (roomName === undefined || roomName === null || roomName === 'undefined') ? '' : String(roomName).trim();
+            return name !== '' ? name : (roomIP || '');
+        };
         PrincipalDashboardLibV2Service.prototype.uniq = function (a) {
             return Array.from(new Set(a));
         };
@@ -551,29 +564,31 @@
                     //console.log("bbb allRoom-->",this.userConsoleData[i])
                     var roomName = this.userConsoleData[i].terminalLocation;
                     var roomIP = this.userConsoleData[i].terminalIP;
-                    if (roomName === "" || roomName === undefined) {
-                        roomName = "No Name";
-                    }
-                    var location = roomName + " - " + roomIP;
+                    var location = this.getRoomLabel(roomName, roomIP);
                     //console.log('bbbbRoom',location)
                     // let userData = [this.userConsoleData[i].terminalIP,this.userConsoleData[i].startTime,this.userConsoleData[i].endTime];
                     var userData = [location, this.userConsoleData[i].startTime, this.userConsoleData[i].endTime];
                     dataTableforChart.push(userData);
                 }
                 var inactiveRoonName = void 0;
+                // rooms already used today are in the chart above, add only the idle ones
+                var activeRoomIPs = this.userConsoleData.map(function (room) { return room.terminalIP; });
                 for (var i = 0; i < this.schoolTerminalData.length; i++) {
                     //console.log("schoolTerminalData",this.schoolTerminalData);
-                    inActiveClassRoom = this.schoolTerminalData[i].location + ' - ' + this.schoolTerminalData[i].terminalKey;
+                    if (activeRoomIPs.includes(this.schoolTerminalData[i].terminalKey)) {
+                        continue;
+                    }
+                    inActiveClassRoom = this.getRoomLabel(this.schoolTerminalData[i].location, this.schoolTerminalData[i].terminalKey);
                     //inactiveRoonName = this.schoolTerminalData[i].location;
                     myChartRowData = {
                         userId: "",
                         userName: "",
                         startTime: new Date(this.myEndTime),
                         endTime: new Date(this.myEndTime),
-                        terminalIP: inActiveClassRoom,
+                        terminalIP: this.schoolTerminalData[i].terminalKey,
                         resourceMetauserConsoleData: [],
                         duration: 0,
-                        terminalLocation: "",
+                        terminalLocation: this.schoolTerminalData[i].location,
                         userSubjects: ""
                     };
                     allRoomsDetails.push(myChartRowData);
@@ -842,9 +857,11 @@
     PrincipalDashboardLibV2Service.ctorParameters = function () { return []; };
 
     var PrincipalDashboardLibV2Component = /** @class */ (function () {
-        function PrincipalDashboardLibV2Component() {
+        function PrincipalDashboardLibV2Component(pdService) {
+            this.pdService = pdService;
             this.userSelectedDate = new i0.EventEmitter();
             this.messageForUser = "Loding...";
+            this.isInsights = false;
         }
         Object.defineProperty(PrincipalDashboardLibV2Component.prototype, "responseStatus", {
             set: function (res) {
@@ -855,6 +872,8 @@
             configurable: true
         });
         PrincipalDashboardLibV2Component.prototype.ngOnInit = function () {
+            var _this = this;
+            this.pdService.isInsightsView.subscribe(function (value) { return _this.isInsights = value; });
             // console.log(" IN --> 7 data",this.data);
         };
         PrincipalDashboardLibV2Component.prototype.setMessageForUser = function (res) {
@@ -870,11 +889,13 @@
     PrincipalDashboardLibV2Component.decorators = [
         { type: i0.Component, args: [{
                     selector: 'lib-principal-dashboard-lib-v2',
-                    template: "<div id=\"reprtModule\">\n    <div id=\"pd-mainDiv\" class=\"pd-mainContainer\">\n      <lib-header [data]=\"data\" (userSelectedDate)=\"onUserSelectDate($event)\">\n      </lib-header>\n      <lib-chartheader></lib-chartheader>\n       \n      <div id=\"pd-preloader\" class=\"pd-preloaderDiv\" *ngIf=\"responseStatus !== 'true' && !data\">\n      {{messageForUser}} \n      </div>\n      <lib-chartview *ngIf=\"data\" [data]=\"data\"></lib-chartview>\n      <!-- <lib-tableview *ngIf=\"data\" [data]=\"data\"></lib-tableview>  -->\n      <lib-full-table-view *ngIf=\"data\"  [data]=\"data\"></lib-full-table-view>\n      <!-- <lib-detailedview *ngIf=\"data\" [data]=\"data\"></lib-detailedview> -->\n      <lib-small-table-view *ngIf=\"data\" [data]=\"data\"></lib-small-table-view>\n      \n    </div>\n</div>\n  ",
+                    template: "<div id=\"reprtModule\">\n    <div id=\"pd-mainDiv\" class=\"pd-mainContainer\">\n      <lib-header [data]=\"data\" (userSelectedDate)=\"onUserSelectDate($event)\">\n      </lib-header>\n      <lib-chartheader></lib-chartheader>\n       \n      <div id=\"pd-preloader\" class=\"pd-preloaderDiv\" *ngIf=\"responseStatus !== 'true' && !data\">\n      {{messageForUser}} \n      </div>\n      <!-- kept alive (only hidden) while on Insights so the timeline keeps its state -->\n      <div [style.display]=\"isInsights ? 'none' : 'block'\">\n        <lib-chartview *ngIf=\"data\" [data]=\"data\"></lib-chartview>\n        <!-- <lib-tableview *ngIf=\"data\" [data]=\"data\"></lib-tableview>  -->\n        <lib-full-table-view *ngIf=\"data\"  [data]=\"data\"></lib-full-table-view>\n      </div>\n      <lib-insights *ngIf=\"data && isInsights\" [data]=\"data\"></lib-insights>\n      <!-- <lib-detailedview *ngIf=\"data\" [data]=\"data\"></lib-detailedview> -->\n      <lib-small-table-view *ngIf=\"data\" [data]=\"data\"></lib-small-table-view>\n      \n    </div>\n</div>\n  ",
                     styles: [".pd-mainContainer{width:100%;height:100%}.pd-mainContainer .pd-preloaderDiv{text-align:center;line-height:27;position:absolute;width:100%;height:87%;z-index:2}.bs-datepicker-head{background-color:#000!important}"]
                 },] }
     ];
-    PrincipalDashboardLibV2Component.ctorParameters = function () { return []; };
+    PrincipalDashboardLibV2Component.ctorParameters = function () { return [
+        { type: PrincipalDashboardLibV2Service }
+    ]; };
     PrincipalDashboardLibV2Component.propDecorators = {
         data: [{ type: i0.Input }],
         responseStatus: [{ type: i0.Input }],
@@ -889,9 +910,10 @@
             this.datadisplaytype = 'UserWise';
             this.isUserWise = true;
             this.isChartView = true;
+            this.isInsights = false;
         }
         ChartheaderComponent.prototype.ngOnInit = function () {
-            this.libVersion = "0.0.36";
+            this.libVersion = "0.0.37";
             // this.myIcon = document.getElementById('myIconImg');
             // this.changeChatType() 
         };
@@ -907,21 +929,34 @@
                 this.pdService.chartType.next(this.mytype);
             }
         };
+        ChartheaderComponent.prototype.showInsights = function () {
+            this.isInsights = true;
+            this.pdService.openSmallTable.next(false);
+            this.pdService.isInsightsView.next(true);
+        };
         ChartheaderComponent.prototype.changeDataTypeClassRoom = function () {
+            this.leaveInsights();
             this.isUserWise = false;
             this.pdService.isUserWise_data.next(false);
         };
         ChartheaderComponent.prototype.changeDataTypeUser = function () {
+            this.leaveInsights();
             this.isUserWise = true;
             this.pdService.isUserWise_data.next(true);
         };
+        ChartheaderComponent.prototype.leaveInsights = function () {
+            if (this.isInsights) {
+                this.isInsights = false;
+                this.pdService.isInsightsView.next(false);
+            }
+        };
         return ChartheaderComponent;
     }());
     ChartheaderComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'lib-chartheader',
-                    template: "\n<div id=\"pd-chartheader\">\n    <div id=\"pd-chatTypeBtnDiv\" class=\"pd-tabIconBtn\" [ngClass]=\" isChartView ? 'tableIconImg' : 'chartIconImg'\"  (click)=\"changeChatType()\">\n    </div>\n   \n    <div id=\"pd-userWisechatTypeBtn\" class=\"userWiseBtn\"  [ngStyle]=\"{ color: isUserWise ? '#ffffff' : '#000000' , backgroundColor: isUserWise ? '#000000' : '#c4c4c4'}\"\n    (click)=\"changeDataTypeUser()\">User wise</div>\n    <div id=\"pd-classRoomWiseBtn\"  class=\"classWiseBtn\" [ngStyle]=\"{ color: isUserWise ? '#000000' : '#ffffff' , backgroundColor: isUserWise ? '#c4c4c4' : '#000000'}\"\n    (click)=\"changeDataTypeClassRoom()\">Classroom wise</div>\n\n    \n    <div class=\"libVersionDiv\">v{{libVersion}}</div>\n</div>",
-                    styles: ["#pd-chartheader{font-size:12pt;font-weight:400;color:#5c5c5c;z-index:1;width:100%;height:40px;position:relative;margin:10 auto;text-align:center;background-color:#e0e0e0}#pd-chartheader #pd-classRoomWiseBtn,#pd-chartheader #pd-userWisechatTypeBtn{background:-moz-linear-gradient(center top,#45a1da 5%,#1172ae 100%);display:inline-block;padding:0 20px;cursor:pointer;margin:5px 0 0;width:160px;height:30px;line-height:30px}#pd-chartheader .libVersionDiv{position:absolute;font-size:12px;color:#343a40;margin-top:-21px;font-weight:700;margin-left:71px}.userWiseBtn{border-radius:6px 0 0 6px}.classWiseBtn{border-radius:0 6px 6px 0}.pd-tabIconBtn{cursor:pointer;position:absolute;left:10px;top:-17px;width:62px;height:52px;background-repeat:no-repeat}.tableIconImg{background-image:url(\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAD4AAAAzCAYAAADPX7uaAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MkZDQzc3REFDMkQ2MTFFMkIzNDhCNTE1RDg3OUE1QTciIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MkZDQzc3REJDMkQ2MTFFMkIzNDhCNTE1RDg3OUE1QTciPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDoyRkNDNzdEOEMyRDYxMUUyQjM0OEI1MTVEODc5QTVBNyIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDoyRkNDNzdEOUMyRDYxMUUyQjM0OEI1MTVEODc5QTVBNyIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PnXBGHQAAAblSURBVHja3FrLbxtF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\")}.chartIconImg{background-image:url(\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAD4AAAAzCAYAAADPX7uaAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6RDk0MUYxOEJDQzFFMTFFMkIxOUNERTUyRTI5MjFDNEYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6RDk0MUYxOENDQzFFMTFFMkIxOUNERTUyRTI5MjFDNEYiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpEOTQxRjE4OUNDMUUxMUUyQjE5Q0RFNTJFMjkyMUM0RiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpEOTQxRjE4QUNDMUUxMUUyQjE5Q0RFNTJFMjkyMUM0RiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PpdyrHsAAAZISURBVHja3FpLbBtF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\")}"]
+                    template: "\n<div id=\"pd-chartheader\">\n    <div id=\"pd-chatTypeBtnDiv\" *ngIf=\"!isInsights\" class=\"pd-tabIconBtn\" [ngClass]=\" isChartView ? 'tableIconImg' : 'chartIconImg'\"  (click)=\"changeChatType()\">\n    </div>\n   \n    <div id=\"pd-userWisechatTypeBtn\" class=\"userWiseBtn\"  [ngStyle]=\"{ color: isUserWise && !isInsights ? '#ffffff' : '#000000' , backgroundColor: isUserWise && !isInsights ? '#000000' : '#c4c4c4'}\"\n    (click)=\"changeDataTypeUser()\">User wise</div>\n    <div id=\"pd-classRoomWiseBtn\"  class=\"classWiseBtn\" [ngStyle]=\"{ color: !isUserWise && !isInsights ? '#ffffff' : '#000000' , backgroundColor: !isUserWise && !isInsights ? '#000000' : '#c4c4c4'}\"\n    (click)=\"changeDataTypeClassRoom()\">Classroom wise</div><div id=\"pd-insightsBtn\" class=\"insightsBtn\" [ngStyle]=\"{ color: isInsights ? '#ffffff' : '#000000' , backgroundColor: isInsights ? '#000000' : '#c4c4c4'}\"\n    (click)=\"showInsights()\">Insights</div>\n\n    \n    <div class=\"libVersionDiv\">v{{libVersion}}</div>\n</div>",
+                    styles: ["#pd-chartheader{font-size:12pt;font-weight:400;color:#5c5c5c;z-index:1;width:100%;height:40px;position:relative;margin:10 auto;text-align:center;background-color:#e0e0e0}#pd-chartheader #pd-classRoomWiseBtn,#pd-chartheader #pd-insightsBtn,#pd-chartheader #pd-userWisechatTypeBtn{background:-moz-linear-gradient(center top,#45a1da 5%,#1172ae 100%);display:inline-block;padding:0 20px;cursor:pointer;margin:5px 0 0;width:160px;height:30px;line-height:30px}#pd-chartheader .libVersionDiv{position:absolute;font-size:12px;color:#343a40;margin-top:-21px;font-weight:700;margin-left:71px}.userWiseBtn{border-radius:6px 0 0 6px}.insightsBtn{border-radius:0 6px 6px 0;border-left:1px solid #e0e0e0}.pd-tabIconBtn{cursor:pointer;position:absolute;left:10px;top:-17px;width:62px;height:52px;background-repeat:no-repeat}.tableIconImg{background-image:url(\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAD4AAAAzCAYAAADPX7uaAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MkZDQzc3REFDMkQ2MTFFMkIzNDhCNTE1RDg3OUE1QTciIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MkZDQzc3REJDMkQ2MTFFMkIzNDhCNTE1RDg3OUE1QTciPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDoyRkNDNzdEOEMyRDYxMUUyQjM0OEI1MTVEODc5QTVBNyIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDoyRkNDNzdEOUMyRDYxMUUyQjM0OEI1MTVEODc5QTVBNyIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PnXBGHQAAAblSURBVHja3FrLbxtF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\")}.chartIconImg{background-image:url(\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAD4AAAAzCAYAAADPX7uaAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6RDk0MUYxOEJDQzFFMTFFMkIxOUNERTUyRTI5MjFDNEYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6RDk0MUYxOENDQzFFMTFFMkIxOUNERTUyRTI5MjFDNEYiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpEOTQxRjE4OUNDMUUxMUUyQjE5Q0RFNTJFMjkyMUM0RiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpEOTQxRjE4QUNDMUUxMUUyQjE5Q0RFNTJFMjkyMUM0RiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PpdyrHsAAAZISURBVHja3FpLbBtF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\")}"]
                 },] }
     ];
     ChartheaderComponent.ctorParameters = function () { return [
@@ -1259,6 +1294,12 @@
             this.allList = "All Users";
             this.isAllUsers = false;
             this.isUserWise = false;
+            this.isSubscribed = false;
+            // set to false to go back to the Google timeline chart
+            this.useCustomTimeline = true;
+            this.isTableView = false;
+            this.timelineRows = [];
+            this.timelineList = [];
             this.myChartDataMatrix = new Array();
             this.totalChartDataMatrix = new Array();
         }
@@ -1284,6 +1325,7 @@
             this.currentList = "Current Users";
             this.allList = "All Users";
             this.isAllUsers = false;
+            this.pdService.isAllUsers.next(false);
             this.isUserWise = false;
             this.myChartDataMatrix = [];
             this.totalChartDataMatrix = [];
@@ -1296,6 +1338,7 @@
             if (this.myXmlData) {
                 this.currentdataList = this.pdService.genarateUserReqiuredData(this.myXmlData);
                 this.alluserList = this.pdService.allUserChartData();
+                this.allRoomsList = this.pdService.allRoomsData();
                 this.resourceDataList = this.pdService.genarateResourseReqiuredData(this.myXmlData);
                 this.totalUsers = this.currentdataList.usersMetadata.length;
                 this.eligibleUsers = this.findEligibleUserCount();
@@ -1303,6 +1346,12 @@
                 this.currentRooms = this.findCurrentClassrooms();
                 this.findCurrentUserCount();
             }
+            // subscribe once; on later reloads just redraw the currently selected view
+            if (this.isSubscribed) {
+                this.updateDataType(this.pdService.isUserWise_data.value);
+                return;
+            }
+            this.isSubscribed = true;
             this.pdService.chartType.subscribe(function (data) {
                 if (data) {
                     _this.updateChartType(data);
@@ -1311,10 +1360,25 @@
             this.pdService.isUserWise_data.subscribe(function (data) {
                 _this.updateDataType(data);
             });
+            this.pdService.isInsightsView.subscribe(function (insights) {
+                if (!insights) {
+                    setTimeout(function () { return _this.fitChartHeight(); });
+                }
+            });
             window.addEventListener('resize', this.onResizeWindow.bind(this));
         };
         ChartviewComponent.prototype.onResizeWindow = function (event) {
             this.myChartwidth = window.innerWidth * 0.88; //set an appropriate  factor
+            this.fitChartHeight();
+        };
+        // stretch the chart area from where it starts down to the bottom of the window
+        ChartviewComponent.prototype.fitChartHeight = function () {
+            var chartview = document.getElementById('pd-chartview');
+            if (!chartview || chartview.style.display === 'none')
+                return;
+            var top = chartview.getBoundingClientRect().top + window.scrollY;
+            var height = Math.max(window.innerHeight - top - 8, 240);
+            chartview.style.height = height + 'px';
         };
         ChartviewComponent.prototype.myChartReady = function () {
             this.createDivforTotalDurartion();
@@ -1322,16 +1386,21 @@
             // this.removeBlankEntryBar();
         };
         ChartviewComponent.prototype.updateChartType = function (dataType) {
+            var _this = this;
+            this.isTableView = dataType == angularGoogleCharts.ChartType.Table;
             if (this.chartview != null && this.chartview != undefined) {
                 if (dataType == angularGoogleCharts.ChartType.Table) {
                     this.chartview.style.display = 'none';
                 }
                 else {
                     this.chartview.style.display = 'block';
+                    setTimeout(function () { return _this.fitChartHeight(); });
                 }
             }
         };
         ChartviewComponent.prototype.updateDataType = function (dataType) {
+            var _this = this;
+            setTimeout(function () { return _this.fitChartHeight(); });
             this.isUserWise = dataType;
             if (this.myXmlData) {
                 if (this.isUserWise) {
@@ -1359,7 +1428,7 @@
         ChartviewComponent.prototype.updateChart = function () {
             var _this = this;
             var labels = document.getElementById('labels');
-            while (labels.firstChild) {
+            while (labels && labels.firstChild) {
                 labels.removeChild(labels.lastChild);
             }
             this.chartDataTable = this.myChartDataMatrix;
@@ -1422,7 +1491,7 @@
                 for (var i = 0; i < detailViewMatrix.length; i++) {
                     // console.log("detailViewMatrix[i]",detailViewMatrix[i]);
                     id_durationArray = {
-                        name: detailViewMatrix[i].terminalIP,
+                        name: this.pdService.getRoomLabel(detailViewMatrix[i].terminalLocation, detailViewMatrix[i].terminalIP),
                         value: parseInt(detailViewMatrix[i].duration),
                     };
                     id_durationMatrix.push(id_durationArray);
@@ -1482,6 +1551,8 @@
             var rowLabels = [];
             this.rowElements = [];
             var labels = document.getElementById('labels');
+            if (!labels)
+                return;
             while (labels.firstChild) {
                 labels.removeChild(labels.lastChild);
             }
@@ -1524,14 +1595,83 @@
                 }
             }
         };
+        // rows for lib-timeline, one per teacher or room, bars point back into `list` by index
+        ChartviewComponent.prototype.buildTimeline = function (list) {
+            var _this = this;
+            this.timelineList = list || [];
+            var rows = [];
+            var rowByLabel = {};
+            this.timelineList.forEach(function (session, index) {
+                var label = _this.isUserWise
+                    ? session.userName
+                    : _this.pdService.getRoomLabel(session.terminalLocation, session.terminalIP);
+                if (label === undefined || label === null || label === '' || label === '--')
+                    return;
+                if (label === '-')
+                    label = 'Unknown user';
+                var row = rowByLabel[label];
+                if (!row) {
+                    row = rowByLabel[label] = { label: label, bars: [] };
+                    rows.push(row);
+                }
+                if (_this.isSession(session)) {
+                    var other = _this.isUserWise
+                        ? _this.pdService.getRoomLabel(session.terminalLocation, session.terminalIP)
+                        : session.userName;
+                    var time = session.startTime.toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit' }) +
+                        ' – ' + session.endTime.toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit' });
+                    row.bars.push({
+                        start: session.startTime,
+                        end: session.endTime,
+                        index: index,
+                        tooltip: ((other || '') + "\n" + time).trim(),
+                    });
+                }
+            });
+            this.timelineRows = rows;
+        };
+        // idle user / room placeholders have no user or no real start time
+        ChartviewComponent.prototype.isSession = function (session) {
+            return !!session && !!session.userId &&
+                session.startTime instanceof Date && !isNaN(session.startTime.getTime()) &&
+                session.endTime instanceof Date && !isNaN(session.endTime.getTime());
+        };
+        // every session of one row: a teacher's day (user wise) or a room's day (classroom wise)
+        ChartviewComponent.prototype.openRow = function (event) {
+            var _this = this;
+            var sessions = event.indexes
+                .map(function (i) { return _this.timelineList[i]; })
+                .filter(function (s) { return _this.isSession(s); })
+                .map(function (s) { return ({ userId: s.userId, ip: s.terminalIP, start: s.startTime.getTime() }); });
+            if (!sessions.length)
+                return;
+            this.pdService.detailAccentColor = event.color;
+            this.pdService.detailRowRequest = { label: event.label, isUserWise: this.isUserWise, total: event.total, sessions: sessions };
+            this.pdService.openSmallTable.next({ allSessions: true });
+        };
+        ChartviewComponent.prototype.openSession = function (event) {
+            var index = event.index;
+            var session = this.timelineList[index];
+            if (!this.isSession(session))
+                return;
+            this.pdService.detailAccentColor = event.color;
+            this.pdService.detailRowRequest = null;
+            this.selectedUserData = this.pdService.dataForDetailedView(this.timelineList, this.resourceDataList, index);
+            this.pdService.detailedviewData.next(this.selectedUserData);
+            this.pdService.openSmallTable.next(this.selectedUserData);
+        };
         ChartviewComponent.prototype.onSelectRowData = function (event) {
             var _a = event.selection[0], row = _a.row, column = _a.column;
+            // pick the same list the chart rows were built from
+            var selectedList = this.currentdataList.userConsoleData;
             if (this.isAllUsers) {
-                this.selectedUserData = this.pdService.dataForDetailedView(this.alluserList.fordurationTable, this.resourceDataList, row);
+                selectedList = this.isUserWise ? this.alluserList.fordurationTable : this.allRoomsList.fordurationTable;
             }
-            else {
-                this.selectedUserData = this.pdService.dataForDetailedView(this.currentdataList.userConsoleData, this.resourceDataList, row);
+            // idle room / user rows have no session to show
+            if (!selectedList[row] || !selectedList[row].userId || !selectedList[row].startTime) {
+                return;
             }
+            this.selectedUserData = this.pdService.dataForDetailedView(selectedList, this.resourceDataList, row);
             var smallData = [{ 'a': this.currentdataList, 'b': row }];
             //  console.log("this.selectedUserData",this.selectedUserData);
             this.pdService.detailedviewData.next(this.selectedUserData);
@@ -1561,6 +1701,7 @@
         };
         ChartviewComponent.prototype.userWiseCurrentData = function () {
             var chartDataUserWise = this.pdService.userWiseChartData();
+            this.buildTimeline(this.currentdataList.userConsoleData);
             //    console.log("chartDataUserWise",chartDataUserWise);
             if (chartDataUserWise.length > 0) {
                 this.myChartDataMatrix = chartDataUserWise;
@@ -1571,6 +1712,7 @@
             }
         };
         ChartviewComponent.prototype.userWiseAllData = function () {
+            this.buildTimeline(this.alluserList.fordurationTable);
             var chartDataUserWise = this.alluserList.forChartData;
             if (chartDataUserWise.length > 0) {
                 this.myChartDataMatrix = chartDataUserWise;
@@ -1580,6 +1722,7 @@
         };
         ChartviewComponent.prototype.classRoomWiseCurrentData = function () {
             var classRoomdata = this.pdService.classRoomWiseChartData();
+            this.buildTimeline(this.currentdataList.userConsoleData);
             console.log("classRoomdata", classRoomdata);
             if (classRoomdata && classRoomdata.length > 0) {
                 this.myChartDataMatrix = classRoomdata;
@@ -1591,7 +1734,8 @@
             }
         };
         ChartviewComponent.prototype.classRoomWiseAllData = function () {
-            var allclassRoomList = this.pdService.allRoomsData();
+            var allclassRoomList = this.allRoomsList || this.pdService.allRoomsData();
+            this.buildTimeline(allclassRoomList.fordurationTable);
             if (allclassRoomList.forChartData && allclassRoomList.forChartData.length > 0) {
                 this.myChartDataMatrix = allclassRoomList.forChartData;
                 this.updateChart();
@@ -1642,8 +1786,8 @@
     ChartviewComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'lib-chartview',
-                    template: "<div id=\"pd-chartview-main-container\" class=\"pd-chartview-main-container\">\n  <div id=\"userSummary\">\n    <table class=\"summaryTable\">\n      <tbody>\n        <tr>\n          <td id=\"totalUsers\" class=\"chartview-navigationbar\">\n            Total users: {{totalUsers}}\n          </td>\n          <td id=\"eligibleUsers\" class=\"chartview-navigationbar\">\n            Eligible users: {{eligibleUsers}}\n          </td>\n          <td id=\"currentUsers\" class=\"chartview-navigationbar\">\n            Current users: {{currentUsers}}\n          </td>\n          <td id=\"totalRooms\" class=\"chartview-navigationbar\">\n            Installed Classrooms: {{installedClassrooms}}\n          </td>\n          <td id=\"currentRooms\" class=\"chartview-navigationbar\">\n            Current Classrooms: {{currentRooms}}\n          </td>\n          <!-- <td\n            id=\"currentRooms\"\n            \n          >\n            <span id=\"totalUsers_list\" class=\"activeAll\">User List</span>\n          </td> -->\n        </tr>\n      </tbody>\n    </table>\n  </div>\n  <div id=\"pd-messageDivContainer\" class='pd-messageDivContainer'>\n    <div id=\"pd-messageDiv\" class='pd-messageDiv'>Click the bars to view details of content accessed by a teacher.</div>\n    <div id=\"pd-toggleContainer\" class=\"pd-toggleContainer\">\n     \n      <div id=\"pd-currentUserBtn\"  class=\"pd-currentUserBtn-div pd-commonStyleBtn\" (click)=\"showCurrentUser()\" [ngStyle]=\"{ color: isAllUsers ? '#000000' : '#ffffff' , backgroundColor: isAllUsers ? '#c4c4c4' : '#000000'}\">\n        {{currentList}}</div>\n      <div id=\"pd-allUserBtn\" class=\"pd-allUserBtn-div pd-commonStyleBtn\" (click)=\"showAllUser()\" [ngStyle]=\"{ color: isAllUsers ? '#ffffff' : '#000000' , backgroundColor: isAllUsers ? '#000000' : '#c4c4c4'}\">\n        {{allList}}</div>\n    </div>\n  </div>\n  <div id=\"pd-chartview\" class=\"pd-chartview\">\n  <div id=\"myChartDiv\">\n    <div id=\"myTimeLine\">\n      <google-chart\n        [type]=\"myChartType\"\n        [data]=\"chartDataTable\"\n        [options]=\"myChartOptions\"\n        [width]=\"myChartwidth\"\n        [height]=\"myChartHeight\"\n        (select)=\"onSelectRowData($event)\"\n        (ready)=\"myChartReady()\"\n      > \n      </google-chart>\n      \n    </div>\n    <div class=\"inline babloo\" id=\"labels\"></div> \n   \n    \n  </div>\n</div>\n",
-                    styles: [".pd-chartview-main-container .pd-chartview{display:block;overflow:scroll;width:100%;height:484px;font-family:Tahoma;font-size:12pt;font-weight:400;color:#666;margin:10 auto;text-align:center;padding-top:1px}.pd-chartview-main-container #userSummary{background:#e0e0e0;margin-top:1px}.pd-chartview-main-container #roomSummary,.pd-chartview-main-container #userSummary{position:relative;width:100%;text-align:center;padding-top:6px;padding-bottom:6px;font-size:13px}.pd-chartview-main-container .pd-messageDivContainer{margin-top:1px}.pd-chartview-main-container .pd-messageDivContainer .pd-messageDiv{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;position:absolute;margin-left:5px;font-size:13px}.pd-chartview-main-container .pd-messageDivContainer .pd-toggleContainer{line-height:30px;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;float:right;margin:5px 0}.pd-chartview-main-container .pd-messageDivContainer .pd-allUserBtn-div{border-radius:0 5px 5px 0}.pd-chartview-main-container .pd-messageDivContainer .pd-currentUserBtn-div{border-radius:5px 0 0 5px}.pd-chartview-main-container .pd-messageDivContainer .pd-commonStyleBtn{display:inline-block;cursor:pointer;font-size:12px;width:92px;text-align:center}.pd-chartview-main-container .summaryTable{width:100%;border-collapse:collapse;border-spacing:2px;border-color:grey}.pd-chartview-main-container .activeAll{cursor:pointer;background:none!important;border-radius:13px;border:none;width:64px;height:18px!important;line-height:18px!important;color:#45a1da;margin-right:0!important;padding:1px 5px;vertical-align:sub}.pd-chartview-main-container #myTimeLine{width:89%;height:60%;margin-left:5px;overflow-x:scroll;overflow-y:hidden;float:left}.pd-chartview-main-container #myTimeLine2{width:71px;position:relative;overflow-x:hidden;overflow-y:hidden}.pd-chartview-main-container #myChartDiv{width:100%}.pd-chartview-main-container .chartview-navigationbar{border-collapse:collapse;border-right:1px solid #999;text-align:center}.pd-chartview-main-container #labels{border-right:1px solid #b7b7b7;border-top:1px solid #b7b7b7;width:10%;float:left;font-size:1.2vw;overflow-x:hidden;overflow-y:hidden}.inline{vertical-align:top;position:relative}"]
+                    template: "<div id=\"pd-chartview-main-container\" class=\"pd-chartview-main-container\">\n  <div id=\"userSummary\">\n    <table class=\"summaryTable\">\n      <tbody>\n        <tr>\n          <td id=\"totalUsers\" class=\"chartview-navigationbar\">\n            Total users: {{totalUsers}}\n          </td>\n          <td id=\"eligibleUsers\" class=\"chartview-navigationbar\">\n            Eligible users: {{eligibleUsers}}\n          </td>\n          <td id=\"currentUsers\" class=\"chartview-navigationbar\">\n            Current users: {{currentUsers}}\n          </td>\n          <td id=\"totalRooms\" class=\"chartview-navigationbar\">\n            Installed Classrooms: {{installedClassrooms}}\n          </td>\n          <td id=\"currentRooms\" class=\"chartview-navigationbar\">\n            Current Classrooms: {{currentRooms}}\n          </td>\n          <!-- <td\n            id=\"currentRooms\"\n            \n          >\n            <span id=\"totalUsers_list\" class=\"activeAll\">User List</span>\n          </td> -->\n        </tr>\n      </tbody>\n    </table>\n  </div>\n  <div id=\"pd-messageDivContainer\" class='pd-messageDivContainer'>\n    <div id=\"pd-messageDiv\" class='pd-messageDiv' *ngIf=\"!isTableView\">Click the bars to view details of content accessed by a teacher.</div>\n    <div id=\"pd-toggleContainer\" class=\"pd-toggleContainer\">\n     \n      <div id=\"pd-currentUserBtn\"  class=\"pd-currentUserBtn-div pd-commonStyleBtn\" (click)=\"showCurrentUser()\" [ngStyle]=\"{ color: isAllUsers ? '#000000' : '#ffffff' , backgroundColor: isAllUsers ? '#c4c4c4' : '#000000'}\">\n        {{currentList}}</div>\n      <div id=\"pd-allUserBtn\" class=\"pd-allUserBtn-div pd-commonStyleBtn\" (click)=\"showAllUser()\" [ngStyle]=\"{ color: isAllUsers ? '#ffffff' : '#000000' , backgroundColor: isAllUsers ? '#000000' : '#c4c4c4'}\">\n        {{allList}}</div>\n    </div>\n  </div>\n  <div id=\"pd-chartview\" class=\"pd-chartview\">\n  <lib-timeline\n    *ngIf=\"useCustomTimeline\"\n    [rows]=\"timelineRows\"\n    [labelTitle]=\"isUserWise ? 'Teacher' : 'Room'\"\n    (barClick)=\"openSession($event)\"\n    (totalClick)=\"openRow($event)\"\n  ></lib-timeline>\n  <div id=\"myChartDiv\" *ngIf=\"!useCustomTimeline\">\n    <div id=\"myTimeLine\">\n      <google-chart\n        [type]=\"myChartType\"\n        [data]=\"chartDataTable\"\n        [options]=\"myChartOptions\"\n        [width]=\"myChartwidth\"\n        [height]=\"myChartHeight\"\n        (select)=\"onSelectRowData($event)\"\n        (ready)=\"myChartReady()\"\n      > \n      </google-chart>\n      \n    </div>\n    <div class=\"inline babloo\" id=\"labels\"></div> \n   \n    \n  </div>\n</div>\n",
+                    styles: [".pd-chartview-main-container .pd-chartview{display:block;overflow:scroll;width:100%;height:484px;font-family:Tahoma;font-size:12pt;font-weight:400;color:#666;margin:10 auto;text-align:center;padding-top:1px}.pd-chartview-main-container #userSummary{background:#e0e0e0;margin-top:1px}.pd-chartview-main-container #roomSummary,.pd-chartview-main-container #userSummary{position:relative;width:100%;text-align:center;padding-top:6px;padding-bottom:6px;font-size:13px}.pd-chartview-main-container .pd-messageDivContainer{margin-top:1px;position:relative;display:flex;align-items:center;justify-content:center;min-height:40px;padding:0 200px;box-sizing:border-box}.pd-chartview-main-container .pd-messageDivContainer .pd-messageDiv{font-size:13px;text-align:center}.pd-chartview-main-container .pd-messageDivContainer .pd-toggleContainer{line-height:30px;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;position:absolute;right:0;top:50%;transform:translateY(-50%)}.pd-chartview-main-container .pd-messageDivContainer .pd-allUserBtn-div{border-radius:0 5px 5px 0}.pd-chartview-main-container .pd-messageDivContainer .pd-currentUserBtn-div{border-radius:5px 0 0 5px}.pd-chartview-main-container .pd-messageDivContainer .pd-commonStyleBtn{display:inline-block;cursor:pointer;font-size:12px;width:92px;text-align:center}.pd-chartview-main-container .summaryTable{width:100%;border-collapse:collapse;border-spacing:2px;border-color:grey}.pd-chartview-main-container .activeAll{cursor:pointer;background:none!important;border-radius:13px;border:none;width:64px;height:18px!important;line-height:18px!important;color:#45a1da;margin-right:0!important;padding:1px 5px;vertical-align:sub}.pd-chartview-main-container #myTimeLine{width:89%;height:60%;margin-left:5px;overflow-x:scroll;overflow-y:hidden;float:left}.pd-chartview-main-container #myTimeLine2{width:71px;position:relative;overflow-x:hidden;overflow-y:hidden}.pd-chartview-main-container #myChartDiv{width:100%}.pd-chartview-main-container .chartview-navigationbar{border-collapse:collapse;border-right:1px solid #999;text-align:center}.pd-chartview-main-container #labels{border-right:1px solid #b7b7b7;border-top:1px solid #b7b7b7;width:10%;float:left;font-size:1.2vw;overflow-x:hidden;overflow-y:hidden}.inline{vertical-align:top;position:relative}"]
                 },] }
     ];
     ChartviewComponent.ctorParameters = function () { return [
@@ -2909,13 +3053,22 @@
             this.remaningUsers = [];
             this.allUsers = [];
             this.usersCheckboxChecked = false;
+            this.classroomArray = [];
+            this.allClassrooms = [];
             this.isDisplay = false;
+            this.isUserWise = true;
+            this.isAllUsers = false;
+            this.isInitialized = false;
         }
         Object.defineProperty(FullTableViewComponent.prototype, "data", {
             set: function (res) {
                 if (res !== null) {
                     console.log('newtable', JSON.parse(res));
                     this.jsonResponse = JSON.parse(res);
+                    // rebuild rows when new data arrives (date change / refresh)
+                    if (this.isInitialized) {
+                        this.loadUserData();
+                    }
                 }
             },
             enumerable: false,
@@ -2924,6 +3077,13 @@
         FullTableViewComponent.prototype.ngOnInit = function () {
             var _this = this;
             this.loadUserData();
+            this.isInitialized = true;
+            this.pdService.isUserWise_data.subscribe(function (data) {
+                _this.isUserWise = data;
+            });
+            this.pdService.isAllUsers.subscribe(function (data) {
+                _this.isAllUsers = !!data;
+            });
             this.pdService.chartType.subscribe(function (data) {
                 if (data) {
                     console.log('newTable', data);
@@ -2931,9 +3091,30 @@
                 }
             });
         };
+        Object.defineProperty(FullTableViewComponent.prototype, "userRows", {
+            get: function () {
+                return this.isAllUsers ? this.allUsers : this.currentUserArray;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(FullTableViewComponent.prototype, "classroomRows", {
+            get: function () {
+                return this.isAllUsers ? this.allClassrooms : this.classroomArray;
+            },
+            enumerable: false,
+            configurable: true
+        });
         FullTableViewComponent.prototype.loadUserData = function () {
             var _this = this;
             var json = this.jsonResponse;
+            this.currentUserArray = [];
+            this.remaningUsers = [];
+            this.allUsers = [];
+            this.classroomArray = [];
+            this.allClassrooms = [];
+            if (!json)
+                return;
             var usersConsole = json.usersConsole.userConsole;
             var usersMetadata = json.usersMetadata.userMetadata;
             var resourcesMetadata = json.resourcesMetadata.resourceMetadata;
@@ -3013,8 +3194,96 @@
                 };
             });
             this.allUsers = __spread(this.currentUserArray, this.remaningUsers);
+            this.loadClassroomData(usersConsole, usersMetadata, resourcesMetadata);
             this.loadTable(this.currentUserArray);
         };
+        // Classroom wise rows: grouped by room, then by session start time
+        FullTableViewComponent.prototype.loadClassroomData = function (usersConsole, usersMetadata, resourcesMetadata) {
+            var _this = this;
+            var _a, _b;
+            var schoolTerminals = ((_b = (_a = this.jsonResponse) === null || _a === void 0 ? void 0 : _a.schoolTerminals) === null || _b === void 0 ? void 0 : _b.schoolTerminal) || [];
+            var roomNames = {};
+            schoolTerminals.forEach(function (terminal) {
+                roomNames[terminal.terminalKey] = _this.getTerminalLocation(terminal);
+            });
+            var sessionsByRoom = {};
+            // every session is a bar in the classroom chart, so keep sessions without resources too
+            usersConsole.forEach(function (user) {
+                var ip = (user === null || user === void 0 ? void 0 : user.terminalIP) || '';
+                (sessionsByRoom[ip] = sessionsByRoom[ip] || []).push(user);
+            });
+            var roomLabel = function (ip) { return _this.pdService.getRoomLabel(roomNames[ip], ip); };
+            var activeIPs = Object.keys(sessionsByRoom).sort(function (a, b) { return roomLabel(a).localeCompare(roomLabel(b), undefined, { numeric: true }); });
+            activeIPs.forEach(function (ip) {
+                var sessions = sessionsByRoom[ip].sort(function (a, b) { return new Date(a.startTime).getTime() - new Date(b.startTime).getTime(); });
+                sessions.forEach(function (user, sessionIndex) {
+                    var _a;
+                    var userDetails = usersMetadata.find(function (userMeta) { return userMeta.userId === user.userId; });
+                    var startTime = new Date(user === null || user === void 0 ? void 0 : user.startTime);
+                    var endTime = new Date(user === null || user === void 0 ? void 0 : user.endTime);
+                    var totalDuration = _this.formatTime(Math.round((endTime.getTime() - startTime.getTime()) / 1000));
+                    var resources = ((_a = user === null || user === void 0 ? void 0 : user.userConsoleResources) === null || _a === void 0 ? void 0 : _a.userConsoleResource) || [];
+                    var sessionRows = resources.length > 0 ? resources : [null];
+                    sessionRows.forEach(function (userResource, resourceIndex) {
+                        var _a, _b, _c, _d;
+                        var resourceDetails = userResource && resourcesMetadata.find(function (resource) { return resource.resourceId === userResource.resourceId &&
+                            userResource.type === resource.type; });
+                        var isFirstOfSession = resourceIndex === 0;
+                        _this.classroomArray.push({
+                            room: isFirstOfSession && sessionIndex === 0 ? roomLabel(ip) : '',
+                            teacherName: isFirstOfSession ? userDetails === null || userDetails === void 0 ? void 0 : userDetails.fullName : '',
+                            date: isFirstOfSession ? user === null || user === void 0 ? void 0 : user.selectedDate : '',
+                            startTime: isFirstOfSession ? _this.formatDate(startTime) : '',
+                            endtime: isFirstOfSession ? _this.formatDate(endTime) : '',
+                            totalDuration: isFirstOfSession ? totalDuration : '',
+                            tp: (_a = resourceDetails === null || resourceDetails === void 0 ? void 0 : resourceDetails.teachingPoint) === null || _a === void 0 ? void 0 : _a.title,
+                            subject: (_b = resourceDetails === null || resourceDetails === void 0 ? void 0 : resourceDetails.subject) === null || _b === void 0 ? void 0 : _b.title,
+                            chapter: (_c = resourceDetails === null || resourceDetails === void 0 ? void 0 : resourceDetails.chapter) === null || _c === void 0 ? void 0 : _c.title,
+                            grade: (_d = resourceDetails === null || resourceDetails === void 0 ? void 0 : resourceDetails.grade) === null || _d === void 0 ? void 0 : _d.title,
+                            details: userResource ? _this.getAssetDetails(userResource, resourceDetails) : '',
+                        });
+                    });
+                });
+            });
+            var idleRooms = schoolTerminals
+                .filter(function (terminal) { return !sessionsByRoom[terminal.terminalKey]; })
+                .map(function (terminal) { return ({
+                room: roomLabel(terminal.terminalKey),
+                teacherName: '',
+                date: '',
+                startTime: '',
+                endtime: '',
+                totalDuration: '0s',
+                tp: '',
+                subject: '',
+                chapter: '',
+                grade: '',
+                details: '',
+            }); });
+            this.allClassrooms = __spread(this.classroomArray, idleRooms);
+        };
+        FullTableViewComponent.prototype.getTerminalLocation = function (terminal) {
+            var _a;
+            try {
+                return (terminal === null || terminal === void 0 ? void 0 : terminal.metadata) ? ((_a = JSON.parse(terminal.metadata)) === null || _a === void 0 ? void 0 : _a.location) || '' : '';
+            }
+            catch (e) {
+                return '';
+            }
+        };
+        FullTableViewComponent.prototype.getAssetDetails = function (userResource, resourceDetails) {
+            var _a, _b;
+            var prefix = this.getDisplayTypeValue(userResource.type);
+            var title = (resourceDetails === null || resourceDetails === void 0 ? void 0 : resourceDetails.title) || '';
+            var duration = parseInt((userResource === null || userResource === void 0 ? void 0 : userResource.duration) || '0');
+            if (((_a = userResource === null || userResource === void 0 ? void 0 : userResource.type) === null || _a === void 0 ? void 0 : _a.includes('question')) || ((_b = userResource === null || userResource === void 0 ? void 0 : userResource.type) === null || _b === void 0 ? void 0 : _b.includes('cquestion'))) {
+                duration = 0;
+            }
+            else {
+                duration = duration === 0 ? "<span class='seenTag' style='color:blue;'>(Seen)</span>" : this.formatTime(duration);
+            }
+            return title === '' ? prefix + " : " + duration : prefix + " : " + title + " : " + duration;
+        };
         FullTableViewComponent.prototype.getDisplayTypeValue = function (key) {
             var assetTypeConfig = [
                 { type: 'asset_media', display: 'Media' },
@@ -3092,8 +3361,8 @@
     FullTableViewComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'lib-full-table-view',
-                    template: "\n<div class=\"tableViewList\" *ngIf=\"isDisplay\">\n    <!-- <label for=\"usersCheckbox\">All</label>\n        <input\n          type=\"checkbox\"\n          id=\"usersCheckbox\"\n          [checked]=\"usersCheckboxChecked\"\n          (change)=\"toggleUsers()\"\n        /> -->\n    <div class=\"tableArea\">\n        \n        <table id=\"teacherTable\">\n          <thead class=\"tablehead\">\n            <tr>\n              <th>Teacher Name</th>\n              <th>Subjects</th>\n              <th>Date</th>\n              <th>Start Time</th>\n              <th>End Time</th>\n              <th>Total Duration</th>\n              <th>Room</th>\n              <th>Topic</th>\n              <th>Subject</th>\n              <th>Chapter</th>\n              <th>Grade</th>\n              <th>Details</th>\n            </tr>\n          </thead>\n          <tbody>\n            <tr *ngFor=\"let user of currentUserArray\">\n              <td>{{ user.teacherName }}</td>\n              <td>{{ user.subjects }}</td>\n              <td>{{ user.date }}</td>\n              <td>{{ user.startTime }}</td>\n              <td>{{ user.endtime }}</td>\n              <td>{{ user.totalDuration }}</td>\n              <td>{{ user.room }}</td>\n              <td>{{ user.tp }}</td>\n              <td>{{ user.subject }}</td>\n              <td>{{ user.chapter }}</td>\n              <td>{{ user.grade }}</td>\n              <td><div [innerHTML]=\"user.details\"></div></td>\n            </tr>\n          </tbody>\n        </table>\n      </div>\n    \n</div>\n  ",
-                    styles: ["body{font-family:Arial,sans-serif;margin:20px}.tablehead{position:sticky;top:0;background:#fff}table{width:100%;border-collapse:collapse}td,th{border:1px solid #ddd;padding:8px;text-align:left}th{background-color:#f4f4f4;font-weight:700}tr:nth-child(2n){background-color:#f9f9f9}tr:hover{background-color:#f1f1f1}.tableViewList{position:absolute;margin-top:20px}.tableArea{height:700px;overflow:scroll;font-size:12px;margin:20px 5px 5px}.seenTag{color:#00f}"]
+                    template: "\n<div class=\"tableViewList\" *ngIf=\"isDisplay\">\n    <!-- <label for=\"usersCheckbox\">All</label>\n        <input\n          type=\"checkbox\"\n          id=\"usersCheckbox\"\n          [checked]=\"usersCheckboxChecked\"\n          (change)=\"toggleUsers()\"\n        /> -->\n    <div class=\"tableArea\">\n        \n        <table id=\"teacherTable\" *ngIf=\"isUserWise\">\n          <thead class=\"tablehead\">\n            <tr>\n              <th>Teacher Name</th>\n              <th>Subjects</th>\n              <th>Date</th>\n              <th>Start Time</th>\n              <th>End Time</th>\n              <th>Total Duration</th>\n              <th>Room</th>\n              <th>Topic</th>\n              <th>Subject</th>\n              <th>Chapter</th>\n              <th>Grade</th>\n              <th>Details</th>\n            </tr>\n          </thead>\n          <tbody>\n            <tr *ngFor=\"let user of userRows\">\n              <td>{{ user.teacherName }}</td>\n              <td>{{ user.subjects }}</td>\n              <td>{{ user.date }}</td>\n              <td>{{ user.startTime }}</td>\n              <td>{{ user.endtime }}</td>\n              <td>{{ user.totalDuration }}</td>\n              <td>{{ user.room }}</td>\n              <td>{{ user.tp }}</td>\n              <td>{{ user.subject }}</td>\n              <td>{{ user.chapter }}</td>\n              <td>{{ user.grade }}</td>\n              <td><div [innerHTML]=\"user.details\"></div></td>\n            </tr>\n          </tbody>\n        </table>\n\n        <table id=\"classroomTable\" *ngIf=\"!isUserWise\">\n          <thead class=\"tablehead\">\n            <tr>\n              <th>Room</th>\n              <th>Teacher Name</th>\n              <th>Date</th>\n              <th>Start Time</th>\n              <th>End Time</th>\n              <th>Total Duration</th>\n              <th>Topic</th>\n              <th>Subject</th>\n              <th>Chapter</th>\n              <th>Grade</th>\n              <th>Details</th>\n            </tr>\n          </thead>\n          <tbody>\n            <tr *ngFor=\"let row of classroomRows\" [class.roomStart]=\"row.room\">\n              <td class=\"roomCell\">{{ row.room }}</td>\n              <td>{{ row.teacherName }}</td>\n              <td>{{ row.date }}</td>\n              <td>{{ row.startTime }}</td>\n              <td>{{ row.endtime }}</td>\n              <td>{{ row.totalDuration }}</td>\n              <td>{{ row.tp }}</td>\n              <td>{{ row.subject }}</td>\n              <td>{{ row.chapter }}</td>\n              <td>{{ row.grade }}</td>\n              <td><div [innerHTML]=\"row.details\"></div></td>\n            </tr>\n          </tbody>\n        </table>\n      </div>\n    \n</div>\n  ",
+                    styles: ["body{font-family:Arial,sans-serif;margin:20px}.tablehead{position:sticky;top:0;background:#fff}table{width:100%;border-collapse:collapse}td,th{border:1px solid #ddd;padding:8px;text-align:left}th{background-color:#f4f4f4;font-weight:700}tr:nth-child(2n){background-color:#f9f9f9}tr:hover{background-color:#f1f1f1}.tableViewList{position:absolute;margin-top:20px}.tableArea{height:700px;overflow:scroll;font-size:12px;margin:20px 5px 5px}.seenTag{color:#00f}.roomCell{font-weight:700}.roomStart td{border-top:2px solid #b7b7b7}"]
                 },] }
     ];
     FullTableViewComponent.ctorParameters = function () { return [
@@ -3112,6 +3381,15 @@
             this.allUsers = [];
             this.usersCheckboxChecked = false;
             this.isDisplay = false;
+            this.accentColor = '';
+            // 'session' = one bar was clicked; 'all' = a row's total was clicked
+            this.mode = 'session';
+            this.allTitle = '';
+            this.allSummary = [];
+            this.otherColumn = 'Room';
+            // who used the room (classroom wise) or which rooms were used (user wise), with time each
+            this.people = [];
+            this.peopleTitle = '';
         }
         Object.defineProperty(SmallTableViewComponent.prototype, "data", {
             set: function (res) {
@@ -3128,6 +3406,12 @@
             this.pdService.openSmallTable$.subscribe(function (data) {
                 if (data) {
                     _this.isDisplay = true;
+                    _this.accentColor = _this.pdService.detailAccentColor;
+                    if (data['allSessions'] && _this.pdService.detailRowRequest) {
+                        _this.loadRowSessions(_this.pdService.detailRowRequest);
+                        return;
+                    }
+                    _this.mode = 'session';
                     var userid = _this.findUserIdByName(data['userDetails'][0]);
                     var startTime = data['userDetails'][1];
                     var endTime = data['userDetails'][3];
@@ -3159,55 +3443,8 @@
                 ? usersConsole.filter(function (user) { return user.userId === userId; })
                 : usersConsole;
             filteredUsersConsole.forEach(function (user) {
-                var _a;
-                var userDetails = usersMetadata.find(function (userMeta) { return userMeta.userId === user.userId; });
-                if (user === null || user === void 0 ? void 0 : user.userConsoleResources) {
-                    var userConsoleResource = (_a = user.userConsoleResources) === null || _a === void 0 ? void 0 : _a.userConsoleResource;
-                    if (userConsoleResource && userConsoleResource.length > 0) {
-                        userConsoleResource.forEach(function (userResource, userIndex) {
-                            var _a, _b, _c, _d, _e, _f;
-                            var resourceId = userResource.resourceId;
-                            var resourceDetails = resourcesMetadata.find(function (resource) { return resource.resourceId === resourceId &&
-                                userResource.type === resource.type; });
-                            var prefix = _this.getDisplayTypeValue(userResource.type);
-                            var title = (resourceDetails === null || resourceDetails === void 0 ? void 0 : resourceDetails.title) || '';
-                            var tp = _this.decodeHtmlEntities((_a = resourceDetails === null || resourceDetails === void 0 ? void 0 : resourceDetails.teachingPoint) === null || _a === void 0 ? void 0 : _a.title);
-                            var subject = _this.decodeHtmlEntities((_b = resourceDetails === null || resourceDetails === void 0 ? void 0 : resourceDetails.subject) === null || _b === void 0 ? void 0 : _b.title);
-                            var chapter = _this.decodeHtmlEntities((_c = resourceDetails === null || resourceDetails === void 0 ? void 0 : resourceDetails.chapter) === null || _c === void 0 ? void 0 : _c.title);
-                            var grade = _this.decodeHtmlEntities((_d = resourceDetails === null || resourceDetails === void 0 ? void 0 : resourceDetails.grade) === null || _d === void 0 ? void 0 : _d.title);
-                            var startTime = new Date(user === null || user === void 0 ? void 0 : user.startTime);
-                            var endTime = new Date(user === null || user === void 0 ? void 0 : user.endTime);
-                            var totalDuration = _this.formatTime(Math.round((endTime.getTime() - startTime.getTime()) / 1000));
-                            var duration = parseInt((userResource === null || userResource === void 0 ? void 0 : userResource.duration) || '0');
-                            //duration = duration === 0 ? "<span class='dddd'>(Seen)</span>" : this.formatTime(duration);                    
-                            if (((_e = userResource === null || userResource === void 0 ? void 0 : userResource.type) === null || _e === void 0 ? void 0 : _e.includes('question')) || ((_f = userResource === null || userResource === void 0 ? void 0 : userResource.type) === null || _f === void 0 ? void 0 : _f.includes('cquestion'))) {
-                                duration = 0;
-                            }
-                            else {
-                                duration = duration === 0 ? "<span class='dddd'>(Seen)</span>" : _this.formatTime(duration);
-                            }
-                            var finalAssetTitle = prefix + " : " + title + " : " + duration;
-                            if (title === '') {
-                                finalAssetTitle = prefix + " : " + duration;
-                            }
-                            _this.currentUserArray.push({
-                                userId: user.userId,
-                                teacherName: userIndex === 0 ? userDetails === null || userDetails === void 0 ? void 0 : userDetails.fullName : '',
-                                subjects: userIndex === 0 ? userDetails === null || userDetails === void 0 ? void 0 : userDetails.userSubjects : '',
-                                date: userIndex === 0 ? user === null || user === void 0 ? void 0 : user.selectedDate : '',
-                                startTime: userIndex === 0 ? _this.formatDate(startTime) : _this.formatDate(startTime),
-                                endtime: userIndex === 0 ? _this.formatDate(endTime) : _this.formatDate(endTime),
-                                totalDuration: userIndex === 0 ? totalDuration : '',
-                                room: userIndex === 0 ? user === null || user === void 0 ? void 0 : user.terminalIP : '',
-                                tp: tp,
-                                subject: subject,
-                                chapter: chapter,
-                                grade: grade,
-                                details: finalAssetTitle,
-                            });
-                        });
-                    }
-                }
+                var _g;
+                (_g = _this.currentUserArray).push.apply(_g, __spread(_this.rowsForConsole(user, usersMetadata, resourcesMetadata)));
             });
             var currentUserIds = this.currentUserArray
                 .map(function (x) { return x.userId; })
@@ -3235,6 +3472,148 @@
             this.currentTimeFrameUserArray = this.filterDataByCriteria(this.currentUserArray, userId, inputStartTime, inputEndTime);
             console.log('smallData', this.currentTimeFrameUserArray);
         };
+        // every session of a timeline row, oldest first; sessions with nothing opened still get a line
+        SmallTableViewComponent.prototype.loadRowSessions = function (request) {
+            var _this = this;
+            this.mode = 'all';
+            var json = this.jsonResponse;
+            var usersConsole = json.usersConsole.userConsole;
+            var usersMetadata = json.usersMetadata.userMetadata;
+            var resourcesMetadata = json.resourcesMetadata.resourceMetadata;
+            var wanted = request.sessions;
+            var entries = usersConsole
+                .filter(function (c) { return wanted.some(function (s) { return s.userId === c.userId && s.ip === c.terminalIP && s.start === new Date(c.startTime).getTime(); }); })
+                .sort(function (a, b) { return new Date(a.startTime).getTime() - new Date(b.startTime).getTime(); });
+            var teacherName = function (id) { return (usersMetadata.find(function (u) { return u.userId === id; }) || {}).fullName || ''; };
+            var roomLabel = function (ip) { return _this.getRoomName(ip) || ip; };
+            this.otherColumn = request.isUserWise ? 'Room' : 'Teacher';
+            var rows = [];
+            entries.forEach(function (c) {
+                var start = new Date(c.startTime);
+                var end = new Date(c.endTime);
+                var head = {
+                    sessionHead: true,
+                    sessionTime: _this.formatClock(start) + " \u2013 " + _this.formatClock(end),
+                    sessionDuration: _this.formatTime(Math.round((end.getTime() - start.getTime()) / 1000)),
+                    sessionOther: request.isUserWise ? roomLabel(c.terminalIP) : teacherName(c.userId),
+                };
+                var sessionRows = _this.rowsForConsole(c, usersMetadata, resourcesMetadata);
+                if (sessionRows.length === 0) {
+                    rows.push(Object.assign(Object.assign({}, head), { empty: true }));
+                }
+                else {
+                    sessionRows.forEach(function (r, i) { return rows.push(i === 0 ? Object.assign(Object.assign({}, r), head) : r); });
+                }
+            });
+            this.currentTimeFrameUserArray = rows;
+            // time per teacher (or per room), in order of first appearance
+            var timeByOther = new Map();
+            entries.forEach(function (c) {
+                var key = request.isUserWise ? roomLabel(c.terminalIP) : teacherName(c.userId);
+                if (!key)
+                    return;
+                var ms = new Date(c.endTime).getTime() - new Date(c.startTime).getTime();
+                timeByOther.set(key, (timeByOther.get(key) || 0) + Math.max(ms, 0));
+            });
+            this.people = Array.from(timeByOther.entries()).map(function (_g) {
+                var _h = __read(_g, 2), label = _h[0], ms = _h[1];
+                return ({ label: label, time: _this.formatTime(Math.round(ms / 1000)) });
+            });
+            this.peopleTitle = request.isUserWise ? 'Rooms used' : 'Teachers in this room';
+            // a bare room number reads better as "Room 39"
+            this.allTitle = !request.isUserWise && /^\d+$/.test(String(request.label).trim()) ? "Room " + request.label : request.label;
+            this.allSummary = [
+                { label: 'Sessions', value: "" + entries.length, icon: 'sessions', tone: 'lime' },
+                // just the count here; the names are listed under the cards
+                { label: request.isUserWise ? 'Rooms' : 'Teachers', value: "" + this.people.length, icon: request.isUserWise ? 'room' : 'teacher', tone: 'sand' },
+                { label: 'First start', value: entries.length ? this.formatDate(new Date(entries[0].startTime)) : '—', icon: 'start', tone: 'sky' },
+                {
+                    label: 'Last end',
+                    value: entries.length ? this.formatDate(new Date(Math.max.apply(Math, __spread(entries.map(function (c) { return new Date(c.endTime).getTime(); }))))) : '—',
+                    icon: 'end',
+                    tone: 'sky',
+                },
+                { label: 'Total time', value: request.total || '—', icon: 'clock', tone: 'mint' },
+            ];
+        };
+        Object.defineProperty(SmallTableViewComponent.prototype, "sessionSummary", {
+            // cards for a single session, read from the first row of that session
+            get: function () {
+                var first = this.currentTimeFrameUserArray[0] || {};
+                return [
+                    { label: 'Subject', value: first.subject || '—', icon: 'subject', tone: 'lime' },
+                    { label: 'Room', value: first.roomName || first.room || '—', sub: first.roomName ? first.room : '', icon: 'room', tone: 'sand' },
+                    { label: 'Start', value: first.startTime || '—', icon: 'start', tone: 'sky' },
+                    { label: 'End', value: first.endtime || '—', icon: 'end', tone: 'sky' },
+                    { label: 'Total time', value: first.totalDuration || '—', icon: 'clock', tone: 'mint' },
+                ];
+            },
+            enumerable: false,
+            configurable: true
+        });
+        SmallTableViewComponent.prototype.formatClock = function (date) {
+            var hours = date.getHours();
+            return (hours % 12 || 12) + ":" + date.getMinutes().toString().padStart(2, '0') + " " + (hours >= 12 ? 'PM' : 'AM');
+        };
+        // one row per resource opened in a single console session
+        SmallTableViewComponent.prototype.rowsForConsole = function (user, usersMetadata, resourcesMetadata) {
+            var _this = this;
+            var _a;
+            var rows = [];
+            var userDetails = usersMetadata.find(function (userMeta) { return userMeta.userId === user.userId; });
+            if (user === null || user === void 0 ? void 0 : user.userConsoleResources) {
+                var userConsoleResource = (_a = user.userConsoleResources) === null || _a === void 0 ? void 0 : _a.userConsoleResource;
+                if (userConsoleResource && userConsoleResource.length > 0) {
+                    userConsoleResource.forEach(function (userResource, userIndex) {
+                        var _a, _b, _c, _d, _e, _f;
+                        var resourceId = userResource.resourceId;
+                        var resourceDetails = resourcesMetadata.find(function (resource) { return resource.resourceId === resourceId &&
+                            userResource.type === resource.type; });
+                        var prefix = _this.getDisplayTypeValue(userResource.type);
+                        var title = (resourceDetails === null || resourceDetails === void 0 ? void 0 : resourceDetails.title) || '';
+                        var tp = _this.decodeHtmlEntities((_a = resourceDetails === null || resourceDetails === void 0 ? void 0 : resourceDetails.teachingPoint) === null || _a === void 0 ? void 0 : _a.title);
+                        var subject = _this.decodeHtmlEntities((_b = resourceDetails === null || resourceDetails === void 0 ? void 0 : resourceDetails.subject) === null || _b === void 0 ? void 0 : _b.title);
+                        var chapter = _this.decodeHtmlEntities((_c = resourceDetails === null || resourceDetails === void 0 ? void 0 : resourceDetails.chapter) === null || _c === void 0 ? void 0 : _c.title);
+                        var grade = _this.decodeHtmlEntities((_d = resourceDetails === null || resourceDetails === void 0 ? void 0 : resourceDetails.grade) === null || _d === void 0 ? void 0 : _d.title);
+                        var startTime = new Date(user === null || user === void 0 ? void 0 : user.startTime);
+                        var endTime = new Date(user === null || user === void 0 ? void 0 : user.endTime);
+                        var totalDuration = _this.formatTime(Math.round((endTime.getTime() - startTime.getTime()) / 1000));
+                        var duration = parseInt((userResource === null || userResource === void 0 ? void 0 : userResource.duration) || '0');
+                        //duration = duration === 0 ? "<span class='dddd'>(Seen)</span>" : this.formatTime(duration);                    
+                        if (((_e = userResource === null || userResource === void 0 ? void 0 : userResource.type) === null || _e === void 0 ? void 0 : _e.includes('question')) || ((_f = userResource === null || userResource === void 0 ? void 0 : userResource.type) === null || _f === void 0 ? void 0 : _f.includes('cquestion'))) {
+                            duration = 0;
+                        }
+                        else {
+                            duration = duration === 0 ? "<span class='dddd'>(Seen)</span>" : _this.formatTime(duration);
+                        }
+                        var finalAssetTitle = prefix + " : " + title + " : " + duration;
+                        if (title === '') {
+                            finalAssetTitle = prefix + " : " + duration;
+                        }
+                        rows.push({
+                            userId: user.userId,
+                            teacherName: userIndex === 0 ? userDetails === null || userDetails === void 0 ? void 0 : userDetails.fullName : '',
+                            subjects: userIndex === 0 ? userDetails === null || userDetails === void 0 ? void 0 : userDetails.userSubjects : '',
+                            date: userIndex === 0 ? user === null || user === void 0 ? void 0 : user.selectedDate : '',
+                            startTime: userIndex === 0 ? _this.formatDate(startTime) : _this.formatDate(startTime),
+                            endtime: userIndex === 0 ? _this.formatDate(endTime) : _this.formatDate(endTime),
+                            // kept on every row: the popup reads it from whichever row comes first
+                            totalDuration: totalDuration,
+                            room: userIndex === 0 ? user === null || user === void 0 ? void 0 : user.terminalIP : '',
+                            roomName: userIndex === 0 ? _this.getRoomName(user === null || user === void 0 ? void 0 : user.terminalIP) : '',
+                            tp: tp,
+                            subject: subject,
+                            chapter: chapter,
+                            grade: grade,
+                            details: finalAssetTitle,
+                            ip: user === null || user === void 0 ? void 0 : user.terminalIP,
+                            sessionStart: startTime.getTime(),
+                        });
+                    });
+                }
+            }
+            return rows;
+        };
         SmallTableViewComponent.prototype.filterDataByCriteria = function (userData, inputUserId, inputStartTime, inputEndTime) {
             var parseTime = function (timeString) {
                 if (!timeString)
@@ -3332,6 +3711,23 @@
                 ? this.allUsers
                 : this.currentUserArray);
         };
+        // room name from schoolTerminals metadata, '' when not set
+        SmallTableViewComponent.prototype.getRoomName = function (ip) {
+            var _a, _b, _c;
+            var terminals = ((_b = (_a = this.jsonResponse) === null || _a === void 0 ? void 0 : _a.schoolTerminals) === null || _b === void 0 ? void 0 : _b.schoolTerminal) || [];
+            var terminal = terminals.find(function (t) { return t.terminalKey === ip; });
+            try {
+                return (terminal === null || terminal === void 0 ? void 0 : terminal.metadata) ? (((_c = JSON.parse(terminal.metadata)) === null || _c === void 0 ? void 0 : _c.location) || '').trim() : '';
+            }
+            catch (e) {
+                return '';
+            }
+        };
+        SmallTableViewComponent.prototype.onEscape = function () {
+            if (this.isDisplay) {
+                this.onCloseBtnClick();
+            }
+        };
         SmallTableViewComponent.prototype.onCloseBtnClick = function () {
             this.isDisplay = false;
             //this.pdService.openSmallTable.next(false);
@@ -3341,15 +3737,769 @@
     SmallTableViewComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'lib-small-table-view',
-                    template: "<div id=\"pd-deatilViewContainer\" *ngIf=\"isDisplay\">\n    <div class=\"pd-detailview-header\">\n      <div class=\"pd-detailview-title\">Details</div>\n      <div id=\"pd-closeButton\" (click)=\"onCloseBtnClick()\">+</div>\n    </div>\n\n    <div class=\"newTablesContainer\">\n\n        <table id=\"userDataTable\" class=\"table table-bordered\">\n            <tbody>\n                <tr>\n                    <th style=\"font-weight: bold;\"><label>Name:</label></th>\n                    <td><label>{{ currentTimeFrameUserArray[0]?.teacherName || '' }}</label></td>\n                    <th style=\"font-weight: bold;\"><label>Start Time:</label></th>\n                    <td><label>{{ currentTimeFrameUserArray[0]?.startTime || '' }}</label></td>\n                </tr>\n                <tr>\n                    <th style=\"font-weight: bold;\"><label>Subject:</label></th>\n                    <td><label>{{ currentTimeFrameUserArray[0]?.subject || '' }}</label></td>\n                    <th style=\"font-weight: bold;\"><label>End Time:</label></th>\n                    <td><label>{{ currentTimeFrameUserArray[0]?.endtime || '' }}</label></td>\n                </tr>\n                <tr>\n                    <th style=\"font-weight: bold;\"><label>Room Details:</label></th>\n                    <td><label> {{ currentTimeFrameUserArray[0]?.room || '' }}</label></td>\n                </tr>\n            </tbody>\n        </table>\n        \n      \n\n          <table class=\"table table-bordered\" id=\"resoureMetadataTable\">\n            <tbody>\n                <tr>\n                    <th style=\"font-weight: bold;\"><label>Subject</label></th>\n                    <th style=\"font-weight: bold;\"><label>Class</label></th>\n                    <th style=\"font-weight: bold;\"><label>Chapter Name</label></th>\n                    <th style=\"font-weight: bold;\"><label>Topic Name</label></th>\n                    <th style=\"font-weight: bold;\"><label>Assets Details</label></th>\n                </tr>\n                <tr *ngFor=\"let item of currentTimeFrameUserArray\">\n                    <td><label>{{ item.subject || '' }}</label></td>\n                    <td><label>{{ item.grade || '' }}</label></td>\n                    <td><label>{{ item.chapter || '' }}</label></td>\n                    <td [innerHTML]=\"item.tp || ''\"></td> <!-- Use innerHTML to handle HTML content -->\n                    <td [innerHTML]=\"item.details || ''\"></td> <!-- Assets Details column -->\n                  </tr>\n            </tbody>\n        </table>\n\n        \n    </div>  \n  </div>",
-                    styles: ["#pd-deatilViewContainer{position:absolute;background:#fff;box-shadow:0 0 17px #818181;font-size:12px;width:50%;max-height:350px;top:140px;left:230px}#pd-deatilViewContainer .pd-detailview-header{position:relative;width:100%;height:35px;background-color:#e6e6e6}#pd-deatilViewContainer .pd-detailview-title{position:absolute;margin-left:5px;font-size:20px;line-height:35px}#pd-deatilViewContainer #pd-closeButton{width:24px;position:absolute;float:right;right:0;cursor:pointer;height:24px;background:#000;border-radius:12px;color:#fff;line-height:22px;text-align:center;font-size:26px;transform:rotate(45deg);margin:5px}#pd-deatilViewContainer #pd-deatilViewTable{overflow:scroll;scroll-behavior:smooth;height:auto;margin:5px;max-height:300px}.newTablesContainer{overflow:scroll;height:310px;padding:3px;background:#fff;margin-bottom:2px}.dddd{color:#00f!important}"]
+                    template: "<div class=\"pd-detail-backdrop\" *ngIf=\"isDisplay\" (click)=\"onCloseBtnClick()\">\n  <div id=\"pd-deatilViewContainer\" class=\"pd-detail-dialog\" role=\"dialog\" aria-modal=\"true\" aria-labelledby=\"pd-detail-title\" (click)=\"$event.stopPropagation()\">\n    <div class=\"pd-detail-header\">\n      <div class=\"pd-detail-heading\">\n        <span class=\"pd-detail-swatch\" *ngIf=\"accentColor\" [style.background-color]=\"accentColor\"></span>\n        <div>\n          <div id=\"pd-detail-title\" class=\"pd-detail-title\">{{ (mode === 'all' ? allTitle : currentTimeFrameUserArray[0]?.teacherName) || 'Details' }}</div>\n          <div class=\"pd-detail-subtitle\">{{ mode === 'all' ? 'All Sessions Today' : 'Session Details' }}</div>\n        </div>\n      </div>\n      <button type=\"button\" class=\"pd-detail-close\" aria-label=\"Close\" (click)=\"onCloseBtnClick()\">&times;</button>\n    </div>\n\n    <div class=\"pd-detail-summary\">\n      <div class=\"pd-detail-card\" *ngFor=\"let card of (mode === 'all' ? allSummary : sessionSummary)\" [ngClass]=\"'pd-tone-' + card.tone\">\n        <div class=\"pd-detail-card-label\">\n          <span class=\"pd-card-icon\" [ngSwitch]=\"card.icon\" aria-hidden=\"true\">\n            <svg *ngSwitchCase=\"'sessions'\" viewBox=\"0 0 24 24\"><path d=\"M4 6h16M4 12h16M4 18h10\" /></svg>\n            <svg *ngSwitchCase=\"'room'\" viewBox=\"0 0 24 24\"><rect x=\"3\" y=\"4\" width=\"18\" height=\"12\" rx=\"2\" /><path d=\"M12 16v4M8 20h8\" /></svg>\n            <svg *ngSwitchCase=\"'teacher'\" viewBox=\"0 0 24 24\"><circle cx=\"12\" cy=\"8\" r=\"4\" /><path d=\"M4 20c0-4 3.6-6 8-6s8 2 8 6\" /></svg>\n            <svg *ngSwitchCase=\"'subject'\" viewBox=\"0 0 24 24\"><path d=\"M4 5a2 2 0 0 1 2-2h13v16H6a2 2 0 0 0-2 2V5z\" /><path d=\"M4 19a2 2 0 0 1 2-2h13\" /></svg>\n            <svg *ngSwitchCase=\"'start'\" viewBox=\"0 0 24 24\"><path d=\"M14 4h4a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2h-4\" /><path d=\"M4 12h11M11 8l4 4-4 4\" /></svg>\n            <svg *ngSwitchCase=\"'end'\" viewBox=\"0 0 24 24\"><path d=\"M10 4H6a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h4\" /><path d=\"M9 12h11M16 8l4 4-4 4\" /></svg>\n            <svg *ngSwitchCase=\"'clock'\" viewBox=\"0 0 24 24\"><circle cx=\"12\" cy=\"12\" r=\"9\" /><path d=\"M12 7v5l3 2\" /></svg>\n          </span>\n          {{ card.label }}\n        </div>\n        <div class=\"pd-detail-card-value\">\n          {{ card.value }}\n          <span class=\"pd-detail-muted\" *ngIf=\"card.sub\">{{ card.sub }}</span>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"pd-people\" *ngIf=\"mode === 'all' && people.length\">\n      <span class=\"pd-people-title\">{{ peopleTitle }}</span>\n      <span class=\"pd-person\" *ngFor=\"let p of people\">{{ p.label }} <span class=\"pd-person-time\">{{ p.time }}</span></span>\n    </div>\n\n    <div class=\"pd-detail-body\">\n      <div class=\"pd-detail-empty\" *ngIf=\"currentTimeFrameUserArray.length === 0\">No content was opened in this session.</div>\n      <table class=\"pd-detail-table\" *ngIf=\"currentTimeFrameUserArray.length > 0\">\n        <thead>\n          <tr>\n            <ng-container *ngIf=\"mode === 'all'\">\n              <th>Time</th>\n              <th>{{ otherColumn }}</th>\n            </ng-container>\n            <th>Subject</th>\n            <th>Class</th>\n            <th>Chapter</th>\n            <th>Topic</th>\n            <th>Asset details</th>\n          </tr>\n        </thead>\n        <tbody>\n          <tr *ngFor=\"let item of currentTimeFrameUserArray\" [class.pd-session-start]=\"mode === 'all' && item.sessionHead\">\n            <ng-container *ngIf=\"mode === 'all'\">\n              <td class=\"pd-nowrap\">\n                <ng-container *ngIf=\"item.sessionHead\">\n                  {{ item.sessionTime }}\n                  <div class=\"pd-detail-muted\">{{ item.sessionDuration }}</div>\n                </ng-container>\n              </td>\n              <td>{{ item.sessionHead ? item.sessionOther : '' }}</td>\n            </ng-container>\n            <ng-container *ngIf=\"!item.empty\">\n              <td>{{ item.subject || '\u2014' }}</td>\n              <td class=\"pd-nowrap\">{{ item.grade || '\u2014' }}</td>\n              <td>{{ item.chapter || '\u2014' }}</td>\n              <td [class.pd-detail-muted]=\"!item.tp\">{{ item.tp || '\u2014' }}</td>\n              <td [innerHTML]=\"item.details || ''\"></td>\n            </ng-container>\n            <td *ngIf=\"item.empty\" colspan=\"5\" class=\"pd-detail-muted\">No content was opened in this session.</td>\n          </tr>\n        </tbody>\n      </table>\n    </div>\n  </div>\n</div>\n",
+                    styles: [".pd-detail-backdrop{position:fixed;inset:0;top:0;left:0;right:0;bottom:0;z-index:1000;background:rgba(17,24,39,.45);display:flex;align-items:center;justify-content:center;padding:16px;box-sizing:border-box}.pd-detail-dialog{background:#fff;border-radius:12px;box-shadow:0 20px 50px rgba(0,0,0,.25);width:900px;max-width:100%;height:600px;max-height:85vh;display:flex;flex-direction:column;overflow:hidden;font-family:Arial,sans-serif;font-size:13px;color:#1f2937}.pd-detail-header{flex:0 0 auto;display:flex;align-items:flex-start;justify-content:space-between;padding:18px 20px 12px;border-bottom:1px solid #e5e7eb}.pd-detail-title{font-size:20px;font-weight:700;line-height:1.3;color:#1f2937}.pd-detail-heading{display:flex;align-items:flex-start;gap:12px}.pd-detail-swatch{flex:0 0 auto;width:14px;height:14px;border-radius:50%;margin-top:6px}.pd-detail-subtitle{font-size:15px;font-weight:700;color:#c9952b;margin-top:4px}.pd-detail-close{border:none;background:#f3f4f6;color:#374151;width:32px;height:32px;border-radius:50%;font-size:22px;line-height:30px;cursor:pointer;flex-shrink:0}.pd-detail-close:hover{background:#e5e7eb}.pd-detail-summary{flex:0 0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px;padding:14px 20px}.pd-detail-card{background:#f9fafb;border:1px solid #e5e7eb;border-radius:10px;padding:12px 14px;text-align:center}.pd-detail-card.pd-tone-lime{background:#eef6a3;border-color:#dfe98a}.pd-detail-card.pd-tone-sand{background:#f6ecd9;border-color:#ebdcc0}.pd-detail-card.pd-tone-sky{background:#e1edfb;border-color:#cbdcf3}.pd-detail-card.pd-tone-mint{background:#f3fbe6;border-color:#dfeecb}.pd-detail-card-label{display:flex;align-items:center;justify-content:center;gap:6px;font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:#6b7280;margin-bottom:6px}.pd-card-icon{display:inline-flex}.pd-card-icon svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.pd-detail-card-value{font-size:15px;font-weight:700;word-break:break-word}.pd-people{flex:0 0 auto;display:flex;flex-wrap:wrap;align-items:center;gap:6px;max-height:72px;overflow:auto;padding:0 20px 12px}.pd-people-title{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:#6b7280;margin-right:4px}.pd-person{padding:4px 10px;border-radius:999px;background:#f6ecd9;border:1px solid #ebdcc0;font-size:12px;font-weight:700;color:#1f2937}.pd-person-time{font-weight:400;color:#6b7280;margin-left:4px}.pd-detail-muted{color:#9ca3af;font-weight:400}.pd-detail-body{overflow:auto;margin:0 20px 20px;flex:1 1 auto;min-height:0;border:1px solid #e5e7eb;border-radius:8px}.pd-detail-table{width:100%;border-collapse:separate;border-spacing:0}.pd-detail-table td,.pd-detail-table th{text-align:left;padding:9px 12px;border-bottom:1px solid #f0f0f0;vertical-align:top}.pd-detail-table th{position:sticky;top:0;z-index:1;background:#f3f4f6;font-size:12px;color:#4b5563;font-weight:700}.pd-detail-table tbody tr:nth-child(2n) td{background:#fafafa}.pd-detail-table tbody tr.pd-session-start:not(:first-child) td{border-top:2px solid #e5e7eb}.pd-detail-table tbody tr:last-child td{border-bottom:none}.pd-detail-table tbody tr:hover td{background:#eef2ff}.pd-nowrap{white-space:nowrap}.pd-detail-empty{padding:24px;text-align:center;color:#6b7280}:host ::ng-deep .dddd{color:#2563eb;font-style:italic}"]
                 },] }
     ];
     SmallTableViewComponent.ctorParameters = function () { return [
         { type: PrincipalDashboardLibV2Service }
     ]; };
     SmallTableViewComponent.propDecorators = {
-        data: [{ type: i0.Input }]
+        data: [{ type: i0.Input }],
+        onEscape: [{ type: i0.HostListener, args: ['document:keydown.escape',] }]
+    };
+
+    var TimelineComponent = /** @class */ (function () {
+        function TimelineComponent() {
+            this.rows = [];
+            this.labelTitle = 'Name';
+            this.barClick = new i0.EventEmitter();
+            // clicking a row's total asks for every session in that row
+            this.totalClick = new i0.EventEmitter();
+            this.renderedRows = [];
+            this.ticks = [];
+            // :15 and :45 marks, drawn in the header only, without labels
+            this.quarterTicks = [];
+            // fixed width per hour so a full day scrolls horizontally instead of squeezing
+            this.hourWidth = 160;
+            this.minWidth = 0;
+            this.nowLeft = null;
+            this.sortKey = 'default';
+            this.sortAsc = true;
+            this.tooltip = null;
+            this.rangeStart = 0;
+            this.rangeEnd = 0;
+        }
+        TimelineComponent.prototype.ngOnChanges = function () {
+            this.render();
+        };
+        TimelineComponent.prototype.render = function () {
+            var _this = this;
+            var rows = this.rows || [];
+            var allBars = rows.reduce(function (acc, row) { return acc.concat(row.bars); }, []);
+            if (allBars.length === 0) {
+                this.ticks = [];
+                this.quarterTicks = [];
+                this.nowLeft = null;
+                this.minWidth = 0;
+                this.renderedRows = rows.map(function (row, i) { return _this.toRenderedRow(row, i); });
+                this.applySort();
+                return;
+            }
+            var minStart = Math.min.apply(Math, __spread(allBars.map(function (b) { return b.start.getTime(); })));
+            var maxEnd = Math.max.apply(Math, __spread(allBars.map(function (b) { return b.end.getTime(); })));
+            var hour = 3600 * 1000;
+            var startDate = new Date(minStart);
+            startDate.setMinutes(0, 0, 0);
+            this.rangeStart = startDate.getTime();
+            this.rangeEnd = Math.max(Math.ceil((maxEnd - this.rangeStart) / hour) * hour + this.rangeStart, this.rangeStart + hour);
+            var spanHours = (this.rangeEnd - this.rangeStart) / hour;
+            // label (170) + total (90) + track margins (48) + hours
+            this.minWidth = 170 + 90 + 48 + spanHours * this.hourWidth;
+            this.ticks = [];
+            this.quarterTicks = [];
+            for (var t = this.rangeStart; t <= this.rangeEnd; t += hour / 4) {
+                var minutes = new Date(t).getMinutes();
+                if (minutes === 15 || minutes === 45) {
+                    this.quarterTicks.push(this.toPercent(t));
+                }
+                else {
+                    this.ticks.push({ left: this.toPercent(t), label: this.formatClock(new Date(t)), major: minutes === 0 });
+                }
+            }
+            var now = Date.now();
+            this.nowLeft = now >= this.rangeStart && now <= this.rangeEnd ? this.toPercent(now) : null;
+            this.renderedRows = rows.map(function (row, i) { return _this.toRenderedRow(row, i); });
+            this.applySort();
+        };
+        TimelineComponent.prototype.toggleSort = function (key) {
+            if (this.sortKey === key) {
+                if (this.sortAsc) {
+                    this.sortAsc = false;
+                }
+                else {
+                    this.sortKey = 'default';
+                    this.sortAsc = true;
+                }
+            }
+            else {
+                this.sortKey = key;
+                this.sortAsc = key === 'name';
+            }
+            this.applySort();
+        };
+        TimelineComponent.prototype.sortIcon = function (key) {
+            if (this.sortKey !== key)
+                return '';
+            return this.sortAsc ? '▲' : '▼';
+        };
+        TimelineComponent.prototype.onBarClick = function (bar) {
+            this.tooltip = null;
+            this.barClick.emit({ index: bar.index, color: bar.color });
+        };
+        TimelineComponent.prototype.onTotalClick = function (row) {
+            if (!row.bars.length)
+                return;
+            this.tooltip = null;
+            this.totalClick.emit({ label: row.label, indexes: row.bars.map(function (b) { return b.index; }), color: row.color, total: row.total });
+        };
+        TimelineComponent.prototype.showTooltip = function (event, bar) {
+            this.tooltip = { text: bar.tooltip, x: event.clientX + 12, y: event.clientY + 12 };
+        };
+        TimelineComponent.prototype.hideTooltip = function () {
+            this.tooltip = null;
+        };
+        TimelineComponent.prototype.trackByLabel = function (index, row) {
+            return row.label;
+        };
+        TimelineComponent.prototype.toRenderedRow = function (row, i) {
+            var _this = this;
+            var totalMs = this.mergedDuration(row.bars);
+            var starts = row.bars.map(function (b) { return b.start.getTime(); });
+            var ends = row.bars.map(function (b) { return b.end.getTime(); });
+            var spanLeft = starts.length ? this.toPercent(Math.min.apply(Math, __spread(starts))) : 0;
+            var spanWidth = ends.length ? this.toPercent(Math.max.apply(Math, __spread(ends))) - spanLeft : 0;
+            return {
+                spanLeft: spanLeft,
+                spanWidth: spanWidth,
+                label: row.label,
+                color: this.rowColor(i),
+                totalMs: totalMs,
+                total: this.formatDuration(totalMs),
+                order: i,
+                bars: row.bars.map(function (bar) {
+                    var left = _this.toPercent(bar.start.getTime());
+                    return Object.assign(Object.assign({}, bar), { left: left, width: Math.max(_this.toPercent(bar.end.getTime()) - left, 0), color: _this.rowColor(i) });
+                }),
+            };
+        };
+        // unique soft colour per row: golden-angle hue steps never repeat and keep neighbouring rows apart
+        TimelineComponent.prototype.rowColor = function (index) {
+            var hue = Math.round((217 + index * 137.508) % 360);
+            return "hsl(" + hue + ", 62%, 68%)";
+        };
+        TimelineComponent.prototype.applySort = function () {
+            var _this = this;
+            var dir = this.sortAsc ? 1 : -1;
+            this.renderedRows = __spread(this.renderedRows).sort(function (a, b) {
+                if (_this.sortKey === 'name') {
+                    return dir * a.label.localeCompare(b.label, undefined, { numeric: true });
+                }
+                if (_this.sortKey === 'total') {
+                    return dir * (a.totalMs - b.totalMs);
+                }
+                return a.order - b.order;
+            });
+        };
+        // overlapping sessions in the same row are counted once
+        TimelineComponent.prototype.mergedDuration = function (bars) {
+            var sorted = __spread(bars).sort(function (a, b) { return a.start.getTime() - b.start.getTime(); });
+            var total = 0;
+            var curStart = null;
+            var curEnd = null;
+            sorted.forEach(function (bar) {
+                var s = bar.start.getTime();
+                var e = bar.end.getTime();
+                if (curEnd === null || s > curEnd) {
+                    if (curEnd !== null)
+                        total += curEnd - curStart;
+                    curStart = s;
+                    curEnd = e;
+                }
+                else if (e > curEnd) {
+                    curEnd = e;
+                }
+            });
+            if (curEnd !== null)
+                total += curEnd - curStart;
+            return total;
+        };
+        TimelineComponent.prototype.toPercent = function (time) {
+            var span = this.rangeEnd - this.rangeStart;
+            return span > 0 ? ((time - this.rangeStart) / span) * 100 : 0;
+        };
+        TimelineComponent.prototype.formatClock = function (date) {
+            var hours = date.getHours();
+            var minutes = date.getMinutes();
+            var ampm = hours >= 12 ? 'PM' : 'AM';
+            hours = hours % 12 || 12;
+            return minutes === 0 ? hours + " " + ampm : hours + ":" + minutes.toString().padStart(2, '0');
+        };
+        TimelineComponent.prototype.formatDuration = function (ms) {
+            var totalMinutes = Math.round(ms / 60000);
+            var hours = Math.floor(totalMinutes / 60);
+            var minutes = totalMinutes % 60;
+            return hours + ":" + minutes.toString().padStart(2, '0') + " hrs";
+        };
+        return TimelineComponent;
+    }());
+    TimelineComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'lib-timeline',
+                    template: "<div class=\"tl-container\" [style.min-width.px]=\"minWidth\">\n  <div class=\"tl-row tl-header\">\n    <div class=\"tl-label tl-sortable\" (click)=\"toggleSort('name')\">{{ labelTitle }} {{ sortIcon('name') }}</div>\n    <div class=\"tl-track tl-axis\">\n      <div class=\"tl-mark tl-mark-quarter\" *ngFor=\"let left of quarterTicks\" [style.left.%]=\"left\"></div>\n      <div class=\"tl-mark\" *ngFor=\"let tick of ticks\" [class.tl-mark-hour]=\"tick.major\" [style.left.%]=\"tick.left\"></div>\n      <div class=\"tl-tick\" *ngFor=\"let tick of ticks\" [class.tl-minor]=\"!tick.major\" [style.left.%]=\"tick.left\">{{ tick.label }}</div>\n    </div>\n    <div class=\"tl-total tl-sortable\" (click)=\"toggleSort('total')\">Total {{ sortIcon('total') }}</div>\n  </div>\n\n  <div class=\"tl-empty\" *ngIf=\"renderedRows.length === 0\">No usage data for this view.</div>\n\n  <div class=\"tl-row\" *ngFor=\"let row of renderedRows; trackBy: trackByLabel; let odd = odd\" [class.tl-odd]=\"odd\">\n    <div class=\"tl-label\" [title]=\"row.label\">{{ row.label }}</div>\n    <div class=\"tl-track\">\n      <div class=\"tl-gridline\" *ngFor=\"let tick of ticks\" [class.tl-minor]=\"!tick.major\" [style.left.%]=\"tick.left\"></div>\n      <div class=\"tl-span\" *ngIf=\"row.bars.length\" [style.left.%]=\"row.spanLeft\" [style.width.%]=\"row.spanWidth\"></div>\n      <div class=\"tl-now\" *ngIf=\"nowLeft !== null\" [style.left.%]=\"nowLeft\"></div>\n      <div\n        class=\"tl-bar\"\n        *ngFor=\"let bar of row.bars\"\n        [style.left.%]=\"bar.left\"\n        [style.width.%]=\"bar.width\"\n        [style.background-color]=\"bar.color\"\n        (click)=\"onBarClick(bar)\"\n        (mousemove)=\"showTooltip($event, bar)\"\n        (mouseleave)=\"hideTooltip()\"\n      ></div>\n    </div>\n    <div\n      class=\"tl-total\"\n      [class.tl-total-link]=\"row.bars.length\"\n      [title]=\"row.bars.length ? 'Show all sessions' : ''\"\n      (click)=\"onTotalClick(row)\"\n    >{{ row.bars.length ? row.total : '\u2014' }}</div>\n  </div>\n\n  <div class=\"tl-tooltip\" *ngIf=\"tooltip\" [style.left.px]=\"tooltip.x\" [style.top.px]=\"tooltip.y\">{{ tooltip.text }}</div>\n</div>\n",
+                    styles: [".tl-container{font-family:Arial,sans-serif;font-size:13px;color:#1f2937;border:1px solid #e5e7eb;border-radius:8px;overflow:clip;min-width:900px;box-sizing:border-box;position:relative;isolation:isolate}.tl-row{display:flex;height:30px;border-bottom:1px solid #e2e6ec;background:#fff}.tl-row:hover:not(.tl-header){background:#eef2ff}.tl-odd{background:#f4f6f9}.tl-header{position:sticky;top:0;z-index:3;height:32px;background:#f8fafc;font-weight:700;color:#475569;border-bottom:1px solid #e5e7eb}.tl-label{flex:0 0 170px;overflow:hidden;text-overflow:ellipsis;border-right:1px solid #e5e7eb;left:0}.tl-label,.tl-total{padding:0 8px;line-height:30px;text-align:right;white-space:nowrap;position:sticky;z-index:2;background:inherit}.tl-total{flex:0 0 90px;font-variant-numeric:tabular-nums;color:#334155;border-left:1px solid #e5e7eb;right:0}.tl-total-link{cursor:pointer;color:#4338ca}.tl-total-link:hover{text-decoration:underline}.tl-sortable{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;line-height:32px}.tl-track{flex:1 1 auto;position:relative;margin:0 24px}.tl-axis .tl-tick{position:absolute;top:0;line-height:24px;transform:translateX(-50%);font-weight:400;font-size:11px;color:#64748b;white-space:nowrap}.tl-axis .tl-tick.tl-minor{font-size:10px;color:#94a3b8}.tl-axis .tl-mark{position:absolute;bottom:0;height:8px;border-left:2px solid #7c9cf5;transform:translateX(-1px)}.tl-axis .tl-mark.tl-mark-hour{height:10px;border-left:2px solid #475569;transform:translateX(-1px)}.tl-axis .tl-mark.tl-mark-quarter{height:8px;border-left:1px solid #c3cad6;transform:translateX(-.5px)}.tl-gridline{position:absolute;top:0;bottom:0;border-left:1px solid #d3d2d2;z-index:3}.tl-gridline.tl-minor{border-left:1px dashed #d3d2d2}.tl-span{position:absolute;top:5px;bottom:5px;background:#e4e8ee;border-radius:2px}.tl-now{top:0;bottom:0;border-left:2px solid #f43f5e}.tl-bar,.tl-now{position:absolute;z-index:1}.tl-bar{top:5px;bottom:5px;min-width:4px;border-radius:2px;cursor:pointer;box-shadow:inset 1px 0 0 hsla(0,0%,100%,.45);transition:filter .12s}.tl-bar:hover{filter:brightness(.82);z-index:2;box-shadow:0 2px 6px rgba(79,70,229,.35)}.tl-empty{padding:16px;text-align:center;color:#666}.tl-tooltip{position:fixed;z-index:1000;background:#1e293b;color:#fff;font-size:12px;padding:6px 10px;border-radius:6px;box-shadow:0 4px 12px rgba(0,0,0,.2);white-space:pre-line;pointer-events:none;max-width:320px}"]
+                },] }
+    ];
+    TimelineComponent.propDecorators = {
+        rows: [{ type: i0.Input }],
+        labelTitle: [{ type: i0.Input }],
+        barClick: [{ type: i0.Output }],
+        totalClick: [{ type: i0.Output }]
+    };
+
+    var MINUTE = 60 * 1000;
+    var HOUR = 60 * MINUTE;
+    var SHORT_SESSION_MIN = 5;
+    // width the page is laid out at for the PDF, so the export looks the same on any screen
+    var PDF_RENDER_WIDTH = 1280;
+    var InsightsComponent = /** @class */ (function () {
+        function InsightsComponent(pdService, host) {
+            this.pdService = pdService;
+            this.host = host;
+            this.schoolName = '';
+            this.dayLabel = '';
+            this.kpis = [];
+            this.hourly = [];
+            this.grades = [];
+            this.topTeachers = [];
+            // donut of subject share: each segment is a dash along one circle
+            this.subjectDonut = { total: '', segments: [] };
+            this.donutRadius = 52;
+            // columns per class, in class order
+            this.gradeColumns = [];
+            // one tile per room, shaded by share of the school day in use
+            this.roomTiles = [];
+            this.idleRooms = [];
+            this.inactiveTeachers = [];
+            this.contentMix = [];
+            this.chapters = [];
+            this.attention = [];
+            this.hasSessions = false;
+            this.isExporting = false;
+            // accordion: the full follow-up lists open below the summary tiles
+            this.detailsOpen = false;
+            this.eligibleCount = 0;
+            this.classroomCount = 0;
+            this.fileDate = '';
+            // ---------- count-up for the headline numbers
+            this.countFrame = 0;
+        }
+        Object.defineProperty(InsightsComponent.prototype, "data", {
+            set: function (res) {
+                if (res) {
+                    this.build(typeof res === 'string' ? JSON.parse(res) : res);
+                }
+            },
+            enumerable: false,
+            configurable: true
+        });
+        InsightsComponent.prototype.ngAfterViewInit = function () {
+            var _this = this;
+            setTimeout(function () { return _this.fitHeight(); });
+        };
+        // fill from where the page starts down to the bottom of the window and scroll inside it
+        InsightsComponent.prototype.fitHeight = function () {
+            var page = this.host.nativeElement.querySelector('.in-page');
+            if (!page)
+                return;
+            var top = page.getBoundingClientRect().top;
+            page.style.height = Math.max(window.innerHeight - top, 240) + 'px';
+        };
+        InsightsComponent.prototype.build = function (json) {
+            var _this = this;
+            var users = this.list(json, 'usersMetadata', 'userMetadata');
+            var consoles = this.list(json, 'usersConsole', 'userConsole');
+            var resources = this.list(json, 'resourcesMetadata', 'resourceMetadata');
+            var terminals = this.list(json, 'schoolTerminals', 'schoolTerminal');
+            this.schoolName = (json.schoolMetadata && json.schoolMetadata.school && json.schoolMetadata.school.schoolName) || '';
+            var userById = new Map();
+            users.forEach(function (u) { return userById.set(u.userId, u); });
+            var resourceById = new Map();
+            resources.forEach(function (r) { return resourceById.set(r.resourceId, r); });
+            var roomByIp = new Map();
+            terminals.forEach(function (t) { return roomByIp.set(t.terminalKey, _this.pdService.getRoomLabel(_this.location(t.metadata), t.terminalKey)); });
+            var classrooms = terminals.filter(function (t) { return t.terminalType === 'classroom'; });
+            var sessions = consoles
+                .map(function (c) { return ({
+                userId: c.userId,
+                ip: c.terminalIP,
+                start: _this.parseTime(c.startTime),
+                end: _this.parseTime(c.endTime),
+                resources: ((c.userConsoleResources && c.userConsoleResources.userConsoleResource) || []).map(function (r) { return ({
+                    resourceId: r.resourceId,
+                    type: r.type,
+                }); }),
+            }); })
+                .filter(function (s) { return !isNaN(s.start) && !isNaN(s.end) && s.end >= s.start; });
+            // zero-length entries are logins with no class time; keep them out of time-based figures
+            var timed = sessions.filter(function (s) { return s.end > s.start; });
+            this.hasSessions = sessions.length > 0;
+            var first = sessions.length ? new Date(Math.min.apply(Math, __spread(sessions.map(function (s) { return s.start; })))) : null;
+            this.fileDate = first
+                ? [first.getDate(), first.getMonth() + 1].map(function (n) { return String(n).padStart(2, '0'); }).join('-') + '-' + first.getFullYear()
+                : '';
+            this.dayLabel = first ? first.toLocaleDateString('en-GB', { weekday: 'long', day: 'numeric', month: 'short', year: 'numeric' }) : '';
+            // ---- teachers
+            var eligible = users.filter(function (u) { return (u.userSubjects || '') !== ''; });
+            var timeByUser = this.groupTime(timed, function (s) { return s.userId; });
+            var sessionsByUser = this.countBy(timed, function (s) { return s.userId; });
+            var activeUserIds = new Set(sessions.map(function (s) { return s.userId; }));
+            var totalTeachingMs = Array.from(timeByUser.values()).reduce(function (a, b) { return a + b; }, 0);
+            var activeEligible = eligible.filter(function (u) { return activeUserIds.has(u.userId); }).length;
+            this.eligibleCount = eligible.length;
+            this.classroomCount = classrooms.length;
+            this.topTeachers = this.toBars(Array.from(timeByUser.entries()).map(function (_a) {
+                var _b = __read(_a, 2), id = _b[0], ms = _b[1];
+                return ({
+                    label: _this.userName(userById.get(id), id),
+                    sub: (sessionsByUser.get(id) || 0) + " sessions",
+                    value: ms,
+                });
+            }), function (ms) { return _this.formatDuration(ms); }, 8);
+            this.inactiveTeachers = eligible
+                .filter(function (u) { return !activeUserIds.has(u.userId); })
+                .map(function (u) { return _this.userName(u, u.userId); })
+                .sort(function (a, b) { return a.localeCompare(b); });
+            // ---- rooms
+            var timeByRoom = this.groupTime(timed, function (s) { return s.ip; });
+            var usedIps = new Set(sessions.map(function (s) { return s.ip; }));
+            var usedClassrooms = classrooms.filter(function (t) { return usedIps.has(t.terminalKey); }).length;
+            var daySpan = timed.length ? Math.max.apply(Math, __spread(timed.map(function (s) { return s.end; }))) - Math.min.apply(Math, __spread(timed.map(function (s) { return s.start; }))) : 0;
+            // every installed classroom plus any other room that was used, in room order
+            var tileIps = classrooms.map(function (t) { return t.terminalKey; }).concat(Array.from(timeByRoom.keys()).filter(function (ip) { return !classrooms.some(function (t) { return t.terminalKey === ip; }); }));
+            var maxRoomMs = Math.max.apply(Math, __spread(Array.from(timeByRoom.values()), [1]));
+            this.roomTiles = tileIps
+                .map(function (ip) {
+                var ms = timeByRoom.get(ip) || 0;
+                var share = daySpan ? Math.round((ms / daySpan) * 100) : 0;
+                return {
+                    label: roomByIp.get(ip) || ip,
+                    display: ms ? _this.formatDuration(ms) + " \u00B7 " + share + "% of the day" : 'Not used today',
+                    share: share,
+                    // pale blue for little use through to deep navy for the busiest room
+                    shade: share ? _this.navyShade(ms / maxRoomMs) : '',
+                    dark: !!share && Math.pow(ms / maxRoomMs, 1.8) > 0.5,
+                    // shown as an outlined tile: unused, or used for under 1% of the day
+                    idle: !share,
+                    // long names ("science lab", "127.0.0.1") take extra columns so they show in full
+                    span: Math.min(Math.ceil(((roomByIp.get(ip) || ip).length + 2) / 5), 4),
+                };
+            })
+                .sort(function (a, b) { return a.label.localeCompare(b.label, undefined, { numeric: true }); });
+            this.idleRooms = classrooms
+                .filter(function (t) { return !usedIps.has(t.terminalKey); })
+                .map(function (t) { return roomByIp.get(t.terminalKey); })
+                .sort(function (a, b) { return a.localeCompare(b, undefined, { numeric: true }); });
+            // ---- through the day: distinct teachers in a session during each hour
+            this.hourly = [];
+            if (timed.length) {
+                var startHour = new Date(Math.min.apply(Math, __spread(timed.map(function (s) { return s.start; }))));
+                startHour.setMinutes(0, 0, 0);
+                var lastEnd = Math.max.apply(Math, __spread(timed.map(function (s) { return s.end; })));
+                var counts = [];
+                var _loop_1 = function (t) {
+                    var teachers = new Set(timed.filter(function (s) { return s.start < t + HOUR && s.end > t; }).map(function (s) { return s.userId; }));
+                    counts.push({ label: this_1.formatHour(new Date(t)), value: teachers.size });
+                };
+                var this_1 = this;
+                for (var t = startHour.getTime(); t < lastEnd; t += HOUR) {
+                    _loop_1(t);
+                }
+                var max_1 = Math.max.apply(Math, __spread(counts.map(function (c) { return c.value; }), [1]));
+                this.hourly = counts.map(function (c) { return (Object.assign(Object.assign({}, c), { percent: (c.value / max_1) * 100, peak: c.value === max_1, color: _this.utilisationColor(c.value / max_1) })); });
+            }
+            var peak = this.hourly.reduce(function (best, h) { return (!best || h.value > best.value ? h : best); }, null);
+            // ---- what was taught: session time split evenly across the subjects / grades it touched
+            var subjectTime = new Map();
+            var gradeTime = new Map();
+            timed.forEach(function (s) {
+                var metas = s.resources.map(function (r) { return resourceById.get(r.resourceId); }).filter(function (m) { return !!m; });
+                _this.share(subjectTime, metas.map(function (m) { return _this.title(m.subject); }), s.end - s.start);
+                _this.share(gradeTime, metas.map(function (m) { return _this.title(m.grade); }), s.end - s.start);
+            });
+            this.subjectDonut = this.buildDonut(this.entries(subjectTime), 7);
+            this.grades = this.toBars(this.entries(gradeTime).sort(function (a, b) { return a.label.localeCompare(b.label, undefined, { numeric: true }); }), function (ms) { return _this.formatDuration(ms); }, 0, false);
+            this.gradeColumns = this.grades.map(function (g) { return (Object.assign(Object.assign({}, g), { short: _this.shortGrade(g.label) })); });
+            // ---- content
+            var launches = sessions.reduce(function (acc, s) { return acc.concat(s.resources); }, []);
+            var typeCounts = this.countBy(launches, function (r) { return _this.typeLabel(r.type); });
+            this.contentMix = this.toBars(Array.from(typeCounts.entries()).map(function (_a) {
+                var _b = __read(_a, 2), label = _b[0], n = _b[1];
+                return ({ label: label, value: n });
+            }), function (n) { return "" + n; }, 0).map(function (item, i) { return (Object.assign(Object.assign({}, item), { color: _this.color(i), percent: (item.value / Math.max(launches.length, 1)) * 100 })); });
+            var chapterCounts = new Map();
+            launches.forEach(function (r) {
+                var m = resourceById.get(r.resourceId);
+                var chapter = m && _this.title(m.chapter);
+                if (!chapter)
+                    return;
+                var key = _this.title(m.subject) + "|" + _this.title(m.grade) + "|" + chapter;
+                var cur = chapterCounts.get(key) || { n: 0, sub: [_this.title(m.subject), _this.title(m.grade)].filter(function (x) { return x; }).join(' · ') };
+                cur.n++;
+                chapterCounts.set(key, cur);
+            });
+            this.chapters = this.toBars(Array.from(chapterCounts.entries()).map(function (_a) {
+                var _b = __read(_a, 2), key = _b[0], v = _b[1];
+                return ({ label: key.split('|')[2], sub: v.sub, value: v.n });
+            }), function (n) { return n + " uses"; }, 8);
+            // ---- headline numbers
+            var avgSession = timed.length ? totalTeachingMs / timed.length : 0;
+            var topics = new Set(launches.filter(function (r) { return r.type === 'tp'; }).map(function (r) { return r.resourceId; }));
+            this.kpis = [
+                {
+                    label: 'Active Teachers',
+                    value: activeEligible + " / " + eligible.length,
+                    hint: this.pct(activeEligible, eligible.length) + " of eligible teachers",
+                },
+                {
+                    label: 'Classrooms Used',
+                    value: usedClassrooms + " / " + classrooms.length,
+                    hint: this.pct(usedClassrooms, classrooms.length) + " of classrooms",
+                },
+                {
+                    label: 'Teaching Time',
+                    value: this.formatDuration(totalTeachingMs),
+                    hint: this.formatDuration(activeUserIds.size ? totalTeachingMs / activeUserIds.size : 0) + " per active teacher",
+                },
+                {
+                    label: 'Sessions',
+                    value: "" + timed.length,
+                    hint: this.formatDuration(avgSession) + " on average",
+                },
+                {
+                    label: 'Content Used',
+                    value: "" + launches.length,
+                    hint: topics.size + " distinct topics",
+                },
+                {
+                    label: 'Peak Hour',
+                    value: peak ? peak.label : '—',
+                    hint: peak ? peak.value + " teachers in class" : 'No sessions',
+                },
+            ];
+            this.attention = [
+                {
+                    label: 'Teachers Not Active',
+                    icon: 'teacher',
+                    value: this.inactiveTeachers.length,
+                    hint: 'Eligible teachers with no session today',
+                },
+                {
+                    label: 'Classrooms Not Used',
+                    icon: 'room',
+                    value: this.idleRooms.length,
+                    hint: 'Installed classrooms with no session today',
+                },
+                {
+                    label: "Sessions Under " + SHORT_SESSION_MIN + " Min",
+                    icon: 'clock',
+                    value: timed.filter(function (s) { return s.end - s.start < SHORT_SESSION_MIN * MINUTE; }).length,
+                    hint: 'May be accidental log-ins',
+                },
+                {
+                    label: 'Sessions Without Content',
+                    icon: 'book',
+                    value: timed.filter(function (s) { return s.resources.length === 0; }).length,
+                    hint: 'Logged in but nothing was used',
+                },
+            ];
+            this.countUp();
+        };
+        // biggest slices first; anything past `keep` is grouped as "Other"
+        InsightsComponent.prototype.buildDonut = function (items, keep) {
+            var _this = this;
+            var sorted = __spread(items).sort(function (a, b) { return b.value - a.value; });
+            var shown = sorted.slice(0, keep);
+            var rest = sorted.slice(keep).reduce(function (sum, i) { return sum + i.value; }, 0);
+            if (rest > 0)
+                shown.push({ label: 'Other', value: rest });
+            var total = shown.reduce(function (sum, i) { return sum + i.value; }, 0);
+            var circumference = 2 * Math.PI * this.donutRadius;
+            var used = 0;
+            var segments = shown.map(function (item, i) {
+                var length = total ? (item.value / total) * circumference : 0;
+                var segment = Object.assign(Object.assign({}, item), { display: _this.formatDuration(item.value), percent: total ? Math.round((item.value / total) * 100) : 0, color: item.label === 'Other' ? '#c9d2e3' : _this.color(i), 
+                    // small gap between slices
+                    dash: Math.max(length - 2, 0) + " " + circumference, offset: -used });
+                used += length;
+                return segment;
+            });
+            return { total: this.formatDuration(total), segments: segments };
+        };
+        // 0 = quiet (light red), 0.5 = moderate (warm yellow), 1 = busiest (green)
+        // `soft` lightens the colour so dark text on tiles stays readable
+        InsightsComponent.prototype.utilisationColor = function (ratio, soft) {
+            if (soft === void 0) { soft = false; }
+            var stops = [
+                { at: 0, h: 4, s: 82, l: 74 },
+                { at: 0.5, h: 43, s: 90, l: 62 },
+                { at: 1, h: 88, s: 45, l: 56 },
+            ];
+            var r = Math.min(Math.max(ratio, 0), 1);
+            var _a = __read(r <= 0.5 ? [stops[0], stops[1]] : [stops[1], stops[2]], 2), a = _a[0], b = _a[1];
+            var t = (r - a.at) / (b.at - a.at);
+            var mix = function (x, y) { return Math.round(x + (y - x) * t); };
+            var light = mix(a.l, b.l) + (soft ? 12 : 0);
+            return "hsl(" + mix(a.h, b.h) + ", " + mix(a.s, b.s) + "%, " + light + "%)";
+        };
+        // 0 = near-white blue, 1 = deep navy
+        InsightsComponent.prototype.navyShade = function (ratio) {
+            var from = [234, 241, 251];
+            var to = [22, 43, 87];
+            // eased so low and mid use stay light and only the busiest rooms turn dark
+            var t = Math.pow(Math.min(Math.max(ratio, 0), 1), 1.8);
+            var c = from.map(function (f, i) { return Math.round(f + (to[i] - f) * t); });
+            return "rgb(" + c[0] + ", " + c[1] + ", " + c[2] + ")";
+        };
+        // "Class 7" -> "7", "Early Childhood Education" -> "ECE"
+        InsightsComponent.prototype.shortGrade = function (label) {
+            var match = /^class\s+(.+)$/i.exec(label);
+            if (match)
+                return match[1];
+            return label.split(/\s+/).filter(function (w) { return w; }).map(function (w) { return w.charAt(0).toUpperCase(); }).join('').slice(0, 4);
+        };
+        // every number inside a value ("42 / 77", "48h 53m") rises from 0 together
+        InsightsComponent.prototype.countUp = function () {
+            var _this = this;
+            cancelAnimationFrame(this.countFrame);
+            var reduced = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+            var apply = function (progress) {
+                _this.kpis.forEach(function (k) { return (k.shown = k.value.replace(/\d+/g, function (n) { return "" + Math.round(+n * progress); })); });
+                _this.attention.forEach(function (a) { return (a.shown = Math.round(a.value * progress)); });
+            };
+            if (reduced) {
+                apply(1);
+                return;
+            }
+            var duration = 900;
+            var start = performance.now();
+            var step = function (now) {
+                var t = Math.min((now - start) / duration, 1);
+                apply(1 - Math.pow(1 - t, 3));
+                if (t < 1)
+                    _this.countFrame = requestAnimationFrame(step);
+            };
+            apply(0);
+            this.countFrame = requestAnimationFrame(step);
+        };
+        InsightsComponent.prototype.closeDetails = function () {
+            this.detailsOpen = false;
+        };
+        // "Mrs Alisa Dsouza" -> "AD"
+        InsightsComponent.prototype.initials = function (name) {
+            var words = (name || '').split(/\s+/).filter(function (w) { return w && !/^(mr|mrs|miss|ms|dr)\.?$/i.test(w); });
+            return words.length ? (words[0][0] + (words.length > 1 ? words[words.length - 1][0] : '')).toUpperCase() : '?';
+        };
+        // ---------- PDF export
+        InsightsComponent.prototype.downloadPdf = function () {
+            return __awaiter(this, void 0, void 0, function () {
+                var page, wrapper, copy, top_1, breaks, canvas;
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0:
+                            page = this.host.nativeElement.querySelector('.in-page');
+                            if (!page || this.isExporting)
+                                return [2 /*return*/];
+                            this.isExporting = true;
+                            wrapper = document.createElement('div');
+                            wrapper.setAttribute('data-pdf-wrapper', '');
+                            wrapper.style.cssText = 'position:fixed;left:0;top:0;width:0;height:0;overflow:hidden;z-index:-1;';
+                            copy = page.cloneNode(true);
+                            copy.classList.add('in-exporting');
+                            copy.style.width = PDF_RENDER_WIDTH + 'px';
+                            wrapper.appendChild(copy);
+                            page.parentElement.appendChild(wrapper);
+                            _a.label = 1;
+                        case 1:
+                            _a.trys.push([1, , 3, 4]);
+                            top_1 = copy.getBoundingClientRect().top;
+                            breaks = Array.from(copy.querySelectorAll('.in-card'))
+                                .map(function (card) { return Math.round(card.getBoundingClientRect().top - top_1 - 8); })
+                                .filter(function (y, i, all) { return y > 0 && all.indexOf(y) === i; })
+                                .sort(function (a, b) { return a - b; });
+                            return [4 /*yield*/, html2canvas__default['default'](copy, {
+                                    scale: 2,
+                                    backgroundColor: '#ffffff',
+                                    onclone: function (doc) {
+                                        var clonedWrapper = doc.querySelector('[data-pdf-wrapper]');
+                                        if (clonedWrapper) {
+                                            clonedWrapper.style.overflow = 'visible';
+                                        }
+                                    },
+                                })];
+                        case 2:
+                            canvas = _a.sent();
+                            this.savePdf(canvas, breaks.map(function (y) { return y * 2; }));
+                            return [3 /*break*/, 4];
+                        case 3:
+                            wrapper.remove();
+                            this.isExporting = false;
+                            return [7 /*endfinally*/];
+                        case 4: return [2 /*return*/];
+                    }
+                });
+            });
+        };
+        // A4 portrait; each page takes whole rows of cards and long content is sliced as a last resort
+        InsightsComponent.prototype.savePdf = function (canvas, breaks) {
+            var _this = this;
+            var pdf = new jspdf.jsPDF({ orientation: 'portrait', unit: 'mm', format: 'a4' });
+            var margin = 10;
+            var pageWidth = pdf.internal.pageSize.getWidth();
+            var pageHeight = pdf.internal.pageSize.getHeight();
+            var contentWidth = pageWidth - margin * 2;
+            var mmPerPx = contentWidth / canvas.width;
+            var maxSlice = Math.floor((pageHeight - margin * 2 - 6) / mmPerPx);
+            var slices = [];
+            var start = 0;
+            var _loop_2 = function () {
+                var end = Math.min(start + maxSlice, canvas.height);
+                if (end < canvas.height) {
+                    var fit = breaks.filter(function (b) { return b > start && b <= end; });
+                    if (fit.length)
+                        end = fit[fit.length - 1];
+                }
+                slices.push([start, end]);
+                start = end;
+            };
+            while (start < canvas.height) {
+                _loop_2();
+            }
+            slices.forEach(function (_a, i) {
+                var _b = __read(_a, 2), from = _b[0], to = _b[1];
+                var part = document.createElement('canvas');
+                part.width = canvas.width;
+                part.height = to - from;
+                part.getContext('2d').drawImage(canvas, 0, from, canvas.width, to - from, 0, 0, canvas.width, to - from);
+                if (i > 0)
+                    pdf.addPage();
+                pdf.addImage(part.toDataURL('image/jpeg', 0.92), 'JPEG', margin, margin, contentWidth, part.height * mmPerPx);
+                pdf.setFontSize(8);
+                pdf.setTextColor(140);
+                pdf.text(_this.schoolName + " \u00B7 Usage insights", margin, pageHeight - 5);
+                pdf.text("Page " + (i + 1) + " of " + slices.length, pageWidth - margin, pageHeight - 5, { align: 'right' });
+            });
+            pdf.save("Insights-" + (this.fileDate || 'report') + ".pdf");
+        };
+        // ---------- helpers
+        InsightsComponent.prototype.list = function (json, outer, inner) {
+            var value = json && json[outer] && json[outer][inner];
+            return Array.isArray(value) ? value : [];
+        };
+        InsightsComponent.prototype.location = function (metadata) {
+            try {
+                return (typeof metadata === 'string' ? JSON.parse(metadata) : metadata || {}).location || '';
+            }
+            catch (e) {
+                return '';
+            }
+        };
+        // "2024-12-10 07:01:24.0" is not valid ISO for every browser, so add the "T"
+        InsightsComponent.prototype.parseTime = function (value) {
+            return value ? new Date(String(value).replace(' ', 'T')).getTime() : NaN;
+        };
+        InsightsComponent.prototype.title = function (item) {
+            return (item && item.title ? String(item.title) : '').trim();
+        };
+        // known types use the dashboard's labels; others like "casset_weblink" become "Weblink"
+        InsightsComponent.prototype.typeLabel = function (type) {
+            if (!type)
+                return 'Other';
+            var label = this.pdService.getDisplaytypeValue(type);
+            if (label !== type)
+                return label;
+            var words = type.replace(/^c?asset_/, '').replace(/_/g, ' ');
+            return words.charAt(0).toUpperCase() + words.slice(1);
+        };
+        InsightsComponent.prototype.userName = function (user, fallback) {
+            return user ? this.pdService.getName(user) : fallback;
+        };
+        // overlapping sessions for the same key are counted once
+        InsightsComponent.prototype.groupTime = function (sessions, key) {
+            var _this = this;
+            var grouped = new Map();
+            sessions.forEach(function (s) {
+                var k = key(s);
+                grouped.set(k, (grouped.get(k) || []).concat({ start: s.start, end: s.end }));
+            });
+            var result = new Map();
+            grouped.forEach(function (intervals, k) { return result.set(k, _this.mergedDuration(intervals)); });
+            return result;
+        };
+        InsightsComponent.prototype.mergedDuration = function (intervals) {
+            var sorted = __spread(intervals).sort(function (a, b) { return a.start - b.start; });
+            var total = 0;
+            var cur = null;
+            sorted.forEach(function (i) {
+                if (!cur || i.start > cur.end) {
+                    if (cur)
+                        total += cur.end - cur.start;
+                    cur = Object.assign({}, i);
+                }
+                else if (i.end > cur.end) {
+                    cur.end = i.end;
+                }
+            });
+            return cur ? total + cur.end - cur.start : total;
+        };
+        InsightsComponent.prototype.countBy = function (items, key) {
+            var result = new Map();
+            items.forEach(function (item) { return result.set(key(item), (result.get(key(item)) || 0) + 1); });
+            return result;
+        };
+        InsightsComponent.prototype.share = function (target, labels, ms) {
+            var unique = Array.from(new Set(labels.filter(function (l) { return l; })));
+            unique.forEach(function (l) { return target.set(l, (target.get(l) || 0) + ms / unique.length); });
+        };
+        InsightsComponent.prototype.entries = function (map) {
+            return Array.from(map.entries()).map(function (_a) {
+                var _b = __read(_a, 2), label = _b[0], value = _b[1];
+                return ({ label: label, value: value });
+            });
+        };
+        // limit 0 = show all; bar length is relative to the largest value
+        InsightsComponent.prototype.toBars = function (items, display, limit, sortByValue) {
+            if (sortByValue === void 0) { sortByValue = true; }
+            var sorted = sortByValue ? __spread(items).sort(function (a, b) { return b.value - a.value; }) : items;
+            var shown = limit ? sorted.slice(0, limit) : sorted;
+            var max = Math.max.apply(Math, __spread(shown.map(function (i) { return i.value; }), [1]));
+            return shown.map(function (i) { return (Object.assign(Object.assign({}, i), { display: display(i.value), percent: (i.value / max) * 100 })); });
+        };
+        // blue and yellow first to match the page, then supporting tones
+        InsightsComponent.prototype.color = function (index) {
+            var palette = ['#7c9cf5', '#f6d27e', '#a9bffa', '#6fc6ba', '#f4a98a', '#c0aef7', '#f3a6c8', '#b4bfcf', '#fbe7b4'];
+            return palette[index % palette.length];
+        };
+        InsightsComponent.prototype.pct = function (part, whole) {
+            return whole ? Math.round((part / whole) * 100) + "%" : '0%';
+        };
+        InsightsComponent.prototype.formatHour = function (date) {
+            var h = date.getHours();
+            return (h % 12 || 12) + " " + (h >= 12 ? 'PM' : 'AM');
+        };
+        InsightsComponent.prototype.formatDuration = function (ms) {
+            var minutes = Math.round(ms / MINUTE);
+            var h = Math.floor(minutes / 60);
+            var m = minutes % 60;
+            return h ? h + "h " + m + "m" : m + "m";
+        };
+        return InsightsComponent;
+    }());
+    InsightsComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'lib-insights',
+                    template: "<div class=\"in-page\">\n  <!-- title and headline numbers stay in view while the cards below scroll -->\n  <div class=\"in-sticky\">\n    <div class=\"in-heading\">\n      <div class=\"in-heading-text\">{{ schoolName }}<span *ngIf=\"schoolName && dayLabel\"> \u00B7 </span>{{ dayLabel }}</div>\n      <button\n        type=\"button\"\n        class=\"in-pdf-btn\"\n        *ngIf=\"hasSessions\"\n        data-html2canvas-ignore=\"true\"\n        [disabled]=\"isExporting\"\n        (click)=\"downloadPdf()\"\n      >{{ isExporting ? 'Preparing PDF\u2026' : 'Download PDF' }}</button>\n    </div>\n\n    <div class=\"in-kpis\" *ngIf=\"hasSessions\">\n      <div class=\"in-kpi in-anim\" *ngFor=\"let kpi of kpis; let i = index; let last = last\" [class.in-kpi-accent]=\"last\" [style.animation-delay.ms]=\"i * 60\">\n        <span class=\"in-kpi-icon\">\n          <svg viewBox=\"0 0 10 10\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"><path d=\"M2.5 7.5l5-5M3.5 2.5h4v4\" /></svg>\n        </span>\n        <div class=\"in-kpi-label\">{{ kpi.label }}</div>\n        <div class=\"in-kpi-value\">{{ kpi.shown || kpi.value }}</div>\n        <div class=\"in-kpi-hint\">{{ kpi.hint }}</div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"in-empty\" *ngIf=\"!hasSessions\">No usage was recorded on this day.</div>\n\n  <ng-container *ngIf=\"hasSessions\">\n\n    <!-- primary: what to act on, and who is using the system -->\n    <div class=\"in-grid\">\n      <section [style.animation-delay.ms]=\"120\" class=\"in-anim in-card in-wide in-primary\">\n        <div class=\"in-card-title\">Needs Attention</div>\n        <div class=\"in-card-sub\">Who and what to follow up on today</div>\n        <div class=\"in-attention\">\n          <div class=\"in-attention-item in-anim-row\" *ngFor=\"let a of attention; let i = index\" [style.animation-delay.ms]=\"300 + i * 80\">\n            <div class=\"in-attention-value\" [class.in-zero]=\"a.value === 0\">{{ a.shown != null ? a.shown : a.value }}</div>\n            <div>\n              <div class=\"in-attention-label\">\n                <span class=\"in-inline-icon\" [ngSwitch]=\"a.icon\" aria-hidden=\"true\">\n                  <svg *ngSwitchCase=\"'teacher'\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"8\" r=\"4\" /><path d=\"M4 20c0-4 3.6-6 8-6s8 2 8 6\" /></svg>\n                  <svg *ngSwitchCase=\"'room'\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"3\" y=\"4\" width=\"18\" height=\"12\" rx=\"2\" /><path d=\"M12 16v4M8 20h8M7 9h6\" /></svg>\n                  <svg *ngSwitchCase=\"'clock'\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"9\" /><path d=\"M12 7v5l3 2\" /></svg>\n                  <svg *ngSwitchCase=\"'book'\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M4 5a2 2 0 0 1 2-2h13v16H6a2 2 0 0 0-2 2V5z\" /><path d=\"M4 19a2 2 0 0 1 2-2h13\" /></svg>\n                </span>\n                {{ a.label }}\n              </div>\n              <div class=\"in-muted\">{{ a.hint }}</div>\n            </div>\n          </div>\n        </div>\n        <!-- who to follow up: big tiles that shrink to slim bars when the lists open below (accordion) -->\n        <div class=\"in-follow\" [class.in-follow-compact]=\"detailsOpen\">\n          <button type=\"button\" class=\"in-follow-tile in-follow-teachers\" [attr.aria-expanded]=\"detailsOpen\" aria-controls=\"in-follow-details\" (click)=\"detailsOpen = !detailsOpen\">\n            <span class=\"in-follow-icon\">\n              <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"8\" r=\"4\" /><path d=\"M4 20c0-4 3.6-6 8-6s8 2 8 6\" /></svg>\n            </span>\n            <span class=\"in-follow-number\">{{ attention[0]?.shown != null ? attention[0].shown : inactiveTeachers.length }}</span>\n            <span class=\"in-follow-label-big\">Teachers Not Active</span>\n            <span class=\"in-muted\">of {{ eligibleCount }} eligible teachers</span>\n            <span class=\"in-avatars\" *ngIf=\"inactiveTeachers.length\">\n              <span class=\"in-avatar\" *ngFor=\"let name of inactiveTeachers.slice(0, 7)\" [title]=\"name\">{{ initials(name) }}</span>\n              <span class=\"in-avatar in-avatar-more\" *ngIf=\"inactiveTeachers.length > 7\">+{{ inactiveTeachers.length - 7 }}</span>\n            </span>\n          </button>\n          <button type=\"button\" class=\"in-follow-tile in-follow-rooms\" [attr.aria-expanded]=\"detailsOpen\" aria-controls=\"in-follow-details\" (click)=\"detailsOpen = !detailsOpen\">\n            <span class=\"in-follow-icon\">\n              <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"3\" y=\"4\" width=\"18\" height=\"12\" rx=\"2\" /><path d=\"M12 16v4M8 20h8M7 9h6\" /></svg>\n            </span>\n            <span class=\"in-follow-number\">{{ attention[1]?.shown != null ? attention[1].shown : idleRooms.length }}</span>\n            <span class=\"in-follow-label-big\">Classrooms Not Used</span>\n            <span class=\"in-muted\">of {{ classroomCount }} installed classrooms</span>\n            <span class=\"in-room-chips\" *ngIf=\"idleRooms.length\">\n              <span class=\"in-room-chip\" *ngFor=\"let room of idleRooms.slice(0, 6)\">{{ room }}</span>\n              <span class=\"in-room-chip in-avatar-more\" *ngIf=\"idleRooms.length > 6\">+{{ idleRooms.length - 6 }}</span>\n            </span>\n          </button>\n        </div>\n        <div class=\"in-follow-details\" id=\"in-follow-details\" *ngIf=\"detailsOpen\">\n          <ng-container *ngTemplateOutlet=\"followLists\"></ng-container>\n        </div>\n        <div class=\"in-follow-foot\" data-html2canvas-ignore=\"true\">\n          <button type=\"button\" class=\"in-link-btn\" [attr.aria-expanded]=\"detailsOpen\" aria-controls=\"in-follow-details\" (click)=\"detailsOpen = !detailsOpen\">\n            {{ detailsOpen ? 'Hide details' : 'Show details' }}\n            <span class=\"in-link-chevron\" [class.in-link-chevron-up]=\"detailsOpen\" aria-hidden=\"true\"></span>\n          </button>\n        </div>\n        <!-- the PDF can't open a modal, so it prints the full lists here instead -->\n        <div class=\"in-print-only\">\n          <ng-container *ngTemplateOutlet=\"followLists\"></ng-container>\n        </div>\n      </section>\n      <section [style.animation-delay.ms]=\"180\" class=\"in-anim in-card\">\n        <div class=\"in-card-title\">Most Active Teachers</div>\n        <div class=\"in-card-sub\">Time in class, overlapping sessions counted once</div>\n        <ng-container *ngTemplateOutlet=\"bars; context: { $implicit: topTeachers, color: '#8BC34A' }\"></ng-container>\n      </section>\n    </div>\n\n    <!-- supporting detail -->\n    <div class=\"in-grid\">\n      <section [style.animation-delay.ms]=\"240\" class=\"in-anim in-card\">\n        <div class=\"in-card-title\">Activity Through the Day</div>\n        <div class=\"in-card-sub\">Number of teachers in a session during each hour</div>\n        <div class=\"in-hours\">\n          <div class=\"in-hour\" *ngFor=\"let h of hourly; let i = index\" [title]=\"h.label + ': ' + h.value + ' teachers'\">\n            <div class=\"in-hour-value\">\n              <svg class=\"in-hour-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><circle cx=\"12\" cy=\"8\" r=\"4\" /><path d=\"M4 20c0-4 3.6-6 8-6s8 2 8 6\" /></svg>\n              {{ h.value }}\n            </div>\n            <div class=\"in-hour-track\">\n              <div class=\"in-hour-bar\" [class.in-peak]=\"h.peak\" [style.height.%]=\"h.percent\" [style.background-color]=\"h.color\" [style.animation-delay.ms]=\"250 + i * 50\"></div>\n            </div>\n            <div class=\"in-hour-label\">{{ h.label }}</div>\n          </div>\n        </div>\n        <div class=\"in-util-legend\">\n          <span class=\"in-muted\">Low</span>\n          <span class=\"in-util-scale\"></span>\n          <span class=\"in-muted\">High</span>\n        </div>\n      </section>\n      <section [style.animation-delay.ms]=\"300\" class=\"in-anim in-card\">\n        <div class=\"in-card-title\">Most Used Chapters</div>\n        <div class=\"in-card-sub\">Chapters and their topics used today</div>\n        <ng-container *ngTemplateOutlet=\"bars; context: { $implicit: chapters, color: '#f4a98a' }\"></ng-container>\n      </section>\n      <section [style.animation-delay.ms]=\"360\" class=\"in-anim in-card\">\n        <div class=\"in-card-title\">Content Utilisation</div>\n        <div class=\"in-card-sub\">What teachers used in class</div>\n        <div class=\"in-stack\">\n          <div\n            class=\"in-stack-part\"\n            *ngFor=\"let c of contentMix; let i = index\"\n            [style.animation-delay.ms]=\"300 + i * 60\"\n            [style.width.%]=\"c.percent\"\n            [style.background-color]=\"c.color\"\n            [title]=\"c.label + ': ' + c.display\"\n          ></div>\n        </div>\n        <div class=\"in-legend\">\n          <div class=\"in-legend-item\" *ngFor=\"let c of contentMix\">\n            <span class=\"in-dot\" [style.background-color]=\"c.color\"></span>\n            <span class=\"in-legend-label\">{{ c.label }}</span>\n            <span class=\"in-legend-value\">{{ c.display }}</span>\n          </div>\n        </div>\n      </section>\n    </div>\n\n    <!-- what was taught, and where -->\n    <div class=\"in-grid\">\n      <section [style.animation-delay.ms]=\"420\" class=\"in-anim in-card\">\n        <div class=\"in-card-title\">Time by Subject</div>\n        <div class=\"in-card-sub\">Share of session time by subject</div>\n        <div class=\"in-donut-wrap\">\n          <svg class=\"in-donut\" viewBox=\"0 0 140 140\" role=\"img\" aria-label=\"Time by subject\">\n            <circle cx=\"70\" cy=\"70\" [attr.r]=\"donutRadius\" class=\"in-donut-track\"></circle>\n            <circle\n              *ngFor=\"let s of subjectDonut.segments; let i = index\"\n              class=\"in-donut-seg\"\n              cx=\"70\"\n              cy=\"70\"\n              [attr.r]=\"donutRadius\"\n              [attr.stroke]=\"s.color\"\n              [attr.stroke-dasharray]=\"s.dash\"\n              [attr.stroke-dashoffset]=\"s.offset\"\n              [style.animation-delay.ms]=\"300 + i * 90\"\n            >\n              <title>{{ s.label }}: {{ s.display }} ({{ s.percent }}%)</title>\n            </circle>\n          </svg>\n          <div class=\"in-donut-center\">\n            <div class=\"in-donut-total\">{{ subjectDonut.total }}</div>\n            <div class=\"in-muted\" title=\"Session time where content was used\">with content</div>\n          </div>\n        </div>\n        <div class=\"in-legend in-legend-compact\">\n          <div class=\"in-legend-item\" *ngFor=\"let s of subjectDonut.segments\">\n            <span class=\"in-dot\" [style.background-color]=\"s.color\"></span>\n            <span class=\"in-legend-label\" [title]=\"s.label\">{{ s.label }}</span>\n            <span class=\"in-legend-value\">{{ s.percent }}%</span>\n          </div>\n        </div>\n      </section>\n      <section [style.animation-delay.ms]=\"480\" class=\"in-anim in-card\">\n        <div class=\"in-card-title\">Classroom Usage</div>\n        <div class=\"in-card-sub\">Each classroom's utilisation by time</div>\n        <div class=\"in-tiles\">\n          <div\n            class=\"in-tile\"\n            *ngFor=\"let r of roomTiles; let i = index\"\n            [class.in-tile-idle]=\"r.idle\"\n            [class.in-tile-dark]=\"r.dark\"\n            [style.grid-column]=\"'span ' + r.span\"\n            [style.background-color]=\"r.shade\"\n            [style.animation-delay.ms]=\"300 + i * 15\"\n            [title]=\"r.label + ': ' + r.display\"\n          >\n            <span class=\"in-tile-name\">\n              <svg class=\"in-tile-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><rect x=\"3\" y=\"4\" width=\"18\" height=\"12\" rx=\"2\" /><path d=\"M12 16v4M8 20h8\" /></svg>{{ r.label }}\n            </span>\n            <span class=\"in-tile-value\">{{ r.share }}%</span>\n          </div>\n        </div>\n        <div class=\"in-tiles-legend\">\n          <span class=\"in-tile in-tile-key in-tile-idle\"></span><span class=\"in-muted\">0% / not used</span>\n          <span class=\"in-scale\"></span><span class=\"in-muted\">Low \u2192 high utilisation</span>\n        </div>\n      </section>\n      <section [style.animation-delay.ms]=\"540\" class=\"in-anim in-card\">\n        <div class=\"in-card-title\">Time by Class</div>\n        <div class=\"in-card-sub\">Session time per class</div>\n        <div class=\"in-columns\">\n          <div class=\"in-column\" *ngFor=\"let g of gradeColumns; let i = index\" [title]=\"g.label + ': ' + g.display\">\n            <div class=\"in-column-track\">\n              <div class=\"in-column-bar\" [style.height.%]=\"g.percent\" [style.animation-delay.ms]=\"300 + i * 50\"></div>\n            </div>\n            <div class=\"in-column-label\">{{ g.short }}</div>\n          </div>\n        </div>\n        <div class=\"in-columns-caption\">Class</div>\n        <div class=\"in-column-top\" *ngIf=\"gradeColumns.length\">\n          <span class=\"in-muted\">Most time</span>\n          <ng-container *ngFor=\"let g of gradeColumns\">\n            <strong *ngIf=\"g.percent === 100\">{{ g.label }} \u00B7 {{ g.display }}</strong>\n          </ng-container>\n        </div>\n      </section>\n    </div>\n  </ng-container>\n\n</div>\n\n<ng-template #followLists>\n  <div class=\"in-follow-cols\">\n    <div class=\"in-follow-col\">\n      <div class=\"in-follow-label\">Teachers Not Active <span class=\"in-count\">{{ inactiveTeachers.length }}</span></div>\n      <ul class=\"in-name-list\" *ngIf=\"inactiveTeachers.length\">\n        <li *ngFor=\"let name of inactiveTeachers\">{{ name }}</li>\n      </ul>\n      <span class=\"in-muted\" *ngIf=\"inactiveTeachers.length === 0\">Every eligible teacher used the system today.</span>\n    </div>\n    <div class=\"in-follow-col\">\n      <div class=\"in-follow-label\">Classrooms Not Used <span class=\"in-count\">{{ idleRooms.length }}</span></div>\n      <ul class=\"in-name-list in-room-list\" *ngIf=\"idleRooms.length\">\n        <li *ngFor=\"let room of idleRooms\">{{ room }}</li>\n      </ul>\n      <span class=\"in-muted\" *ngIf=\"idleRooms.length === 0\">Every classroom was used today.</span>\n    </div>\n  </div>\n</ng-template>\n\n<!-- each section passes its own bar colour so neighbouring cards are easy to tell apart -->\n<ng-template #bars let-items let-color=\"color\">\n  <div class=\"in-bars\">\n    <div class=\"in-muted\" *ngIf=\"items.length === 0\">No data</div>\n    <div class=\"in-bar-row\" *ngFor=\"let item of items; let i = index\">\n      <div class=\"in-bar-head\">\n        <span class=\"in-bar-label\" [title]=\"item.label\">{{ item.label }}</span>\n        <span class=\"in-bar-value\">{{ item.display }}</span>\n      </div>\n      <div class=\"in-bar-sub\" *ngIf=\"item.sub\">{{ item.sub }}</div>\n      <div class=\"in-bar-track\"><div class=\"in-bar-fill\" [style.width.%]=\"item.percent\" [style.background-color]=\"color\" [style.animation-delay.ms]=\"300 + i * 60\"></div></div>\n    </div>\n  </div>\n</ng-template>\n",
+                    styles: ["@import url(\"https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap\");.in-page{font-family:Poppins,Segoe UI,Arial,sans-serif;font-size:13px;color:#1e2437;padding:0 20px 24px;box-sizing:border-box;text-align:left;overflow-y:auto;background:#eef2f9}.in-sticky{position:sticky;top:0;z-index:2;margin:0 -20px 16px;padding:16px 20px;background:#eef2f9;box-shadow:0 6px 12px -10px rgba(30,36,55,.25)}.in-heading{position:relative;margin-bottom:14px;min-height:34px;display:flex;align-items:center;justify-content:center}.in-heading-text{font-size:17px;font-weight:600;color:#1e2437;text-align:center;padding:0 150px}.in-pdf-btn{position:absolute;right:0;top:50%;transform:translateY(-50%);height:34px;padding:0 16px;border:none;border-radius:10px;background:#5b84ec;color:#fff;font:500 13px Poppins,Segoe UI,Arial,sans-serif;cursor:pointer;box-shadow:0 4px 10px rgba(91,132,236,.22)}.in-pdf-btn:hover:not([disabled]){background:#406fe9}.in-pdf-btn[disabled]{cursor:progress;background:#b3c6f5;box-shadow:none}.in-page.in-exporting{height:auto!important;overflow:visible}.in-page.in-exporting *,.in-page.in-exporting :after,.in-page.in-exporting :before{-webkit-animation:none!important;animation:none!important}.in-page.in-exporting .in-sticky{position:static;box-shadow:none}.in-page.in-exporting .in-chips{max-height:none;overflow:visible}.in-page.in-exporting .in-print-only{display:block}.in-page.in-exporting .in-follow-details{display:none}.in-card-sub,.in-muted{font-size:12px;color:#8a93a6}.in-empty{padding:40px;text-align:center;color:#8a93a6}.in-kpis{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}.in-kpi{position:relative;min-width:0;padding:12px 14px;border-radius:14px;background:#fff;box-shadow:0 1px 3px rgba(30,36,55,.06);color:#1e2437;box-sizing:border-box}.in-kpi.in-kpi-accent{background:#5b84ec;color:#fff}.in-kpi.in-kpi-accent .in-kpi-hint,.in-kpi.in-kpi-accent .in-kpi-label{color:hsla(0,0%,100%,.85)}.in-kpi.in-kpi-accent .in-kpi-icon{border-color:#fff;color:#fff}.in-kpi-icon{position:absolute;top:12px;right:12px;width:20px;height:20px;border:2px solid #1e2437;border-radius:50%;box-sizing:border-box;display:flex;align-items:center;justify-content:center;color:#1e2437}.in-kpi-icon svg{width:10px;height:10px}.in-kpi-label{padding-right:24px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12px;font-weight:500;color:rgba(30,36,55,.75)}.in-kpi-value{white-space:nowrap;font-size:22px;font-weight:700;margin:2px 0;font-variant-numeric:tabular-nums}.in-kpi-hint{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:11px;color:rgba(30,36,55,.7)}.in-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.in-grid+.in-grid{margin-top:16px}.in-card{background:#fff;border-radius:16px;box-shadow:0 1px 3px rgba(30,36,55,.06);padding:18px 20px;min-width:0;box-sizing:border-box}.in-card,.in-wide{display:flex;flex-direction:column}.in-wide{grid-column:span 2}.in-card-title{font-size:16px;font-weight:600;color:#1e2437}.in-card-sub{margin:2px 0 16px}.in-count{display:inline-block;min-width:22px;padding:0 8px;margin-left:6px;border-radius:11px;background:#fff6de;color:#a46b00;font-size:12px;font-weight:600;text-align:center;line-height:22px;vertical-align:middle}.in-hours{flex:1 1 auto;display:flex;align-items:stretch;gap:4px;min-height:200px;max-height:320px}.in-hour{flex:1 1 0;flex-direction:column;min-width:0}.in-hour,.in-hour-value{display:flex;align-items:center}.in-hour-value{gap:3px;font-size:12px;font-weight:600;color:#1e2437;margin-bottom:6px;white-space:nowrap}.in-hour-icon{width:12px;height:12px;color:#8a93a6;flex:0 0 auto}.in-hour-track{flex:1 1 auto;max-width:44px;display:flex;align-items:flex-end;background:#f1f4f9;overflow:hidden}.in-hour-bar,.in-hour-track{width:100%;border-radius:999px}.in-hour-bar{min-height:6px;background:#fbe0a0}.in-util-legend{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:12px}.in-util-scale{width:90px;height:8px;border-radius:999px;background:linear-gradient(90deg,#f38e86,#f5c447,#92c15c)}.in-hour-label{margin-top:8px;font-size:10px;color:#8a93a6;white-space:nowrap}.in-bars{display:flex;flex-direction:column;gap:12px}.in-bar-head{display:flex;justify-content:space-between;gap:12px}.in-bar-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500}.in-bar-value{flex:0 0 auto;color:#1e2437;font-weight:600;font-variant-numeric:tabular-nums}.in-bar-sub{font-size:11px;color:#8a93a6}.in-bar-track{height:8px;margin-top:6px;background:#f1f4f9;border-radius:999px;overflow:hidden}.in-bar-fill{height:100%;border-radius:999px;background:#5b84ec}.in-donut-wrap{position:relative;width:150px;height:150px;margin:0 auto 14px}.in-donut{width:100%;height:100%;transform:rotate(-90deg)}.in-donut circle{fill:none;stroke-width:18}.in-donut-track{stroke:#f1f4f9}.in-donut-seg{stroke-linecap:butt;transition:stroke-width .15s;-webkit-animation:in-draw 1s cubic-bezier(.22,1,.36,1) both;animation:in-draw 1s cubic-bezier(.22,1,.36,1) both}.in-donut-seg:hover{stroke-width:22}@-webkit-keyframes in-draw{0%{stroke-dasharray:0 400}}@keyframes in-draw{0%{stroke-dasharray:0 400}}.in-donut-center{position:absolute;inset:0;top:0;left:0;right:0;bottom:0;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none}.in-donut-total{font-size:18px;font-weight:700}.in-legend-compact{gap:6px}.in-legend-compact .in-legend-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.in-columns{flex:1 1 auto;display:flex;align-items:stretch;gap:5px;min-height:180px;max-height:340px}.in-column{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center}.in-column-track{flex:1 1 auto;width:100%;max-width:22px;display:flex;align-items:flex-end;background:#f1f4f9;border-radius:999px;overflow:hidden}.in-column-bar{width:100%;min-height:4px;border-radius:999px;background:#f3cb6c;-webkit-animation:in-grow-height .8s cubic-bezier(.22,1,.36,1) both;animation:in-grow-height .8s cubic-bezier(.22,1,.36,1) both}.in-column:hover .in-column-bar{background:#f0be46}.in-column-label{margin-top:6px;font-size:11px;font-weight:500;color:#8a93a6;white-space:nowrap}.in-columns-caption{text-align:center;font-size:11px;color:#8a93a6;margin-top:2px}.in-column-top{margin-top:14px;padding:10px 12px;border-radius:10px;background:#fff6de;display:flex;justify-content:space-between;gap:8px;font-size:12px}.in-tiles{display:grid;grid-auto-flow:row dense;grid-template-columns:repeat(auto-fill,minmax(58px,1fr));gap:8px}.in-tile{height:58px;border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:#162b57;cursor:default;-webkit-animation:in-pop .4s ease-out both;animation:in-pop .4s ease-out both;transition:transform .12s}.in-tile:hover{transform:scale(1.06)}.in-tile.in-tile-dark{color:#fff}.in-tile.in-tile-idle{background:#f4f7fd;border:2px solid #162b57;color:#162b57}@-webkit-keyframes in-pop{0%{opacity:0;transform:scale(.7)}}@keyframes in-pop{0%{opacity:0;transform:scale(.7)}}.in-tile-icon{width:13px;height:13px;margin-right:4px;vertical-align:-1px}.in-tile-name{max-width:100%;padding:0 4px;box-sizing:border-box;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:15px;font-weight:700}.in-tile-value{font-size:12px;font-weight:500;opacity:.85}.in-tiles-legend{display:flex;align-items:center;gap:6px;margin-top:14px;flex-wrap:wrap}.in-tiles-legend .in-tile-key{width:14px;height:14px;border-radius:4px;-webkit-animation:none;animation:none}.in-scale{width:46px;height:10px;margin-left:8px;border-radius:999px;background:linear-gradient(90deg,#eaf1fb,#162b57)}.in-primary .in-attention{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.in-primary .in-attention-item{gap:14px;padding:12px 14px}.in-primary .in-attention-value{flex:0 0 42px;height:42px;line-height:42px;border-radius:10px;background:#ef6a3a;color:#fff;font-size:16px}.in-primary .in-attention-value.in-zero{background:#8bc34a;color:#fff}.in-primary .in-attention-label{display:flex;align-items:center;gap:6px;font-size:14px}.in-primary .in-attention-item .in-muted{font-size:12px;margin-top:2px}.in-inline-icon{display:inline-flex;color:#ef6a3a}.in-inline-icon svg{width:16px;height:16px}.in-follow{flex:1 1 auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:18px}.in-follow-tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-width:0;padding:18px 20px;border:none;border-radius:32px;font:inherit;color:inherit;text-align:center;cursor:pointer;transition:transform .15s,box-shadow .15s}.in-follow-tile:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(30,36,55,.08)}.in-follow-teachers{background:#eaf0fd}.in-follow-teachers .in-follow-icon{color:#5b84ec}.in-follow-rooms{background:#eaf0fd}.in-follow-rooms .in-follow-icon{color:#5b84ec}.in-follow-icon{margin-bottom:6px;display:flex;align-items:center;justify-content:center}.in-follow-icon svg{width:40px;height:40px}.in-follow-number{font-size:34px;font-weight:700;line-height:1.1;font-variant-numeric:tabular-nums}.in-follow-tile>.in-muted{font-size:15px;color:#1e2437}.in-follow-label-big{font-size:18px;font-weight:600}.in-avatars{flex-wrap:wrap;margin-top:12px;padding-left:8px}.in-avatar,.in-avatars{display:flex;justify-content:center}.in-avatar{width:34px;height:34px;margin-left:-6px;border-radius:50%;border:1.5px solid #5b84ec;background:#fff;color:#3f5fae;font-size:11px;font-weight:600;align-items:center;box-sizing:border-box}.in-avatar-more{background:#5b84ec;color:#fff}.in-room-chips{flex-wrap:wrap;gap:6px;margin-top:12px}.in-room-chip,.in-room-chips{display:flex;justify-content:center}.in-room-chip{min-width:34px;height:34px;padding:0 10px;border-radius:999px;border:1.5px solid #5b84ec;background:#fff;color:#5b84ec;font-size:12px;font-weight:600;align-items:center;box-sizing:border-box}.in-room-chip.in-avatar-more{background:#5b84ec;color:#fff}.in-follow-foot{display:flex;justify-content:flex-end;margin-top:10px}.in-link-btn{border:none;background:transparent;padding:6px 4px;font:600 13px Poppins,Segoe UI,Arial,sans-serif;color:#5b84ec;cursor:pointer}.in-link-btn:hover{text-decoration:underline}.in-print-only{display:none;margin-top:16px}.in-follow-compact{flex:none}.in-follow-compact .in-follow-tile{flex-direction:row;justify-content:flex-start;gap:12px;padding:10px 16px;text-align:left}.in-follow-compact .in-follow-icon{margin:0}.in-follow-compact .in-follow-icon svg{width:24px;height:24px}.in-follow-compact .in-follow-number{font-size:22px}.in-follow-compact .in-avatars,.in-follow-compact .in-follow-tile>.in-muted,.in-follow-compact .in-room-chips{display:none}.in-follow-details{flex:none;margin-top:12px;padding:14px 16px;border:1px solid #eef1f6;border-radius:12px;-webkit-animation:in-rise .3s ease-out both;animation:in-rise .3s ease-out both}.in-link-chevron{display:inline-block;width:6px;height:6px;margin-left:6px;border-right:2px solid;border-bottom:2px solid;transform:rotate(45deg) translateY(-2px);transition:transform .2s}.in-link-chevron.in-link-chevron-up{transform:rotate(-135deg) translateY(-1px)}.in-follow-cols{display:grid;grid-template-columns:3fr 1fr;gap:24px}.in-follow-col{min-width:0}.in-follow-col+.in-follow-col{border-left:1px solid #e3e8f0;padding-left:24px}.in-follow-label{font-size:13px;font-weight:600;margin:2px 0 10px}.in-name-list{margin:0;padding:0;list-style:none;-moz-column-width:160px;column-width:160px;-moz-column-gap:20px;column-gap:20px}.in-name-list li{position:relative;padding:3px 0 3px 14px;-moz-column-break-inside:avoid;break-inside:avoid;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.in-name-list li:before{content:\"\";position:absolute;left:0;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:#a9bffa}.in-room-list li:before{background:#fbe0a0}.in-attention{display:flex;flex-direction:column;gap:10px}.in-attention-item{display:flex;align-items:center;gap:12px;padding:8px;border-radius:12px;background:#f7f9fc}.in-attention-value{flex:0 0 44px;height:40px;line-height:40px;text-align:center;border-radius:10px;background:#fbe0a0;color:#1e2437;font-size:16px;font-weight:700}.in-attention-value.in-zero{background:#eaf0fd;color:#5b84ec}.in-attention-label{font-weight:600}.in-stack{display:flex;height:14px;border-radius:999px;overflow:hidden;background:#f1f4f9;margin-bottom:16px}.in-stack-part{height:100%;box-shadow:inset -2px 0 0 #fff}.in-legend{display:flex;flex-direction:column;gap:8px}.in-legend-item{display:flex;align-items:center;gap:10px}.in-dot{flex:0 0 auto;width:10px;height:10px;border-radius:3px}.in-legend-label{flex:1 1 auto}.in-legend-value{font-weight:600;color:#1e2437;font-variant-numeric:tabular-nums}.in-chips{display:flex;flex-wrap:wrap;gap:8px;max-height:230px;overflow:auto}.in-chip{padding:5px 12px;border-radius:999px;background:#eaf0fd;color:#3f5fae;font-size:12px;font-weight:500}@-webkit-keyframes in-rise{0%{opacity:0;transform:translateY(14px)}}@keyframes in-rise{0%{opacity:0;transform:translateY(14px)}}@-webkit-keyframes in-fade-right{0%{opacity:0;transform:translateX(-10px)}}@keyframes in-fade-right{0%{opacity:0;transform:translateX(-10px)}}@-webkit-keyframes in-grow-width{0%{width:0}}@keyframes in-grow-width{0%{width:0}}@-webkit-keyframes in-grow-height{0%{height:0}}@keyframes in-grow-height{0%{height:0}}.in-anim{-webkit-animation:in-rise .5s cubic-bezier(.22,1,.36,1) both;animation:in-rise .5s cubic-bezier(.22,1,.36,1) both}.in-anim-row{-webkit-animation:in-fade-right .45s ease-out both;animation:in-fade-right .45s ease-out both}.in-bar-fill,.in-stack-part{-webkit-animation:in-grow-width .9s cubic-bezier(.22,1,.36,1) both;animation:in-grow-width .9s cubic-bezier(.22,1,.36,1) both}.in-hour-bar{-webkit-animation:in-grow-height .8s cubic-bezier(.22,1,.36,1) both;animation:in-grow-height .8s cubic-bezier(.22,1,.36,1) both}@media (prefers-reduced-motion:reduce){.in-anim,.in-anim-row,.in-bar-fill,.in-column-bar,.in-donut-seg,.in-hour-bar,.in-stack-part,.in-tile{-webkit-animation:none;animation:none}}@media (max-width:900px){.in-kpis{grid-template-columns:repeat(3,minmax(0,1fr))}}@media (max-width:1100px){.in-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.in-grid>.in-card:last-child:nth-child(odd),.in-wide+.in-card{grid-column:span 2}}@media (max-width:760px){.in-heading-text{padding:0;text-align:left;flex:1 1 auto}.in-pdf-btn{position:static;transform:none}.in-grid>.in-card:last-child:nth-child(odd),.in-wide,.in-wide+.in-card{grid-column:auto}.in-follow,.in-follow-cols,.in-primary .in-attention{grid-template-columns:1fr}.in-follow-col+.in-follow-col{border-left:none;padding-left:0;border-top:1px solid #e3e8f0;padding-top:16px}.in-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.in-grid{grid-template-columns:1fr}}"]
+                },] }
+    ];
+    InsightsComponent.ctorParameters = function () { return [
+        { type: PrincipalDashboardLibV2Service },
+        { type: i0.ElementRef }
+    ]; };
+    InsightsComponent.propDecorators = {
+        data: [{ type: i0.Input }],
+        fitHeight: [{ type: i0.HostListener, args: ['window:resize',] }],
+        closeDetails: [{ type: i0.HostListener, args: ['document:keydown.escape',] }]
     };
 
     var PrincipalDashboardLibV2Module = /** @class */ (function () {
@@ -3367,7 +4517,9 @@
                         TableviewComponent,
                         PrincipalDashboardLibV2Component,
                         FullTableViewComponent,
-                        SmallTableViewComponent
+                        SmallTableViewComponent,
+                        TimelineComponent,
+                        InsightsComponent
                     ],
                     imports: [
                         common.CommonModule,
@@ -3399,6 +4551,8 @@
     exports.ɵf = TableviewComponent;
     exports.ɵg = FullTableViewComponent;
     exports.ɵh = SmallTableViewComponent;
+    exports.ɵi = TimelineComponent;
+    exports.ɵj = InsightsComponent;
 
     Object.defineProperty(exports, '__esModule', { value: true });