Historical Data Viewing
Relevant source files
The following files were used as context for generating this wiki page:
The Historical Data Viewing feature, primarily implemented in the History page, provides users with an interface to review, filter, and export historical sensor data. This page displays environmental metrics such as temperature, humidity, CO₂, PM2.5, and gas levels in a tabular format. Currently, it operates using a hardcoded dataset for demonstration purposes, with functionality to filter the data by day, week, or month, and to export the displayed data as a CSV file.
The feature is accessible via the /history route, which is a protected route requiring user authentication.
Sources: frontend/src/pages/History.jsx, frontend/src/App.js:34
Architecture and Component Flow
The History page is a React component that is rendered within the main application Layout. Routing is handled by react-router-dom, where the /history path is defined to render the History component.
Sources: frontend/src/App.js:30-36
This diagram illustrates how the History component is integrated into the application's routing structure.
Sources: frontend/src/App.js:28-36
Core Functionality
The History.jsx component manages the state and logic for displaying and interacting with the historical data.
Sources: frontend/src/pages/History.jsx
State Management
The component uses React's useState hook to manage its state:
originalData: A hardcoded array of objects containing the full set of historical data points. This acts as the master data source.data: An array that holds the currently displayed data, which is a subset oforiginalDatabased on the active filter.activeFilter: A string ('day','week', or'month') that tracks the currently selected time filter.
Sources: frontend/src/pages/History.jsx:21-34
Data Structure
Each record in the originalData array represents a single data point at a specific time.
| Field | Type | Description |
|---|---|---|
time | String | The time of the reading (e.g., "01:00"). |
temp | Number | Temperature in Celsius. |
humid | Number | Humidity in percent. |
co2 | Number | CO₂ level in ppm. |
pm25 | Number | PM2.5 level in µg/m³. |
gas | Number | Gas level in percent. |
status | String | The overall air quality status (e.g., "Tốt", "KLM"). |
Sources: frontend/src/pages/History.jsx:22-31
Data Filtering
Users can filter the data table by "Ngày" (Day), "Tuần" (Week), or "Tháng" (Month). The handleFilterChange function updates the activeFilter state and slices the originalData to update the data state, which triggers a re-render of the table.
The filtering logic is as follows:
- Day: Shows the first 5 records.
- Week: Shows the first 7 records.
- Month: Shows all records from
originalData.
This diagram shows the flow of the filtering logic.
Sources: frontend/src/pages/History.jsx:36-41
Data Export
The "Xuất File" (Export File) feature allows users to download the currently displayed data as a history.csv file. The handleExport function constructs the CSV content from the data state, creates a Blob, generates a temporary URL, and programmatically clicks a link to trigger the download.
This sequence diagram illustrates the export process.
Sources: frontend/src/pages/History.jsx:43-63
UI Components
The page is composed of several distinct UI sections.
Summary Cards
Three summary cards at the top display static values for "Cao nhất" (Highest), "Trung bình" (Average), and "Thấp nhất" (Lowest). These cards use icons from the phosphor-react library.
| Card Title | Static Value | Icon |
|---|---|---|
| Cao nhất | 1225 | TrendUp |
| Trung bình | 621 | Triangle |
| Thấp nhất | 122 | TrendDown |
Sources: frontend/src/pages/History.jsx:70-103
Data Table
The main feature is a scrollable table that displays the filtered historical data.
- Headers: "Thời gian", "Nhiệt độ (°C)", "Độ ẩm (%)", "CO₂ (ppm)", "PM2.5 (µg/m³)", "Gas (%)", "Tình trạng".
- Conditional Styling:
CO₂values greater than 1000 are displayed in red and bold.Gasvalues greater than 50 are displayed in red and bold.
- Status Indicator: The "Tình trạng" (Status) column displays a colored dot next to the status text. The color is determined by the
statusColorsmap.
Sources: frontend/src/pages/History.jsx:218-231, 238-244
Status Color Mapping
The statusColors object maps status strings to Tailwind CSS background color classes.
| Status | Color Code | Tailwind Class |
|---|---|---|
| Tốt | #ccf067 | bg-[#ccf067] |
| KLM | #F49352 | bg-[#F49352] |
| NH | #F4525C | bg-[#F4525C] |
| TB | #FF8F6B | bg-[#FF8F6B] |
Sources: frontend/src/pages/History.jsx:14-19
Footer
A footer section at the bottom of the page displays an informational message: "Dữ liệu tham chiếu theo chuẩn WHO" (Data referenced according to WHO standards).
Sources: frontend/src/pages/History.jsx:254-258
Context from Other Pages
While the History.jsx page uses mock data, other pages in the application demonstrate similar data visualization patterns with more dynamic data generation and charting libraries like recharts.
AirQualityIndexPage.jsx: This page also implements filtering by time range ("realtime", "day", "week", "month") and usesrechartsto display line charts for various metrics. It contains more complex logic for generating data and configuring chart axes, which could be a model for enhancing theHistorypage.AdminOverview.jsx: This page usesrechartsto displayBarChartandPieChartfor administrative statistics, showing the project's capability to render different types of data visualizations.Dashboard.jsx: This page uses a component namedOverviewChart, indicating that charting is a reusable and central part of the application's design.
Sources: frontend/src/pages/AirQualityIndexPage.jsx:128-145, frontend/src/pages/AdminOverview.jsx:92-140, frontend/src/pages/Dashboard.jsx:29-31