feat(account page): change test activity graph starting day depending on the browser locale (@fehmer) (monkeytypegame#6385)

implements monkeytypegame#6356

Author: fehmer

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

@@ -0,0 +1,87 @@
+import * as DateAndTime from "../../src/ts/utils/date-and-time";
+
+describe("date-and-time", () => {
+  const testCases = [
+    { locale: "en-US", firstDayOfWeek: 0 },
+    { locale: "en", firstDayOfWeek: 0 },
+    { locale: "de-DE", firstDayOfWeek: 1 },
+    { locale: "en-DE", firstDayOfWeek: 1, firefoxFirstDayOfWeek: 0 },
+    { locale: "de-AT", firstDayOfWeek: 1 },
+    { locale: "ps-AF", firstDayOfWeek: 6, firefoxFirstDayOfWeek: 0 },
+    { locale: "de-unknown", firstDayOfWeek: 1 },
+    { locale: "xx-yy", firstDayOfWeek: 1, firefoxFirstDayOfWeek: 0 },
+  ];
+
+  describe("getFirstDayOfTheWeek", () => {
+    const languageMock = vi.spyOn(window.navigator, "language", "get");
+    const localeMock = vi.spyOn(Intl, "Locale");
+
+    beforeEach(() => {
+      languageMock.mockReset();
+      localeMock.mockReset();
+    });
+
+    it("fallback to sunday for missing language", () => {
+      //GIVEN
+      languageMock.mockReturnValue(null as any);
+
+      //WHEN / THEN
+      expect(DateAndTime.getFirstDayOfTheWeek()).toEqual(0);
+    });
+
+    describe("with weekInfo", () => {
+      it.for(testCases)(`$locale`, ({ locale, firstDayOfWeek }) => {
+        //GIVEN
+        languageMock.mockReturnValue(locale);
+        localeMock.mockImplementationOnce(
+          () => ({ weekInfo: { firstDay: firstDayOfWeek } } as any)
+        );
+
+        //WHEN/THEN
+        expect(DateAndTime.getFirstDayOfTheWeek()).toEqual(firstDayOfWeek);
+      });
+    });
+
+    describe("with getWeekInfo", () => {
+      it("with getWeekInfo on monday", () => {
+        languageMock.mockReturnValue("en-US");
+        localeMock.mockImplementationOnce(
+          () => ({ getWeekInfo: () => ({ firstDay: 1 }) } as any)
+        );
+
+        //WHEN/THEN
+        expect(DateAndTime.getFirstDayOfTheWeek()).toEqual(1);
+      });
+      it("with getWeekInfo on sunday", () => {
+        languageMock.mockReturnValue("en-US");
+        localeMock.mockImplementationOnce(
+          () => ({ getWeekInfo: () => ({ firstDay: 7 }) } as any)
+        );
+
+        //WHEN/THEN
+        expect(DateAndTime.getFirstDayOfTheWeek()).toEqual(0);
+      });
+    });
+
+    describe("without weekInfo (firefox)", () => {
+      beforeEach(() => {
+        localeMock.mockImplementationOnce(() => ({} as any));
+      });
+
+      it.for(testCases)(
+        `$locale`,
+        ({ locale, firstDayOfWeek, firefoxFirstDayOfWeek }) => {
+          //GIVEN
+          languageMock.mockReturnValue(locale);
+
+          //WHEN/THEN
+          expect(DateAndTime.getFirstDayOfTheWeek()).toEqual(
+            firefoxFirstDayOfWeek !== undefined
+              ? firefoxFirstDayOfWeek
+              : firstDayOfWeek
+          );
+        }
+      );
+    });
+  });
+});

frontend/__tests__/utils/date-and-time.spec.ts

@@ -1,6 +1,7 @@
 import type { Assertion, AsymmetricMatchersContaining } from "vitest";
+import { TestActivityDay } from "../src/ts/elements/test-activity-calendar";
 
-interface ActivityDayMatchers<R = MonkeyTypes.TestActivityDay> {
+interface ActivityDayMatchers<R = TestActivityDay> {
   toBeDate: (date: string) => ActivityDayMatchers<R>;
   toHaveTests: (tests: number) => ActivityDayMatchers<R>;
   toHaveLevel: (level?: string | number) => ActivityDayMatchers<R>;

frontend/__tests__/vitest.d.ts

@@ -309,24 +309,8 @@
         </div>
         <div class="activity"></div>
         <div class="months"></div>
-        <div class="daysFull">
-          <div></div>
-          <div><div class="text">monday</div></div>
-          <div></div>
-          <div><div class="text">wednesday</div></div>
-          <div></div>
-          <div><div class="text">friday</div></div>
-          <div></div>
-        </div>
-        <div class="days">
-          <div></div>
-          <div><div class="text">mon</div></div>
-          <div></div>
-          <div><div class="text">wed</div></div>
-          <div></div>
-          <div><div class="text">fri</div></div>
-          <div></div>
-        </div>
+        <div class="daysFull"></div>
+        <div class="days"></div>
         <div class="nodata hidden">No data found.</div>
       </div>
     </div>

frontend/src/html/pages/account.html

@@ -522,10 +522,6 @@
     font-size: var(--font-size);
   }
 
-  .days {
-    display: none;
-  }
-
   .daysFull {
     margin-right: 2rem;
   }
@@ -551,6 +547,10 @@
     }
   }
 
