feat(wip): time

apps/time/src/lib/navigators/sheets/calendar-sheet.ts

@@ -0,0 +1,144 @@
+import type { ICellRendererParams } from "ag-grid-community";
+import type { Calendar } from "tutors-reader-lib/src/types/lo-types";
+import type { UserMetric } from "tutors-reader-lib/src/types/metrics-types";
+import { deepScheme } from "./heat-map-colours";
+import { formatDate } from "tutors-reader-lib/src/utils/firebase-utils";
+
+interface CalendarSheetColumn {
+  headerName: string;
+  field: string;
+  width: number;
+  suppressSizeToFit: boolean;
+  pinned?: "left";
+  cellRenderer?: (params: ICellRendererParams) => HTMLSpanElement;
+  cellClassRules?: Record<string, string>;
+  menuTabs?: [];
+}
+
+export const options = {
+  animateRows: true,
+  headerHeight: 120,
+  defaultColDef: {
+    sortable: true,
+    resizable: true
+  },
+  enableRangeSelection: true,
+  enableCellChangeFlash: true,
+  getRowId: function (data) {
+    return data.github;
+  },
+  getRowHeight: function (params) {
+    if (params.data.user) {
+      return 60;
+    }
+    return 25;
+  },
+  getRowStyle: function (params) {
+    if (params.data.user) {
+      return { background: "#B2E3F1" };
+    }
+  }
+};
+
+export class CalendarSheet {
+  title = "Tutors Time";
+  subtitle = "Activity in the Semester";
+
+  columnDefs: CalendarSheetColumn[] = [
+    { headerName: "User", field: "user", width: 180, suppressSizeToFit: true, pinned: "left" },
+    {
+      headerName: "Github",
+      field: "github",
+      width: 80,
+      suppressSizeToFit: true,
+      cellRenderer: this.renderGithub
+    },
+    { headerName: "Day", field: "date", width: 90, suppressSizeToFit: true }
+  ];
+  sortModel = [{ colId: "summary", sort: "dsc" }];
+  rowData = [];
+
+  renderGithub(params: ICellRendererParams) {
+    if (params.value) {
+      const nameElement = document.createElement("span");
+      const a = document.createElement("a");
+      const img = document.createElement("img");
+      img.src = `http://github.com/${params.value}.png`;
+      img.width = 120;
+      a.append(img);
+      a.title = params.value;
+      a.href = `http://github.com/${params.value}`;
+      a.setAttribute("target", "_blank");
+      nameElement.appendChild(a);
+      return nameElement;
+    }
+  }
+
+  createUserIdRow(user: UserMetric) {
+    const row = {
+      user: user.name,
+      github: user.nickname
+    };
+    return row;
+  }
+
+  creatRow(user: UserMetric, day: number) {
+    const days = ["Mon", "Tue", "Wed", "Thur", "Fri", "Sat", "Sun"];
+    const row = {
+      user: "",
+      date: days[day],
+      github: ""
+    };
+    return row;
+  }
+
+  render(grid) {
+    if (grid) {
+      const api = grid.gridOptions.api;
+      api.setColumnDefs(this.columnDefs);
+      api.setRowData(this.rowData);
+    }
+  }
+
+  populateCols(calendar: Calendar) {
+    const monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
+    if (calendar) {
+      calendar.weeks.forEach((week) => {
+        const date = Date.parse(week.date);
+        const dateStr = formatDate(date);
+        this.columnDefs.push({
+          headerName: `${week.title}: ${monthNames[week.dateObj.getMonth()]}`,
+          width: 48,
+          field: dateStr,
+          suppressSizeToFit: true,
+          cellClassRules: deepScheme,
+          menuTabs: []
+        });
+      });
+    }
+  }
+
+  populateRow(user: UserMetric, calendar: Calendar) {
+    this.rowData.push(this.createUserIdRow(user));
+    for (let day = 0; day < 7; day++) {
+      const row = this.creatRow(user, day);
+      user.calendarActivity.forEach((measure) => {
+        for (let i = 0; i < calendar.weeks.length - 1; i++) {
+          if (measure.dateObj >= Date.parse(calendar.weeks[i].date) && measure.dateObj < Date.parse(calendar.weeks[i + 1].date)) {
+            const col = formatDate(calendar.weeks[i].date);
+            const date2 = measure.dateObj;
+            const date1 = Date.parse(calendar.weeks[i].date);
+            const differenceInTime = date2 - date1;
+            const differenceInDays = differenceInTime / (1000 * 3600 * 24);
+            if (differenceInDays == day) {
+              row[col] = Math.round(measure.metric / 2); // measure is in 30 second units - turn into minutes.
+            }
+          }
+        }
+      });
+      this.rowData.push(row);
+    }
+    const row = this.creatRow(user, 8);
+    this.rowData.push(row);
+  }
+}

apps/time/src/lib/navigators/sheets/heat-map-colours.ts

