AC-258 favorite feature and btn float added

src/src/components/floatingButton/FloatingButton.css

@@ -0,0 +1,17 @@
+.btn-floating-compare {
+    right: 23px;
+    bottom: 23px;
+    z-index: 1000;
+}
+
+.btn-floating-download {
+    right: 23px;
+    bottom: 73px;
+    z-index: 1000;
+}
+
+.btn-floating-favorite {
+    right: 23px;
+    bottom: 123px;
+    z-index: 1000;
+}

src/src/components/floatingButton/FloatingButton.js

@@ -0,0 +1,49 @@
+import React from "react";
+import "./FloatingButton.css";
+import { Button, OverlayTrigger, Tooltip } from "react-bootstrap";
+import {
+  IconFileDownload,
+  IconSatellite,
+  IconStar,
+  IconStarFilled,
+} from "@tabler/icons-react";
+
+const FloatingButton = ({ type, onClick, isFavorite }) => {
+  let icon;
+  let label;
+
+  switch (type) {
+    case "favorite":
+      icon = isFavorite ? <IconStarFilled /> : <IconStar />;
+      label = "Favorito";
+      break;
+    case "download":
+      icon = <IconFileDownload />;
+      label = "Descargar Datos";
+      break;
+    case "compare":
+      icon = <IconSatellite />;
+      label = "Comparar con datos satelitales";
+      break;
+    default:
+      icon = null;
+      label = "";
+  }
+
+  return (
+    <OverlayTrigger
+      placement="left"
+      overlay={<Tooltip id={`tooltip-${type}`}>{label}</Tooltip>}
+    >
+      <Button
+        variant="primary text-light"
+        className={`position-fixed shadow rounded-5 btn-floating-${type}`}
+        onClick={onClick}
+      >
+        {icon}
+      </Button>
+    </OverlayTrigger>
+  );
+};
+
+export default FloatingButton;

src/src/components/weatherChart/WeatherChart.js

@@ -1,5 +1,5 @@
 import React, { useMemo } from "react";
