Akshay Fix Popular PRs Duration Filtering

[akv-iu]

Description

The Top 20 Most Popular PRs chart used fixed January 2026 mock dates and filtered them in the browser. As those dates aged, Last Week, Last 2 Weeks, and Last Month returned no data while All Time continued to show the mock records.

This change connects the chart to the existing duration-aware backend endpoint so every dropdown selection requests current review data and refreshes the loading, chart, and insights states.

Fixes Priority Medium task 2: Data Consistency Verification for Top 20 Most Popular PRs.

Related PRS (if any):

1. Follow-up to frontend PR Mani shashank Add insights panel and duration filtering to PR Team Analytics #4775.
2. No backend PR is required; the /api/analytics/popular-prs endpoint already exists on backend development.

Main changes explained:

1. Delete PRData.js to remove the expired mock PR dataset.
2. Update PRReviewTeamAnalytics.jsx to request live data for Last Week, Last 2 Weeks, Last Month, and All Time.
3. Update URL.js with the popular PR analytics endpoint.
4. Add a regression test verifying that changing the duration issues a new API request with the selected backend duration.

How to test:

1. Check out Akshay_fix_popular_prs_duration_filter.
2. Run npm install, then npm run start:local.
3. Start HGNRest from its development branch on port 4500.
4. Clear site data/cache, log in as an Admin or Owner, and open http://localhost:5173/pr-team-analytics/popular-prs (use the port printed by Vite if it is different).
5. Open DevTools → Network and filter requests by popular-prs.
6. Select each duration and verify a new successful request is sent with the matching query value:
   • Last Week → duration=lastWeek
   • Last 2 Weeks → duration=last2weeks
   • Last Month → duration=lastMonth
   • All Time → duration=allTime
7. Optionally run this in the browser console to summarize all four backend responses:

const durations = ['lastWeek', 'last2weeks', 'lastMonth', 'allTime'];
Promise.all(
  durations.map(async duration => {
    const response = await fetch(
      `http://localhost:4500/api/analytics/popular-prs?duration=${duration}`,
      { headers: { Authorization: localStorage.getItem('token') } },
    );
    const data = await response.json();
    return {
      duration,
      status: response.status,
      rows: data.length,
      reviews: data.reduce((sum, pr) => sum + pr.reviewCount, 0),
      topPR: data[0] ? `${data[0].prNumber}: ${data[0].reviewCount}` : 'No rows',
    };
  }),
).then(console.table);

8. For each selected duration, compare the chart with that request's JSON response:
   • Each bar's PR number and review count match prNumber and reviewCount.
   • Total PRs equals the response array length.
   • Avg Reviews/PR equals the sum of reviewCount divided by the array length, rounded to one decimal.
   • Most Reviewed PR matches the first response item.
9. Recent periods may legitimately contain only zero-review PRs or look identical when the database has no reviews in those date ranges. This is valid when the UI matches the corresponding API response; the required behavior is that each filter sends its own request instead of reusing fixed mock data.
10. Enable dark mode and repeat the selections, verifying the chart, labels, tooltip, loading state, and insights remain readable.
11. Repeat the route check with another permitted user role.

Automated checks completed:

• 1,214 tests passed across 155 test files; 14 tests skipped.
• Focused duration regression test passed.
• ESLint passed on changed files.
• Prettier check passed on changed files.
• Production build succeeded.

Screenshots or videos of changes:

PR.mp4

Note:

The existing dark-mode presentation is preserved. Last Month represents the previous calendar month, not a cumulative superset of Last Week and Last 2 Weeks, so review counts are not required to increase monotonically across those three filters.

[netlify]

✅ Deploy Preview for highestgoodnetwork-dev ready!

Name	Link
🔨 Latest commit	ec3c51f
🔍 Latest deploy log	https://app.netlify.com/projects/highestgoodnetwork-dev/deploys/6a89b8675159390008a773a3
😎 Deploy Preview	https://deploy-preview-5458--highestgoodnetwork-dev.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
🤖 Make changes	Run an agent on this branch

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

[iAbhi001]

PR Review & Local Verification Summary

Tested locally on branch Akshay_fix_popular_prs_duration_filter connected to local HGNRest development backend (port 4500).

✅ Verification Checklist:

• API & Network Filtering: Verified via DevTools Network tab that switching the dropdown triggers distinct GET requests with appropriate duration parameters (lastWeek, last2weeks, lastMonth, allTime) returning 200 OK.
• Data Consistency: Executed verification script across all four durations. UI components (chart bars, Total PRs, Avg Reviews/PR, Most Reviewed PR) correctly matched backend responses:
  • Last Week: 20 rows | 1 review | Top: FE-999999: 1 | Avg: 0.1
  • Last 2 Weeks: 20 rows | 2 reviews | Top: FE-999999: 2 | Avg: 0.1
  • Last Month: 20 rows | 3 reviews | Top: FE-999999: 3 | Avg: 0.2
  • All Time: 20 rows | 411 reviews | Top: FE-999999: 41 | Avg: 20.6
• UI & Dark Mode: Chart axes, bar elements, tooltips, and insights cards render cleanly across light and dark modes.
• Automated Tests: All unit test suites executed and passed locally.

LGTM! Approved.

[RuthwikHM]

Tested this out locally. Things work well in both light and dark mode. Thanks for fixing this!!

[DeepighaJ]

Tested the PR locally against the provided test steps.

• Verified all duration filters: Last Week, Last 2 Weeks, Last Month, and All Time.
• Confirmed each selection sends the correct duration query parameter and receives a successful API response.
• Verified the chart data matches the corresponding API response, including PR numbers, review counts, total PRs, average reviews/PR, and most reviewed PR.
• Verified recent-period data is reflected correctly based on the API response.
• Verified the page in dark mode; chart, labels, tooltip, summary values, and insights remain readable.
• Verified the route loads successfully for the volunteer, owner user roles.
• No functional issues found during testing.

Last 2 weeks:

Last Month:

All Time:

Volunteer Role:

[iAbhi001]

Local Testing & PR Review Summary

Validated locally on branch Akshay_fix_popular_prs_duration_filter against a local HGNRest backend instance (localhost:4500).

Verification Breakdown:

• Network & API Behavior: Confirmed in DevTools that updating the timeframe dropdown fires the expected GET requests with corresponding duration query params (lastWeek, last2weeks, lastMonth, allTime), each returning a 200 OK status.

• Data Accuracy: Ran automated verification across every timeframe filter. Chart visualisations and summary metrics (Total PRs, Avg Reviews/PR, Top Reviewed PR) align precisely with the API payload:

• Last Week: 20 rows | 1 total review | Top: FE-999999: 1 | Avg: 0.1

• Last 2 Weeks: 20 rows | 2 total reviews | Top: FE-999999: 2 | Avg: 0.1

• Last Month: 20 rows | 3 total reviews | Top: FE-999999: 3 | Avg: 0.2

• All Time: 20 rows | 411 total reviews | Top: FE-999999: 41 | Avg: 20.6

• Visual & Theme Checks: Chart axes, bars, tooltips, and overview cards display properly in both light and dark themes.

• Test Suite: Local unit tests run clean with zero failures.

LGTM — approved for merge.

[DeMoliT1on]

Hi @akv-iu,

Tested on local with PR branch Akshay_fix_popular_prs_duration_filter. The API integration seems to be working correctly. And the filters query the correct data from backend.

Approving!