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;