AC-234 Compare data feature added

CIAT-DAPA · Nov 14, 2024 · 7fa8a2a · 7fa8a2a
1 parent cd0b726
commit 7fa8a2a
Show file tree

Hide file tree

Showing 2 changed files with 87 additions and 10 deletions.
diff --git a/src/src/components/weatherChart/WeatherChart.js b/src/src/components/weatherChart/WeatherChart.js
@@ -27,6 +27,7 @@ Chart.register(
 const WeatherChart = ({
   title,
   data,
+  dataSpatial,
   unit,
   color,
   isChartLoading,
@@ -71,7 +72,7 @@ const WeatherChart = ({
     document.body.removeChild(link);
   };
 
-  const chartConfig = (label, data, color) => ({
+  const chartConfig = (label, data, color, dataSpatial, spatialColor) => ({
     labels: data.map((item) => item.label),
     datasets: [
       {
@@ -81,6 +82,17 @@ const WeatherChart = ({
         borderColor: color,
         tension: 0.1,
       },
+      ...(dataSpatial
+        ? [
+            {
+              label: `Datos satelitales`,
+              data: dataSpatial.map((item) => item.value),
+              fill: false,
+              borderColor: spatialColor,
+              tension: 0.1,
+            },
+          ]
+        : []),
     ],
   });
 
@@ -91,7 +103,7 @@ const WeatherChart = ({
         y: { title: { display: true, text: unit }, beginAtZero: false },
       },
     }),
-    []
+    [unit]
   );
 
   const ChartOptionsStartedAtZero = useMemo(
@@ -177,7 +189,13 @@ const WeatherChart = ({
                   identificar patrones climáticos recientes en la región.
                 </p>
                 <Line
-                  data={chartConfig("Datos estación", data, color)}
+                  data={chartConfig(
+                    "Datos estación",
+                    data,
+                    color,
+                    dataSpatial,
+                    "rgba(255, 99, 132, 1)"
+                  )}
                   options={
                     startAtZero ? ChartOptionsStartedAtZero : chartOptions
                   }

diff --git a/src/src/pages/dashboard/Dashboard.js b/src/src/pages/dashboard/Dashboard.js
@@ -1,5 +1,13 @@
 import React, { useState, useEffect, useMemo } from "react";
-import { Col, Container, Form, Row, Spinner } from "react-bootstrap";
+import {
+  Col,
+  Container,
+  Form,
+  Row,
+  Spinner,
+  Toast,
+  ToastContainer,
+} from "react-bootstrap";
 import { useParams, useNavigate } from "react-router-dom";
 import SearchBar from "../../components/searchBar/SearchBar";
 import Services from "../../services/Services";
@@ -17,6 +25,12 @@ const Dashboard = () => {
     precipitation: [],
     solRad: [],
   });
+  const [dataSpacial, setDataSpacial] = useState({
+    tempMax: [],
+    tempMin: [],
+    precipitation: [],
+    solRad: [],
+  });
   const [stations, setStations] = useState([]);
   const [currentStation, setCurrentStation] = useState(null);
   const [currentStationSpacial, setCurrentStationSpacial] = useState(null);
@@ -27,6 +41,7 @@ const Dashboard = () => {
   const [endDataDate, setEndDataDate] = useState();
   const [endDataSpacialDate, setEndDataSpacialDate] = useState();
   const [isFavorite, setIsFavorite] = useState(false);
+  const [showToast, setShowToast] = useState(false);
   const { idWS } = useParams();
   const navigate = useNavigate();
 
@@ -81,11 +96,11 @@ const Dashboard = () => {
         const lastDataSpacialAvailable = await Services.getLastDailyWeather(
           currentStationSpacial.id
         );
-        const formattedSpacialEndDate = new Date(
-          lastDataSpacialAvailable[0].date
-        )
-          .toISOString()
-          .split("T")[0];
+        const formattedSpacialEndDate = lastDataSpacialAvailable.length
+          ? new Date(lastDataSpacialAvailable[0].date)
+              .toISOString()
+              .split("T")[0]
+          : "N/A";
         setEndDataSpacialDate(formattedSpacialEndDate);
 
         const startDate = new Date(lastDataAvailable[0].date);
@@ -223,10 +238,50 @@ const Dashboard = () => {
     setIsFavorite(true);
   };
 
-  const compareData = () => {};
+  const compareData = () => {
+    const fetchData = async () => {
+      if (!currentStationSpacial) return;
+      try {
+        const response = await Services.getDailyWeather(
+          startDate,
+          endDate,
+          currentStationSpacial.id
+        );
+        const parsedData = parseWeatherData(response.daily_data);
+        setDataSpacial(parsedData);
+        console.log(parsedData);
+      } catch (error) {
+        console.error("Error fetching daily weather data:", error);
+      } finally {
+        if (dataSpacial.tempMax.length === 0) {
+          setShowToast(true);
+        }
+      }
+    };
+    fetchData();
+  };
 
   return (
     <div className="bg-dashboard">
+      <ToastContainer
+        className="p-3 position-fixed "
+        position="middle-center"
+        style={{ zIndex: 3000 }}
+      >
+        <Toast
+          onClose={() => setShowToast(false)}
+          show={showToast}
+          delay={3000}
+          autohide
+          bg="warning"
+        >
+          <Toast.Header>
+            <strong className="me-auto">
+              La estacion no tiene datos espaciales para este periodo de tiempo!
+            </strong>
+          </Toast.Header>
+        </Toast>
+      </ToastContainer>
       <Container className="p-3 bg-dashboard">
         <SearchBar
           stations={stations}
@@ -327,6 +382,7 @@ const Dashboard = () => {
               <WeatherChart
                 title="Precipitación"
                 data={data.precipitation}
+                dataSpatial={dataSpacial.precipitation}
                 unit="mm"
                 color="rgba(26, 51, 237, 1)"
                 isChartLoading={isChartLoading}
@@ -335,6 +391,7 @@ const Dashboard = () => {
               <WeatherChart
                 title="Temperatura Máxima"
                 data={data.tempMax}
+                dataSpatial={dataSpacial.tempMax}
                 unit="°C"
                 color="rgba(163, 36, 36, 1)"
                 isChartLoading={isChartLoading}
@@ -344,13 +401,15 @@ const Dashboard = () => {
               <WeatherChart
                 title="Temperatura Mínima"
                 data={data.tempMin}
+                dataSpatial={dataSpacial.tempMin}
                 unit="°C"
                 color="rgba(184, 84, 13, 1)"
                 isChartLoading={isChartLoading}
               />
               <WeatherChart
                 title="Radiación Solar"
                 data={data.solRad}
+                dataSpatial={dataSpacial.solRad}
                 unit="MJ"
                 color="rgba(237, 185, 12, 1)"
                 isChartLoading={isChartLoading}