Guía 13

DAWM / Proyecto03

Actividades previas

Revise la descripción del uso de Hooks en React, el sitio Understanding React Hooks: A Comprehensive Guide.

Fuente: Understanding React Hooks: A Comprehensive Guide

Actividades en clases

Clona localmente tu repositorio dashboard.

React Google Charts

Desde la línea de comandos, instale React Google Charts con:
```
 npm install --save react-google-charts
```

Componente Propio: WeatherChart

Cree el componente src/components/WeatherChart.tsx

En WeatherChart.tsx, importe los componentes Chart y Paper:

 import { Chart } from "react-google-charts";
 import Paper from '@mui/material/Paper';

En WeatherChart.tsx, agregue el componente funcional:

 ...

 export default function WeatherChart() {

     {/* Configuración */}

     let options = {
         title: "Precipitación, Humedad y Nubosidad vs Hora",
         curveType: "function",
         legend: { position: "right" },
     }

     {/* Datos de las variables meteorológicas */}

     const data = [
         ["Hora", "Precipitación", "Humedad", "Nubosidad"],
         ["03:00", 13, 78, 75],
         ["06:00", 4, 81, 79],
         ["09:00", 7, 82, 69],
         ["12:00", 3, 73, 62],
         ["15:00", 4, 66, 75],
         ["18:00", 6, 64, 84],
         ["21:00", 5, 77, 99]
     ];

     {/* JSX */}

     return (
         <Paper
             sx={{
                 p: 2,
                 display: 'flex',
                 flexDirection: 'column'
             }}
         >
             <Chart
                 chartType="LineChart"
                 data={data}
                 width="100%"
                 height="400px"
                 options={options}
         />
         </Paper>
     )
 }	

En App.tsx, importe y use el componente WeatherChart

 ...

 import WeatherChart from './components/WeatherChart';

 function App() {
		
     ...

     {/* JSX */}

     return (
         ...
         <Grid xs={12} lg={10}>
             <WeatherChart></WeatherChart>
         </Grid>
     )
 }

(STOP 1) Compruebe el resultado en el navegador.

Componente Propio: ControlPanel

Cree el componente src/components/ControlPanel.tsx

En ControlPanel.tsx, importe los componentes:

 import Paper from '@mui/material/Paper';
 import Typography from '@mui/material/Typography';
 import Box from '@mui/material/Box';
 import InputLabel from '@mui/material/InputLabel';
 import MenuItem from '@mui/material/MenuItem';
 import FormControl from '@mui/material/FormControl';
 import Select from '@mui/material/Select';

En ControlPanel.tsx, agregue el componente funcional:

 ...
 export default function ControlPanel() {

     {/* Datos de los elementos del Select */}

     let items = [
         {"name":"Precipitación", "description":"Cantidad de agua, en forma de lluvia, nieve o granizo, que cae sobre una superficie en un período específico."}, 
         {"name": "Humedad", "description":"Cantidad de vapor de agua presente en el aire, generalmente expresada como un porcentaje."}, 
         {"name":"Nubosidad", "description":"Grado de cobertura del cielo por nubes, afectando la visibilidad y la cantidad de luz solar recibida."}
     ]

     let options = items.map( (item, key) => <MenuItem key={key} value={key}>{item["name"]}</MenuItem> )
	    
     {/* JSX */}

     return (
         <Paper
             sx={{
                 p: 2,
                 display: 'flex',
                 flexDirection: 'column'
             }}
         >

             <Typography mb={2} component="h3" variant="h6" color="primary">
                 Variables Meteorológicas
             </Typography>

             <Box sx={{ minWidth: 120 }}>
					
                 <FormControl fullWidth>
                     <InputLabel id="simple-select-label">Variables</InputLabel>
                     <Select
                         labelId="simple-select-label"
                         id="simple-select"
                         label="Variables"
                         defaultValue='-1'
                     >
                         <MenuItem key="-1" value="-1" disabled>Seleccione una variable</MenuItem>

                         {options}

                     </Select>
                 </FormControl>

             </Box>


         </Paper>


     )
 }

