AC-234 Compare page finished

CIAT-DAPA · Nov 15, 2024 · cbf43d8 · cbf43d8
1 parent 8544915
commit cbf43d8
Show file tree

Hide file tree

Showing 3 changed files with 91 additions and 19 deletions.
diff --git 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.
                 </p>
                 <Line
-                  data={chartConfig("Datos estación", data, color, dataSpatial)}
+                  data={chartConfig("Datos estación", data, color, dataSpacial)}
                   options={
                     startAtZero ? ChartOptionsStartedAtZero : chartOptions
                   }

diff --git a/src/src/pages/dashboard/Dashboard.js b/src/src/pages/dashboard/Dashboard.js
@@ -37,6 +37,8 @@ const Dashboard = () => {
   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}
                       />
                     </div>
                     <div className="d-flex flex-column pb-2 justify-content-end mx-3">
@@ -352,10 +413,12 @@ const Dashboard = () => {
                 <b>
                   {currentStation?.latitude + ", " + currentStation?.longitude}.{" "}
                 </b>
-                Cuenta con datos observados desde el {" ----- "} hasta el{" "}
-                <b>{endDataDate}</b>, se puede comparar con datos espaciales
-                como AgERA-5 y CHIRPS que tiene datos desde el {" ----- "} hasta
-                el <b>{endDataSpacialDate}</b>.
+                Cuenta con datos observados desde el{" "}
+                <b>{startDataDate || "N/A"}</b> hasta el{" "}
+                <b>{endDataDate || "N/A"}</b>, se puede comparar con datos
+                espaciales como AgERA-5 y CHIRPS que tiene datos desde el{" "}
+                <b>{startDataSpacialDate || "N/A"}</b> hasta el{" "}
+                <b>{endDataSpacialDate || "N/A"}</b>.
               </p>
               {currentStation?.latitude && currentStation?.longitude ? (
                 <MapContainer
@@ -388,7 +451,7 @@ const Dashboard = () => {
               <WeatherChart
                 title="Precipitación"
                 data={data.precipitation}
-                dataSpatial={dataSpacial.precipitation}
+                dataSpacial={dataSpacial.precipitation}
                 unit="mm"
                 color="rgba(26, 51, 237, 1)"
                 isChartLoading={isChartLoading}
@@ -397,7 +460,7 @@ const Dashboard = () => {
               <WeatherChart
                 title="Temperatura Máxima"
                 data={data.tempMax}
-                dataSpatial={dataSpacial.tempMax}
+                dataSpacial={dataSpacial.tempMax}
                 unit="°C"
                 color="rgba(163, 36, 36, 1)"
                 isChartLoading={isChartLoading}
@@ -407,15 +470,15 @@ const Dashboard = () => {
               <WeatherChart
                 title="Temperatura Mínima"
                 data={data.tempMin}
-                dataSpatial={dataSpacial.tempMin}
+                dataSpacial={dataSpacial.tempMin}
                 unit="°C"
                 color="rgba(184, 84, 13, 1)"
                 isChartLoading={isChartLoading}
               />
               <WeatherChart
                 title="Radiación Solar"
                 data={data.solRad}
-                dataSpatial={dataSpacial.solRad}
+                dataSpacial={dataSpacial.solRad}
                 unit="MJ"
                 color="rgba(237, 185, 12, 1)"
                 isChartLoading={isChartLoading}

diff --git a/src/src/services/Services.js b/src/src/services/Services.js
@@ -79,8 +79,8 @@ class Services {
    * @returns {Promise<Object>} 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;