Ajout du bouton d'upload manuel et du README

README.md

@@ -1,11 +1,50 @@
----
-title: Monitoring
-emoji: 💻
-colorFrom: green
-colorTo: red
-sdk: static
-pinned: false
-short_description: Analyse de donnees
----
-
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Monitoring des Appareils ⚡️
+
+Un tableau de bord moderne et interactif pour la visualisation et l'analyse en temps réel de données électriques (tension et intensité) issues de différents appareils.
+
+## 🌟 Fonctionnalités
+
+- **Interface Glassmorphism** : Un design moderne, dynamique et visuellement attractif avec mode sombre et animations subtiles.
+- **Visualisation de Données** : Graphiques interactifs (via Chart.js) pour la tension (V) et l'intensité (A).
+- **Filtrage Avancé** : 
+  - Filtrage temporel (par dates de début et de fin).
+  - Sélection spécifique par appareil (Appareil 1, Appareil 2, Appareil 3 ou Tous).
+- **Calcul en Temps Réel** : Affichage dynamique des sommes de tension et d'intensité en fonction des filtres appliqués.
+- **Seuils d'Alerte** : Définition de seuils critiques visuels avec une ligne d'alerte sur les graphiques.
+- **Tolérance aux Pannes (Upload CSV)** : Si le fichier de données par défaut n'est pas trouvé (ex: problème de chemin lors du déploiement), l'interface permet d'importer manuellement le fichier CSV local.
+
+## 🛠 Technologies Utilisées
+
+- **HTML5** : Structure de la page.
+- **CSS3 (Vanilla)** : Stylisation avancée avec variables CSS, animations clés (keyframes), et effet Glassmorphism.
+- **JavaScript (ES6)** : Logique de l'application et gestion du DOM.
+- **Chart.js** : Librairie pour le rendu des graphiques.
+- **PapaParse** : Lecture et parsing performant des fichiers CSV côté client.
+
+## 🚀 Utilisation en Local
+
+Puisque le projet charge un fichier CSV (`donnees_appareils (1).csv`) de manière asynchrone, il est recommandé de l'exécuter via un serveur web local pour éviter les erreurs CORS du navigateur.
+
+1. Ouvrez un terminal dans le dossier du projet.
+2. Lancez un serveur HTTP, par exemple avec Python :
+   ```bash
+   python3 -m http.server 8000
+   ```
+3. Ouvrez votre navigateur à l'adresse `http://localhost:8000`.
+
+## 🌐 Déploiement (Hugging Face Spaces)
+
+Ce projet est parfaitement adapté pour être hébergé sur les **Spaces Hugging Face** en tant que site statique :
+1. Créez un nouveau Space et sélectionnez l'option **Static**.
+2. Uploadez les fichiers `index.html`, `style.css`, `main.js` et votre fichier `.csv`.
+3. Le site sera instantanément disponible publiquement avec un lien partageable !
+
+## 📁 Structure des données (CSV)
+
+Le fichier CSV attendu doit contenir au minimum les colonnes suivantes (séparées par des virgules) :
+- `Date` (format YYYY-MM-DD)
+- `Heure` (format HH:MM:SS)
+- `Tension_Appareil_1`, `Tension_Appareil_2`, `Tension_Appareil_3`
+- `Intensite_Appareil_1`, `Intensite_Appareil_2`, `Intensite_Appareil_3`
+
+*(S'il vous manque des données, l'application les ignorera ou mettra la valeur à 0 de manière sécurisée).*

index.html

@@ -84,6 +84,13 @@
                     </div>
                 </div>
 
+                <div class="control-group" id="upload-group" style="display: none;">
+                    <label id="upload-label" class="alert-text">Fichier CSV introuvable. Veuillez le charger :</label>
+                    <div class="input-wrapper">
+                        <input type="file" id="csv-upload" accept=".csv" class="file-input">
+                    </div>
+                </div>
+
                 <button id="apply-btn" class="glow-on-hover">Appliquer les filtres</button>
             </aside>
 

main.js

@@ -17,6 +17,7 @@ const colors = {
 document.addEventListener('DOMContentLoaded', () => {
     loadCSVData();
     document.getElementById('apply-btn').addEventListener('click', updateDashboard);
+    document.getElementById('csv-upload').addEventListener('change', handleFileUpload);
 });
 
 function loadCSVData() {
@@ -50,7 +51,50 @@ function loadCSVData() {
         },
         error: function(err) {
             console.error("Erreur CSV:", err);
-            alert("Erreur lors de la lecture du fichier 'donnees_appareils (1).csv'.");
+            document.getElementById('upload-group').style.display = 'block';
+            console.log("Affichage du champ de chargement manuel activé.");
+        }
+    });
+}
+
+function handleFileUpload(event) {
+    const file = event.target.files[0];
+    if (!file) return;
+
+    Papa.parse(file, {
+        header: true,
+        dynamicTyping: true,
+        skipEmptyLines: true,
+        complete: function(results) {
+            console.log("Uploaded CSV Parsed:", results.data);
+            rawData = results.data;
+            
+            if (rawData.length > 0) {
+                const dates = rawData.map(d => d.Date).filter(d => d);
+                if (dates.length > 0) {
+                    const minDate = dates[0];
+                    const maxDate = dates[dates.length - 1];
+                    
+                    document.getElementById('start-date').value = minDate;
+                    document.getElementById('end-date').value = maxDate;
+                    document.getElementById('start-date').min = minDate;
+                    document.getElementById('start-date').max = maxDate;
+                    document.getElementById('end-date').min = minDate;
+                    document.getElementById('end-date').max = maxDate;
+                }
+            }
+
+            if (!voltageChart || !currentChart) {
+                initializeCharts();
+            }
+            updateDashboard();
+            
+            document.getElementById('upload-label').innerText = "Fichier chargé avec succès !";
+            document.getElementById('upload-label').style.color = "#00ff66";
+        },
+        error: function(err) {
+            console.error("Erreur lors du parse du fichier uploadé:", err);
+            alert("Erreur lors de la lecture du fichier uploadé.");
         }
     });
 }

style.css

@@ -138,6 +138,31 @@ input:focus { border-color: var(--accent-blue); box-shadow: 0 0 10px rgba(0, 240
 .chart-container h2 { font-size: 1.3rem; margin-bottom: 1rem; color: var(--text-primary); }
 canvas { flex-grow: 1; width: 100% !important; height: 100% !important; }
 
+.alert-text {
+    color: var(--accent-red);
+    font-size: 0.9rem;
+    font-weight: 600;
+    line-height: 1.4;
+}
+
+.file-input {
+    width: 100%;
+    background: rgba(0, 0, 0, 0.3);
+    border: 1px solid var(--accent-red);
+    color: white;
+    padding: 0.8rem;
+    border-radius: 10px;
+    font-family: var(--font-main);
+    font-size: 0.9rem;
+    outline: none;
+    transition: all 0.3s ease;
+}
+
+.file-input:focus {
+    border-color: var(--accent-blue);
+    box-shadow: 0 0 10px rgba(0, 240, 255, 0.2);
+}
+
 @media (max-width: 900px) {
     .dashboard { grid-template-columns: 1fr; }
     .summary-cards { grid-template-columns: 1fr; }