User Dashboard
Relevant source files
The following files were used as context for generating this wiki page:
The User Dashboard is the primary interface for authenticated users to get a real-time, at-a-glance overview of air quality sensor data. It serves as the main landing page after a user signs in, presenting key metrics in a visually intuitive format through data cards and charts. The dashboard is a protected area of the application, ensuring that only logged-in users can access the monitoring information.
From the dashboard, users can navigate to more detailed data analysis pages, such as the Air Quality Index page for interactive charts or the History page for tabular data records. The entire user-facing section is wrapped in a consistent layout that includes a persistent sidebar for navigation and a top navigation bar.
Architecture and Routing
The Dashboard page is integrated into the React application using react-router-dom. It is defined as a protected route, accessible only to authenticated users.
Sources: frontend/src/App.js:35
Routing Flow
The application routes traffic to the /dashboard path through a series of nested route components. Access is first verified by the ProtectedRoute component. If the user is authenticated, the Layout component is rendered, which provides the standard page structure (sidebar and navbar), and the Dashboard component is then rendered within the main content area of the Layout.
The following diagram illustrates the routing and component rendering flow for the dashboard page.
The route is defined within the main App component as follows:
// frontend/src/App.js
<Route element={<ProtectedRoute />}>
<Route element={<Layout />}>
<Route path="/dashboard" element={<Dashboard />} />
<Route path="/air-quality" element={<AirQualityIndexPage />} />
<Route path="/threshold" element={<ThresholdePage />} />
<Route path="/history" element={<History />} />
<Route path="/settings" element={<Setting />} />
</Route>
</Route>
Sources: frontend/src/App.js:34-42
Page Layout
The Layout.js component provides the consistent structure for all protected user pages, including the Dashboard. It establishes a fixed sidebar and a top navbar, with the main page content rendered in a central container.
The layout defines fixed widths for the sidebar and height for the navbar, ensuring a consistent and predictable UI across different pages.
Dashboard Page Structure
The Dashboard.jsx component is responsible for the content and layout of the dashboard itself. It is a functional React component that organizes and displays data through several child components.
The page is divided into two main sections:
- A horizontal row of
CardDatacomponents, each displaying a single sensor metric. - A section below containing two chart components:
OverviewChartandQualityChart.
Sources: frontend/src/pages/Dashboard.jsx:16-56
The following diagram shows the component hierarchy within the Dashboard page.
Data Flow
Currently, the data displayed on the dashboard is static and hardcoded directly within the Dashboard.jsx component.
An array named sensorData holds the values for the five data cards. The component iterates over this array to render each CardData instance, passing the corresponding data as props. The chart components, OverviewChart and QualityChart, are rendered without props, which implies they either contain their own static data or are intended to fetch data internally.
sensorData Structure
The sensorData array is an array of objects, where each object represents a metric to be displayed in a CardData component.
| Property | Type | Description | Example |
|---|---|---|---|
title | String | The name of the sensor metric. | "CO₂" |
value | Number | The current value of the metric. | 735 |
unit | String | The unit of measurement for the value. | "ppm" |
percent | Number | A percentage value, likely for a gauge | 25 |
Sources: frontend/src/pages/Dashboard.jsx:7-13
// frontend/src/pages/Dashboard.jsx:7-13
const sensorData = [
{ title: "CO₂", value: 735, unit: "ppm", percent: 25 },
{ title: "PM2.5", value: 18, unit: "µg/m³", percent: 40 },
{ title: "Gas", value: 0.62, unit: "ppm", percent: 35 },
{ title: "Nhiệt độ", value: 28.5, unit: "°C", percent: 55 },
{ title: "Độ ẩm", value: 70, unit: "%", percent: 70 },
];
Core Components
The dashboard's UI is built from several reusable components.
CardData Component
This component is used to display a single piece of sensor data in a card format. It receives data via props from its parent Dashboard component.
| Prop | Type | Description |
|---|---|---|
key | Number | React key for list rendering. |
title | String | The title of the metric. |
value | Number | The sensor reading. |
unit | String | The unit for the sensor reading. |
percent | Number | A percentage value for visualization. |
Sources: frontend/src/pages/Dashboard.jsx:18-25
OverviewChart Component
This component is intended to display a larger, overview chart. It occupies two-thirds of the width of the chart section. The source code for this component was not available in the provided context, so its internal implementation is unknown.
Sources: frontend/src/pages/Dashboard.jsx:30-39
QualityChart Component
This component displays a smaller chart related to air quality. It occupies one-third of the width of the chart section. The source code for this component was not available in the provided context, so its internal implementation is unknown.
Sources: frontend/src/pages/Dashboard.jsx:42-51
Related Data Views
The application provides other pages for more in-depth data analysis, accessible via the sidebar in the main Layout.
Air Quality Index Page
The AirQualityIndexPage offers a detailed and interactive line chart for specific air quality metrics. Key features include:
- Selection of different metrics (PM2.5, CO2, Temp, etc.).
- Filtering data by time range (Real-time, Day, Week, Month).
- A status badge showing the current value and whether it is "Lành mạnh" (Healthy) or "Không lành mạnh" (Unhealthy).
- A reference line on the chart indicating recommended thresholds (e.g., from WHO).
Sources: frontend/src/pages/AirQualityIndexPage.jsx
History Page
The History page presents historical sensor data in a table. Key features include:
- Summary cards for the highest, average, and lowest values over a period.
- A data table with columns for time, temperature, humidity, CO₂, PM2.5, gas, and status.
- Filtering by day, week, or month.
- An option to export the displayed data to a
.csvfile.
Sources: frontend/src/pages/History.jsx