kshitizb/vnstat-dashboard repository overview

⁠VNStat Dashboard

A sleek, responsive, containerized web dashboard to visualize network interface statistics using vnstat⁠.

⁠✨ Features

• Real-time traffic display from vnstat
• Graphs for Hourly, Daily, Monthly, Yearly usage
• Responsive, dark-mode friendly UI
• Dockerized for portability
• Uses a single container for backend + frontend
• Automatic Interface Detection – no hardcoded eth0, wlan0 etc.
• Custom interface filtering via environment variables
• Works on ARM (Raspberry Pi) and x86 systems

⁠📦 Technologies Used

• Frontend: React + TailwindCSS + Recharts
• Backend: Node.js + Express
• System: vnStat CLI
• Containerization: Docker (multi-stage Alpine build)

⁠🚀 Getting Started

⁠1. Clone the Repository

git clone https://github.com/Kshitiz-b/vnstat-dashboard.git
cd vnstat-dashboard

⁠2. Build Docker Image

docker build -t vnstat-dashboard .

⁠3. Run the Container

Make sure to use --privileged so that vnstat inside the container can access system data:

docker run -d \
  --name vnstat-dashboard \
  --privileged \
  --network host \
  -v /var/lib/vnstat:/var/lib/vnstat:ro \
  kshitizb/vnstat-dashboard

⁠4. Access the Dashboard

Open your browser and navigate to:

http://localhost:8050

⁠🐳 Using Docker Compose

A ready-to-use docker-compose.yml is included:

services:
  vnstat-dashboard:
    image: kshitizb/vnstat-dashboard:latest
    network_mode: host
    privileged: true
    volumes:
      - /var/lib/vnstat:/var/lib/vnstat:ro
    restart: unless-stopped

Run with:

docker compose up -d

⁠🧭 Environment Variables

⁠🖼️ Screenshots

⁠🔧 Requirements

• Docker installed
• vnstat installed and daemon running on host (sudo apt install vnstat)
• Raspberry Pi or any ARMv8/AMD64 compatible Linux device

⁠🐳 Ports & API

• Frontend + API served on same port: 8050
• Backend API Endpoints:
  • /api/interfaces → List of available interfaces
  • /api/vnstat/:interface → Detailed JSON data for that interface

⁠🧩 Directory Structure

.
├── backend/
│   └── server.js
├── frontend/
│   ├── public/
│   └── src/
├── preview/
├── docker-compose.yml
├── Dockerfile
└── README.md

⁠📛 Customization

• Configure detection rules in backend/server.js
• Change UI/theme in frontend/src/App.js or TailwindCSS

⁠📝 License

MIT © Kshitiz⁠