Aboard PR Dashboard

A React-based dashboard for visualizing pull request statistics and metrics for the Aboard project. Displays merged PRs, code changes, and trends over time with interactive charts and filters.

Features

• 📊 PR Statistics: View total merged PRs, lines added, and lines removed
• 📈 Time-based Visualizations:
  • Cumulative PRs over time (area chart)
  • PRs per month (bar chart)
  • Code changes (additions/deletions) over time
• ⏱️ Time Range Filters: Filter data by 7 days, 30 days, 6 weeks, 3 months, 6 months, 1 year, or all time
• 🔗 Recent PRs: Quick access to the 10 most recently merged PRs with links

Prerequisites

• Node.js (v18 or higher)
• GitHub CLI (gh) installed and authenticated
• Access to the GitHub repository you want to query

Setup

1. Install dependencies:

npm install

2. Ensure GitHub CLI is authenticated:

gh auth login

3. (Optional) Set the GitHub repository to query:

export GITHUB_REPO=owner/repo

If not set, defaults to Teamtailor/aboard.

Running

Development Mode

Start both the API server and Vite dev server:

npm start

Or run them separately:

# Terminal 1: API server (runs on http://localhost:3002)
# Set GITHUB_REPO environment variable if needed
GITHUB_REPO=owner/repo npm run server

# Terminal 2: Vite dev server (runs on http://localhost:5173)
npm run dev

Production Build

Build for production:

npm run build

Preview the production build:

npm run preview

How It Works

The dashboard consists of two parts:

1. API Server (server.js): A Node.js HTTP server that fetches PR data from GitHub using the GitHub CLI (gh pr list) and serves it as JSON at http://localhost:3002/api/prs

2. React Frontend: A Vite + React application that fetches PR data from the API and displays it using Recharts for visualizations

Technologies

• React 19 - UI framework
• Vite - Build tool and dev server
• Recharts - Chart library for data visualization
• date-fns - Date formatting and manipulation
• GitHub CLI - Fetching PR data from GitHub

Configuration

Environment Variables

• GITHUB_REPO - GitHub repository in format owner/repo (default: Teamtailor/aboard)

Example:

export GITHUB_REPO=myorg/myrepo
npm run server

API Endpoint

• GET /api/prs - Returns JSON with PR data including number, title, URL, merge date, additions, and deletions