En App.tsx, importe y use el componente ControlPanel

 ...
 import ControlPanel from './components/ControlPanel';

 function App() {
		
     ...

     {/* JSX */}

     return (
         ...
         <Grid xs={12} lg={2}>
             <ControlPanel />
         </Grid>
         <Grid xs={12} lg={10}>
             <WeatherChart></WeatherChart>
         </Grid>
 }

(STOP 2) Compruebe el resultado en el navegador.

Evento: onChange

En ControlPanel.tsx, importe la interfaz ChangeEvent.

 ...
 import Select, { SelectChangeEvent } from '@mui/material/Select';
 ...

En ControlPanel.tsx, agregue el manejador handleChange para el evento ChangeEvent.

 ...
 export default function ControlPanel() {

     ...

     {/* Manejador de eventos */}
		
     const handleChange = (event: SelectChangeEvent) => {
			
         let idx = parseInt(event.target.value)
         alert( idx );

     };

     {/* JSX */}

     ...

 }

En ControlPanel.tsx, agregue el manejador handleChange al prop onChange del componente Select.

     ...
		
     <Select
         labelId="simple-select-label"
         id="simple-select"
         label="Variables"
         defaultValue='-1'
         onChange={handleChange}
     >
     ...

(STOP 3) Compruebe el resultado en el navegador.

Hook: useState - Componente Hijo

En ControlPanel.tsx, importe la función useState.

 import { useState } from 'react';
 import Paper from '@mui/material/Paper';
 ...

En ControlPanel.tsx, agregue la variable de estado selected y la función de actualización setSelected. El valor predeterminado de la variable de estado es una cadena de caracteres vacío.

 ...
 export default function ControlPanel() {
		
     {/* Variable de estado y función de actualización */}

     let [selected, setSelected] = useState(-1)

     {/* Datos de los elementos del Select */}

     ...
 }

En ControlPanel.tsx, use la función de actualización en el manejador handleChange

 ...

 export default function ControlPanel() {

     ...

     {/* Manejador de eventos */}

     const handleChange = (event: SelectChangeEvent) => {

         let idx = parseInt(event.target.value)
         setSelected( idx );

     };

     ...
 }

En ControlPanel.tsx, renderice el contenido del elemento seleccionado.

 ...
 export default function ControlPanel() {

     ...

     {/* JSX */}	

     return (

         <Paper>

             ...

             </Box>

             {/* Muestra la descripción de la variable seleccionada */}
             <Typography mt={2} component="p" color="text.secondary">
             {
                 (selected >= 0)?items[selected]["description"]:""
             }
             </Typography>
				

         </Paper>
     )

 }

(STOP 4) Compruebe el resultado en el navegador.

Hook: useRef - Componente Hijo

En ControlPanel.tsx, importe la función useRef.

 import { useState, useRef } from 'react';
 import Paper from '@mui/material/Paper';
 ...

En ControlPanel.tsx, agregue la constante descriptionRef que servirá como referencia a un elemento HTML.

 ...
 export default function ControlPanel() {
		
     {/* Variable de estado y función de actualización */}

     ...

     {/* Variable de referencia a un elemento */ }

     const descriptionRef = useRef<HTMLDivElement>(null);

     ...
 }

En ControlPanel.tsx, establezca la referencia al elemento con la descripción de la variable seleccionada.

 ...
 export default function ControlPanel() {

     ...

     {/* JSX */}	

     return (

         <Paper>

             ...

             </Box>

             {/* Muestra la descripción de la variable seleccionada */}

             {/*<Typography mt={2} component="p" color="text.secondary">
             {
                 (selected >= 0)?items[selected]["description"]:""
             }
             </Typography>*/}
				
             <Typography ref={descriptionRef} mt={2} component="p" color="text.secondary" />
				
         </Paper>
     )

 }

En ControlPanel.tsx, agregue la modificación de la referencia en el manejador de eventos.

 ...

 export default function ControlPanel() {

     ...

     {/* Manejador de eventos */}

     const handleChange = (event: SelectChangeEvent) => {

         let idx = parseInt(event.target.value)
         setSelected( idx );

         {/* Modificación de la referencia */}

         if (descriptionRef.current !== null) {
             descriptionRef.current.innerHTML = (idx >= 0) ? items[idx]["description"] : ""
         }

     };

     ...
 }

(STOP 5) Compruebe el resultado en el navegador.
Versiona local y remotamente el repositorio dashboard.
Despliega la aplicación dashboard.

Documentación

En React Google Charts se encuentra la documentación de la biblioteca React Google Charts.

Fundamental

Guía de hooks en React

⚛️ Massive React hooks cheatsheet ↓

1/8 pic.twitter.com/S0BPD9OHrf
— George Moller (@_georgemoller) January 19, 2024

Términos

hooks, variable de estaddo, función de actualización

Referencias

Rakannimer. (n.d.). rakannimer/react-google-charts: A thin, typed, React wrapper over Google Charts Visualization and Charts API. Retrieved from https://github.com/RakanNimer/react-google-charts?tab=readme-ov-file
Yosami. “Creating a Weather Dashboard Using HTML, CSS, and JavaScript.” Medium, 8 Jul. 2020, https://medium.com/@yosami14/creating-a-weather-dashboard-using-html-css-and-javascript-217f80229fb.
(N.d.). Retrieved from https://www.react-google-charts.com/