README.md

metadata

title: Monitoring
emoji: 📊
colorFrom: blue
colorTo: purple
sdk: static
app_file: index.html
pinned: false

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 :

   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). 🚀