7.1 KiB
📊 Échelle de couleurs des scores de benchmark
Vue d'ensemble
Le système d'échelle de couleurs permet de personnaliser les seuils qui déterminent la couleur des badges de score dans l'application. Par défaut, les scores sont colorés en :
- 🔴 Rouge (Faible) : scores < 51
- 🟠 Orange (Moyen) : scores entre 51 et 75
- 🟢 Vert (Élevé) : scores ≥ 76
Cette fonctionnalité permet d'ajuster ces seuils en fonction de vos données réelles.
Fonctionnalités
1. Configuration manuelle des seuils
Vous pouvez ajuster manuellement les deux seuils principaux :
- Seuil Moyen/Élevé : Score minimum pour qu'un badge soit vert
- Seuil Faible/Moyen : Score minimum pour qu'un badge soit orange
2. Statistiques en temps réel
L'interface affiche automatiquement les statistiques de vos benchmarks actuels :
- Minimum : Le score le plus bas
- Médiane : Score au milieu de la distribution
- Moyenne : Score moyen de tous les benchmarks
- Maximum : Le score le plus élevé
3. Calcul automatique
Le bouton "Calculer automatiquement" analyse vos données et définit les seuils de manière intelligente :
- Seuil Moyen : Percentile 33% (⅓ des scores sont en dessous)
- Seuil Élevé : Percentile 66% (⅔ des scores sont en dessous)
Cela garantit une répartition équilibrée :
- ⅓ des scores seront rouges (faibles)
- ⅓ des scores seront oranges (moyens)
- ⅓ des scores seront verts (élevés)
Utilisation
Configuration manuelle
- Ouvrez Settings
- Allez à la section "Échelle de couleurs des scores"
- Ajustez les curseurs pour les deux seuils
- Cliquez sur "Enregistrer les seuils"
- La page se recharge automatiquement
Calcul automatique
- Ouvrez Settings
- Allez à la section "Échelle de couleurs des scores"
- Consultez les statistiques pour comprendre vos données
- Cliquez sur "Calculer automatiquement"
- Vérifiez les seuils proposés
- Cliquez sur "Enregistrer les seuils"
Réinitialisation
Pour revenir aux valeurs par défaut (51 et 76) :
- Cliquez sur "Réinitialiser"
- Les curseurs reviennent aux valeurs d'origine
Exemple d'utilisation
Cas 1 : Serveurs haute performance
Si vous benchmarkez uniquement des serveurs performants, vos scores peuvent être très élevés (ex: 3000-9000). Les seuils par défaut (51, 76) ne sont pas pertinents.
Solution : Utilisez le calcul automatique
Statistiques actuelles :
- Min: 3300
- Médiane: 5400
- Moyenne: 5800
- Max: 9100
Seuils calculés automatiquement :
- Seuil Moyen: 4200 (percentile 33%)
- Seuil Élevé: 6800 (percentile 66%)
Résultat : Distribution équilibrée des couleurs adaptée à vos données.
Cas 2 : Mix de machines (Raspberry Pi, serveurs, PC)
Avec un large éventail de performances :
Statistiques actuelles :
- Min: 330
- Médiane: 1900
- Moyenne: 3450
- Max: 9100
Seuils calculés automatiquement :
- Seuil Moyen: 1812
- Seuil Élevé: 4647
Cas 3 : Configuration personnalisée
Vous pouvez définir vos propres critères :
- Machines < 1000 : Faibles (rouge)
- Machines 1000-5000 : Moyennes (orange)
- Machines ≥ 5000 : Élevées (vert)
Architecture technique
Stockage
Les seuils sont stockés dans localStorage :
localStorage.getItem('scoreThreshold_high') // ex: "76"
localStorage.getItem('scoreThreshold_medium') // ex: "51"
Application des seuils
La fonction getScoreBadgeClass() dans utils.js lit automatiquement les seuils depuis localStorage :
function getScoreBadgeClass(score) {
const highThreshold = parseInt(localStorage.getItem('scoreThreshold_high') || '76');
const mediumThreshold = parseInt(localStorage.getItem('scoreThreshold_medium') || '51');
if (score >= highThreshold) return 'score-badge score-high';
if (score >= mediumThreshold) return 'score-badge score-medium';
return 'score-badge score-low';
}
Calcul des statistiques
Les statistiques sont calculées en temps réel depuis l'API /api/devices :
async function loadScoreStatistics() {
const response = await fetch(`${backendApiUrl}/devices`);
const data = await response.json();
// Extraction de tous les global_score
const scores = data.items
.map(d => d.last_benchmark?.global_score)
.filter(s => s !== null && s !== undefined);
// Calcul des percentiles
scores.sort((a, b) => a - b);
const p33 = scores[Math.floor(scores.length / 3)];
const p66 = scores[Math.floor(scores.length * 2 / 3)];
}
Validation
Le système valide que :
- Le seuil moyen est inférieur au seuil élevé
- Les valeurs sont des nombres entiers positifs
Si la validation échoue, un message d'erreur s'affiche.
Impact
Les seuils personnalisés affectent :
- ✅ La page Dashboard (tableau des devices)
- ✅ La page Devices (liste des devices)
- ✅ La page Device Detail (score global et historique)
- ✅ Tous les badges de score dans l'application
Limites et considérations
-
Rechargement nécessaire : Après modification des seuils, la page doit être rechargée pour appliquer les changements partout.
-
Stockage local : Les seuils sont stockés dans le navigateur (localStorage). Si vous utilisez plusieurs navigateurs ou machines, les seuils doivent être configurés séparément.
-
Pas de stockage backend : Les seuils ne sont pas synchronisés avec le serveur. C'est une préférence purement côté client.
-
Données minimales : Le calcul automatique nécessite au moins quelques benchmarks. Avec moins de 3 devices, les percentiles peuvent ne pas être représentatifs.
FAQ
Q: Que se passe-t-il si je ne configure pas de seuils personnalisés ? R: Les valeurs par défaut (51 et 76) sont utilisées. Ces valeurs historiques correspondent aux anciens seuils du système.
Q: Puis-je avoir plus de 3 niveaux de couleur ? R: Non, le système actuel supporte uniquement 3 niveaux (faible/moyen/élevé). Pour plus de granularité, il faudrait modifier le code.
Q: Les seuils s'appliquent-ils à tous les types de scores ? R: Oui, les mêmes seuils sont utilisés pour le score global, CPU, mémoire, disque, réseau et GPU.
Q: Que faire si j'ai très peu de données ? R: Avec peu de benchmarks, le calcul automatique peut donner des résultats peu représentatifs. Dans ce cas, utilisez la configuration manuelle ou conservez les valeurs par défaut.
Améliorations futures possibles
- Sauvegarder les seuils dans le backend pour synchronisation multi-navigateur
- Seuils différents par type de score (CPU, RAM, disque, etc.)
- Plus de 3 niveaux de couleur (excellent, bon, moyen, faible, très faible)
- Graphique de distribution des scores
- Suggestions de seuils basées sur des benchmarks publics
Fichiers modifiés :
- frontend/settings.html - Interface utilisateur
- frontend/js/settings.js - Logique de gestion
- frontend/js/utils.js - Application des seuils
Créé le : 2026-01-11