From 6cd8f0a2ebca342f992742db4f9eb3d82d895fde Mon Sep 17 00:00:00 2001
From: Harry <xiaohanwu12@gmail.com>
Date: Mon, 16 Oct 2023 08:36:58 -0400
Subject: [PATCH] fix: duplicate numbers on repo-activity-racing-bar (#751)

---
 .../features/repo-activity-racing-bar/data.ts | 19 +++++++++++++++++++
 .../repo-activity-racing-bar/view.tsx         |  4 ++--
 2 files changed, 21 insertions(+), 2 deletions(-)

diff --git a/src/pages/ContentScripts/features/repo-activity-racing-bar/data.ts b/src/pages/ContentScripts/features/repo-activity-racing-bar/data.ts
index 83df1d0c..1618065d 100644
--- a/src/pages/ContentScripts/features/repo-activity-racing-bar/data.ts
+++ b/src/pages/ContentScripts/features/repo-activity-racing-bar/data.ts
@@ -12,6 +12,25 @@ export interface RepoActivityDetails {
   [key: string]: [string, number][];
 }
 
+/**
+ * Filter and extract monthly data from the given data structure, which includes various date formats such as "yyyy", "yyyy-Qq", and "yyyy-mm".
+ * This function extracts and returns only the monthly data in the "yyyy-mm" format.
+ *
+ * @param data: RepoActivityDetails
+ * @returns RepoActivityDetails
+ */
+export function getMonthlyData(data: RepoActivityDetails) {
+  const monthlyData: RepoActivityDetails = {};
+
+  for (const key in data) {
+    // Check if the key matches the yyyy-mm format (e.g., "2020-05")
+    if (/^\d{4}-\d{2}$/.test(key)) {
+      monthlyData[key] = data[key];
+    }
+  }
+  return monthlyData;
+}
+
 /**
  * Count the number of unique contributors in the data
  * @returns [number of long term contributors, contributors' names]
diff --git a/src/pages/ContentScripts/features/repo-activity-racing-bar/view.tsx b/src/pages/ContentScripts/features/repo-activity-racing-bar/view.tsx
index 2ddfce75..0119e695 100644
--- a/src/pages/ContentScripts/features/repo-activity-racing-bar/view.tsx
+++ b/src/pages/ContentScripts/features/repo-activity-racing-bar/view.tsx
@@ -4,7 +4,7 @@ import optionsStorage, {
   defaults,
 } from '../../../../options-storage';
 import RacingBar, { MediaControlers } from './RacingBar';
-import { RepoActivityDetails } from './data';
+import { RepoActivityDetails, getMonthlyData } from './data';
 import { PlayerButton } from './PlayerButton';
 import { SpeedController } from './SpeedController';
 
@@ -91,7 +91,7 @@ const View = ({ currentRepo, repoActivityDetails }: Props): JSX.Element => {
               <RacingBar
                 ref={mediaControlersRef}
                 speed={speed}
-                data={repoActivityDetails}
+                data={getMonthlyData(repoActivityDetails)}
                 setPlaying={setPlaying}
               />
             </div>