209 lines
7.1 KiB
Markdown
209 lines
7.1 KiB
Markdown
# 📊 É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
|
|
|
|
1. Ouvrez [Settings](http://localhost:8087/settings.html)
|
|
2. Allez à la section **"Échelle de couleurs des scores"**
|
|
3. Ajustez les curseurs pour les deux seuils
|
|
4. Cliquez sur **"Enregistrer les seuils"**
|
|
5. La page se recharge automatiquement
|
|
|
|
### Calcul automatique
|
|
|
|
1. Ouvrez [Settings](http://localhost:8087/settings.html)
|
|
2. Allez à la section **"Échelle de couleurs des scores"**
|
|
3. Consultez les statistiques pour comprendre vos données
|
|
4. Cliquez sur **"Calculer automatiquement"**
|
|
5. Vérifiez les seuils proposés
|
|
6. Cliquez sur **"Enregistrer les seuils"**
|
|
|
|
### Réinitialisation
|
|
|
|
Pour revenir aux valeurs par défaut (51 et 76) :
|
|
1. Cliquez sur **"Réinitialiser"**
|
|
2. 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` :
|
|
```javascript
|
|
localStorage.getItem('scoreThreshold_high') // ex: "76"
|
|
localStorage.getItem('scoreThreshold_medium') // ex: "51"
|
|
```
|
|
|
|
### Application des seuils
|
|
|
|
La fonction `getScoreBadgeClass()` dans [utils.js](../frontend/js/utils.js) lit automatiquement les seuils depuis localStorage :
|
|
|
|
```javascript
|
|
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` :
|
|
|
|
```javascript
|
|
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
|
|
|
|
1. **Rechargement nécessaire** : Après modification des seuils, la page doit être rechargée pour appliquer les changements partout.
|
|
|
|
2. **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.
|
|
|
|
3. **Pas de stockage backend** : Les seuils ne sont pas synchronisés avec le serveur. C'est une préférence purement côté client.
|
|
|
|
4. **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](../frontend/settings.html) - Interface utilisateur
|
|
- [frontend/js/settings.js](../frontend/js/settings.js) - Logique de gestion
|
|
- [frontend/js/utils.js](../frontend/js/utils.js) - Application des seuils
|
|
|
|
**Créé le** : 2026-01-11
|