https://github.com/s71m/nicegui_dashboard
Example of template to build dashboard with using NiceGUI
https://github.com/s71m/nicegui_dashboard
cards dashboard drag-and-drop nicegui vue-flow
Last synced: 4 months ago
JSON representation
Example of template to build dashboard with using NiceGUI
- Host: GitHub
- URL: https://github.com/s71m/nicegui_dashboard
- Owner: s71m
- License: mit
- Created: 2024-11-26T04:09:42.000Z (11 months ago)
- Default Branch: master
- Last Pushed: 2025-04-08T03:01:53.000Z (6 months ago)
- Last Synced: 2025-06-01T13:12:01.928Z (4 months ago)
- Topics: cards, dashboard, drag-and-drop, nicegui, vue-flow
- Language: Python
- Homepage: https://nicegui.io/
- Size: 147 KB
- Stars: 22
- Watchers: 1
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
This repository demonstrates how quickly and elegantly you can create dashboards with **NiceGUI**. After trying Streamlit, Dash, Panel, and now NiceGUI, I've found that [NiceGUI](https://nicegui.io/) is fast, intuitive, and supports many plugins.
The purpose of this repository is to provide a friendly starting point for developers who want to work with NiceGUI.
----------
## Add new page
- Explore [example_page.py](web%2Fpages%2Fexamples%2Fexample_page.py) to see how a page is built.
- Create a new folder under `web/pages/` (e.g., `new_folder`).
- Add a `new_page.py` file with a `NewPage` class.
- Click the "Reload" button and watch it appear automatically in the application!.
----------
### **How to Start**
1. Install the required dependencies using:
```bash
pip install -r requirements.txt
```
2. Launch the application:
```bash
cd nicegui_dashboard
python -m web.app
```
3. Open your browser and navigate to:
`http://localhost:8080`
### Explanation of project structure: `nicegui_dashboard`
#### **web/**
- **`app.py`**: Main entry point for the application.
- **`header.py`**: Defines the UI layout and functionality for the application's header.
- **`pageconf.yaml`**: YAML configuration file for page settings.
- **`pagetemplate.py`**: Base template for creating pages with a common structure.
----------
#### **web/components/**
- **`modulereloader.py`**: Handles reloading of modules for dynamic updates during development without restarting the server.
- **`pageconf.py`**: Manages page configurations stored in the YAML file.
- **`pageinfo.py`**: Provides metadata about each page (e.g., route, name).
- **`pagemanager.py`**: Creates the page structure (`{folder}/{module}`) and handles page routing.
----------
#### **web/pages/**
- **`examples/example_page.py`**: Demonstrates how to create a new page using `PageTemplate`.
- **`cards/cards_page.py`**: Implements a page displaying grid of cards.
- **`cards/cards_polars_page.py`**: Similar to `cards_page.py` but with using Polars.
- **`tools/project_modules_page.py`**: Visualizes currently running project modules, allowing for reloading.
----------
#### **web/static/**
- Static files for styling and interactivity.
- **`drawer.js`**: JavaScript for dynamically changing the width of `ui.left_drawer` (sidebar).
- **`header.css`**: CSS for styling the application's header.
- **`styles.css`**: Global styles for the dashboard.
https://github.com/user-attachments/assets/cadec471-1204-446f-bb4e-2ad72adeebfd
## VueFlow for NiceGUI
https://github.com/user-attachments/assets/11dba36d-17fe-47e8-82b2-8f94fa83de84