Bosu - fix PR quality distribution tooltip and member count

[BosuBose132]

Description

Finishes the follow-up fixes for the PR Review Team Analytics Dashboard PR Insights frontend.

This fixes two regressions in the PR Quality Distribution section:

1. Pie-chart tooltips were only showing the first quality category as a key-value pair. Other hovered values were displayed without their category names.
2. Team member counts were no longer displayed with each team's PR Quality Distribution chart.

Related original/follow-up work:

• PR Aryan PR Review Team Quality Distribution Charts #4389
• PR Bhavpreet pr insights #3839
• PR Ramya Lint fix Add Userprofile - Userprofile subcomponent  #1624

Main changes explained

1. Updated PRQualityGraph.jsx so every tooltip entry displays its quality category and corresponding value.
2. Preserved Number mode and Data View percentage formatting.
3. Passed the existing teamData from ReviewsInsight.jsx into PRQualityGraph.
4. Restored each team's member count next to the team name without introducing any new backend/API request.
5. Added scoped styling for the team member count.
6. Added focused unit tests covering:
   • all tooltip category labels in Number mode
   • percentage formatting in Data View mode
   • team member count rendering
   • safe fallback when member-count data is unavailable

How to test

1. Checkout this branch:
   Bosu-fix-pr-review-quality-distribution
2. Use Node 20.
3. Run the frontend locally with:
   npm run start:local
4. Log in with an Admin/Owner test account.
5. Navigate to:
   PR Dashboard -> PR Reviews Insights
   or /pull-request-analytics/reviews-insight
6. Set Duration to All Time.
7. Select All Teams.
8. In the PR Quality Distribution section, confirm each team displays its member count.
9. Hover over a pie chart and confirm all four quality categories display as key-value pairs:
   • Not Approved
   • Low Quality
   • Sufficient
   • Exceptional
10. Confirm zero-value categories are also shown in the tooltip.
11. Toggle Data View and confirm the same categories are shown with percentage values.
12. Select individual teams and other duration filters and confirm charts/member counts continue to update correctly.
13. Verify the page in dark mode and at narrower browser widths.

Testing completed

• Focused PR Quality Graph unit tests passed.
• PR Analytics Dashboard focused tests passed.
• ESLint passed for modified JavaScript/test files.
• git diff --check passed.
• Manually verified Number mode.
• Manually verified Data View percentage mode.
• Manually verified zero-value tooltip entries.
• Manually verified team member counts.
• Manually verified team filtering.
• Manually verified dark mode and responsive behavior.

Backend changes

None.

The existing frontend data already contains memberCount, so no API or backend changes were necessary.

Screenshots / Videos

Screen.Recording.2026-08-29.at.6.56.25.PM.mov

[netlify]

✅ Deploy Preview for highestgoodnetwork-dev ready!

Name	Link
🔨 Latest commit	13db1c4
🔍 Latest deploy log	https://app.netlify.com/projects/highestgoodnetwork-dev/deploys/6a936755031f9c0008b4fbc2
😎 Deploy Preview	https://deploy-preview-5483--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
1 New issue
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]

Tested locally on branch Bosu-fix-pr-review-quality-distribution (Node 20).

Testing Checklist & Verification:

• Team Member Counts: Confirmed each team card in the PR Quality Distribution section accurately displays the member count next to the team name (e.g., Team B (16 members), Team C (0 members)).
• Tooltip Key-Value Formatting: Hovered over the PR quality pie charts; all four categories (Not Approved, Low Quality, Sufficient, Exceptional) correctly render with their corresponding labels and values, including zero-count entries.
• Data View Toggle: Verified switching between NUMBER and PERCENTAGE updates chart values and tooltip formatting as expected.
• Filtering & Responsiveness: Verified team and duration dropdown filters update dynamically, and responsive layout/dark mode display without regression.
• Automated Checks: Focused unit tests and ESLint checks pass cleanly.

LGTM! Approved.