diff --git a/src/src/components/weatherChart/WeatherChart.js b/src/src/components/weatherChart/WeatherChart.js index e4e32d0..c605b00 100644 --- a/src/src/components/weatherChart/WeatherChart.js +++ b/src/src/components/weatherChart/WeatherChart.js @@ -27,7 +27,7 @@ Chart.register( const WeatherChart = ({ title, data, - dataSpatial, + dataSpacial, unit, color, isChartLoading, @@ -67,9 +67,18 @@ const WeatherChart = ({ const downloadCSV = () => { const csvData = [ - ["Date", "Value"], - ...data.map((item) => [item.label, item.value]), + [ + "Fecha", + title, + ...(dataSpacial.length > 0 ? [`${title} satelital`] : []), + ], + ...data.map((item, index) => [ + item.label, + item.value, + ...(dataSpacial.length > 0 ? [dataSpacial[index]?.value ?? "N/A"] : []), + ]), ]; + const csvContent = "data:text/csv;charset=utf-8," + csvData.map((e) => e.join(",")).join("\n"); @@ -82,7 +91,7 @@ const WeatherChart = ({ document.body.removeChild(link); }; - const chartConfig = (label, data, color, dataSpatial) => ({ + const chartConfig = (label, data, color, dataSpacial) => ({ labels: data.map((item) => item.label), datasets: [ { @@ -92,11 +101,11 @@ const WeatherChart = ({ borderColor: color, tension: 0.1, }, - ...(dataSpatial.length > 0 + ...(dataSpacial.length > 0 ? [ { label: `Datos satelitales`, - data: dataSpatial.map((item) => item.value), + data: dataSpacial.map((item) => item.value), fill: false, borderColor: adjustColorOpacity(color, 0.5), tension: 0.1, @@ -199,7 +208,7 @@ const WeatherChart = ({ identificar patrones climáticos recientes en la región.

{ const [isLoading, setIsLoading] = useState(true); const [isChartLoading, setIsChartLoading] = useState(false); const [startDate, setStartDate] = useState(); + const [startDataDate, setStartDataDate] = useState(); + const [startDataSpacialDate, setStartDataSpacialDate] = useState(); const [endDate, setEndDate] = useState(); const [endDataDate, setEndDataDate] = useState(); const [endDataSpacialDate, setEndDataSpacialDate] = useState(); @@ -79,6 +81,12 @@ const Dashboard = () => { } }; fetchStations(); + setDataSpacial({ + tempMax: [], + tempMin: [], + precipitation: [], + solRad: [], + }); }, [idWS]); useEffect(() => { @@ -103,10 +111,33 @@ const Dashboard = () => { : "N/A"; setEndDataSpacialDate(formattedSpacialEndDate); + const firstDataAvailable = await Services.getLastDailyWeather( + idWS, + false + ); + const formattedFirstDataDate = new Date(firstDataAvailable[0].date) + .toISOString() + .split("T")[0]; + setStartDataDate(formattedFirstDataDate); + const firstDataSpacialAvailable = await Services.getLastDailyWeather( + currentStationSpacial.id, + false + ); + const formattedFirstDataSpacialDate = firstDataSpacialAvailable.length + ? new Date(firstDataSpacialAvailable[0].date) + .toISOString() + .split("T")[0] + : "N/A"; + setStartDataSpacialDate(formattedFirstDataSpacialDate); const startDate = new Date(lastDataAvailable[0].date); startDate.setDate(startDate.getDate() - 7); const formattedStartDate = startDate.toISOString().split("T")[0]; - setStartDate(formattedStartDate); + + if (new Date(formattedFirstDataDate) > new Date(formattedStartDate)) { + setStartDate(formattedFirstDataDate); + } else { + setStartDate(formattedStartDate); + } const response = await Services.getDailyWeather( formattedStartDate, @@ -206,16 +237,45 @@ const Dashboard = () => { }; const downloadAllData = () => { + const hasDataSpacial = + dataSpacial.tempMax.length > 0 || + dataSpacial.tempMin.length > 0 || + dataSpacial.precipitation.length > 0 || + dataSpacial.solRad.length > 0; + const csvData = [ - ["Date", "Temp Max", "Temp Min", "Precipitation", "Solar Radiation"], + [ + "Fecha", + "Temp Max", + "Temp Min", + "Precipitación", + "Radiación Solar", + ...(hasDataSpacial + ? [ + "Temp Max (Satelital)", + "Temp Min (Satelital)", + "Precipitación (Satelital)", + "Radiación Solar (Satelital)", + ] + : []), + ], ...data.tempMax.map((item, index) => [ item.label, item.value, data.tempMin[index]?.value ?? "N/A", data.precipitation[index]?.value ?? "N/A", data.solRad[index]?.value ?? "N/A", + ...(hasDataSpacial + ? [ + dataSpacial.tempMax[index]?.value ?? "N/A", + dataSpacial.tempMin[index]?.value ?? "N/A", + dataSpacial.precipitation[index]?.value ?? "N/A", + dataSpacial.solRad[index]?.value ?? "N/A", + ] + : []), ]), ]; + const csvContent = "data:text/csv;charset=utf-8," + csvData.map((e) => e.join(",")).join("\n"); @@ -321,6 +381,7 @@ const Dashboard = () => { value={startDate} onChange={handleStartDateChange} max={endDate} + min={startDataDate} />
@@ -352,10 +413,12 @@ const Dashboard = () => { {currentStation?.latitude + ", " + currentStation?.longitude}.{" "} - Cuenta con datos observados desde el {" ----- "} hasta el{" "} - {endDataDate}, se puede comparar con datos espaciales - como AgERA-5 y CHIRPS que tiene datos desde el {" ----- "} hasta - el {endDataSpacialDate}. + Cuenta con datos observados desde el{" "} + {startDataDate || "N/A"} hasta el{" "} + {endDataDate || "N/A"}, se puede comparar con datos + espaciales como AgERA-5 y CHIRPS que tiene datos desde el{" "} + {startDataSpacialDate || "N/A"} hasta el{" "} + {endDataSpacialDate || "N/A"}.

{currentStation?.latitude && currentStation?.longitude ? ( { { { { } A promise that resolves to the daily weather data. * @throws Will throw an error if the request fails. */ - async getLastDailyWeather(stationsIds) { - const url = `/DailyWeatherData/LastDailyData/${stationsIds}/json`; + async getLastDailyWeather(stationsIds, lastData = true) { + const url = `/DailyWeatherData/LastDailyData/${stationsIds}/json?lastData=${lastData}`; try { const response = await apiClient.get(url); return response.data;