Sensor Data Monitoring
Relevant source files
The following files were used as context for generating this wiki page:
The Sensor Data Monitoring system is a core feature of the AirZen project, designed to provide comprehensive, real-time insights into air quality. It collects data from various IoT sensors, processes it, and presents it to users through an intuitive web interface. The system monitors key environmental metrics, displays current and historical data, and offers administrative oversight of connected devices.
The primary goal is to help users understand their environment, ensure air quality stays within healthy limits, and provide historical data for analysis. The monitoring is accessible through several user-facing pages, including a main Dashboard, a detailed Air Quality Index page, and a History log.
Sources: frontend/src/pages/Public_page.js:148-154, frontend/src/App.js:28-34
Monitored Metrics
The system tracks several key air quality and environmental metrics. Each metric has defined units, healthy baselines based on recommendations from organizations like WHO and ASHRAE, and a function to determine if a value is healthy.
Sources: frontend/src/pages/AirQualityIndexPage.jsx:11-61
| Metric Key | Display Name | Unit | Healthy Baseline | Health Condition | Recommendation |
|---|---|---|---|---|---|
PM25 | PM2.5 | µg/m³ | 15 | value <= 15 | WHO: 24h avg ≤ 15 µg/m³; annual ≤ 5 µg/m³. |
CO2 | CO₂ | ppm | 1000 | value <= 1000 | ASHRAE: Indoor CO₂ should be ≤ 1000 ppm. |
TEMP | Nhiệt độ | °C | 26 | 20 <= value <= 26 | OSHA: Comfortable indoor temp is 20–26 °C. |
HUMI | Độ ẩm | % | 60 | 40 <= value <= 60 | ASHRAE: Ideal indoor humidity is 40–60%. |
GAS | Khí gas | ppm | 50 | value <= 50 | WHO: VOC/gas should be under 50 ppm. |
This configuration is defined in the METRICS constant within the AirQualityIndexPage.
Sources: frontend/src/pages/AirQualityIndexPage.jsx:11-61
Frontend Visualization
The frontend is responsible for presenting sensor data to both regular users and administrators through a series of specialized pages and components.
Sources: frontend/src/App.js:28-46
Component Interaction Flow
The following diagram illustrates how a user navigates through the different monitoring pages within the application.
Sources: frontend/src/App.js:25-49
Dashboard Overview
The Dashboard page provides a high-level, at-a-glance summary of the current sensor readings. It uses a series of CardData components to display the latest value for each key metric.
- CO₂
- PM2.5
- Gas
- Nhiệt độ (Temperature)
- Độ ẩm (Humidity)
The page also includes an OverviewChart and a QualityChart for a broader visual summary, although their specific implementation details are in separate components.
Sources: frontend/src/pages/Dashboard.jsx:8-23
Detailed Metric Analysis
The AirQualityIndexPage offers an in-depth, interactive analysis of individual metrics. Users can select a specific metric and a time range to visualize the data on a line chart.
Key features include:
- Metric & Range Selection: Dropdowns allow users to switch between metrics (PM2.5, CO2, etc.) and time ranges (Real-time, Day, Week, Month).
- Status Badge: Displays the most recent sensor value, its unit, and a "Lành mạnh" (Healthy) or "Không lành mạnh" (Unhealthy) status based on pre-configured thresholds.
- Interactive Chart: A
LineChartfrom therechartslibrary that plots the data over the selected time range. - Reference Line: A dashed red line indicates the recommended baseline (e.g., WHO limit) for the selected metric, providing immediate visual context for the data points.
The data for the chart is currently generated by a genData function for demonstration purposes.
Sources: frontend/src/pages/AirQualityIndexPage.jsx:128-268
The user interaction flow on this page is as follows:
Historical Data View
The History page allows users to review and export historical sensor data. It provides tools for filtering and analysis.
- Summary Cards: Displays the highest, average, and lowest values for a given period.
- Data Table: A sortable table lists sensor readings with timestamps. Columns include Time, Temperature, Humidity, CO₂, PM2.5, Gas, and Status.
- Filtering: Users can filter the data by day, week, or month.
- CSV Export: A function
handleExportcompiles the displayed data into a CSV file for download.
The status of each data row is visually indicated by a colored dot and a label (e.g., "Tốt", "KLM", "NH").
Sources: frontend/src/pages/History.jsx:18-24, frontend/src/pages/History.jsx:40-62
Admin Overview
The AdminOverview page provides administrators with aggregate statistics about the system, including sensor-related device statuses. It features cards that show the total number of devices and their current online/offline status, which is crucial for monitoring the health of the data collection network. A pie chart visualizes the proportion of online versus offline devices.
Sources: frontend/src/pages/AdminOverview.jsx:18-20, frontend/src/pages/AdminOverview.jsx:100-117
Backend System
The backend is a Node.js application using the Express framework. It is responsible for handling API requests, interacting with the MongoDB database, and managing authentication.
Sources: backend/src/server.js, backend/package.json
API Endpoints
The main server file (server.js) sets up middleware for CORS, JSON parsing, and defines the primary API routes. The routes relevant to sensor data management are namespaced under /api.
| Route Prefix | File | Description |
|---|---|---|
/api/auth | src/routes/auth.js | Handles user authentication. |
/api/taikhoan | src/routes/taiKhoan.js | Manages user accounts. |
/api/thietbi | src/routes/thietBi.js | Manages IoT devices (sensors). |
While the specific endpoints within thietBi.js are not detailed in the provided files, this route is the designated entry point for all device-related operations, such as registering new sensors, receiving data from them, and fetching device statuses.
Sources: backend/src/server.js:84-86
High-Level Data Flow
This diagram illustrates the anticipated flow of data from an IoT sensor device to the end-user's browser.
This flow is inferred from the project structure and the purpose of the defined API routes.
Sources: backend/src/server.js:86, frontend/src/pages/AirQualityIndexPage.jsx:136-149
Conclusion
The Sensor Data Monitoring system is a well-structured feature that effectively separates concerns between the backend API and the frontend presentation layer. It provides users with multiple views of air quality data, from high-level dashboard summaries to detailed, interactive charts and historical logs. The use of clear visual cues, such as reference lines and status badges, empowers users to quickly assess their environmental conditions against established health standards. The administrative backend provides necessary oversight into the health of the sensor network.