Skip to content

README.md

Latest commit

 

History

History
101 lines (71 loc) · 2.45 KB

README.md

File metadata and controls

101 lines (71 loc) · 2.45 KB

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
  1. Ensure GitHub CLI is authenticated:
gh auth login
  1. (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