Skip to content

feat(dashboard): add interactive Repository Health Explorer (#398)#2069

Open
Ridanshi wants to merge 1 commit into
Priyanshu-byte-coder:mainfrom
Ridanshi:feat/repo-health-explorer-398
Open

feat(dashboard): add interactive Repository Health Explorer (#398)#2069
Ridanshi wants to merge 1 commit into
Priyanshu-byte-coder:mainfrom
Ridanshi:feat/repo-health-explorer-398

Conversation

@Ridanshi
Copy link
Copy Markdown
Contributor

@Ridanshi Ridanshi commented Jun 5, 2026

Summary

  • Implements a dedicated /dashboard/repo-health page that surfaces the existing health scoring system (src/lib/repo-health.ts) through interactive visualisations
  • Zero changes to the existing health scoring logic — all scoring functions (scoreCommitFrequency, scorePrMergeRate, etc.) are reused directly
  • Follows the same routing pattern as /dashboard/career-intelligence (thin server page + rich client component)
  • 76 unit tests, all passing; TypeScript strict check clean

Architecture

New lib (src/lib/repo-health-insights.ts)

Pure functions consumed by both the UI and the test suite:

  • gradeLetter(score) — A+ → D letter grades
  • gradeLabel(grade) — human-readable tier names (Healthy / Needs Attention / At Risk)
  • buildRadarData(signals) — normalises each sub-score to 0-100 for the radar chart
  • buildBreakdown(signals) — per-dimension earned/max breakdown rows
  • generateInsights(signals) — rule-based recommendations engine (5 signal × multi-threshold rules)

New components (src/components/repo-health/)

Component Purpose
RepoHealthGauge.tsx SVG semi-circle gauge (no extra dependency)
RepoHealthRadar.tsx recharts RadarChart — 5 normalised axes
RepoHealthBreakdown.tsx Weighted score table with progress bars
RepoHealthInsights.tsx Rule-based recommendations with severity badges
RepoHealthCard.tsx Compact repo card for the selection panel
RepoHealthExplorer.tsx Main orchestrator — layout, state, fetch, lazy-loads charts

New page

src/app/dashboard/repo-health/page.tsx — auth-guarded server component

Existing files modified

  • src/components/RepoHealthPanel.tsx — added "Full Analysis →" shortcut link to the explorer
  • src/app/dashboard/page.tsx — added health explorer entry banner in Analytics & Repositories section

Visualisations

  • Gauge: custom SVG arc, no extra dependency, ARIA role="img" label
  • Radar chart: recharts RadarChart / Radar, lazy-loaded via next/dynamic
  • Score breakdown: 5 rows, each with earned pts / max pts, progress bar, weight %, tooltip with target
  • Insights: warnings → infos → successes, colour-coded by severity, metric attribution

Performance

  • Recharts components are lazy-loaded (next/dynamic, ssr: false) so the charting bundle is only downloaded when the explorer page is visited
  • Days-range preference persisted to localStorage to avoid redundant fetches on re-visits
  • Analysis window (7 / 30 / 90 days) passed through to the existing /api/metrics/repo-health endpoint — caching behaviour unchanged
  • All expensive computations (buildRadarData, buildBreakdown, generateInsights) wrapped in useMemo
  • RepoHealthCard and DetailPanel wrapped in React.memo

Accessibility

  • SVG gauge has role="img" and aria-label
  • Score breakdown rows use role="progressbar" with aria-valuenow/min/max
  • Repo cards use aria-pressed for selection state and descriptive aria-label
  • <aside> for the repo list, <main> for the detail panel, <section> for each content block
  • Days selector has a visible <label> (via sr-only) and aria-label
  • "Back to Dashboard" link with aria-label

Test results

Test Files  1 passed (1)
      Tests  76 passed (76)

Regression tests verify all 5 existing scoring functions remain unchanged. New tests cover gradeLetter, gradeLabel, buildRadarData, buildBreakdown, and generateInsights at all significant thresholds.

@vercel
Copy link
Copy Markdown

vercel Bot commented Jun 5, 2026

@Ridanshi is attempting to deploy a commit to the PRIYANSHU DOSHI's projects Team on Vercel.

A member of the Team first needs to authorize it.

@github-actions github-actions Bot added gssoc26 GSSoC 2026 contribution type:feature GSSoC type bonus: new feature type:testing GSSoC type bonus: tests (+10 pts) labels Jun 5, 2026
@github-actions
Copy link
Copy Markdown

github-actions Bot commented Jun 5, 2026

GSSoC Label Checklist 🏷️

@Priyanshu-byte-coder — please apply the appropriate labels before merging:

Difficulty (pick one):

  • level:beginner — 20 pts
  • level:intermediate — 35 pts
  • level:advanced — 55 pts
  • level:critical — 80 pts

Quality (optional):

  • quality:clean — ×1.2 multiplier
  • quality:exceptional — ×1.5 multiplier

Validation (required to score):

  • gssoc:approved — counts for points
  • gssoc:invalid / gssoc:spam / gssoc:ai-slop — does not score

Type labels (type:*) are auto-detected from files and title. Review and adjust if needed.
Points formula: (difficulty × quality_multiplier) + type_bonus

@Priyanshu-byte-coder
Copy link
Copy Markdown
Owner

This PR has conflicts with main. Please rebase:

git fetch origin && git rebase origin/main

Then push and we'll review.

@Priyanshu-byte-coder
Copy link
Copy Markdown
Owner

This PR has merge conflicts with main. Please rebase to continue:

git fetch origin
git rebase origin/main

…u-byte-coder#398)

Implements a dedicated /dashboard/repo-health page that exposes the
existing health scoring system with interactive visualisations:

• SVG semi-circle gauge for the 0-100 composite score
• Recharts radar chart with 5 normalised axes (commits, PR rate, PR
  speed, issues, recent activity) – lazy-loaded via next/dynamic
• Weighted score breakdown table (earned/max per dimension + progress bars)
• Rule-based recommendations engine (generateInsights) — all thresholds
  are data-driven from the existing scoring functions; no repo-specific
  hard-coding
• Letter grade system (A+ → D) with colour-coded grade cards
• Repo selection panel with sorted RepoHealthCard list
• "Full Analysis →" shortcut added to the existing RepoHealthPanel modal
• Entry-point banner added to the Analytics & Repositories dashboard section
• 76 unit tests (regression coverage for all scoring functions + new helpers)

New files
  src/lib/repo-health-insights.ts       — gradeLetter, gradeLabel,
                                           buildRadarData, buildBreakdown,
                                           generateInsights
  src/components/repo-health/RepoHealthGauge.tsx
  src/components/repo-health/RepoHealthRadar.tsx
  src/components/repo-health/RepoHealthBreakdown.tsx
  src/components/repo-health/RepoHealthInsights.tsx
  src/components/repo-health/RepoHealthCard.tsx
  src/components/repo-health/RepoHealthExplorer.tsx
  src/app/dashboard/repo-health/page.tsx
  test/repo-health-explorer.test.ts

Modified files
  src/components/RepoHealthPanel.tsx     — "Full Analysis →" link
  src/app/dashboard/page.tsx             — health explorer entry banner
@Ridanshi Ridanshi force-pushed the feat/repo-health-explorer-398 branch from 50abce7 to 35ad0a6 Compare June 8, 2026 15:37
@Ridanshi
Copy link
Copy Markdown
Contributor Author

Ridanshi commented Jun 8, 2026

Hi, I've pushed the requested fixes, resolved conflicts, and all completed checks are passing. The Playwright smoke test is still in progress. Could someone please review when convenient? Thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

gssoc26 GSSoC 2026 contribution type:feature GSSoC type bonus: new feature type:testing GSSoC type bonus: tests (+10 pts)

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants