Ajout de la gestion des références pour le défilement fluide dans les composants graphiques et Clarrification du code

Front-end/src/components/BoutonGraphique.jsx

@@ -1,23 +1,21 @@
-import React, {useRef} from "react";
+import React from "react";
 import { ChartLine } from "lucide-react";
-function BoutonGraphique({ TypeAff, setAffichage,graphCible}) {
-  const handleClick = (newAffichage) =>{
-    setAffichage(newAffichage);
-    if(graphCible.current){
-      graphCible.current.scrollIntoView({ behavior: "smooth" });
-    }
+
+function BoutonGraphique({ type, setGraphStates, graphStates, graphCible }) {
+  const handleClick = () => {
+    setGraphStates((prev) => ({ ...prev, [type]: !prev[type] }));
   };
-  return !TypeAff ? (
+  return !graphStates[type] ? ( 
     <button
       className="bg-blue-200 py-2 my-2 px-4 rounded-full mr-2"
-      onClick={() => handleClick(true)}
+      onClick={handleClick}
     >
       <ChartLine className="text-indigo-600" size={24} />
     </button>
   ) : (
     <button
       className="bg-blue-400 py-2 my-2 px-4 rounded-full mr-2"
-      onClick={() => handleClick(false)}
+      onClick={handleClick}
     >
       <ChartLine className="text-indigo-600" size={24} />
     </button>

Front-end/src/components/InfoObject.jsx

@@ -4,7 +4,7 @@ import { Info } from "lucide-react";
 function InfoObject({ object,defafficherModif }) {
   return (
     <div key={object.id} className="bg-white p-6 rounded-xl min-w-5xl">
-      <div className="flex align-items gap-6">
+      <div className="flex align-items gap-6 mb-6">
         <div className="w-12 h-12 bg-indigo-100 rounded-lg flex items-center justify-center mb-1">
           <Info className="text-indigo-600" size={24} />
         </div>

Front-end/src/components/MeteoGraph.jsx

@@ -15,7 +15,7 @@ import { Wind } from "lucide-react";
 import axios from "axios";
 import { API_BASE_URL } from "../config";
 
-function MeteoGraph({ object, categorie, Logo }) {
+function MeteoGraph({ object, categorie, Logo,reference}) {
   const [rawData, setRawData] = useState([]);
   const identifiant = object.id;
   useEffect(() => {
@@ -23,7 +23,11 @@ function MeteoGraph({ object, categorie, Logo }) {
       setRawData(response.data);
     });
   }, [object]);
-
+  useEffect(() => {
+    if (reference?.current) {
+      reference.current.scrollIntoView({ behavior: "smooth" });
+    }
+  }, [reference]);
   function getAvg() {
     let moyenne = 0;
     rawData.forEach((element) => {
@@ -35,9 +39,11 @@ function MeteoGraph({ object, categorie, Logo }) {
   }
   return (
     <div
+      ref={reference}
       key={object.id}
       className="bg-white mb-6 p-6 rounded-xl min-w-5xl"
       style={{ width: "100%", height: "400px" }}
+
     >
       <div className="flex align-items gap-6">
         <div className="w-12 h-12 bg-indigo-100 rounded-lg flex items-center justify-center mb-4">

Front-end/src/components/MeteoInfos.jsx

@@ -8,13 +8,9 @@ import AlertInactive from "./AlertInactive";
 
 function MeteoInfos({
   object,
-  defAffTempGraph,
-  AffTempGraph,
-  defAffPressionGraph,
-  AffPressionGraph,
-  defAffHumiditeGraph,
-  AffHumiditeGraph,
-  graphCible
+  graphStates,
+  setGraphStates,  
+  graphRefs     
 }) {
   const [rawData, setRawData] = useState([]);
   const [AffAlert,setAffAlert] = useState(false);
@@ -30,7 +26,6 @@ function MeteoInfos({
   }, [object]);
 
   const lastData = rawData.length > 0 ? rawData[rawData.length - 1] : null;
-  console.log(rawData.length);
   return (
     <div key={object.id} className="bg-white  p-6 rounded-xl min-w-5xl">
       {(AffAlert&&(object.status==="active")) && (
@@ -61,9 +56,10 @@ function MeteoInfos({
                   </div>
                 </div>
                 <BoutonGraphique
-                  TypeAff={AffTempGraph}
-                  setAffichage={defAffTempGraph}
-                  graphCible={graphCible}
+                  type="temperature"
+                  graphStates={graphStates}
+                  setGraphStates={setGraphStates}
+                  graphCible={graphRefs.temperature}
 
                 />
               </div>
@@ -86,9 +82,10 @@ function MeteoInfos({
                   </div>
                 </div>
                 <BoutonGraphique
-                  TypeAff={AffPressionGraph}
-                  setAffichage={defAffPressionGraph}
-                  graphCible={graphCible}
+                  type="pressure"
+                  graphStates={graphStates}
+                  setGraphStates={setGraphStates}
+                  graphCible={graphRefs.pressure}
                 />
               </div>
             </div>
@@ -110,8 +107,10 @@ function MeteoInfos({
                   </div>
                 </div>
                 <BoutonGraphique
-                  TypeAff={AffHumiditeGraph}
-                  setAffichage={defAffHumiditeGraph}
+                  type="humidity"
+                  graphStates={graphStates}
+                  setGraphStates={setGraphStates}
+                  graphCible={graphRefs.humidity}
                 />
               </div>
             </div>

Front-end/src/components/WindGraph.jsx

@@ -5,7 +5,7 @@ import { Wind } from "lucide-react";
 import axios from "axios";
 import { API_BASE_URL } from "../config";
 
-function WindGraph({ object }) {
+function WindGraph({ object,reference }) {
   const [rawData, setRawData] = useState([]);
   const identifiant = object.id;
   useEffect(() => {
@@ -27,8 +27,13 @@ function WindGraph({ object }) {
 
     return null; // Si aucun point n'est survolé
   };
+  useEffect(() => {
+      if (reference?.current) {
+        reference.current.scrollIntoView({ behavior: "smooth" });
+      }
+    }, [reference]);
   return (
-    <div key={object.id} className="bg-white mb-6 p-6 rounded-xl min-w-5xl" style={{width: "100%", height: "400px"}}>
+    <div key={object.id} ref={reference} className="bg-white mb-6 p-6 rounded-xl min-w-5xl" style={{width: "100%", height: "400px"}}>
       <div className="flex align-items gap-6">
         <div className="w-12 h-12 bg-indigo-100 rounded-lg flex items-center justify-center mb-4">
           <Wind className="text-indigo-600" size={24} />

Front-end/src/components/WindInfo.jsx

@@ -5,7 +5,7 @@ import axios from "axios";
 import { API_BASE_URL } from "../config";
 import BoutonGraphique from "./BoutonGraphique";
 
-function WindInfo({ object, defAffWindGraph, AffWindGraph }) {
+function WindInfo({ object, setGraphStates, graphStates, graphRefs, reference}) {
   const [rawData, setRawData] = useState([]);
   const identifiant = object.id;
   useEffect(() => {
@@ -13,6 +13,11 @@ function WindInfo({ object, defAffWindGraph, AffWindGraph }) {
       setRawData(response.data);
     });
   }, [object]);
+  useEffect(() => {
+    if (reference?.current) {
+      reference.current.scrollIntoView({ behavior: "smooth" });
+    }
+  }, [reference]);
 
   const lastData = rawData.length > 0 ? rawData[rawData.length - 1] : null;
 
@@ -48,8 +53,10 @@ function WindInfo({ object, defAffWindGraph, AffWindGraph }) {
                 </div>
               </div>
                <BoutonGraphique
-                TypeAff={AffWindGraph}
-                setAffichage={defAffWindGraph}
+                type="wind"
+                graphStates={graphStates}
+                setGraphStates={setGraphStates}
+                graphCible={graphRefs.wind}
               />
             </div>
           </div>

Front-end/src/pages/Gestion/Objet.jsx

@@ -14,31 +14,27 @@ import MeteoGraph from "../../components/MeteoGraph";
 import BatterieInfo from "../../components/BatterieInfo";
 function Objet() {
   const identifiant = new URLSearchParams(window.location.search).get("id");
-  const [searchQuery, setSearchQuery] = useState("");
-  const [activeFilter, setActiveFilter] = useState("all");
   const [object, setObject] = useState({});
   const [graphStates, setGraphStates] = useState({
     wind: false,
     temperature: false,
     pressure: false,
     humidity: false,
-  })
+  });
   const [afficherModif, defafficherModif] = useState(false);
-  const [AffWindGraph, defAffWindGraph] = useState(false);
-  const [AffTempGraph, defAffTempGraph] = useState(false);
-  const [AffPressionGraph, defAffPressionGraph] = useState(false);
-  const [AffHumiditeGraph, defAffHumideGraph] = useState(false);
-  const tempGraphRef = useRef(null);
-  const pressureGraphRef = useRef(null);
-  const humidityGraphRef = useRef(null);
-  const windGraphRef = useRef(null);
+  const graphRefs = {
+    temperature: useRef(null),
+    pressure: useRef(null),
+    humidity: useRef(null),
+    wind: useRef(null),
+  };
 
   useEffect(() => {
     axios.get(`${API_BASE_URL}/objet?id=${identifiant}`).then((response) => {
       setObject(response.data[0]);
     });
   }, [identifiant]);
-  return (
+  return object && object.id ? (
     <div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-50">
       <div className=" max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
         <div className="text-center mb-5">
@@ -52,68 +48,50 @@ function Objet() {
           ) : (
             <ModifObject object={object} defafficherModif={defafficherModif} />
           )}
-
-          {object && object.id ? (
           <WindInfo
             object={object}
-              defAffWindGraph={defAffWindGraph}
-              AffWindGraph={AffWindGraph}
+            setGraphStates={setGraphStates}
+            graphStates={graphStates}
+            graphRefs={graphRefs}
           />
-          ) : (
-            <p>Chargement des données...</p>
-          )}
-          {object && object.id ? (
           <MeteoInfos
             object={object}
-              defAffTempGraph={defAffTempGraph}
-              AffTempGraph={AffTempGraph}
-              defAffPressionGraph={defAffPressionGraph}
-              AffPressionGraph={AffPressionGraph}
-              defAffHumiditeGraph={defAffHumideGraph}
-              AffHumiditeGraph={AffHumiditeGraph}
-              tempGraphRef={tempGraphRef}
-              pressureGraphRef={pressureGraphRef}
-              humidityGraphRef={humidityGraphRef}
+            graphStates={graphStates}
+            setGraphStates={setGraphStates}
+            graphRefs={graphRefs}
           />
-          ) : (
-            <p>Chargement des données...</p>
-          )}
           <BatterieInfo object={object} />
         </div>
-        {AffWindGraph &&
-          (object && object.id ? (
-            <WindGraph object={object} />
-          ) : (
-            <p>Chargement des données...</p>
-          ))}
-        {AffTempGraph &&
-          (object && object.id ? (
+
+        {graphStates.wind && <WindGraph object={object} reference={graphRefs.wind} />}
+        {graphStates.temperature && (
           <MeteoGraph
             object={object}
             categorie={"temperature"}
             Logo={Thermometer}
+            reference={graphRefs.temperature}
           />
-          ) : (
-            <p>Chargement des données...</p>
-          ))}
-        {AffPressionGraph &&
-          (object && object.id ? (
+        )}
+        {graphStates.pressure && (
           <MeteoGraph
             object={object}
             categorie={"pressure"}
             Logo={CircleGauge}
+            reference={graphRefs.pressure}
           />
-          ) : (
-            <p>Chargement des données...</p>
-          ))}
-        {AffHumiditeGraph &&
-          (object && object.id ? (
-            <MeteoGraph object={object} categorie={"humidity"} Logo={Droplet} />
-          ) : (
-            <p>Chargement des données...</p>
-          ))}
+        )}
+        {graphStates.humidity && (
+          <MeteoGraph
+            object={object}
+            categorie={"humidity"}
+            Logo={Droplet}
+            reference={graphRefs.humidity}
+          />
+        )}
       </div>
     </div>
+  ) : (
+    <h1>Erreur de récupération de l'objet</h1>
   );
 }
 export default Objet;