Create App.js

App.js

@@ -0,0 +1,99 @@
+import { useEffect, useState } from "react";
+import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet';
+import 'leaflet/dist/leaflet.css';
+import Chart from 'chart.js/auto';
+
+function App() {
+  const [data, setData] = useState({
+    geoData: [{ latitude: 45.4, longitude: -71.9, name: "Position 1" }], // Sherbrooke, Québec par défaut
+    statsData: { labels: [], datasets: [] },
+    alerts: []
+  });
+
+  useEffect(() => {
+    // Simulation de données en temps réel (à remplacer par une connexion réelle)
+    const interval = setInterval(() => {
+      setData(prevData => ({
+        ...prevData,
+        geoData: prevData.geoData.map(point => ({
+          ...point,
+          latitude: point.latitude + (Math.random() - 0.5) * 0.1, // Mouvement aléatoire sur la carte
+          longitude: point.longitude + (Math.random() - 0.5) * 0.1
+        })),
+        statsData: {
+          labels: ["Red", "Blue", "Green"],
+          datasets: [{
+            label: 'Dataset 1',
+            data: [Math.random() * 100, Math.random() * 100, Math.random() * 100],
+            backgroundColor: [
+              'rgba(255, 99, 132, 0.2)',
+              'rgba(54, 162, 235, 0.2)',
+              'rgba(75, 192, 192, 0.2)'
+            ],
+            borderColor: [
+              'rgba(255, 99, 132, 1)',
+              'rgba(54, 162, 235, 1)',
+              'rgba(75, 192, 192, 1)'
+            ],
+            borderWidth: 1
+          }]
+        },
+        alerts: [...prevData.alerts, `Alerte ${Math.floor(Math.random() * 100)}`] 
+      }));
+    }, 2000); // Mettre à jour les données toutes les 2 secondes
+
+    return () => clearInterval(interval);
+  }, []);
+
+  function updateMap(geoData) {
+    return (
+      <MapContainer center={[45.4, -71.9]} zoom={5} style={{ height: '400px' }}>
+        <TileLayer
+          attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+        />
+        {geoData.map(point => (
+          <Marker key={point.name} position={[point.latitude, point.longitude]}>
+            <Popup>
+              {point.name}
+            </Popup>
+          </Marker>
+        ))}
+      </MapContainer>
+    );
+  }
+
+  useEffect(() => {
+    if (data.statsData.datasets.length > 0) {
+      const ctx = document.getElementById('myChart').getContext('2d');
+      new Chart(ctx, {
+        type: 'bar',
+        data: data.statsData,
+      });
+    }
+  }, [data.statsData]);
+
+  function updateAlerts(alerts) {
+    return (
+      <div>
+        <h3>Alertes:</h3>
+        <ul>
+          {alerts.map((alert, index) => (
+            <li key={index}>{alert}</li>
+          ))}
+        </ul>
+      </div>
+    );
+  }
+
+  return (
+    <div>
+      <h1>Tableau de Bord Démonstrateur</h1>
+      {updateMap(data.geoData)}
+      <canvas id="myChart"></canvas>
+      {updateAlerts(data.alerts)}
+    </div>
+  );
+}
+
+export default App;