mirror of
https://github.com/ferdzo/iotDashboard.git
synced 2026-04-05 09:06:26 +00:00
112 lines
2.7 KiB
Markdown
112 lines
2.7 KiB
Markdown
# IoT Dashboard Frontend
|
|
|
|
React-based dashboard for visualizing IoT telemetry data with customizable widgets.
|
|
|
|
## Technology Stack
|
|
|
|
| Technology | Purpose |
|
|
|------------|---------|
|
|
| React 19 | UI framework |
|
|
| Vite | Build tool and dev server |
|
|
| TypeScript | Type safety |
|
|
| DaisyUI | Component library |
|
|
| Tailwind CSS | Styling |
|
|
| React Query | Data fetching and caching |
|
|
| Recharts | Data visualization |
|
|
| React Grid Layout | Drag-and-drop widget layout |
|
|
|
|
## Features
|
|
|
|
- Customizable widget-based dashboard
|
|
- Drag-and-drop layout editing
|
|
- Multiple widget types (weather, charts, calendar, AI briefings)
|
|
- Responsive design
|
|
- Dark/light theme support
|
|
|
|
## Widget Types
|
|
|
|
| Widget | Description |
|
|
|--------|-------------|
|
|
| WeatherWidget | Current weather and forecast |
|
|
| AirQualityWidget | PM2.5, PM10 levels from pulse.eco |
|
|
| ComfortIndexWidget | Indoor comfort based on temperature/humidity |
|
|
| RunSuitabilityWidget | Outdoor running conditions analysis |
|
|
| CalendarWidget | iCal calendar integration |
|
|
| DailyBriefingWidget | AI-generated daily summary |
|
|
| HealthStatsWidget | Health metrics from wearables |
|
|
| TelemetryChartWidget | Time-series data visualization |
|
|
|
|
## Project Structure
|
|
|
|
```
|
|
frontend/
|
|
├── src/
|
|
│ ├── api/ # API client functions
|
|
│ ├── components/ # React components
|
|
│ │ ├── widgets/ # Widget components
|
|
│ │ └── ...
|
|
│ ├── hooks/ # Custom React hooks
|
|
│ ├── types/ # TypeScript type definitions
|
|
│ ├── utils/ # Utility functions
|
|
│ ├── App.tsx # Main application component
|
|
│ └── main.tsx # Entry point
|
|
├── public/ # Static assets
|
|
├── package.json # Dependencies
|
|
└── vite.config.ts # Vite configuration
|
|
```
|
|
|
|
## Running
|
|
|
|
```bash
|
|
cd frontend
|
|
npm install
|
|
npm run dev
|
|
```
|
|
|
|
Development server runs at http://localhost:5173
|
|
|
|
## Configuration
|
|
|
|
The frontend connects to the Django API. Configure the API URL in `vite.config.ts`:
|
|
|
|
```typescript
|
|
proxy: {
|
|
'/api': {
|
|
target: 'http://localhost:8000',
|
|
changeOrigin: true,
|
|
},
|
|
}
|
|
```
|
|
|
|
## Building for Production
|
|
|
|
```bash
|
|
npm run build
|
|
```
|
|
|
|
Output is in the `dist/` directory.
|
|
|
|
## Key Components
|
|
|
|
| Component | Purpose |
|
|
|-----------|---------|
|
|
| Dashboard.tsx | Main dashboard with widget grid |
|
|
| WidgetWrapper.tsx | Generic widget container |
|
|
| EditWidgetModal.tsx | Widget configuration modal |
|
|
| AddWidgetMenu.tsx | Widget type selection |
|
|
|
|
## API Integration
|
|
|
|
All API calls are in `src/api/index.ts`. Uses React Query for:
|
|
- Automatic caching
|
|
- Background refetching
|
|
- Loading/error states
|
|
|
|
Example:
|
|
```typescript
|
|
const { data, isLoading } = useQuery({
|
|
queryKey: ['weather', city],
|
|
queryFn: () => fetchWeather(city),
|
|
});
|
|
```
|