+  .days {
+    display: none;
+  }
+
   .nodata {
     grid-area: chart;
   }

frontend/src/styles/account.scss

@@ -29,8 +29,10 @@ import {
 } from "./constants/default-snapshot";
 import { getDefaultConfig } from "./constants/default-config";
 import { FunboxMetadata } from "../../../packages/funbox/src/types";
+import { getFirstDayOfTheWeek } from "./utils/date-and-time";
 
 let dbSnapshot: Snapshot | undefined;
+const firstDayOfTheWeek = getFirstDayOfTheWeek();
 
 export class SnapshotInitError extends Error {
   constructor(message: string, public responseCode: number) {
@@ -163,7 +165,8 @@ export async function initSnapshot(): Promise<Snapshot | number | boolean> {
     if (userData.testActivity !== undefined) {
       snap.testActivity = new ModifiableTestActivityCalendar(
         userData.testActivity.testsByDays,
-        new Date(userData.testActivity.lastDay)
+        new Date(userData.testActivity.lastDay),
+        firstDayOfTheWeek
       );
     }
 
@@ -1055,6 +1058,7 @@ export async function getTestActivityCalendar(
       dbSnapshot.testActivityByYear[year] = new TestActivityCalendar(
         testsByDays,
         lastDay,
+        firstDayOfTheWeek,
         true
       );
     }

frontend/src/ts/db.ts

@@ -11,16 +11,15 @@ import {
   startOfYear,
   differenceInWeeks,
   startOfMonth,
-  nextSunday,
-  previousSunday,
-  isSunday,
-  nextSaturday,
-  isSaturday,
   subWeeks,
   Interval,
+  toDate,
+  previousDay,
+  Day,
+  nextDay,
 } from "date-fns";
 
-type TestActivityDay = {
+export type TestActivityDay = {
   level: string;
   label?: string;
 };
@@ -35,12 +34,15 @@ export class TestActivityCalendar implements TestActivityCalendar {
   protected startDay: Date;
   protected endDay: Date;
   protected isFullYear: boolean;
+  public firstDayOfWeek: Day;
 
   constructor(
     data: (number | null | undefined)[],
     lastDay: Date,
+    firstDayOfWeek: Day,
     fullYear = false
   ) {
+    this.firstDayOfWeek = firstDayOfWeek;
     const local = new UTCDateMini(lastDay);
     const interval = this.getInterval(local, fullYear);
 
@@ -56,7 +58,9 @@ export class TestActivityCalendar implements TestActivityCalendar {
     if (!fullYear) {
       //show the last 52 weeks. Not using one year to avoid the graph to show 54 weeks
       start = addDays(subWeeks(end, 52), 1);
-      if (!isSunday(start)) start = previousSunday(start);
+      if (!this.isFirstDayOfWeek(start)) {
+        start = this.previousFirstDayOfWeek(start);
+      }
     }
 
     return { start, end };
@@ -91,11 +95,14 @@ export class TestActivityCalendar implements TestActivityCalendar {
       let start = i === 0 ? this.startDay : startOfMonth(month);
       let end = i === months.length - 1 ? this.endDay : endOfMonth(start);
 
-      if (!isSunday(start)) {
-        start = (i === 0 ? previousSunday : nextSunday)(start);
+      if (!this.isFirstDayOfWeek(start)) {
+        start =
+          i === 0
+            ? this.previousFirstDayOfWeek(start)
+            : this.nextFirstDayOfWeek(start);
       }
-      if (!isSaturday(end)) {
-        end = nextSaturday(end);
+      if (!this.isLastDayOfWeek(end)) {
+        end = this.nextLastDayOfWeek(end);
       }
 
       const weeks = differenceInWeeks(end, start, { roundingMethod: "ceil" });
@@ -124,7 +131,7 @@ export class TestActivityCalendar implements TestActivityCalendar {
     };
 
     //skip weekdays in the previous month
-    for (let i = 0; i < this.startDay.getDay(); i++) {
+    for (let i = 0; i < this.startDay.getDay() - this.firstDayOfWeek; i++) {
       result.push({
         level: "filler",
       });
@@ -148,7 +155,7 @@ export class TestActivityCalendar implements TestActivityCalendar {
     }
 
     //add weekdays missing
-    for (let i = this.endDay.getDay(); i < 6; i++) {
+    for (let i = this.endDay.getDay() - this.firstDayOfWeek; i < 6; i++) {
       result.push({
         level: "filler",
       });
@@ -178,6 +185,22 @@ export class TestActivityCalendar implements TestActivityCalendar {
     const mid = sum / trimmed.length;
     return [Math.floor(mid / 2), Math.round(mid), Math.round(mid * 1.5)];
   }
+
+  private isFirstDayOfWeek(date: Date): boolean {
+    return toDate(date).getDay() === this.firstDayOfWeek;
+  }
+  private previousFirstDayOfWeek(date: Date): Date {
+    return previousDay(date, this.firstDayOfWeek);
+  }
+  private nextFirstDayOfWeek(date: Date): Date {
+    return nextDay(date, this.firstDayOfWeek);
+  }
+  private isLastDayOfWeek(date: Date): boolean {
+    return toDate(date).getDay() === (this.firstDayOfWeek + 6) % 7;
+  }
+  private nextLastDayOfWeek(date: Date): Date {
+    return nextDay(date, ((this.firstDayOfWeek + 6) % 7) as Day);
+  }
 }
 
 export class ModifiableTestActivityCalendar
@@ -186,8 +209,8 @@ export class ModifiableTestActivityCalendar
 {
   private lastDay: Date;
 
-  constructor(data: (number | null)[], lastDay: Date) {
-    super(data, lastDay);
+  constructor(data: (number | null)[], lastDay: Date, firstDayOfWeek: Day) {
+    super(data, lastDay, firstDayOfWeek);
     this.lastDay = new UTCDateMini(lastDay);
   }
 
@@ -218,9 +241,14 @@ export class ModifiableTestActivityCalendar
   getFullYearCalendar(): TestActivityCalendar {
     const today = new Date();
     if (this.lastDay.getFullYear() !== new UTCDateMini(today).getFullYear()) {
-      return new TestActivityCalendar([], today, true);
+      return new TestActivityCalendar([], today, this.firstDayOfWeek, true);
     } else {
-      return new TestActivityCalendar(this.data, this.lastDay, true);
+      return new TestActivityCalendar(
+        this.data,
+        this.lastDay,
+        this.firstDayOfWeek,
+        true
+      );
     }
   }
 }

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

@@ -22,6 +22,7 @@ export function init(
 
   yearSelector = getYearSelector();
   initYearSelector("current", userSignUpDate?.getFullYear() || 2022);
+  updateLabels(calendar.firstDayOfWeek);
   update(calendar);
 }
 
@@ -128,3 +129,40 @@ function getYearSelector(): SlimSelect {
   });
   return yearSelector;
 }
+
+const daysDisplay = [
+  "sunday",
+  "monday",
+  "tuesday",
+  "wednesday",
+  "thursday",
+  "friday",
+  "saturday",
+];
+function updateLabels(firstDayOfWeek: number): void {
+  const days: (string | undefined)[] = [];
+  for (let i = 0; i < 7; i++) {
+    days.push(
+      i % 2 != firstDayOfWeek % 2
+        ? daysDisplay[(firstDayOfWeek + i) % 7]
+        : undefined
+    );
+  }
+
+  const buildHtml = (maxLength?: number): string => {
+    const shorten =
+      maxLength !== undefined
+        ? (it: string) => it.substring(0, maxLength)
+        : (it: string) => it;
+    return days
+      .map((it) =>
+        it !== undefined
+          ? `<div><div class="text">${shorten(it)}</div></div>`
+          : "<div></div>"
+      )
+      .join("");
+  };
+
+  $("#testActivity .daysFull").html(buildHtml());
+  $("#testActivity .days").html(buildHtml(3));
+}