Merge pull request #1369 from yotsutose/PieChart-Only-Rated

Pie Chartsの表示をRatedとAllで切り替え可能にする

Author: kenkoooo

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

@@ -1,5 +1,5 @@
-import React from "react";
-import { Row, Col } from "reactstrap";
+import React, { useState } from "react";
+import { Row, Col, Button, ButtonGroup } from "reactstrap";
 import {
   useContestToProblems,
   useUserSubmission,
@@ -15,6 +15,7 @@ import {
 } from "../../../utils";
 import { SmallPieChart } from "../PieChartBlock/SmallPieChart";
 import {
+  isRatedContest,
   classifyContest,
   ContestCategories,
   ContestCategory,
@@ -72,7 +73,8 @@ export const makeCategoryCounts = (
   contestsData: Contest[],
   contestToProblemsData: Map<string, Problem[]>,
   userSubmissionsData: Submission[],
-  userId: string
+  userId: string,
+  onlyRated: boolean
 ) => {
   const contestMap = new Map<string, Contest>(
     contestsData.map((contest) => [contest.id, contest])
@@ -118,8 +120,12 @@ export const makeCategoryCounts = (
     const category = classifyContest(statusByContest.contest);
     statusByContest.problemStatuses.forEach((problemStatus) => {
       const formerCount = counts.get(category);
+      const isRated = isRatedContest(
+        statusByContest.contest,
+        contestToProblemsData.get(statusByContest.contest.id)?.length ?? 0
+      );
       if (formerCount === undefined) return;
-
+      if (!isRated && onlyRated) return;
       statusCounter(formerCount, problemStatus.status);
     });
     return counts;
@@ -132,16 +138,23 @@ export const CategoryPieChart: React.FC<Props> = (props) => {
   const contestToProblems =
     useContestToProblems() ?? new Map<ContestId, Problem[]>();
   const userSubmissions = useUserSubmission(props.userId) ?? [];
+  const [onlyRated, setOnlyRated] = useState(true);
 
   const categoryCounts = makeCategoryCounts(
     contests,
     contestToProblems,
     userSubmissions,
-    props.userId
+    props.userId,
+    onlyRated
   );
 
   return (
     <div>
+      <ButtonGroup className="mb-2">
+        <Button onClick={(): void => setOnlyRated(!onlyRated)}>
+          {onlyRated ? "Only Rated Contests" : "All Contests"}
+        </Button>
+      </ButtonGroup>
       <Row className="my-3">
         {ContestCategories.map((category) => {
           const count = categoryCounts.get(category);

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

@@ -1,6 +1,10 @@
-import React from "react";
-import { Row, Col } from "reactstrap";
-import { useProblemModelMap, useUserSubmission } from "../../../api/APIClient";
+import React, { useState } from "react";
+import { Row, Col, Button, ButtonGroup } from "reactstrap";
+import {
+  useProblemModelMap,
+  useUserSubmission,
+  useContestMap,
+} from "../../../api/APIClient";
 import {
   getRatingColor,
   getRatingColorCode,
@@ -12,6 +16,7 @@ import {
   rejectedProblemIdsFromArray,
   solvedProblemIdsFromArray,
 } from "../UserUtils";
+import { isRatedContest } from "../../../utils/ContestClassifier";
 
 interface Props {
   userId: string;
@@ -29,9 +34,15 @@ const getPieChartTitle = (ratingColor: RatingColor): string => {
 };
 
 export const DifficultyPieChart: React.FC<Props> = (props) => {
-  const submissions = useUserSubmission(props.userId) ?? [];
+  const [onlyRated, setOnlyRated] = useState(true);
+  const contestMap = useContestMap();
   const problemModels = useProblemModelMap();
   const colorCount = new Map<RatingColor, number>();
+  const allSubmissions = useUserSubmission(props.userId) ?? [];
+  const submissions = allSubmissions.filter(
+    (submission) =>
+      isRatedContest(contestMap.get(submission.contest_id), 2) || !onlyRated
+  );
   Array.from(problemModels?.values() ?? []).forEach((model) => {
     if (model.difficulty !== undefined) {
       const color = getRatingColor(model.difficulty);
@@ -78,6 +89,11 @@ export const DifficultyPieChart: React.FC<Props> = (props) => {
 
   return (
     <div>
+      <ButtonGroup className="mb-2">
+        <Button onClick={(): void => setOnlyRated(!onlyRated)}>
+          {onlyRated ? "Only Rated Contests" : "All Contests"}
+        </Button>
+      </ButtonGroup>
       <Row className="my-3">
         {data
           .filter((e) => e.totalCount > 0)

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

@@ -1,8 +1,9 @@
-import { Col, Row } from "reactstrap";
-import React from "react";
+import { Col, Row, Button, ButtonGroup } from "reactstrap";
+import React, { useState } from "react";
 import {
   useContestToProblems,
   useUserSubmission,
+  useContestMap,
 } from "../../../api/APIClient";
 import Problem from "../../../interfaces/Problem";
 import Submission from "../../../interfaces/Submission";
@@ -12,6 +13,7 @@ import {
   isAccepted,
   isValidResult,
 } from "../../../utils";
+import { isRatedContest } from "../../../utils/ContestClassifier";
 import { SmallPieChart } from "./SmallPieChart";
 
 enum SubmissionStatus {
@@ -143,18 +145,26 @@ export const PieChartBlock = (props: Props) => {
   );
   const contestToProblems =
     useContestToProblems() ?? new Map<ContestId, Problem[]>();
+  const [onlyRated, setOnlyRated] = useState(true);
+  const contestMap = useContestMap();
 
   const abcSolved = solvedCountForPieChart(
-    Array.from(contestToProblems).filter(([contestId]) =>
-      contestId.startsWith("abc")
-    ),
+    Array.from(contestToProblems)
+      .filter(([contestId]) => contestId.startsWith("abc"))
+      .filter(
+        ([contestId]) =>
+          isRatedContest(contestMap.get(contestId), 2) || !onlyRated
+      ),
     submissionsMap,
     props.userId
   );
   const arcSolved = solvedCountForPieChart(
-    Array.from(contestToProblems).filter(([contestId]) =>
-      contestId.startsWith("arc")
-    ),
+    Array.from(contestToProblems)
+      .filter(([contestId]) => contestId.startsWith("arc"))
+      .filter(
+        ([contestId]) =>
+          isRatedContest(contestMap.get(contestId), 2) || !onlyRated
+      ),
     submissionsMap,
     props.userId
   );
@@ -167,23 +177,50 @@ export const PieChartBlock = (props: Props) => {
   );
   return (
     <>
-      <PieCharts problems={abcSolved} title="AtCoder Beginner Contest" />
-      <PieCharts problems={arcSolved} title="AtCoder Regular Contest" />
-      <PieCharts problems={agcSolved} title="AtCoder Grand Contest" />
+      <PieCharts
+        problems={abcSolved}
+        title="AtCoder Beginner Contest"
+        setOnlyRated={setOnlyRated}
+        onlyRated={onlyRated}
+      />
+      <PieCharts
+        problems={arcSolved}
+        title="AtCoder Regular Contest"
+        setOnlyRated={setOnlyRated}
+        onlyRated={onlyRated}
+      />
+      <PieCharts
+        problems={agcSolved}
+        title="AtCoder Grand Contest"
+        setOnlyRated={setOnlyRated}
+        onlyRated={onlyRated}
+      />
     </>
   );
 };
 
 interface PieChartsProps {
   problems: { total: number; solved: number; rejected: number }[];
   title: string;
+  setOnlyRated: (onlyRated: boolean) => void;
+  onlyRated: boolean;
 }
 
-const PieCharts: React.FC<PieChartsProps> = ({ problems, title }) => (
+const PieCharts: React.FC<PieChartsProps> = ({
+  problems,
+  title,
+  setOnlyRated,
+  onlyRated,
+}) => (
   <div>
     <Row className="my-2 border-bottom">
       <h1>{title}</h1>
     </Row>
+    <ButtonGroup className="mb-2">
+      <Button onClick={(): void => setOnlyRated(!onlyRated)}>
+        {onlyRated ? "Only Rated Contests" : "All Contests"}
+      </Button>
+    </ButtonGroup>
     <Row className="my-3">
       {problems.map(({ solved, rejected, total }, i) => {
         const key = i <= 6 ? "ABCDEFG".charAt(i) : "H/Ex";