diff --git a/atcoder-problems-frontend/src/pages/UserPage/CategoryPieChart/index.tsx b/atcoder-problems-frontend/src/pages/UserPage/CategoryPieChart/index.tsx index a099dd63e..f0ac77526 100644 --- a/atcoder-problems-frontend/src/pages/UserPage/CategoryPieChart/index.tsx +++ b/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, userSubmissionsData: Submission[], - userId: string + userId: string, + onlyRated: boolean ) => { const contestMap = new Map( 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) => { const contestToProblems = useContestToProblems() ?? new Map(); const userSubmissions = useUserSubmission(props.userId) ?? []; + const [onlyRated, setOnlyRated] = useState(true); const categoryCounts = makeCategoryCounts( contests, contestToProblems, userSubmissions, - props.userId + props.userId, + onlyRated ); return (
+ + + {ContestCategories.map((category) => { const count = categoryCounts.get(category); diff --git a/atcoder-problems-frontend/src/pages/UserPage/DifficultyPieChart/index.tsx b/atcoder-problems-frontend/src/pages/UserPage/DifficultyPieChart/index.tsx index 174871d3c..122820b26 100644 --- a/atcoder-problems-frontend/src/pages/UserPage/DifficultyPieChart/index.tsx +++ b/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) => { - const submissions = useUserSubmission(props.userId) ?? []; + const [onlyRated, setOnlyRated] = useState(true); + const contestMap = useContestMap(); const problemModels = useProblemModelMap(); const colorCount = new Map(); + 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) => { return (
+ + + {data .filter((e) => e.totalCount > 0) diff --git a/atcoder-problems-frontend/src/pages/UserPage/PieChartBlock/index.tsx b/atcoder-problems-frontend/src/pages/UserPage/PieChartBlock/index.tsx index 33f882db7..fe5d7b0c8 100644 --- a/atcoder-problems-frontend/src/pages/UserPage/PieChartBlock/index.tsx +++ b/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(); + 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,9 +177,24 @@ export const PieChartBlock = (props: Props) => { ); return ( <> - - - + + + ); }; @@ -177,13 +202,25 @@ export const PieChartBlock = (props: Props) => { interface PieChartsProps { problems: { total: number; solved: number; rejected: number }[]; title: string; + setOnlyRated: (onlyRated: boolean) => void; + onlyRated: boolean; } -const PieCharts: React.FC = ({ problems, title }) => ( +const PieCharts: React.FC = ({ + problems, + title, + setOnlyRated, + onlyRated, +}) => (

{title}

+ + + {problems.map(({ solved, rejected, total }, i) => { const key = i <= 6 ? "ABCDEFG".charAt(i) : "H/Ex";