A beautiful, privacy-first web application to visualize and analyze your Apple Health data. Transform your health export into insightful dashboards with detailed metrics, charts, and training analytics.
- Overview Statistics: Total workouts, distance, calories, and duration
- Heart Rate Monitoring: Track heart rate trends and resting heart rate
- Weight Progress: Monitor weight changes over time
- Daily Activity: Steps, distance, calories, and exercise minutes
- Sleep Analysis: Sleep duration and quality tracking
- Workout Distribution: Visual breakdown of activities by type
- Performance Metrics: Average distance, duration, calories, and heart rate
- Workout Trends: Track performance improvements over time
- Pace Analysis: Monitor running/cycling pace (min/km)
- Heart Rate Zones: Distribution of workout intensity
- Detailed Workout History: Complete log with all metrics
- Activity Filtering: Filter by workout type (Walking, Cycling, Running, etc.)
- All data processing happens in your browser
- No data is sent to any server
- Your health data never leaves your device
- No tracking or analytics
- Open the Health app on your iPhone
- Tap your profile picture in the top right corner
- Scroll down and tap "Export All Health Data"
- Save the
export.zipfile
- Visit the dashboard website
- Drag and drop your
export.zipfile or click to browse - Wait for processing (happens in your browser)
- Explore your health insights!
To add your own sample-export.zip file for demonstration:
- Place your
export.zipfile in thepublic/folder - Rename it to
sample-export.zip - The "View Real Sample Dashboard" button will load this file
Note: Due to GitHub's file size limitations (100MB), sample export files are not included in the repository. The demo dashboard uses synthetic data for demonstration purposes.
# Clone the repository
git clone https://github.com/anldrms/workout-tree.git
cd workout-tree
# Install dependencies
npm install
# Run development server
npm run devOpen http://localhost:3000 to view the app.
# Build static site
npm run build
# The output will be in the 'out' directory- Push your code to GitHub repository
- Enable GitHub Pages in repository settings
- Set source to GitHub Actions
- The site will be available at
https://yourusername.github.io/workout-tree
You can also use the included GitHub Actions workflow:
# .github/workflows/deploy.yml
name: Deploy to GitHub Pages
on:
push:
branches: [main]
jobs:
build-and-deploy:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- uses: actions/setup-node@v4
with:
node-version: '20'
- run: npm ci
- run: npm run build
- uses: actions/upload-pages-artifact@v3
with:
path: ./out
- uses: actions/deploy-pages@v4- Framework: Next.js 15 (App Router)
- Language: TypeScript
- Styling: Tailwind CSS
- Charts: Recharts
- Icons: Lucide React
- Date Handling: date-fns
- XML Parsing: fast-xml-parser
apple-health-dashboard/
├── app/
│ ├── page.tsx # Landing page with upload
│ ├── dashboard/
│ │ └── page.tsx # Health dashboard
│ ├── training/
│ │ └── page.tsx # Training analytics
│ └── globals.css # Global styles
├── components/
│ └── ui/
│ └── card.tsx # UI components
├── lib/
│ ├── parser.ts # XML parsing logic
│ ├── processor.ts # Data processing
│ ├── types.ts # TypeScript types
│ ├── utils.ts # Utility functions
│ └── sampleData.ts # Sample data for demo
└── public/ # Static assets
The dashboard processes and visualizes the following metrics:
- Heart Rate (avg, resting, max)
- Heart Rate Variability (HRV)
- Body Mass (Weight)
- Height
- Sleep Analysis
- Steps Count
- Distance (Walking/Running/Cycling)
- Flights Climbed
- Active Energy Burned
- Basal Energy Burned
- Exercise Time
- Stand Hours
- Activity Type
- Duration
- Distance
- Calories Burned
- Average Pace
- Average Heart Rate
- Maximum Heart Rate
- Running Power
- Running Stride Length
- Running Vertical Oscillation
- Running Ground Contact Time
- Workout Routes (GPX data)
Contributions are welcome! Feel free to:
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
MIT License - feel free to use this project for personal or commercial purposes.
- Built with Next.js
- Styled with Tailwind CSS
- Charts by Recharts
- Icons by Lucide
If you find this project helpful, please give it a star on GitHub!
Note: This project is not affiliated with Apple Inc. Apple Health is a trademark of Apple Inc.