-import { Col, Spinner } from "react-bootstrap";
+import { Button, Col, Spinner } from "react-bootstrap";
 import { Line } from "react-chartjs-2";
 import {
   Chart,
@@ -12,6 +12,7 @@ import {
   Legend,
 } from "chart.js";
 import noDataImage from "../../assets/img/no-data.jpg";
+import { IconDownload } from "@tabler/icons-react";
 
 Chart.register(
   CategoryScale,
@@ -54,8 +55,25 @@ const WeatherChart = ({
 
   const allDataZero = data.every((item) => item.value === 0);
 
+  const downloadCSV = () => {
+    const csvData = [
+      ["Date", "Value"],
+      ...data.map((item) => [item.label, item.value]),
+    ];
+    const csvContent =
+      "data:text/csv;charset=utf-8," +
+      csvData.map((e) => e.join(",")).join("\n");
+    const encodedUri = encodeURI(csvContent);
+    const link = document.createElement("a");
+    link.setAttribute("href", encodedUri);
+    link.setAttribute("download", `${title.toLowerCase()}_data.csv`);
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+  };
+
   return (
-    <Col lg={6} className="mb-4 ">
+    <Col lg={6} className="mb-4">
       <div className="bg-white rounded p-4 text-dark h-100">
         {isChartLoading ? (
           <div className="text-center my-5">
@@ -64,7 +82,22 @@ const WeatherChart = ({
           </div>
         ) : (
           <>
-            <h5>{title}</h5>
+            <div className="d-flex justify-content-between align-items-center">
+              <h5>{title}</h5>
+              <Button
+                variant="primary"
+                className="text-white"
+                onClick={downloadCSV}
+                disabled={
+                  data.length === 0 ||
+                  data.every((item) => item.value === null) ||
+                  allDataZero
+                }
+              >
+                <IconDownload className="me-2" size={20} />
+                Descargar Datos
+              </Button>
+            </div>
             <hr />
             {data.length === 0 || data.every((item) => item.value === null) ? (
               <div className="h-75 d-flex flex-column justify-content-between">

src/src/pages/dashboard/Dashboard.css

@@ -1,4 +1,3 @@
 .bg-dashboard {
     background-color: #f1f1f1;
-
 }

src/src/pages/dashboard/Dashboard.js

@@ -1,12 +1,13 @@
 import React, { useState, useEffect, useMemo } from "react";
-import { Button, Col, Container, Form, Row, Spinner } from "react-bootstrap";
+import { Col, Container, Form, Row, Spinner } from "react-bootstrap";
 import { useParams, useNavigate } from "react-router-dom";
 import SearchBar from "../../components/searchBar/SearchBar";
 import Services from "../../services/Services";
 import { MapContainer, Marker, TileLayer, ZoomControl } from "react-leaflet";
 import L from "leaflet";
 import "./Dashboard.css";
 import WeatherChart from "../../components/weatherChart/WeatherChart";
+import FloatingButton from "../../components/floatingButton/FloatingButton.js";
 import { IconCalendarMonth } from "@tabler/icons-react";
 
 const Dashboard = () => {
@@ -23,6 +24,7 @@ const Dashboard = () => {
   const [startDate, setStartDate] = useState();
   const [endDate, setEndDate] = useState();
   const [endDataDate, setEndDataDate] = useState();
+  const [isFavorite, setIsFavorite] = useState(false);
   const { idWS } = useParams();
   const navigate = useNavigate();
 
@@ -109,6 +111,13 @@ const Dashboard = () => {
     fetchData();
   }, [startDate, endDate, currentStation, idWS]);
 
+  useEffect(() => {
+    const favorites = JSON.parse(localStorage.getItem("favorites")) || [];
+    setIsFavorite(
+      favorites.some((stationId) => stationId === currentStation?.id)
+    );
+  }, [currentStation]);
+
   const parseWeatherData = (readings) => {
     const result = {
       tempMax: [],
@@ -162,6 +171,39 @@ const Dashboard = () => {
     setEndDate(newEndDate);
   };
 
+  const downloadAllData = () => {
+    const csvData = [
+      ["Date", "Temp Max", "Temp Min", "Precipitation", "Solar Radiation"],
+      ...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",
+      ]),
+    ];
+    const csvContent =
+      "data:text/csv;charset=utf-8," +
+      csvData.map((e) => e.join(",")).join("\n");
+    const encodedUri = encodeURI(csvContent);
+    const link = document.createElement("a");
+    link.setAttribute("href", encodedUri);
+    link.setAttribute(
+      "download",
+      `${currentStation?.name.toLowerCase()}_weather_data.csv`
+    );
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+  };
+
+  const saveFavorite = () => {
+    const favorites = [];
+    favorites.push(currentStation.id);
+    localStorage.setItem("favorites", JSON.stringify(favorites));
+    setIsFavorite(true);
+  };
+
   const chartConfig = (label, data, color) => ({
     labels: data.map((item) => item.label),
     datasets: [
@@ -251,9 +293,6 @@ const Dashboard = () => {
                     />
                   </div>
                 </Form.Group>
-                <Button variant="primary text-light">
-                  Comparar con datos satelitales
-                </Button>
               </div>
 
               <h4 className="mb-0">{currentStation?.name}</h4>
@@ -323,7 +362,7 @@ const Dashboard = () => {
                 unit="°C"
                 chartOptions={chartOptions}
                 chartConfig={chartConfig}
-                color="rgba(54, 227, 224, 1)"
+                color="rgba(184, 84, 13, 1)"
                 isChartLoading={isChartLoading}
               />
               <WeatherChart
@@ -336,6 +375,13 @@ const Dashboard = () => {
                 isChartLoading={isChartLoading}
               />
             </Row>
+            <FloatingButton
+              type="favorite"
+              onClick={saveFavorite}
+              isFavorite={isFavorite}
+            />
+            <FloatingButton type="download" onClick={downloadAllData} />
+            <FloatingButton type="compare" onClick={() => alert("Comparar")} />
           </>
         )}
       </Container>