Skip to content

feat: Add dashboard gauge widgets & mobile-responsive design#6

Merged
rudra496 merged 1 commit intomasterfrom
feature/dashboard-widgets-mobile-responsive
May 5, 2026
Merged

feat: Add dashboard gauge widgets & mobile-responsive design#6
rudra496 merged 1 commit intomasterfrom
feature/dashboard-widgets-mobile-responsive

Conversation

@rudra496
Copy link
Copy Markdown
Owner

@rudra496 rudra496 commented May 5, 2026

Summary

Addresses both #1 and #2 in a single PR.

Dashboard Widgets (#1)

  • Gauge widgets: Real-time radial bar gauges for temperature, energy, humidity, and light sensors using Recharts
  • Bar chart variant: Energy consumption now uses a bar chart for better readability
  • MiniSparkline component: Ready for embedding in device cards

Mobile-Responsive Design (#2)

  • Collapsible sidebar: Hamburger menu button with smooth slide-in animation and backdrop overlay on mobile (≤768px)
  • Responsive breakpoints: 1024px, 768px, and 480px with optimized layouts
  • Touch-friendly: Larger tap targets, condensed topbar stats on small screens
  • Grid adjustments: Stats, charts, gauges, and device grids all adapt to screen size

Files Changed

  • frontend/src/App.js: Added GaugeWidget, MiniSparkline, bar chart variant, sidebar state management, mobile menu button
  • frontend/src/App.css: Added gauge styles, mobile menu/overlay styles, improved responsive breakpoints

Closes #1
Closes #2

- Add RadialBar gauge widgets for real-time sensor readings (temperature, energy, humidity, light)
- Add bar chart variant for energy consumption visualization
- Add MiniSparkline component for future use in device cards
- Implement collapsible sidebar with hamburger menu for mobile
- Add backdrop overlay for mobile sidebar
- Improve responsive breakpoints (768px, 480px)
- Touch-friendly controls and optimized spacing for small screens

Closes #1, Closes #2
@rudra496 rudra496 merged commit 65b3cb6 into master May 5, 2026
3 checks passed
@rudra496 rudra496 deleted the feature/dashboard-widgets-mobile-responsive branch May 5, 2026 17:41
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Add mobile-responsive design for monitoring UI Add dashboard widgets for sensor data visualization

1 participant