add: Add TEE In Those Days Chart to UserPage.

Author: harukaeru

atcoder-problems-frontend/src/pages/UserPage/ProgressChartBlock/index.tsx

@@ -27,6 +27,7 @@ import { useLocalStorage } from "../../../utils/LocalStorage";
 import {
   countUniqueAcByDate,
   countTeeByDate,
+  countTeeInTheOldDays,
 } from "../../../utils/StreakCounter";
 import Submission from "../../../interfaces/Submission";
 import { ProblemId } from "../../../interfaces/Status";
@@ -146,6 +147,8 @@ export const ProgressChartBlock: React.FC<Props> = (props) => {
     return list;
   }, [] as { dateSecond: number; count: number }[]);
 
+  const teeInTheOldDays = countTeeInTheOldDays(dailyTeeCount);
+
   const dateColorCountMap = Array.from(submissionsByProblem.values())
     .map((submissionsOfProblem) => {
       const accepted = submissionsOfProblem
@@ -277,6 +280,11 @@ export const ProgressChartBlock: React.FC<Props> = (props) => {
       </Row>
       <TeeChart climbingData={teeClimbing} />
 
+      <Row className="my-2 border-bottom">
+        <h1>TEE In The Old Days</h1>
+      </Row>
+      <TeeChart climbingData={teeInTheOldDays} />
+
       <Row className="my-2 border-bottom">
         <h1>Heatmap</h1>
       </Row>

atcoder-problems-frontend/src/utils/StreakCounter.ts

@@ -111,3 +111,43 @@ export const countTeeByDate = (
     .map(([dateLabel, count]) => ({ dateLabel, count }))
     .sort((a, b) => a.dateLabel.localeCompare(b.dateLabel));
 };
+
+export const countTeeInTheOldDays = (
+  dailyTeeCount: {
+    dateLabel: string;
+    count: number;
+  }[]
+) => {
+  const DURATION = 30;
+
+  const minDateLabel = dailyTeeCount[0].dateLabel;
+  const maxDateLabel = dailyTeeCount[dailyTeeCount.length - 1].dateLabel;
+  const dateDelta =
+    (+new Date(maxDateLabel) - +new Date(minDateLabel)) / 1000 / 86400;
+
+  const differentiatedTees = Array.from(Array(dateDelta)).map((__, i) => {
+    const nextDate = new Date(minDateLabel);
+    nextDate.setDate(nextDate.getDate() + i);
+    const nextDateLabel = nextDate.toISOString().substring(0, 10);
+    const found = dailyTeeCount.find((tee) => tee.dateLabel === nextDateLabel);
+    if (found) {
+      return found;
+    } else {
+      return { dateLabel: nextDateLabel, count: 0 };
+    }
+  });
+
+  return differentiatedTees
+    .map(({ dateLabel }, i) => {
+      const dateSecond = parseDateLabel(dateLabel).unix();
+      const begin = Math.max(i - (DURATION - 1), 0);
+      const total = differentiatedTees
+        .slice(begin, i + 1)
+        .reduce((tot, data) => data.count + tot, 0);
+      if (!total) {
+        return null;
+      }
+      return { dateSecond, count: total };
+    })
+    .filter((data) => !!data) as { dateSecond: number; count: number }[];
+};