luci-app-netstat

A professional network statistics application for OpenWrt LuCI

Features • Installation • Usage • Development • License

---

Overview

luci-app-netstat is a modern, feature-rich LuCI application that provides comprehensive network traffic statistics and monitoring for OpenWrt routers. It leverages vnstat for accurate traffic monitoring and presents the data through an intuitive web interface.

The application offers real-time network statistics, historical data visualization, and detailed traffic analysis to help you understand your network usage patterns.

Features

✨ Core Features:

• 📊 Real-time Network Monitoring - Track network traffic with live statistics
• 📈 Traffic Visualization - Interactive charts powered by Chart.js
• 📅 Historical Data - Monitor trends over days, weeks, months, and years
• 🎨 Dark Mode Support - Professional dark theme for comfortable usage
• 📱 Responsive Design - Works seamlessly on desktop and mobile devices
• ⚙️ Easy Configuration - Simple UCI-based configuration system
• 🔄 Automatic Updates - Uses vnstat for continuous data collection

Requirements

• OpenWrt with LuCI installed
• vnstat package (required dependency)
• Modern web browser (Chrome, Firefox, Safari, Edge)

Installation

Automatic Installation

Clone the repository and install using the OpenWrt build system:

git clone https://github.com/dotycat/luci-app-netstat.git
cd luci-app-netstat
make

Manual Installation

1. Download the latest .ipk package from Releases
2. Upload to your router via SCP:

   scp luci-app-netstat_*.ipk root@<router-ip>:/tmp/

3. Install via SSH:

   ssh root@<router-ip>
   opkg install /tmp/luci-app-netstat_*.ipk

4. Navigate to LuCI Web Interface → Status → Network Statistics

Configuration

UCI Configuration

The application configuration is managed via UCI. Edit /etc/config/netstats to customize:

config netstat
    option enabled '1'
    option interface 'wan'
    option update_interval '60'

vnstat Integration

Ensure vnstat is properly configured and running:

opkg install vnstat
service vnstat start
service vnstat enable

Usage

Dashboard

1. Log into your OpenWrt LuCI web interface
2. Navigate to Status → Network Statistics
3. View traffic statistics for your network interfaces

Available Data

• Current Usage - Real-time traffic rates
• Daily Statistics - Traffic breakdown by day
• Monthly Analysis - Monthly usage overview

Dark / Light Theme Switching

The NoobWRT theme stores the user's theme preference in localStorage under the key luci-theme ('dark' or 'light'). When dark mode is active the theme also adds the class dark-theme to document.body.

tabs.htm (rendered on every Netstat tab) reads this value at page load:

var isDark = localStorage.getItem('luci-theme') === 'dark'
          || document.body.classList.contains('dark-theme');

If dark mode is detected, a <style> block is injected into the page with !important overrides for every .netstat-* class. This covers:

Selector	Dark value
.netstat-dashboard	#1a1d20 background
.netstat-summary	#111315 background
.netstat-chart-wrap	#1a1d20 background
.netstat-about-card	#1a1d20 background
.netstat-chart-title, .netstat-summary-item	#f3f4f6 text
.netstat-summary-label, .netstat-about-label	#9ca3af text
.netstat-about-row a	#60a5fa link color

The same flag (window._netstatDark) is passed to Chart.js so axis labels and grid lines also use dark-friendly colors.

No server-side detection or separate CSS files are needed — everything is driven by the single localStorage value the theme toggle button already sets.

Credits

• Original Development: SMALLPROGRAM
• Maintenance: nooblk-98

Contributing

Contributions are welcome! Please feel free to:

• Report bugs and issues
• Submit feature requests
• Create pull requests with improvements
• Improve documentation

Support

For support, issues, or questions:

• Open an Issue on GitHub
• Check existing Discussions
• Contact: liyanagelsofficial@gmail.com

---

Made with ❤️ for the OpenWrt Community