feat: add repository growth analytics dashboard#620
Conversation
❌ Deploy Preview for github-spy failed.
|
|
Warning Review limit reached
More reviews will be available in 30 minutes and 37 seconds. Learn how PR review limits work. Your organization has run out of usage credits. Purchase more in the billing tab. ⌛ How to resolve this issue?After more reviews become available, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans include higher PR review limits than trial, open-source, and free plans. In all cases, reviews become available again over time. During sustained high-volume PR review activity, CodeRabbit may temporarily slow when the next review becomes available. Please see our Fair Usage Limits Policy for further information. ℹ️ Review info⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (4)
📝 WalkthroughWalkthroughThis PR implements a repository growth analytics dashboard that visualizes GitHub repository metrics through multiple Recharts components. The feature extends the data hook to fetch repository and commit statistics, creates a new analytics component with summary cards and four chart panels, introduces CSS variable theming, and integrates everything into a new "Repo Tracker" tab. ChangesRepository Growth Analytics Dashboard
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Possibly related issues
Possibly related PRs
Suggested labels
Poem
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
67dcda8 to
13e94f8
Compare
|
@mehul-m-prajapati, Requesting Review. Implemented the Repository Growth Analytics Dashboard with interactive repository insights, analytics visualizations, and statistics cards. The feature provides a more data-driven view of repository activity, contribution trends, language usage, and growth metrics. Please take a look when you get a chance. Happy to make any requested changes or improvements. |
|
@arpit2006 : design and colors don't match the existing theme font size too big, pie chart label out of alignment |
|
@mehul-m-prajapati, Thank you for the review. I will address the suggested changes and update the PR shortly. |
|
@mehul-m-prajapati ,Here are the changes please review this!
|
There was a problem hiding this comment.
Actionable comments posted: 8
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
src/pages/Tracker/Tracker.tsx (1)
86-108:⚠️ Potential issue | 🟠 Major | ⚡ Quick winAvoid duplicate and tab-irrelevant GitHub fetches.
handleSubmitalways callsfetchData(..., 1, ...), butsetPage(0)also retriggers the effect on Lines 89-93 when the user submits from any page other than 0, so the same first-page request is sent twice. Becausetabis also a dependency there, switching to Repo Tracker refetches issues/PRs that this branch never renders. That wastes GitHub rate limit and can race your loading/error state.Suggested fix
- useEffect(() => { - if (username) { - fetchData(username, page + 1, ROWS_PER_PAGE); - } - }, [tab, page]); + useEffect(() => { + const trimmedUsername = username.trim(); + if (!trimmedUsername || isRepoTrackerTab) { + return; + } + fetchData(trimmedUsername, page + 1, ROWS_PER_PAGE); + }, [username, page, isRepoTrackerTab, fetchData]); const handleSubmit = (e: React.FormEvent<HTMLFormElement>): void => { e.preventDefault(); - setPage(0); const trimmedUsername = username.trim(); if (!trimmedUsername) { return; } - void Promise.all([ - fetchData(trimmedUsername, 1, ROWS_PER_PAGE), - fetchRepositoryAnalytics(trimmedUsername), - ]); + setUsername(trimmedUsername); + if (page !== 0) { + setPage(0); // let the effect fetch page 1 once + } else { + void fetchData(trimmedUsername, 1, ROWS_PER_PAGE); + } + void fetchRepositoryAnalytics(trimmedUsername); };🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/pages/Tracker/Tracker.tsx` around lines 86 - 108, The effect currently fetches unconditionally and handleSubmit also calls fetchData, causing duplicate requests and tab-irrelevant fetches; update the useEffect that calls fetchData to include username in its dependency array and guard the call with the repo-tab check (use isRepoTrackerTab or tab value) so it only runs for the issues/PRs tab, and remove the explicit fetchData(...) call from handleSubmit (keep setPage(0) and the fetchRepositoryAnalytics call) so the page reset triggers a single fetch via the guarded useEffect; refer to useEffect, fetchData, handleSubmit, fetchRepositoryAnalytics, isRepoTrackerTab, tab, page, username, and ROWS_PER_PAGE when making these changes.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@src/components/RepositoryAnalyticsDashboard.tsx`:
- Around line 20-28: Remove the unused Lucide icon import GitFork from the
import list in RepositoryAnalyticsDashboard (where Activity, Database,
GitCommitVertical, GitFork, Languages, Star, TrendingUp are imported) to satisfy
ESLint; update the import statement to exclude GitFork and ensure no other
references to GitFork remain in the file.
- Around line 96-111: The donut is counting repository.language (one-per-repo)
so the metric is "primary language by repository", not actual byte usage; update
RepositoryAnalyticsDashboard to either (A) rename the chart/title/label to
"Primary language distribution" and keep the existing languageCounts logic
(languageCounts, sortedRepositories, monthlyBuckets, repositories) or (B) fetch
per-repo language breakdowns (e.g., call each repo's /languages, aggregate bytes
per language across repos, sum into languageCounts) and use that aggregated
bytes map for the donut; apply the same change to the other location noted
(lines 154–157 equivalent logic) so labels and data semantics match.
- Around line 109-152: The current logic in the loop over sortedRepositories
buckets repository.stargazers_count and repository.forks_count into the repo
creation month (see sortedRepositories, monthlyBuckets,
repository.stargazers_count, repository.forks_count, formatMonthLabel), which
incorrectly treats current stars/forks as historical growth; to fix, stop
aggregating stars and forks into monthlyBuckets (remove monthBucket.stars +=
repository.stargazers_count and monthBucket.forks += repository.forks_count and
the stars/forks fields from those buckets) and instead only increment created
counts so repositoryGrowth reflects cumulative repository count, or
alternatively change the chart/labels produced from repositoryGrowth to
explicitly state it shows "repository count growth" rather than "stars/forks
over time" until you implement fetching real historical star/fork events.
- Line 561: The Box wrapping the custom legend uses sx={{ ..., gap: 12 }} which
maps to theme.spacing(12) (≈96px) and causes aggressive wrapping; change the gap
to an explicit pixel or smaller spacing token (for example set gap: '12px' or
gap: 2) inside the same Box sx prop so the legend uses a reasonable fixed
spacing; update the Box JSX that currently contains sx={{ display: 'flex',
justifyContent: 'center', flexWrap: 'wrap', gap: 12, mt: 2 }} accordingly.
In `@src/hooks/useGitHubData.ts`:
- Around line 333-399: fetchRepositoryAnalytics can be overwritten by
out-of-order responses; mirror the fetchData pattern by capturing the current
lastRequestId at the start of fetchRepositoryAnalytics and after any await
(especially before any setRepositories, setWeeklyCommitActivity,
setAnalyticsError, or setAnalyticsLoading calls) bail out if the captured id !==
lastRequestId to prevent stale responses from updating state; reference
fetchRepositoryAnalytics and lastRequestId and ensure checks occur both after
fetchAllRepositories/Promise.all and inside the per-repository loop before
updating weeklyTotals/state.
- Around line 97-105: In the retry loop inside useGitHubData.ts, remove the
unnecessary any cast when checking the participation request status: replace
(response as any).status with response.status and ensure the code uses the
octokit.request call's typed return value (keep the call to octokit.request('GET
/repos/{owner}/{repo}/stats/participation', { owner, repo }) and the existing
retry/sleep logic intact); if TypeScript complains about the response type, add
an appropriate generic type to octokit.request or narrow the type before
accessing .status, but do not use any casts.
In `@src/index.css`:
- Around line 129-195: The CSS rules for .how-it-works-flow-line (and its
variants .how-it-works-flow-line.light, .how-it-works-flow-line.vertical,
.how-it-works-flow-line.vertical.light) and the icon color rules (.icon-merged,
.icon-pr-open, .icon-pr-closed, .icon-issue-open, .icon-issue-closed) must be
scoped inside the .repo-tracker-theme wrapper so the custom properties they rely
on are in scope; fix this by prefixing those selectors with .repo-tracker-theme
(e.g., .repo-tracker-theme .how-it-works-flow-line, .repo-tracker-theme
.icon-merged, etc.) so these overrides only apply when the theme wrapper is
present.
In `@src/pages/Tracker/Tracker.tsx`:
- Around line 99-107: The submit handler computes trimmedUsername but doesn't
persist it to state, so subsequent effects still read the raw username; after
computing and validating trimmedUsername in the submit flow, call the state
updater to persist it (e.g. setUsername(trimmedUsername)) before calling
fetchData(trimmedUsername, 1, ROWS_PER_PAGE) and
fetchRepositoryAnalytics(trimmedUsername) so later effects that read username
will use the normalized value.
---
Outside diff comments:
In `@src/pages/Tracker/Tracker.tsx`:
- Around line 86-108: The effect currently fetches unconditionally and
handleSubmit also calls fetchData, causing duplicate requests and tab-irrelevant
fetches; update the useEffect that calls fetchData to include username in its
dependency array and guard the call with the repo-tab check (use
isRepoTrackerTab or tab value) so it only runs for the issues/PRs tab, and
remove the explicit fetchData(...) call from handleSubmit (keep setPage(0) and
the fetchRepositoryAnalytics call) so the page reset triggers a single fetch via
the guarded useEffect; refer to useEffect, fetchData, handleSubmit,
fetchRepositoryAnalytics, isRepoTrackerTab, tab, page, username, and
ROWS_PER_PAGE when making these changes.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: 6f94a815-32ec-4c59-b34e-7f2fd5effed5
📒 Files selected for processing (4)
src/components/RepositoryAnalyticsDashboard.tsxsrc/hooks/useGitHubData.tssrc/index.csssrc/pages/Tracker/Tracker.tsx
0d4ffaa to
a96d5a1
Compare
|
@mehul-m-prajapati , Addressed the feedback and pushed the updates. Requesting a re-review. Thanks! |
|
🎉🎉 Thank you for your contribution! Your PR #620 has been merged! 🎉🎉 |


Related Issue
Description
Implemented a Repository Growth Analytics Dashboard to provide deeper insights into GitHub repository activity and growth trends through interactive visualizations and analytics components.
Features Added
📈 Repository Growth Timeline to visualize repository evolution over time.
🔥 Commit Activity Trends using charts for weekly/monthly activity analysis.
🧠 Contribution Frequency Analytics to highlight contributor engagement patterns.
💻 Language Usage Analytics displaying technology distribution across repositories.
⭐ Star & Fork Growth tracking repository popularity metrics.
📊 Repository Statistics Cards displaying:
Benefits
How Has This Been Tested?
Screenshots (if applicable)
Type of Change
Summary by CodeRabbit