Merge pull request #1316 from harukaeru/tee_in_those_days_chart

add: Add TEE In Those Days Chart to UserPage.

Author: kenkoooo

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

@@ -27,6 +27,7 @@ import { useLocalStorage } from "../../../utils/LocalStorage";
 import {
   countUniqueAcByDate,
   countTeeByDate,
+  countTeeMovingAverage,
 } 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 teeMovingAverage = countTeeMovingAverage(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 Moving Average (30 days)</h1>
+      </Row>
+      <TeeChart climbingData={teeMovingAverage} />
+
       <Row className="my-2 border-bottom">
         <h1>Heatmap</h1>
       </Row>

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

@@ -111,3 +111,49 @@ export const countTeeByDate = (
     .map(([dateLabel, count]) => ({ dateLabel, count }))
     .sort((a, b) => a.dateLabel.localeCompare(b.dateLabel));
 };
+
+export const countTeeMovingAverage = (
+  dailyTeeCount: {
+    dateLabel: string;
+    count: number;
+  }[]
+) => {
+  const DURATION = 30;
+  if (!Array.isArray(dailyTeeCount) || dailyTeeCount.length === 0) {
+    return [];
+  }
+
+  const minDateLabel = dailyTeeCount[0].dateLabel;
+  const maxDateLabel = dailyTeeCount[dailyTeeCount.length - 1].dateLabel;
+  const dateDelta =
+    1 +
+    (new Date(maxDateLabel).getTime() - new Date(minDateLabel).getTime()) /
+      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 / DURATION };
+    })
+    .filter((data): data is { dateSecond: number; count: number } => !!data);
+};