Skip to content

update deps 21 jul 2025 and resolve crash if API not available. #50

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 14 commits into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
103 changes: 103 additions & 0 deletions .github/copilot-instructions.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,103 @@
# OpenJDK Dashboard v2 - AI Coding Instructions

## Project Overview
This is a React-based dashboard for visualizing AdoptOpenJDK download statistics. The app is a Single Page Application (SPA) that consumes the AdoptOpenJDK v3 API and displays data through interactive charts.

## Architecture & Key Components

### Core Stack
- **Frontend**: React 16 with Ant Design UI components
- **Charts**: Highcharts with `highcharts-react-official`
- **Bundler**: Parcel (v1) for development and build
- **Server**: Express.js (development only - serves Parcel middleware)
- **Deployment**: Static files to GitHub Pages

### Application Structure
```
src/
├── App.js # Main layout with Ant Design Layout, routing, and sidebar nav
├── api.js # AdoptOpenJDK API client (downloads, tracking, monthly stats)
├── utils.js # HTTP utilities and data formatting helpers
├── ErrorBoundary.jsx # React error boundary wrapper
└── Graph/ # Chart components and page containers
├── index.js # Exports Download and Trends components
├── Download.js # Main dashboard with total downloads and breakdowns
├── Trends.js # Time-series analysis with configurable parameters
└── [Chart].js # Reusable Highcharts components
```

## Critical Patterns & Conventions

### API Integration
- All API calls go through `src/api.js` using the custom `get()` utility
- AdoptOpenJDK v3 API endpoints: `https://api.adoptopenjdk.net/v3/stats/downloads/`
- Data fetching happens in `componentDidMount()` with async/await pattern
- Always format numbers using `formatNum()` utility for display

### State Management
- Pure React class components with local state (no Redux/Context)
- State updates trigger chart re-renders automatically
- Trends component manages complex filter state for multiple chart series

### Chart Configuration
- Use Highcharts components from `src/Graph/` directory
- Pie charts for distribution data, line charts for time series
- Data must be transformed to Highcharts format: `[{name, y}]` for pie, `[x, y]` for series

### Routing & Navigation
- React Router v5 with `<Link>` components in Ant Design Menu
- Two main routes: `/download` (default) and `/trends`
- Sidebar navigation uses Ant Design Menu with collapsible state

## Development Workflow

### Local Development
```bash
npm install
npm start # Starts Express server with Parcel middleware on port 3000
```

### Production Build
```bash
npm run-script build # Outputs to ./dist/ with static files
```

### GitHub Pages Deployment
- Auto-deploys from `master` branch via GitHub Actions
- Build artifacts copied to `gh-pages` branch
- Includes `CNAME` and `404.html` for SPA routing support

## Dependencies & Constraints

### Legacy Versions (Handle with Care)
- React 16 (class components, no hooks)
- Ant Design v3 (different API than v4+)
- Parcel v1 (different config than v2)
- `http-proxy-middleware` v0.x (legacy API)

### Modern Babel Setup
- Babel 7.25+ with `@babel/plugin-transform-class-properties`
- Supports ES6+ class field syntax and arrow function methods
- Configuration in `src/.babelrc`

### External Dependencies
- AdoptOpenJDK v3 API for all data (no local data sources)
- GitHub Pages hosting (static files only, no server-side logic)

## When Making Changes

### Adding New Charts
1. Create reusable chart component in `src/Graph/`
2. Export from `src/Graph/index.js`
3. Import and use in `Download.js` or `Trends.js`
4. Follow existing Highcharts React patterns

### API Changes
- Modify `src/api.js` for new endpoints
- Use existing `get()` utility for consistency
- Handle async data loading in component `componentDidMount()`

### UI Changes
- Use Ant Design v3 components and patterns
- Maintain existing Layout structure in `App.js`
- Follow collapsible sidebar pattern for responsive design
22 changes: 14 additions & 8 deletions .github/workflows/deploy-to-gh-pages.yml
Original file line number Diff line number Diff line change
Expand Up @@ -8,16 +8,22 @@ jobs:
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/checkout@v1
uses: actions/checkout@v4

- name: Setup Node.js
uses: actions/setup-node@v4
with:
node-version: '20'
cache: 'npm'

- name: Build
run: |
npm install
npm run-script build
npm ci
npm run build

- name: Deploy
uses: peaceiris/actions-gh-pages@v2
env:
PERSONAL_TOKEN: ${{ secrets.ACCESS_TOKEN }}
PUBLISH_BRANCH: gh-pages
PUBLISH_DIR: ./dist
uses: peaceiris/actions-gh-pages@v4
if: github.ref == 'refs/heads/master'
with:
github_token: ${{ secrets.GITHUB_TOKEN }}
publish_dir: ./dist
1 change: 1 addition & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -3,3 +3,4 @@ dist
.cache
.project
.DS_Store
.parcel-cache/
20 changes: 14 additions & 6 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,22 +1,30 @@
# openjdk-dashboard-v2
The next gen download dashboard

The next gen download dashboard for AdoptOpenJDK statistics

## Local run/development steps

- start DownloadStats
```
``` bash
npm install
npm start
```

- open http://localhost:3000
- open [http://localhost:3000](http://localhost:3000)

## Deployment

- Compile and generate static files
```
npm run-script build

``` bash
npm run build
```

- serve ./dist

## Tech Stack

- **React 19** with modern functional components and hooks
- **Ant Design 5** for UI components
- **Highcharts 11** for data visualization
- **Parcel v2** for bundling and development server
- **AdoptOpenJDK v3 API** for download statistics data
2 changes: 1 addition & 1 deletion index.html
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@

<body>
<div id="root"></div>
<script src="src/index.js"></script>
<script type="module" src="src/index.js"></script>
</body>

</html>
Loading
Loading