add : add TEE Climbing chart to UserPage.

Author: HirokiYoshida837

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

@@ -0,0 +1,51 @@
+import React from "react";
+import { Row } from "reactstrap";
+import {
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  LineChart,
+  Line,
+  ResponsiveContainer,
+} from "recharts";
+import { formatMomentDate, parseSecond } from "../../../utils/DateUtil";
+
+interface Props {
+  climbingData: { dateSecond: number; count: number }[];
+}
+
+export const TeeChart: React.FC<Props> = (props) => (
+  <Row className="my-3">
+    <ResponsiveContainer width="100%" height={300}>
+      <LineChart
+        data={props.climbingData}
+        margin={{
+          top: 5,
+          right: 30,
+          left: 20,
+          bottom: 5,
+        }}
+      >
+        <CartesianGrid strokeDasharray="3 3" />
+        <XAxis
+          dataKey="dateSecond"
+          type="number"
+          domain={["dataMin", "dataMax"]}
+          tickFormatter={(dateSecond: number): string =>
+            formatMomentDate(parseSecond(dateSecond))
+          }
+        />
+        <YAxis />
+        <Tooltip
+          labelFormatter={(dateSecond: number | string): string =>
+            typeof dateSecond === "number"
+              ? formatMomentDate(parseSecond(dateSecond))
+              : dateSecond
+          }
+        />
+        <Line dataKey="count" stroke="#8884d8" />
+      </LineChart>
+    </ResponsiveContainer>
+  </Row>
+);

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

@@ -24,14 +24,18 @@ import {
   parseDateLabel,
 } from "../../../utils/DateUtil";
 import { useLocalStorage } from "../../../utils/LocalStorage";
-import { countUniqueAcByDate } from "../../../utils/StreakCounter";
+import {
+  countUniqueAcByDate,
+  countTeeByDate,
+} from "../../../utils/StreakCounter";
 import Submission from "../../../interfaces/Submission";
 import { ProblemId } from "../../../interfaces/Status";
 import { DailyEffortBarChart } from "./DailyEffortBarChart";
 import { DailyEffortStackedBarChart } from "./DailyEffortStackedBarChart";
 import { ClimbingLineChart } from "./ClimbingLineChart";
 import { ClimbingAreaChart } from "./ClimbingAreaChart";
 import { FilteringHeatmap } from "./FilteringHeatmap";
+import { TeeChart } from "./TeeChart";
 
 const chartTypes = ["Simple", "Colored"] as const;
 type ChartType = typeof chartTypes[number];
@@ -130,6 +134,18 @@ export const ProgressChartBlock: React.FC<Props> = (props) => {
     return list;
   }, [] as { dateSecond: number; count: number }[]);
 
+  const dailyTeeCount = countTeeByDate(userSubmissions, problemModels);
+  const teeClimbing = dailyTeeCount.reduce((list, { dateLabel, count }) => {
+    const dateSecond = parseDateLabel(dateLabel).unix();
+    const last = list.length === 0 ? undefined : list[list.length - 1];
+    if (last) {
+      list.push({ dateSecond, count: last.count + count });
+    } else {
+      list.push({ dateSecond, count });
+    }
+    return list;
+  }, [] as { dateSecond: number; count: number }[]);
+
   const dateColorCountMap = Array.from(submissionsByProblem.values())
     .map((submissionsOfProblem) => {
       const accepted = submissionsOfProblem
@@ -256,6 +272,11 @@ export const ProgressChartBlock: React.FC<Props> = (props) => {
         />
       )}
 
+      <Row className="my-2 border-bottom">
+        <h1>TEE Climbing</h1>
+      </Row>
+      <TeeChart climbingData={teeClimbing} />
+
       <Row className="my-2 border-bottom">
         <h1>Heatmap</h1>
       </Row>

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

@@ -1,6 +1,10 @@
 import { ProblemId } from "../interfaces/Status";
 import Submission from "../interfaces/Submission";
+import ProblemModel, {
+  isProblemModelWithTimeModel,
+} from "../interfaces/ProblemModel";
 import { formatMomentDate, parseDateLabel, parseSecond } from "./DateUtil";
+import { calculateTopPlayerEquivalentEffort } from "./ProblemModelUtil";
 import { isAccepted } from "./index";
 
 export interface Streak {
@@ -62,3 +66,48 @@ export const countUniqueAcByDate = (
     .map(([dateLabel, count]) => ({ dateLabel, count }))
     .sort((a, b) => a.dateLabel.localeCompare(b.dateLabel));
 };
+
+export const countTeeByDate = (
+  userSubmissions: Submission[],
+  problemModelsMap?: Map<string, ProblemModel>
+) => {
+  const getTeeFromSubmission = (problemId: string): number => {
+    const detail = problemModelsMap?.get(problemId);
+    if (isProblemModelWithTimeModel(detail)) {
+      return calculateTopPlayerEquivalentEffort(detail);
+    } else {
+      return 0;
+    }
+  };
+
+  const submissionMap = new Map<ProblemId, Submission>();
+  userSubmissions
+    .filter((s) => isAccepted(s.result))
+    .forEach((submission) => {
+      const current = submissionMap.get(submission.problem_id);
+      if (current) {
+        if (current.id > submission.id) {
+          submissionMap.set(submission.problem_id, submission);
+        }
+      } else {
+        submissionMap.set(submission.problem_id, submission);
+      }
+    });
+
+  const dailyTeeCount = Array.from(submissionMap)
+    .map(([k, v]) => {
+      return {
+        date: formatMomentDate(parseSecond(v.epoch_second)),
+        tee: getTeeFromSubmission(k),
+      };
+    })
+    .reduce((map, o) => {
+      const count = map.get(o.date) ?? 0;
+      map.set(o.date, count + o.tee);
+      return map;
+    }, new Map<string, number>());
+
+  return Array.from(dailyTeeCount)
+    .map(([dateLabel, count]) => ({ dateLabel, count }))
+    .sort((a, b) => a.dateLabel.localeCompare(b.dateLabel));
+};