Umami Dashboard

# Umami Dashboard

[English](README.md) | [中文](README.cn.md)

A modern Umami analytics dashboard providing real-time website traffic statistics and monitoring capabilities.

## Features

- 🚀 Real-time traffic monitoring
- 📊 Multi-website statistics aggregation
- 📈 Historical data chart visualization
- ⚙️ Flexible configuration management
- 🔄 Auto-refresh settings
- 💾 Local data storage
- 🌍 Environment variable support

## Quick Start

Start with Docker in one command:

```bash
docker run -p 3000:3000 songtianlun/umami-dashboard:latest
```

Then visit [http://localhost:3000](http://localhost:3000) to start using the dashboard.

## Supported Architectures

The Docker image supports multiple architectures for maximum compatibility:

| Architecture | Status | Example Devices |
|--------------|--------|-----------------|
| `linux/amd64` | ✅ | Intel/AMD 64-bit servers, most PCs |
| `linux/arm64` | ✅ | Apple Silicon (M1/M2/M3), AWS Graviton, Raspberry Pi 4/5 (64-bit) |
| `linux/arm/v7` | ✅ | Raspberry Pi 2/3, ARM 32-bit devices |

Docker will automatically pull the correct image for your platform. You can verify the architecture support:

```bash
docker manifest inspect songtianlun/umami-dashboard:latest | grep architecture
```

## Environment Variable Configuration

For better deployment experience, this application supports pre-setting configuration through environment variables. Configuration priority is as follows:

1. **Browser Local Storage**: First reads user-saved configuration from localStorage
2. **Environment Variables**: If no local storage configuration exists, reads from environment variables

### Supported Environment Variables

| Environment Variable | Description | Example Value |
|---------------------|-------------|---------------|
| `UMAMI_SERVER_URL` | Umami server address | `https://analytics.yoursite.com` |
| `UMAMI_USERNAME` | Umami login username | `admin` |
| `UMAMI_PASSWORD` | Umami login password | `your-password` |
| `NEXT_PUBLIC_UMAMI_ANALYTICS_URL` | Umami analytics script URL | `https://umami.xxx.com/script.js` |
| `NEXT_PUBLIC_UMAMI_WEBSITE_ID` | Umami website ID | `xxx` |

### Environment Variable Usage Examples

#### Docker Deployment
```bash
docker run -d \
  -p 3000:3000 \
  -e UMAMI_SERVER_URL=https://analytics.yoursite.com \
  -e UMAMI_USERNAME=admin \
  -e UMAMI_PASSWORD=your-password \
  songtianlun/umami-dashboard:latest
```

#### Docker Compose
```yaml
version: '3.8'
services:
  umami-dashboard:
    image: songtianlun/umami-dashboard:latest
    ports:
      - "3000:3000"
    environment:
      - UMAMI_SERVER_URL=https://analytics.yoursite.com
      - UMAMI_USERNAME=admin
      - UMAMI_PASSWORD=your-password
```

#### Vercel Deployment
Add environment variables in Vercel project settings:
- `UMAMI_SERVER_URL`
- `UMAMI_USERNAME`  
- `UMAMI_PASSWORD`

#### Local Development
Create `.env.local` file:
```bash
UMAMI_SERVER_URL=https://analytics.yoursite.com
UMAMI_USERNAME=admin
UMAMI_PASSWORD=your-password

# Umami Analytics Script Configuration (choose one method)
# Method 1: Complete script tag (recommended)
NEXT_PUBLIC_ANALYTICS_SCRIPT='<script defer src="https://umami.frytea.com/script.js" data-website-id="f7438333-3487-4446-bdb9-c47b35016ccf"></script>'

# Method 2: Separate configuration (comment out the following two lines if using method 1)
# NEXT_PUBLIC_UMAMI_ANALYTICS_URL=https://umami.xxx.com/script.js
# NEXT_PUBLIC_UMAMI_WEBSITE_ID=xxxxxx
```

## Development Environment Setup

### 1. Install Dependencies
```bash
npm install
# or
pnpm install
# or
yarn install
```

### 2. Configure Environment Variables (Optional)
Create `.env.local` file and add your Umami server configuration.

### 3. Start Development Server
```bash
npm run dev
# or
pnpm dev
# or
yarn dev
```

### 4. Open Browser
Visit [http://localhost:3000](http://localhost:3000) to view the application.

## Configuration Management

### First-time Setup
1. Click the "Settings" button in the top right corner
2. Fill in your Umami server information:
   - Server address (e.g., https://analytics.yoursite.com)
   - Username
   - Password
3. Click "Test Connection" to verify configuration
4. Click "Save Configuration" to complete setup

### Configuration Reset
- Click the reset button (🔄) in the settings dialog
- System will clear locally saved configuration
- If environment variables are set, it will automatically read from environment variables
- If no environment variables exist, all fields will be cleared

### Configuration Priority
1. **User Manual Configuration**: User-saved configuration in settings interface has highest priority
2. **Environment Variable Configuration**: Automatically reads environment variables when no user configuration exists
3. **Empty Configuration**: If none of the above exist, fields remain empty

## Tech Stack

- **Frontend Framework**: Next.js 14 (App Router)
- **UI Components**: Shadcn/ui + Tailwind CSS
- **Chart Library**: Recharts
- **State Management**: React Hooks
- **Data Storage**: LocalStorage + Session History
- **Type Support**: TypeScript

## Deployment Recommendations

### Production Environment Deployment
1. Use environment variables to set default configuration
2. Recommend setting read-only default configuration, allowing users to override as needed
3. Regularly backup user configuration data

### Security Considerations
- Please securely manage password information in environment variables
- Recommend creating dedicated Umami accounts for Dashboard
- Use HTTPS in production environments

## Development Guide

### Project Structure
```
├── app/                    # Next.js App Router
│   ├── api/umami/         # API routes
│   ├── globals.css        # Global styles
│   ├── layout.tsx         # Root layout
│   └── page.tsx           # Main page
├── components/            # React components
│   ├── ui/               # UI base components
│   ├── login-config.tsx  # Login configuration component
│   └── ...
├── hooks/                # Custom Hooks
├── lib/                  # Utility functions
└── styles/               # Style files
```

### Adding New Features
1. Create new components in `components/` directory
2. Add API routes under `app/api/umami/`
3. Update main page to integrate new features

## License

MIT License

## Contributing

Issues and Pull Requests are welcome! 

## Star History

<a href="https://www.star-history.com/#songtianlun/umami-dashboard&Timeline">
 <picture>
   <source media="(prefers-color-scheme: dark)" srcset="https://api.star-history.com/svg?repos=songtianlun/umami-dashboard&type=Timeline&theme=dark" />
   <source media="(prefers-color-scheme: light)" srcset="https://api.star-history.com/svg?repos=songtianlun/umami-dashboard&type=Timeline" />
   <img alt="Star History Chart" src="https://api.star-history.com/svg?repos=songtianlun/umami-dashboard&type=Timeline" />
 </picture>
</a>