round point status' points by 100

Author: CoCo-Japan-pan

atcoder-problems-frontend/src/pages/ListPage/SmallTable.tsx

@@ -50,35 +50,70 @@ export const SmallTable: React.FC<Props> = ({ submissions, setFilterFunc }) => {
   const mergedProblemMap =
     useMergedProblemMap().data ?? new Map<ProblemId, MergedProblem>();
   const userPointCountMap = getUserPointCounts(mergedProblemMap, submissions);
+  const userPointCountMapBy100 = userPointCountMap.map(
+    ({ userId, countByPoint }) => {
+      const roundedCountByPoint = new Map<number, number>();
+      countByPoint.forEach((count, point) => {
+        if (point === null || point === undefined) {
+          return;
+        }
+        const roundedPoint = Math.floor(point / 100) * 100;
+        const prev = roundedCountByPoint.get(roundedPoint);
+        if (prev) {
+          roundedCountByPoint.set(roundedPoint, prev + count);
+        } else {
+          roundedCountByPoint.set(roundedPoint, count);
+        }
+      });
+      return { userId, countByPoint: roundedCountByPoint };
+    }
+  );
   const totalCount = getTotalCount(mergedProblemMap);
+  const totalCountBy100 = totalCount.reduce(
+    (
+      ret: { point: number; count: number }[],
+      current: { point: number; count: number }
+    ) => {
+      const roundedPoint = Math.floor(current.point / 100) * 100;
+      const prev = ret.find((entry) => entry.point === roundedPoint);
+      if (prev) {
+        prev.count += current.count;
+      } else {
+        ret.push({ point: roundedPoint, count: current.count });
+      }
+      return ret;
+    },
+    []
+  );
+
   return (
     <Table striped bordered hover responsive>
       <thead>
         <tr>
           <th>Point</th>
-          {totalCount.map(({ point }) => (
+          {totalCountBy100.map(({ point }) => (
             <th key={point}>
               <a
                 href={window.location.hash}
                 onClick={(): void => setFilterFunc(point)}
               >
-                {point}
+                {`${point}- `}
               </a>
             </th>
           ))}
         </tr>
         <tr>
           <th>Total</th>
-          {totalCount.map(({ point, count }) => (
+          {totalCountBy100.map(({ point, count }) => (
             <th key={point}>{count}</th>
           ))}
         </tr>
       </thead>
       <tbody>
-        {userPointCountMap.map(({ userId, countByPoint }) => (
+        {userPointCountMapBy100.map(({ userId, countByPoint }) => (
           <tr key={userId}>
             <td>{userId}</td>
-            {totalCount.map(({ point, count }) => (
+            {totalCountBy100.map(({ point, count }) => (
               <td
                 key={point}
                 className={