diff --git a/frontend/src/components/App.jsx b/frontend/src/components/App.jsx index 4a63281..2a7fc6a 100644 --- a/frontend/src/components/App.jsx +++ b/frontend/src/components/App.jsx @@ -5,6 +5,24 @@ import 'bootstrap/dist/js/bootstrap.bundle.min.js' import Home from '../pages/Home.jsx' +/** + * App.jsx + * + * Este archivo define el componente App, que es el componente principal de la aplicación. + * + * Importaciones: + * - '../css/App.css': Archivo CSS que contiene los estilos globales de la aplicación. + * - 'leaflet/dist/leaflet.css': Archivo CSS que contiene los estilos para los mapas de Leaflet. + * - 'bootstrap/dist/css/bootstrap.min.css': Archivo CSS que contiene los estilos de Bootstrap. + * - 'bootstrap/dist/js/bootstrap.bundle.min.js': Archivo JS que contiene los scripts de Bootstrap. + * - Home: Componente que representa la página principal de la aplicación. + * + * Funcionalidad: + * - App: Componente principal que renderiza la página Home. + * - Planea añadir un React Router en el futuro. + * + */ + const App = () => { return ( <> diff --git a/frontend/src/components/Card.jsx b/frontend/src/components/Card.jsx index c2ad8ef..5f0bada 100644 --- a/frontend/src/components/Card.jsx +++ b/frontend/src/components/Card.jsx @@ -3,6 +3,31 @@ import { useState, useEffect, useRef } from "react"; import "../css/Card.css"; import { useTheme } from "../contexts/ThemeContext"; +/** + * Card.jsx + * + * Este archivo define el componente Card, que representa una tarjeta individual con un título, estado y contenido. + * + * Importaciones: + * - PropTypes: Librería para la validación de tipos de propiedades en componentes de React. + * - useState, useEffect, useRef: Hooks de React para manejar estados, efectos secundarios y referencias. + * - "../css/Card.css": Archivo CSS que contiene los estilos para las tarjetas. + * - useTheme: Hook personalizado para acceder al contexto del tema. + * + * Funcionalidad: + * - Card: Componente que renderiza una tarjeta con un título, estado y contenido. + * - Utiliza el hook `useTheme` para aplicar la clase correspondiente al tema actual. + * - Ajusta el título de la tarjeta según el tamaño de la tarjeta. + * + * PropTypes: + * - Card espera una propiedad `title` que es un string requerido. + * - Card espera una propiedad `status` que es un string requerido. + * - Card espera una propiedad `children` que es un nodo de React requerido. + * - Card espera una propiedad `styleMode` que es opcional y puede ser "override" o una cadena vacía. + * - Card espera una propiedad `className` que es un string opcional. + * + */ + const Card = ({ title, status, children, styleMode, className }) => { const cardRef = useRef(null); const [shortTitle, setShortTitle] = useState(title); diff --git a/frontend/src/components/CardContainer.jsx b/frontend/src/components/CardContainer.jsx index 201239d..7408375 100644 --- a/frontend/src/components/CardContainer.jsx +++ b/frontend/src/components/CardContainer.jsx @@ -1,6 +1,25 @@ import Card from "./Card.jsx"; import PropTypes from "prop-types"; +/** + * CardContainer.jsx + * + * Este archivo define el componente CardContainer, que actúa como contenedor para múltiples componentes Card. + * + * Importaciones: + * - Card: Componente que representa una tarjeta individual. + * - PropTypes: Librería para la validación de tipos de propiedades en componentes de React. + * + * Funcionalidad: + * - CardContainer: Componente que renderiza un contenedor (`div`) con una fila de tarjetas (`Card`). + * - Utiliza `props.cards` para mapear y renderizar cada tarjeta con su contenido. + * + * PropTypes: + * - CardContainer espera una propiedad `cards` que es un array de objetos con las propiedades `title`, `content` y `status`. + * - CardContainer espera una propiedad `className` que es un string opcional. + * + */ + const CardContainer = ({ cards, className }) => { return (
diff --git a/frontend/src/components/Dashboard.jsx b/frontend/src/components/Dashboard.jsx index 69cb29f..c9b38ac 100644 --- a/frontend/src/components/Dashboard.jsx +++ b/frontend/src/components/Dashboard.jsx @@ -1,5 +1,21 @@ import PropTypes from 'prop-types'; +/** + * Dashboard.jsx + * + * Este archivo define el componente Dashboard, que actúa como contenedor para los componentes principales de la página. + * + * Importaciones: + * - PropTypes: Librería para la validación de tipos de propiedades en componentes de React. + * + * Funcionalidad: + * - Dashboard: Componente que renderiza un contenedor principal (`main`) con los componentes hijos pasados como `props.children`. + * + * PropTypes: + * - Dashboard espera una propiedad `children` que es un nodo de React. + * + */ + const Dashboard = (props) => { return (
diff --git a/frontend/src/components/Header.jsx b/frontend/src/components/Header.jsx index 84c1693..5bafe17 100644 --- a/frontend/src/components/Header.jsx +++ b/frontend/src/components/Header.jsx @@ -2,6 +2,25 @@ import PropTypes from 'prop-types'; import '../css/Header.css'; import { useTheme } from "../contexts/ThemeContext"; +/** + * Header.jsx + * + * Este archivo define el componente Header, que muestra el encabezado de la página con un título y un subtítulo. + * + * Importaciones: + * - PropTypes: Librería para la validación de tipos de propiedades en componentes de React. + * - "../css/Header.css": Archivo CSS que contiene los estilos para el encabezado. + * - useTheme: Hook personalizado para acceder al contexto del tema. + * + * Funcionalidad: + * - Header: Componente que renderiza un encabezado con un título y un subtítulo. + * - Utiliza el hook `useTheme` para aplicar la clase correspondiente al tema actual. + * + * PropTypes: + * - Header espera una propiedad `title` que es un string requerido. + * - Header espera una propiedad `subtitle` que es un string opcional. + * + */ const Header = (props) => { const { theme } = useTheme(); diff --git a/frontend/src/components/HistoryCharts.jsx b/frontend/src/components/HistoryCharts.jsx index 26c0015..5e6935e 100644 --- a/frontend/src/components/HistoryCharts.jsx +++ b/frontend/src/components/HistoryCharts.jsx @@ -8,6 +8,33 @@ import { useTheme } from "../contexts/ThemeContext.jsx"; import { DataProvider, useData } from "../contexts/DataContext.jsx"; import { useConfig } from "../contexts/ConfigContext.jsx"; +/** + * HistoryCharts.jsx + * + * Este archivo define el componente HistoryCharts, que muestra gráficos históricos de datos obtenidos de sensores. + * + * Importaciones: + * - Line: Componente de react-chartjs-2 para renderizar gráficos de líneas. + * - ChartJS, LineElement, PointElement, LinearScale, CategoryScale, Filler: Módulos de chart.js para configurar y registrar los elementos del gráfico. + * - CardContainer: Componente que actúa como contenedor para las tarjetas. + * - "../css/HistoryCharts.css": Archivo CSS que contiene los estilos para los gráficos históricos. + * - PropTypes: Librería para la validación de tipos de propiedades en componentes de React. + * - useTheme: Hook personalizado para acceder al contexto del tema. + * - DataProvider, useData: Funciones del contexto de datos para obtener y manejar datos. + * - useConfig: Hook personalizado para acceder al contexto de configuración. + * + * Funcionalidad: + * - HistoryCharts: Componente que configura la solicitud de datos y utiliza el DataProvider para obtener datos de sensores. + * - Muestra mensajes de carga y error según el estado de la configuración. + * - HistoryChartsContent: Componente que procesa los datos obtenidos y renderiza los gráficos históricos. + * - Utiliza el hook `useData` para acceder a los datos de sensores. + * - Renderiza gráficos de líneas con diferentes colores según el tipo de dato (temperatura, humedad, contaminación). + * + * PropTypes: + * - HistoryChartsContent espera propiedades `options` (objeto), `timeLabels` (array) y `data` (array). + * + */ + ChartJS.register(LineElement, PointElement, LinearScale, CategoryScale, Filler); const HistoryCharts = () => { diff --git a/frontend/src/components/PollutionMap.jsx b/frontend/src/components/PollutionMap.jsx index 2dd8a31..ffc961e 100644 --- a/frontend/src/components/PollutionMap.jsx +++ b/frontend/src/components/PollutionMap.jsx @@ -5,6 +5,25 @@ import { useConfig } from '../contexts/ConfigContext.jsx'; import { DataProvider } from '../contexts/DataContext.jsx'; import { useData } from '../contexts/DataContext.jsx'; +/** + * PollutionMap.jsx + * + * Este archivo define el componente PollutionMap, que muestra un mapa con los niveles de contaminación en diferentes ubicaciones. + * + * Importaciones: + * - MapContainer, TileLayer, Circle, Popup: Componentes de react-leaflet para renderizar el mapa y los círculos de contaminación. + * - useConfig: Hook personalizado para acceder al contexto de configuración. + * - DataProvider, useData: Funciones del contexto de datos para obtener y manejar datos. + * + * Funcionalidad: + * - PollutionMap: Componente que configura la solicitud de datos y utiliza el DataProvider para obtener datos de sensores. + * - Muestra mensajes de carga y error según el estado de la configuración. + * - PollutionMapContent: Componente que procesa los datos obtenidos y renderiza los círculos de contaminación en el mapa. + * - Utiliza el hook `useData` para acceder a los datos de sensores. + * - Renderiza círculos de diferentes colores y tamaños según el nivel de contaminación. + * + */ + const PollutionCircles = ({ data }) => { return data.map(({ lat, lng, level }, index) => { const baseColor = level < 20 ? '#00FF85' : level < 60 ? '#FFA500' : '#FF0000'; diff --git a/frontend/src/components/SummaryCards.jsx b/frontend/src/components/SummaryCards.jsx index 68ef1df..d3639ac 100644 --- a/frontend/src/components/SummaryCards.jsx +++ b/frontend/src/components/SummaryCards.jsx @@ -6,6 +6,29 @@ import { useData } from '../contexts/DataContext'; import { useConfig } from '../contexts/ConfigContext'; +/** + * SummaryCards.jsx + * + * Este archivo define el componente SummaryCards, que muestra tarjetas resumen con información relevante obtenida de sensores. + * + * Importaciones: + * - PropTypes: Librería para la validación de tipos de propiedades en componentes de React. + * - CardContainer: Componente que actúa como contenedor para las tarjetas. + * - DataProvider, useData: Funciones del contexto de datos para obtener y manejar datos. + * - useConfig: Hook personalizado para acceder al contexto de configuración. + * + * Funcionalidad: + * - SummaryCards: Componente que configura la solicitud de datos y utiliza el DataProvider para obtener datos de sensores. + * - Muestra mensajes de carga y error según el estado de la configuración. + * - SummaryCardsContent: Componente que procesa los datos obtenidos y actualiza el contenido de las tarjetas. + * - Utiliza el hook `useData` para acceder a los datos de sensores. + * - Actualiza el contenido y estado de las tarjetas según los datos obtenidos. + * + * PropTypes: + * - SummaryCards espera una propiedad `data` que es un array. + * + */ + const SummaryCards = () => { const { config, configLoading, configError } = useConfig(); diff --git a/frontend/src/components/ThemeButton.jsx b/frontend/src/components/ThemeButton.jsx index f0ed356..bf7bf88 100644 --- a/frontend/src/components/ThemeButton.jsx +++ b/frontend/src/components/ThemeButton.jsx @@ -1,6 +1,22 @@ import { useTheme } from "../contexts/ThemeContext.jsx"; import "../css/ThemeButton.css"; +/** + * ThemeButton.jsx + * + * Este archivo define el componente ThemeButton, que permite a los usuarios cambiar entre temas claro y oscuro. + * + * Importaciones: + * - useTheme: Hook personalizado para acceder al contexto del tema. + * - "../css/ThemeButton.css": Archivo CSS que contiene los estilos para el botón de cambio de tema. + * + * Funcionalidad: + * - ThemeButton: Componente que renderiza un botón para alternar entre temas claro y oscuro. + * - Utiliza el hook `useTheme` para acceder al tema actual y la función para cambiarlo. + * - El botón muestra un icono de sol (☀️) si el tema actual es oscuro, y un icono de luna (🌙) si el tema actual es claro. + * + */ + export default function ThemeButton() { const { theme, toggleTheme } = useTheme(); diff --git a/frontend/src/contexts/ConfigContext.jsx b/frontend/src/contexts/ConfigContext.jsx index 5cccf8b..5012697 100644 --- a/frontend/src/contexts/ConfigContext.jsx +++ b/frontend/src/contexts/ConfigContext.jsx @@ -1,6 +1,27 @@ import { createContext, useContext, useState, useEffect } from "react"; import PropTypes from "prop-types"; +/** + * ConfigContext.jsx + * + * Este archivo define el contexto de configuración para la aplicación, permitiendo cargar y manejar la configuración desde un archivo externo. + * + * Importaciones: + * - createContext, useContext, useState, useEffect: Funciones de React para crear y utilizar contextos, manejar estados y efectos secundarios. + * - PropTypes: Librería para la validación de tipos de propiedades en componentes de React. + * + * Funcionalidad: + * - ConfigContext: Contexto que almacena la configuración cargada, el estado de carga y cualquier error ocurrido durante la carga de la configuración. + * - ConfigProvider: Proveedor de contexto que maneja la carga de la configuración y proporciona el estado de la configuración a los componentes hijos. + * - Utiliza `fetch` para cargar la configuración desde un archivo JSON. + * - Maneja el estado de carga y errores durante la carga de la configuración. + * - useConfig: Hook personalizado para acceder al contexto de configuración. + * + * PropTypes: + * - ConfigProvider espera un único hijo (`children`) que es requerido y debe ser un nodo de React. + * + */ + const ConfigContext = createContext(); export const ConfigProvider = ({ children }) => { diff --git a/frontend/src/contexts/DataContext.jsx b/frontend/src/contexts/DataContext.jsx index 7ff3153..079d641 100644 --- a/frontend/src/contexts/DataContext.jsx +++ b/frontend/src/contexts/DataContext.jsx @@ -1,6 +1,28 @@ import { createContext, useContext, useState, useEffect } from "react"; import PropTypes from "prop-types"; +/** + * DataContext.jsx + * + * Este archivo define el contexto de datos para la aplicación, permitiendo obtener y manejar datos de una fuente externa. + * + * Importaciones: + * - createContext, useContext, useState, useEffect: Funciones de React para crear y utilizar contextos, manejar estados y efectos secundarios. + * - PropTypes: Librería para la validación de tipos de propiedades en componentes de React. + * + * Funcionalidad: + * - DataContext: Contexto que almacena los datos obtenidos, el estado de carga y cualquier error ocurrido durante la obtención de datos. + * - DataProvider: Proveedor de contexto que maneja la obtención de datos y proporciona el estado de los datos a los componentes hijos. + * - Utiliza `fetch` para obtener datos de una URL construida a partir de la configuración proporcionada. + * - Maneja el estado de carga y errores durante la obtención de datos. + * - useData: Hook personalizado para acceder al contexto de datos. + * + * PropTypes: + * - DataProvider espera un único hijo (`children`) que es requerido y debe ser un nodo de React. + * - DataProvider también espera una configuración (`config`) que debe incluir `baseUrl` (string) y opcionalmente `params` (objeto). + * + */ + const DataContext = createContext(); export const DataProvider = ({ children, config }) => { diff --git a/frontend/src/contexts/ThemeContext.jsx b/frontend/src/contexts/ThemeContext.jsx index b77e81d..3337073 100644 --- a/frontend/src/contexts/ThemeContext.jsx +++ b/frontend/src/contexts/ThemeContext.jsx @@ -1,6 +1,27 @@ import { createContext, useContext, useEffect, useState } from "react"; import PropTypes from "prop-types"; +/** + * ThemeContext.jsx + * + * Este archivo define el contexto de tema para la aplicación, permitiendo cambiar entre temas claro y oscuro. + * + * Importaciones: + * - createContext, useContext, useEffect, useState: Funciones de React para crear y utilizar contextos, manejar efectos secundarios y estados. + * - PropTypes: Librería para la validación de tipos de propiedades en componentes de React. + * + * Funcionalidad: + * - ThemeContext: Contexto que almacena el tema actual y la función para cambiarlo. + * - ThemeProvider: Proveedor de contexto que maneja el estado del tema y proporciona la función para alternar entre temas. + * - Utiliza `localStorage` para persistir el tema seleccionado. + * - Aplica la clase correspondiente al `body` del documento para reflejar el tema actual. + * - useTheme: Hook personalizado para acceder al contexto del tema. + * + * PropTypes: + * - ThemeProvider espera un único hijo (`children`) que es requerido y debe ser un nodo de React. + * + */ + const ThemeContext = createContext(); export function ThemeProvider({ children }) { diff --git a/frontend/src/main.jsx b/frontend/src/main.jsx index f5c9d96..7d4e405 100644 --- a/frontend/src/main.jsx +++ b/frontend/src/main.jsx @@ -6,6 +6,25 @@ import App from './components/App.jsx' import { ThemeProvider } from './contexts/ThemeContext.jsx' import { ConfigProvider } from './contexts/ConfigContext.jsx' +/** + * main.jsx + * + * Este archivo es el punto de entrada principal de la aplicación React. + * + * Importaciones: + * - StrictMode: Un componente de React que ayuda a identificar problemas potenciales en la aplicación. + * - createRoot: Una función de ReactDOM que crea una raíz para renderizar la aplicación. + * - './css/index.css': Archivo CSS que contiene los estilos globales de la aplicación. + * - App: El componente principal de la aplicación. + * - ThemeProvider: Un proveedor de contexto que maneja el tema de la aplicación. + * - ConfigProvider: Un proveedor de contexto que maneja la configuración de la aplicación. + * + * Funcionalidad: + * - El archivo utiliza `createRoot` para obtener el elemento con el id 'root' del DOM y renderizar la aplicación React dentro de él. + * - La aplicación se envuelve en `StrictMode` para ayudar a detectar problemas potenciales. + * - `ThemeProvider` y `ConfigProvider` envuelven el componente `App` para proporcionar los contextos de tema y configuración a toda la aplicación. + */ + createRoot(document.getElementById('root')).render( diff --git a/frontend/src/pages/Home.jsx b/frontend/src/pages/Home.jsx index b0e2172..c53c879 100644 --- a/frontend/src/pages/Home.jsx +++ b/frontend/src/pages/Home.jsx @@ -5,6 +5,27 @@ import HistoryCharts from '../components/HistoryCharts.jsx' import ThemeButton from '../components/ThemeButton.jsx' import SummaryCards from '../components/SummaryCards.jsx' +/** + * Home.jsx + * + * Este archivo define el componente Home, que es una página principal de la aplicación. + * + * Importaciones: + * - Header: Un componente que muestra el encabezado de la página. + * - Dashboard: Un componente que actúa como contenedor para los componentes principales de la página. + * - PollutionMap: Un componente que muestra un mapa de la contaminación. + * - HistoryCharts: Un componente que muestra gráficos históricos de la contaminación. + * - ThemeButton: Un componente que permite cambiar el tema de la aplicación. + * - SummaryCards: Un componente que muestra tarjetas resumen con información relevante. + * + * Funcionalidad: + * - El componente Home utiliza una estructura de JSX para organizar y renderizar los componentes importados. + * - El componente Header muestra el título y subtítulo de la página. + * - El componente Dashboard contiene los componentes SummaryCards, PollutionMap y HistoryCharts. + * - El componente ThemeButton se renderiza al final para permitir el cambio de tema. + * + */ + const Home = () => { return ( <>