Threshold Configuration
Relevant source files
The following files were used as context for generating this wiki page:
The Threshold Configuration feature provides users with the ability to view and customize the safety limits for various environmental metrics monitored by the system. This functionality is a core part of the user experience, allowing for personalized monitoring and forming the basis for intelligent alerts when a metric exceeds its defined safe value. The public-facing page highlights "Cấu hình ngưỡng an toàn" (Configure safety thresholds) as a key feature of the application.
Sources: frontend/src/pages/Public_page.js:600-607
Architecture Overview
The feature is implemented on the frontend using React components. It consists of a main page (ThresholdePage) that acts as a container for multiple individual configuration cards (ThresholdCard), each dedicated to a specific environmental metric.
The following diagram illustrates the component hierarchy.
UI Components
ThresholdePage
The ThresholdePage component is the main entry point for this feature. It arranges multiple ThresholdCard components in a responsive grid layout. It is responsible for instantiating a card for each monitored metric and passing the necessary default values and information text. Currently, the save action is handled by a placeholder handleSave function that logs the new value to the console.
Sources: frontend/src/pages/ThresholdePage.js:4-8, frontend/src/pages/ThresholdePage.js:10-48
The page renders cards for the following metrics with hardcoded default values:
| Metric | Default Value | Unit | Information Text |
|---|---|---|---|
| CO₂ | 2000 | ppm | Ngưỡng CO₂ tối đa là 2000 ppm. Theo khuyến nghị của Bộ Y tế Việt Nam. |
| PM2.5 | 250 | µg/m³ | Ngưỡng PM2.5 không vượt quá 250 µg/m³ (khuyến nghị WHO). |
| Gas | 10 | % | Ngưỡng khí gas trong không khí an toàn là 80%. |
| Nhiệt độ | 40 | °C | Nhiệt độ không nên vượt quá 40°C trong nhà ở. |
| Độ ẩm | 70 | % | Độ ẩm lý tưởng dao động từ 40% đến 70%. |
Sources: frontend/src/pages/ThresholdePage.js:13-46
ThresholdCard
The ThresholdCard is a reusable component for setting a single threshold value. It provides a user interface to switch between a default value and a custom user-defined value.
Props
| Prop | Type | Description |
|---|---|---|
title | string | The name of the metric (e.g., "CO₂"). |
defaultValue | number | The default safe threshold value. |
unit | string | The unit of measurement (e.g., "ppm"). |
value | string | The initial value for the input field. |
onSave | function | Callback function triggered when the "Lưu" (Save) button is clicked. |
infoText | string | Text to display in an info tooltip. |
Sources: frontend/src/components/common/ThresholdeCard.js:3-10
Internal State and Logic
The card manages its state internally using useState:
mode: A string that can be'default'or'custom'. This controls whether the input is disabled and which toggle button is active.inputValue: The current value in the number input field.showTooltip: A boolean to control the visibility of the information tooltip.
Sources: frontend/src/components/common/ThresholdeCard.js:11-13
User Interaction Flow
The diagram below shows the sequence of events when a user interacts with a ThresholdCard.
Validation
The component includes a simple validation rule: an error is triggered if the custom input value exceeds the defaultValue. This prevents the user from setting a custom threshold that is less safe than the recommended default.
const isError = mode === "custom" && +inputValue > defaultValue;
This isError flag is used to:
- Display an error message: "Không thể vượt ngưỡng an toàn" (Cannot exceed the safety threshold).
- Apply red-colored styles to the input border and text.
- Disable the "Lưu" (Save) button.
Sources: frontend/src/components/common/ThresholdeCard.js:15, frontend/src/components/common/ThresholdeCard.js:61-65, frontend/src/components/common/ThresholdeCard.js:71-75, frontend/src/components/common/ThresholdeCard.js:80-86
Related Threshold Definitions
While the ThresholdePage defines its own set of defaults, other parts of the application contain related threshold information that provides more context on recommended values.
AirQualityIndexPage Baselines
The AirQualityIndexPage defines a METRICS configuration object that includes baseline values based on recommendations from organizations like WHO and ASHRAE. These are used to draw reference lines on charts.
| Metric | Key | Baseline | Source of Recommendation |
|---|---|---|---|
| PM2.5 | PM25 | 15 µg/m³ | WHO |
| CO₂ | CO2 | 1000 ppm | ASHRAE |
| Temperature | TEMP | 26 °C | OSHA |
| Humidity | HUMI | 60 % | ASHRAE |
| Gas | GAS | 50 ppm | WHO |
Sources: frontend/src/pages/AirQualityIndexPage.jsx:11-50
History Page Highlighting
The History.jsx component uses hardcoded thresholds to conditionally apply styling to data in a table, highlighting values that exceed a certain limit. For example, CO₂ values over 1000 and Gas values over 50 are colored red.
// Example from History.jsx
<td
className={`py-2 px-3 ${
row.co2 > 1000 ? "text-red-500 font-medium" : ""
}`}
>
{row.co2}
</td>
Sources: frontend/src/pages/History.jsx:148-154, frontend/src/pages/History.jsx:156-162
Conclusion
The Threshold Configuration feature is a user-centric module that allows for the customization of safety limits for environmental data. It is built with reusable React components (ThresholdCard) and contains basic client-side validation to guide users. While the primary configuration page uses one set of default values, other application modules like the AirQualityIndexPage and History page reference similar, and sometimes different, thresholds for data visualization and analysis, indicating the central role of these values in the system's functionality.