impr: add total tests to test activity chart (@fehmer) (#5586)

frontend/__tests__/elements/test-activity-calendar.spec.ts

@@ -814,6 +814,23 @@ describe("test-activity-calendar.ts", () => {
       expect(days[370]).toBeFiller();
     });
   });
+  describe("getTotalTests", () => {
+    it("gets amount of tests", () => {
+      //GIVEN
+      const lastDate = getDate("2024-01-02");
+      const calendar = new ModifiableTestActivityCalendar(
+        [1, 2, 3, 4],
+        lastDate
+      );
+
+      //THEN
+      expect(calendar.getTotalTests()).toEqual(1 + 2 + 3 + 4);
+
+      //WHEN
+      const fullYear = calendar.getFullYearCalendar();
+      expect(fullYear.getTotalTests()).toEqual(3 + 4);
+    });
+  });
 });
 
 function getDate(date: string): Date {

frontend/src/html/pages/account.html

@@ -304,7 +304,7 @@
       <div class="wrapper">
         <div class="top">
           <div class="year"><select class="yearSelect"></select></div>
-          <!-- <div class="title">test activity</div> -->
+          <div class="title"></div>
           <div class="legend">
             <span>less</span>
             <div data-level="0"></div>

frontend/src/styles/account.scss

@@ -531,8 +531,8 @@
 
   .title {
     grid-area: title;
-    text-align: center;
-    // font-size: 1.5em;
+    text-align: left;
+    font-size: var(--font-size);
     color: var(--sub-color);
     align-self: center;
   }

frontend/src/ts/elements/test-activity-calendar.ts

@@ -145,6 +145,15 @@ export class TestActivityCalendar implements MonkeyTypes.TestActivityCalendar {
     return result;
   }
 
+  getTotalTests(): number {
+    const days = differenceInDays(this.endDay, this.startDay);
+    return (
+      this.data.slice(0, days).reduce((a, c) => {
+        return (a ?? 0) + (c ?? 0);
+      }, 0) ?? 0
+    );
+  }
+
   private getBuckets(): number[] {
     const filtered = this.data.filter(
       (it) => it !== null && it !== undefined

frontend/src/ts/elements/test-activity.ts

@@ -38,6 +38,12 @@ function update(calendar?: MonkeyTypes.TestActivityCalendar): void {
 
   updateMonths(calendar.getMonths());
   $("#testActivity .nodata").addClass("hidden");
+  const title = document.querySelector("#testActivity .title");
+  {
+    if (title !== null) {
+      title.innerHTML = calendar.getTotalTests() + " tests";
+    }
+  }
 
   for (const day of calendar.getDays()) {
     const elem = document.createElement("div");

frontend/src/ts/types/types.d.ts

@@ -454,6 +454,7 @@ declare namespace MonkeyTypes {
   type TestActivityCalendar = {
     getMonths: () => TestActivityMonth[];
     getDays: () => TestActivityDay[];
+    getTotalTests: () => number;
   };
 
   type ModifiableTestActivityCalendar = TestActivityCalendar & {