AC-253 minor issues fixed

src/public/manifest.json

@@ -1,6 +1,6 @@
 {
   "short_name": "Aclimate Monitoring",
-  "name": "Create React App Sample",
+  "name": "Aclimate monitoring es una herramienta para poder visualizar las distintas estaciones climatologicas de la región de Nicaragua",
   "icons": [
     {
       "src": "favicon.ico",

src/src/components/searchBar/SearchBar.css

@@ -1,57 +1,54 @@
-/* SearchBar.css */
-
-/* Definir el ancho máximo de 500px para pantallas grandes */
 .search-bar-big {
-    width: 50vw;
-  }
-  .search-bar {
-    width: 350px;
-  }
-
-  /* Media query para dispositivos móviles */
-  @media (max-width: 767px) {
-    /* Reducir el ancho máximo a 350px en dispositivos móviles */
-    .search-bar {
-      width: 320px;
-    }
-  }
-
-  /* Mantener las reglas de estilo existentes */
-  .bar-hints {
-    position: absolute;
-    top: 70px;
-    z-index: 1000;
-    left: 20px;
-  }
-
+  width: 50vw;
+}
+.search-bar {
+  width: 350px;
+}
+
+@media (max-width: 767px) {
   .search-bar {
-    border-bottom: 1px solid #dadce0;
-    box-shadow: 0 0 2px rgb(0 0 0/20%), 0 -1px 0 rgb(0 0 0/2%);
-    border: none;
-  }
-
-  .search-bar-focused {
-    border-radius: 16px 16px 0 0;
-  }
-
-  .search-bar-unfocused {
-    border-radius: 16px 16px;
-  }
-
-  .waterpoints-search {
-    border-radius: 0 0 16px 16px;
-    box-shadow: 0 0 2px rgb(0 0 0/20%), 0 -1px 0 rgb(0 0 0/2%);
-    border: none;
+    width: 320px;
   }
-
-  .text-input:focus{
-    box-shadow: none !important; 
-  }
-
-  .hint-div{
-    cursor: pointer;
-  }
-
-  .hint-div:hover{
-    background-color: rgb(235, 235, 235);
-  }
+}
+.stations-search{
+  width: 95vw;
+}
+
+.bar-hints {
+  position: absolute;
+  top: 70px;
+  z-index: 1000;
+  left: 20px;
+}
+
+.search-bar {
+  border-bottom: 1px solid #dadce0;
+  box-shadow: 0 0 2px rgb(0 0 0/20%), 0 -1px 0 rgb(0 0 0/2%);
+  border: none;
+}
+
+.search-bar-focused {
+  border-radius: 16px 16px 0 0;
+}
+
+.search-bar-unfocused {
+  border-radius: 16px 16px;
+}
+
+.waterpoints-search {
+  border-radius: 0 0 16px 16px;
+  box-shadow: 0 0 2px rgb(0 0 0/20%), 0 -1px 0 rgb(0 0 0/2%);
+  border: none;
+}
+
+.text-input:focus {
+  box-shadow: none !important;
+}
+
+.hint-div {
+  cursor: pointer;
+}
+
+.hint-div:hover {
+  background-color: rgb(235, 235, 235);
+}

src/src/components/searchBar/SearchBar.js

@@ -53,7 +53,7 @@ function SearchBar({ stations, onStationClick, bigSize, dashboard }) {
       </div>
 
       {filterText.length >= 3 && (
-        <div className="bg-white stations-search px-3 py-1 position-absolute w-100">
+        <div className="bg-white stations-search px-3 py-1 position-absolute">
           {filteredStations.map((station) => (
             <div
               className="py-1 small hint-div text-capitalize text-dark"

src/src/components/weatherChart/WeatherChart.js

@@ -1,5 +1,5 @@
 import React, { useMemo } from "react";
-import { Col } from "react-bootstrap";
+import { Col, Spinner } from "react-bootstrap";
 import { Line } from "react-chartjs-2";
 import {
   Chart,
@@ -29,6 +29,7 @@ const WeatherChart = ({
   chartOptions,
   chartConfig,
   color,
+  isChartLoading,
 }) => {
   const maxItem = useMemo(
     () =>
@@ -53,27 +54,40 @@ const WeatherChart = ({
   return (
     <Col lg={6} className="mb-4">
       <div className="bg-white rounded p-4 text-dark">
-        <h5>{title}</h5>
-        <hr />
-        <p>
-          La gráfica muestra la evolución de {title.toLowerCase()} registrada en
-          la estación meteorológica durante los{" "}
-          <b>últimos {data.length} días</b>. En ella se destaca que el día con
-          la {title.toLowerCase()} más alta fue el{" "}
-          <b>{formatLabel(maxItem.label)}</b>, alcanzando un máximo de{" "}
-          <b>
-            {maxItem.value.toFixed(2)} {unit}
-          </b>
-          , mientras que el día con la {title.toLowerCase()} más baja fue el{" "}
-          <b>{formatLabel(minItem.label)}</b>, con una {title.toLowerCase()} de{" "}
-          <b>
-            {minItem.value.toFixed(2)} {unit}
-          </b>
-          . Esta visualización permite analizar las variaciones diarias de{" "}
-          {title.toLowerCase()} y ofrece una referencia clara para identificar
-          patrones climáticos recientes en la región.
-        </p>
-        <Line data={chartConfig(title, data, color)} options={chartOptions} />
+        {isChartLoading ? (
+          <div className="text-center my-5">
+            <Spinner animation="border" />
+            <p>Cargando gráficos...</p>
+          </div>
+        ) : (
+          <>
+            <h5>{title}</h5>
+            <hr />
+            <p>
+              La gráfica muestra la evolución de {title.toLowerCase()}{" "}
+              registrada en la estación meteorológica durante los{" "}
+              <b>últimos {data.length} días</b>. En ella se destaca que el día
+              con la {title.toLowerCase()} más alta fue el{" "}
+              <b>{formatLabel(maxItem.label)}</b>, alcanzando un máximo de{" "}
+              <b>
+                {maxItem.value.toFixed(2)} {unit}
+              </b>
+              , mientras que el día con la {title.toLowerCase()} más baja fue el{" "}
+              <b>{formatLabel(minItem.label)}</b>, con una {title.toLowerCase()}{" "}
+              de{" "}
+              <b>
+                {minItem.value.toFixed(2)} {unit}
+              </b>
+              . Esta visualización permite analizar las variaciones diarias de{" "}
+              {title.toLowerCase()} y ofrece una referencia clara para
+              identificar patrones climáticos recientes en la región.
+            </p>
+            <Line
+              data={chartConfig(title, data, color)}
+              options={chartOptions}
+            />
+          </>
+        )}
       </div>
     </Col>
   );

src/src/pages/dashboard/Dashboard.js

@@ -19,15 +19,20 @@ const Dashboard = () => {
   const [stations, setStations] = useState([]);
   const [currentStation, setCurrentStation] = useState(null);
   const [isLoading, setIsLoading] = useState(true);
+  const [isChartLoading, setIsChartLoading] = useState(false);
   const [startDate, setStartDate] = useState();
   const [endDate, setEndDate] = useState();
   const { idWS } = useParams();
   const navigate = useNavigate();
 
-  const iconMarker = useMemo(() => new L.Icon({
-    iconUrl: require("../../assets/img/marker.png"),
-    iconSize: [48, 48],
-  }), []);
+  const iconMarker = useMemo(
+    () =>
+      new L.Icon({
+        iconUrl: require("../../assets/img/marker.png"),
+        iconSize: [48, 48],
+      }),
+    []
+  );
 
   useEffect(() => {
     const fetchStations = async () => {
@@ -84,7 +89,7 @@ const Dashboard = () => {
   useEffect(() => {
     const fetchData = async () => {
       if (!currentStation || !startDate || !endDate) return;
-      setIsLoading(true);
+      setIsChartLoading(true);
       try {
         const response = await Services.getDailyWeather(
           startDate,
@@ -96,7 +101,7 @@ const Dashboard = () => {
       } catch (error) {
         console.error("Error fetching daily weather data:", error);
       } finally {
-        setIsLoading(false);
+        setIsChartLoading(false);
       }
     };
     fetchData();
@@ -111,7 +116,7 @@ const Dashboard = () => {
     };
 
     readings.forEach((reading) => {
-      const dayLabel = `${reading.date}`;
+      const dayLabel = `${reading.date.split("T")[0]}`;
       result.tempMax.push({
         label: dayLabel,
         value:
@@ -173,6 +178,21 @@ const Dashboard = () => {
     []
   );
 
+  const precipitationChartOptions = useMemo(
+    () => ({
+      ...chartOptions,
+      scales: {
+        ...chartOptions.scales,
+        y: {
+          ...chartOptions.scales.y,
+          beginAtZero: true,
+          min: 0,
+        },
+      },
+    }),
+    [chartOptions]
+  );
+
   return (
     <div>
       <Container fluid className="p-3 bg-dashboard">
@@ -271,9 +291,10 @@ const Dashboard = () => {
                 title="Precipitación"
                 data={data.precipitation}
                 unit="mm"
-                chartOptions={chartOptions}
+                chartOptions={precipitationChartOptions}
                 chartConfig={chartConfig}
                 color="rgba(26, 51, 237, 1)"
+                isChartLoading={isChartLoading}
               />
               <WeatherChart
                 title="Temperatura Máxima"
@@ -282,6 +303,7 @@ const Dashboard = () => {
                 chartOptions={chartOptions}
                 chartConfig={chartConfig}
                 color="rgba(163, 36, 36, 1)"
+                isChartLoading={isChartLoading}
               />
             </Row>
             <Row>
@@ -292,6 +314,7 @@ const Dashboard = () => {
                 chartOptions={chartOptions}
                 chartConfig={chartConfig}
                 color="rgba(54, 227, 224, 1)"
+                isChartLoading={isChartLoading}
               />
               <WeatherChart
                 title="Radiación Solar"
@@ -300,6 +323,7 @@ const Dashboard = () => {
                 chartOptions={chartOptions}
                 chartConfig={chartConfig}
                 color="rgba(237, 185, 12, 1)"
+                isChartLoading={isChartLoading}
               />
             </Row>
           </>
@@ -309,4 +333,4 @@ const Dashboard = () => {
   );
 };
 
-export default Dashboard;
+export default Dashboard;