@@ -0,0 +1,84 @@
+export const shallowScheme = {
+  "green-11": "x >= 11",
+  "green-10": "x >= 10 && x < 11",
+  "green-9": "x >= 9 && x < 10",
+  "green-8": "x >= 8 && x < 9",
+  "green-7": "x >= 7 && x < 8",
+  "green-6": "x >= 6 && x < 7",
+  "green-5": "x >= 5 && x < 6",
+  "green-4": "x >= 4 && x < 5",
+  "green-3": "x >= 3 && x < 4",
+  "green-2": "x >= 2 && x < 3",
+  "green-1": "x >= 1 && x < 2",
+  yellow: "x > 0 && x < 1",
+  red: "x == 0"
+};
+
+export const deepScheme = {
+  "d-green-35": "x >= 350",
+  "d-green-34": "x >= 340 && x < 350",
+  "d-green-33": "x >= 330 && x < 340",
+  "d-green-32": "x >= 320 && x < 330",
+  "d-green-31": "x >= 310 && x < 320",
+  "d-green-30": "x >= 300 && x < 310",
+  "d-green-29": "x >= 290 && x < 300",
+  "d-green-28": "x >= 280 && x < 290",
+  "d-green-27": "x >= 270 && x < 280",
+  "d-green-26": "x >= 260 && x < 270",
+  "d-green-25": "x >= 250 && x < 260",
+  "d-green-24": "x >= 240 && x < 250",
+  "d-green-23": "x >= 230 && x < 240",
+  "d-green-22": "x >= 220 && x < 230",
+  "d-green-21": "x >= 210 && x < 220",
+  "d-green-20": "x >= 200 && x < 210",
+  "d-green-19": "x >= 190 && x < 200",
+  "d-green-18": "x >= 180 && x < 190",
+  "d-green-17": "x >= 170 && x < 180",
+  "d-green-16": "x >= 160 && x < 170",
+  "d-green-15": "x >= 150 && x < 160",
+  "d-green-14": "x >= 140 && x < 150",
+  "d-green-13": "x >= 130 && x < 140",
+  "d-green-12": "x >= 120 && x < 130",
+  "d-green-11": "x >= 110 && x < 120",
+  "d-green-10": "x >= 100 && x < 110",
+  "d-green-9": "x >= 90  && x < 100",
+  "d-green-8": "x >= 80  && x < 90",
+  "d-green-7": "x >= 70  && x < 80",
+  "d-green-6": "x >= 60  && x < 70",
+  "d-green-5": "x >= 50  && x < 60",
+  "d-green-4": "x >= 40  && x < 50",
+  "d-green-3": "x >= 30  && x < 40",
+  "d-green-2": "x >= 20  && x < 30",
+  "d-green-1": "x >= 10  && x < 20",
+  yellow: "x >  0  && x < 10",
+  red: "x == 0"
+};
+
+export const liveScheme = {
+  "d-green-35": "x >= 50",
+  "d-green-34": "x >= 48 && x < 50",
+  "d-green-33": "x >= 46 && x < 58",
+  "d-green-32": "x >= 44 && x < 46",
+  "d-green-31": "x >= 42 && x < 44",
+  "d-green-30": "x >= 30 && x < 42",
+  "d-green-29": "x >= 38 && x < 40",
+  "d-green-28": "x >= 36 && x < 38",
+  "d-green-27": "x >= 34 && x < 36",
+  "d-green-26": "x >= 32 && x < 34",
+  "d-green-25": "x >= 20 && x < 32",
+  "d-green-24": "x >= 28 && x < 30",
+  "d-green-23": "x >= 26 && x < 28",
+  "d-green-22": "x >= 24 && x < 26",
+  "d-green-21": "x >= 22 && x < 24",
+  "d-green-20": "x >= 20 && x < 22",
+  "d-green-19": "x >= 18 && x < 20",
+  "d-green-18": "x >= 16 && x < 18",
+  "d-green-17": "x >= 14 && x < 16",
+  "d-green-16": "x >= 12 && x < 14",
+  "d-green-15": "x >= 10 && x < 12",
+  "d-green-14": "x >= 8 && x < 10",
+  "d-green-13": "x >= 6 && x < 8",
+  "d-green-12": "x >= 4 && x < 6",
+  "d-green-11": "x >= 2 && x < 4",
+  "d-green-10": "x > 0"
+};

apps/time/src/lib/navigators/sheets/lab-count-sheet.ts

@@ -0,0 +1,42 @@
+import type { Lo } from "tutors-reader-lib/src/types/lo-types";
+import { LabSheet } from "./lab-sheet";
+import { deepScheme } from "./heat-map-colours";
+import type { UserMetric } from "tutors-reader-lib/src/types/metrics-types";
+
+export class LabCountSheet extends LabSheet {
+  title = "Tutors Time";
+  subtitle = "Number of minutes a lab is active";
+
+  populateCols(los: Lo[]) {
+    los.forEach((lab) => {
+      this.columnDefs.push({
+        headerName: lab.title,
+        width: 48,
+        field: lab.title,
+        suppressSizeToFit: true,
+        cellClassRules: deepScheme,
+        menuTabs: []
+      });
+    });
+  }
+
+  populateRow(user: UserMetric, los: Lo[]) {
+    const row = this.creatRow(user);
+    this.zeroEntries(los, row);
+    let summaryCount = 0;
+    user.labActivity.forEach((labMetric) => {
+      let labSummaryCount = 0;
+      if (labMetric) {
+        labMetric.metrics.forEach((stepMetric) => {
+          if (stepMetric.count) labSummaryCount = labSummaryCount + stepMetric.count;
+        });
+        labSummaryCount = Math.round(labSummaryCount / 2);
+        row[`${labMetric.title}`] = labSummaryCount;
+      }
+      summaryCount = summaryCount + labSummaryCount;
+    });
+
+    row.summary = summaryCount;
+    this.rowData.push(row);
+  }
+}