Spaces:

princelv
/

dte

Sleeping

App Files Files Community

dte / README.md

princelv

Update README.md

c78e776 verified about 2 months ago

preview code

raw

history blame contribute delete

4.44 kB

metadata

license: mit
title: DTE Punjab — Training Dashboard v2
sdk: docker
colorFrom: yellow
short_description: A full-featured Flask dashboard for the BDDS, DTE, NIELIT.

🎓 DTE Punjab — Training Dashboard v2

A comprehensive, full-featured Flask-based analytical dashboard designed for the Big Data & Data Science Training Programme conducted for the Department of Technical Education and Industrial Training (DTE), Government of Punjab.

🌐 Live Demo

Experience the Dashboard Live

🌐 GITHUB REPO:

https://github.com/lovnishverma/dte_dashboard

✨ Key Features

📊 Comprehensive Analytics: Real-time KPI cards, batch overview strips, and multi-dimensional mini-charts (gender/batch/branch splits).
📈 Advanced Visualizations: Detailed district bar charts, branch/gender doughnuts, designation breakdowns, and batch-gender grouped metrics using Chart.js.
💡 Smart Insights Engine: Auto-generated analytical insight cards with animated progress bars evaluating demographic and geographic distributions.
🗺️ Interactive Geospatial Mapping: Clickable bubble map plotting participant density across Punjab districts. Features an integrated Google Maps fallback and click-to-open functionality for specific polytechnic colleges.
🗄️ Dynamic Participant Data: Searchable, filterable (by batch, designation, district), and fully sortable paginated data table.
📥 Export Capabilities: One-click CSV generation for both complete datasets and actively filtered views.
🌓 Modern UI/UX: Fully responsive, premium interface with a persistent Dark / Light mode toggle powered by vanilla CSS variables and localStorage.
🖼️ Media Gallery: Built-in lightbox gallery showcasing batch-wise group photographs.

🛠️ Technology Stack

Backend: Python 3, Flask, Pandas, OpenPyXL, python-dotenv
Frontend: HTML5, CSS3, Vanilla JavaScript (ES6+), Chart.js
APIs & Integrations: Google Maps JavaScript API (Advanced Markers)

⚙️ Installation & Setup

1. Clone the repository:

git clone https://github.com/lovnishverma/dte_dashboard.git
cd dte_dashboard

2. Create and activate a virtual environment (Recommended):

python -m venv venv
source venv/bin/activate  # On Windows use: venv\Scripts\activate

3. Install the required dependencies:

pip install -r requirements.txt

4. Configure Environment Variables: Ensure you have a .env file in the root directory containing your Google Maps API key (and optionally the Flask environment):

GOOGLE_MAPS_API_KEY=your_actual_api_key_here
FLASK_ENV=development

5. Run the application:

python app.py

The dashboard will be available at http://localhost:5000

🔧 Updates & Bug Fixes (v2)

Fixed gm_authFailure crash on AdvancedMarkerElement with a robust authentication guard.
Resolved designation normalization edge cases (e.g., standardizing "SR. LECTURER" vs "Senior Lecturer").
Pagination now correctly displays windowed page numbers, preventing overflow for large datasets.
Optimized count-up animations to correctly target the first text node.
Charts and Canvas maps now seamlessly redraw on theme toggles and section re-visits.

📁 Project Structure

dte_dashboard/
├── app.py                  # Core Flask backend & API routing
├── requirements.txt        # Python dependencies
├── .env                    # Environment variables (API Keys)
├── data/
│   └── DTE_all_Batch.xlsx  # Source dataset
├── templates/
│   └── index.html          # Main dashboard UI
└── static/
    ├── css/style.css       # Custom styling (Dark/Light themes)
    ├── js/main.js          # Frontend logic & Chart integrations
    └── images/             # Batch group photographs

This dashboard was developed as part of a specialized training initiative under FutureSkills PRIME.

Created by Lovnish Verma (Project Engineer) and Ravi Kant (Project Assistant), NIELIT ROPAR, under the expert guidance of Dr. Sarwan Singh and Anita Budhiraja Mam.