About Project
A powerful, zero-dependency analytics dashboard built with vanilla JavaScript and dynamic SVG rendering. The dashboard fetches live data from REST APIs and renders interactive charts, graphs, and KPI cards in real-time. Designed with a dark-mode-first approach, it features smooth transitions between data states, responsive grid layouts, and an intuitive filtering system that updates all visualizations simultaneously.
Key Features
Live SVG Charts
Dynamically generated bar, line, and pie charts using pure SVG with smooth animated transitions between data states.
API Integration
Real-time data fetching from multiple REST endpoints with automatic polling, caching, and error recovery.
Advanced Filtering
Multi-criteria dataset filtering with date ranges, categories, and custom queries that update all widgets instantly.
KPI Cards
Animated key performance indicators with trend arrows, sparklines, and color-coded threshold alerts.
Dark Mode UI
Cyberpunk-inspired dark interface with neon accent colors, glassmorphism panels, and reduced eye strain design.
Responsive Grid
CSS Grid-based layout that adapts from 4-column desktop to single-column mobile with draggable widget reordering.
Tech Stack
Project Preview
The dashboard presents a command-center style layout with live-updating charts, sortable data tables, and customizable widget panels. Each chart features hover tooltips, zoom controls, and export-to-PNG functionality.