Grafica Temperatura Humedad - Copy this React, Tailwind Component to your project

Import React, { useState } from 'react'; import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, Brush } from 'recharts'; interface Data { date: string; temperatura: number; humedad: number; } const GraficaTemperaturaHumedad = () => { const [data, setData] = useState<Data[]>([]); const [newData, setNewData] = useState({ date: '', temperatura: 0, humedad: 0 }); const [fechaInicio, setFechaInicio] = useState(''); const [dataZoom, setDataZoom] = useState<Data[]>([]); const [startX, setStartX] = useState(null); const [endX, setEndX] = useState(null); const handleAddData = () => { const fecha = new Date(fechaInicio); const mesAtras = new Date(fecha.getFullYear(), fecha.getMonth() 1, fecha.getDate()); const datos = []; for (let i = 0; i < 30; i++) { const fechaActual = new Date(mesAtras.getTime() + i * 24 * 60 * 60 * 1000); const fechaString = fechaActual.toISOString().split('T')[0]; datos.push({ date: fechaString, temperatura: Math.random() * 30, humedad: Math.random() * 100 }); } setData(datos); }; const handleAddNuevoDato = () => { setData([...data, newData]); setNewData({ date: '', temperatura: 0, humedad: 0 }); }; const handleResetData = () => { setData([]); }; const handleExportToCsv = () => { const csvContent = data.map((item) => Object.values(item).join(',')).join('\n'); const csvBlob = new Blob([csvContent], { type: 'text/csv' }); const csvUrl = URL.createObjectURL(csvBlob); const csvLink = document.createElement('a'); csvLink.href = csvUrl; csvLink.download = 'temperatura_humedad.csv'; csvLink.click(); }; const handleZoom = (range) => { if (range.length > 0) { const startIndex = data.findIndex((item) => item.date === range[0].date); const endIndex = data.findIndex((item) => item.date === range[1].date); setDataZoom(data.slice(startIndex, endIndex + 1)); } else { setDataZoom([]); } }; return ( <div className="max w 6xl mx auto p 4"> <h2 className="text 2xl font bold mb 4">Gráfica de Temperatura y Humedad</h2> <div className="flex flex wrap justify center mb 4"> <input type="date" value={fechaInicio} onChange={(e) => setFechaInicio(e.target.value)} placeholder="Fecha de inicio" className="w full md:w 1/3 p 2 pl 10 text sm text gray 700" /> <button onClick={handleAddData} className="bg green 500 hover:bg green 700 text white font bold py 2 px 4 rounded" > Agregar datos </button> </div> <div className="flex flex wrap justify center mb 4"> <input type="date" value={newData.date} onChange={(e) => setNewData({ ...newData, date: e.target.value })} placeholder="Fecha" className="w full md:w 1/3 p 2 pl 10 text sm text gray 700" /> <input type="number" value={newData.temperatura} onChange={(e) => setNewData({ ...newData, temperatura: parseInt(e.target.value) })} placeholder="Temperatura" className="w full md:w 1/3 p 2 pl 10 text sm text gray 700" /> <input type="number" value={newData.humedad} onChange={(e) => setNewData({ ...newData, humedad: parseInt(e.target.value) })} placeholder="Humedad" className="w full md:w 1/3 p 2 pl 10 text sm text gray 700" /> <button onClick={handleAddNuevoDato} className="bg green 500 hover:bg green 700 text white font bold py 2 px 4 rounded" > Agregar nuevo dato </button> <button onClick={handleResetData} className="bg red 500 hover:bg red 700 text white font bold py 2 px 4 rounded" > Resetear </button> <button onClick={handleExportToCsv} className="bg blue 500 hover:bg blue 700 text white font bold py 2 px 4 rounded" > Exportar a CSV </button> </div> <LineChart width={800} height={400} data={dataZoom.length > 0 ? dataZoom : data}> <CartesianGrid strokeDasharray="3 3" /> <XAxis dataKey="date" /> <YAxis /> <Tooltip /> <Legend /> <Line type="monotone" dataKey="temperatura" stroke="#8884d8" activeDot={{ r: 8 }} /> <Line type="monotone" dataKey="humedad" stroke="#82ca9d" /> <Brush dataKey="date" height={30} stroke="#8884d8" onChange={(range) => handleZoom(range)} /> </LineChart> </div> ); }; export default GraficaTemperaturaHumedad;