Skip to content

Commit

Permalink
Merge pull request #1369 from yotsutose/PieChart-Only-Rated
Browse files Browse the repository at this point in the history
Pie Chartsの表示をRatedとAllで切り替え可能にする
  • Loading branch information
kenkoooo authored Oct 15, 2023
2 parents dd95540 + b49bac1 commit 5c99f31
Show file tree
Hide file tree
Showing 3 changed files with 87 additions and 21 deletions.
Original file line number Diff line number Diff line change
@@ -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,
Expand All @@ -15,6 +15,7 @@ import {
} from "../../../utils";
import { SmallPieChart } from "../PieChartBlock/SmallPieChart";
import {
isRatedContest,
classifyContest,
ContestCategories,
ContestCategory,
Expand Down Expand Up @@ -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])
Expand Down Expand Up @@ -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;
Expand All @@ -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);
Expand Down
Original file line number Diff line number Diff line change
@@ -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,
Expand All @@ -12,6 +16,7 @@ import {
rejectedProblemIdsFromArray,
solvedProblemIdsFromArray,
} from "../UserUtils";
import { isRatedContest } from "../../../utils/ContestClassifier";

interface Props {
userId: string;
Expand All @@ -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);
Expand Down Expand Up @@ -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)
Expand Down
Original file line number Diff line number Diff line change
@@ -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";
Expand All @@ -12,6 +13,7 @@ import {
isAccepted,
isValidResult,
} from "../../../utils";
import { isRatedContest } from "../../../utils/ContestClassifier";
import { SmallPieChart } from "./SmallPieChart";

enum SubmissionStatus {
Expand Down Expand Up @@ -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
);
Expand All @@ -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";
Expand Down

0 comments on commit 5c99f31

Please sign in to comment.