# 📊 É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