docs: ajout documentation pour la page Équipe & Technologies
- Création de guide-page-equipe.md avec documentation complète - Description des 3 visualisations (graphe réseau, matrice congestion, équipe genèse) - Instructions pour régénérer les données - Guide de personnalisation et cas d'usage - Mise à jour du README avec lien vers la nouvelle documentation
This commit is contained in:
syoul
@@ -17,6 +17,8 @@ Cette documentation est organisée en plusieurs sections :
|
||||
- **[Développement](./developpement.md)** - Guide pour développer et tester localement
|
||||
- **[Déploiement](./deploiement.md)** - Instructions pour déployer le radar en production
|
||||
- **[Contribution](./contribution.md)** - Guide pour ajouter de nouvelles technologies au radar
|
||||
- **[Guide Radar Business](./guide-radar-business.md)** - Guide d'utilisation du radar technologique Laplank
|
||||
- **[Page Équipe & Technologies](./guide-page-equipe.md)** - Documentation de la page de visualisation équipe/technologies
|
||||
|
||||
### Données du Radar Technologique Laplank
|
||||
|
||||
|
||||
274
docs/app/guide-page-equipe.md
Normal file
274
docs/app/guide-page-equipe.md
Normal file
@@ -0,0 +1,274 @@
|
||||
# Guide de la Page Équipe & Technologies
|
||||
|
||||
## Introduction
|
||||
|
||||
La page **Équipe & Technologies** (`/team.html`) est une interface de visualisation interactive qui permet d'analyser les compétences de l'équipe, d'identifier les congestions (technologies avec peu de personnes) et de composer une équipe de genèse pour un MVP.
|
||||
|
||||
Cette page est accessible depuis le radar via le lien **"👥 Équipe"** dans le header de navigation.
|
||||
|
||||
## Accès
|
||||
|
||||
- **URL** : `/team.html`
|
||||
- **Lien de navigation** : Disponible dans le header du radar (bouton "👥 Équipe")
|
||||
- **Authentification** : Même protection que le radar (mot de passe `laplank-radar`)
|
||||
|
||||
## Fonctionnalités
|
||||
|
||||
La page propose trois visualisations complémentaires :
|
||||
|
||||
### 1. Graphe Réseau
|
||||
|
||||
**Objectif** : Visualiser les connexions entre technologies et membres de l'équipe.
|
||||
|
||||
**Fonctionnalités** :
|
||||
- **Nœuds technologies** :
|
||||
- Couleur selon le ring (Core=rouge, Strategic=orange, Support=bleu)
|
||||
- Taille proportionnelle au nombre de personnes maîtrisant la technologie
|
||||
- Label avec le nom de la technologie
|
||||
- **Nœuds membres** :
|
||||
- Couleur verte
|
||||
- Taille proportionnelle à la disponibilité
|
||||
- Label avec le nom du membre
|
||||
- **Liens** :
|
||||
- Connectent les technologies aux membres qui les maîtrisent
|
||||
- Épaisseur selon le niveau de compétence
|
||||
|
||||
**Utilisation** :
|
||||
- Zoom : Molette de la souris ou pincement sur mobile
|
||||
- Pan : Clic gauche + glisser
|
||||
- Tooltip : Survol d'un nœud pour voir les détails
|
||||
|
||||
**Cas d'usage** :
|
||||
- Identifier visuellement qui maîtrise quelles technologies
|
||||
- Repérer les technologies isolées (peu de connexions)
|
||||
- Visualiser la polyvalence des membres (nombre de connexions)
|
||||
|
||||
### 2. Matrice de Congestion
|
||||
|
||||
**Objectif** : Identifier les risques de congestion sur les technologies critiques.
|
||||
|
||||
**Fonctionnalités** :
|
||||
- Affiche uniquement les **technologies core** (critiques pour le business)
|
||||
- Filtre les membres avec **disponibilité >= 50%**
|
||||
- Visualisation en scatter plot avec :
|
||||
- Axe X : Membres de l'équipe
|
||||
- Axe Y : Technologies core
|
||||
- Points : Disponibilité du membre sur la technologie
|
||||
- Taille des points : Disponibilité en pourcentage
|
||||
|
||||
**Utilisation** :
|
||||
- Survol d'un point pour voir les détails (membre, technologie, disponibilité)
|
||||
- Zoom possible sur le graphique
|
||||
|
||||
**Cas d'usage** :
|
||||
- Identifier les technologies core avec peu de couverture
|
||||
- Repérer les membres disponibles pour les technologies critiques
|
||||
- Détecter les risques de congestion (1 seule personne sur une techno core)
|
||||
|
||||
### 3. Équipe de Genèse MVP
|
||||
|
||||
**Objectif** : Composer automatiquement une équipe minimale pour un MVP en 2 mois avec mobilisation quotidienne.
|
||||
|
||||
**Critères de sélection** :
|
||||
- Technologies : Uniquement `ring: core`
|
||||
- Membres : Disponibilité >= 50%
|
||||
- Priorisation : Membres couvrant le plus de technologies core
|
||||
|
||||
**Affichage** :
|
||||
- **Statistiques** :
|
||||
- Nombre de membres sélectionnés
|
||||
- Capacité totale (somme des disponibilités)
|
||||
- Disponibilité moyenne
|
||||
- Technologies couvertes / total core
|
||||
- **Liste des membres** :
|
||||
- Nom, rôle, niveau de séniorité
|
||||
- Disponibilité en pourcentage
|
||||
- Liste des technologies core maîtrisées
|
||||
- **Alertes** :
|
||||
- Technologies core non couvertes par l'équipe sélectionnée
|
||||
- Impact business et niveau de risque (skillGap)
|
||||
|
||||
**Cas d'usage** :
|
||||
- Composer une équipe pour un MVP rapide
|
||||
- Identifier les compétences manquantes
|
||||
- Estimer la capacité disponible pour le développement
|
||||
|
||||
## Données Sources
|
||||
|
||||
### Technologies
|
||||
|
||||
Les données des technologies sont extraites depuis :
|
||||
- **Dossier** : `radar-business/2025-01-15/`
|
||||
- **Format** : Fichiers Markdown avec métadonnées YAML
|
||||
- **Champs utilisés** :
|
||||
- `title` : Nom de la technologie
|
||||
- `ring` : Anneau (core, strategic, support, legacy)
|
||||
- `quadrant` : Quadrant business
|
||||
- `businessImpact` : Impact sur le business
|
||||
- `teamCoverage` : Nombre de personnes maîtrisant
|
||||
- `skillGap` : Risque de compétence manquante
|
||||
- Section "Compétences" : Liste des membres
|
||||
|
||||
### Membres de l'Équipe
|
||||
|
||||
Les données des membres sont extraites depuis :
|
||||
- **Dossier** : `docs/data/team/`
|
||||
- **Format** : Fichiers Markdown avec métadonnées YAML
|
||||
- **Champs utilisés** :
|
||||
- `name` : Identifiant du membre
|
||||
- `fullName` : Nom complet
|
||||
- `role` : Rôle dans l'équipe
|
||||
- `availability` : Disponibilité en pourcentage
|
||||
- `seniorityLevel` : Niveau de séniorité
|
||||
- `skills` : Liste des compétences techniques
|
||||
|
||||
## Génération des Données
|
||||
|
||||
Les visualisations utilisent un fichier JSON généré automatiquement : `public/team-visualization-data.json`
|
||||
|
||||
### Régénérer les Données
|
||||
|
||||
Si vous modifiez les profils d'équipe ou les technologies, régénérez les données :
|
||||
|
||||
```bash
|
||||
node scripts/generate-team-visualization-data.js
|
||||
```
|
||||
|
||||
**Ce que fait le script** :
|
||||
1. Charge toutes les technologies depuis `radar-business/2025-01-15/`
|
||||
2. Charge tous les membres depuis `docs/data/team/`
|
||||
3. Extrait les associations technologies ↔ membres
|
||||
4. Génère les données pour les 3 visualisations
|
||||
5. Écrit le fichier JSON dans `public/team-visualization-data.json`
|
||||
|
||||
**Structure des données générées** :
|
||||
- `network` : Nœuds et liens pour le graphe Cytoscape.js
|
||||
- `congestionMatrix` : Matrice pour les technologies core
|
||||
- `genesisTeam` : Équipe de genèse MVP avec statistiques
|
||||
- `technologies` : Liste complète des technologies
|
||||
- `members` : Liste complète des membres
|
||||
|
||||
### Intégration dans le Build
|
||||
|
||||
Pour automatiser la génération lors du build, vous pouvez ajouter dans `package.json` :
|
||||
|
||||
```json
|
||||
{
|
||||
"scripts": {
|
||||
"generate-team-data": "node scripts/generate-team-visualization-data.js",
|
||||
"build": "npm run generate-team-data && npm run build:data"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Technologies Utilisées
|
||||
|
||||
### Bibliothèques JavaScript
|
||||
|
||||
- **Cytoscape.js** (v3.26.0) : Graphe de réseau interactif
|
||||
- Extension : `cytoscape-cose-bilkent` pour le layout automatique
|
||||
- **ECharts** (v5.4.3) : Graphiques interactifs (matrice de congestion)
|
||||
|
||||
### Chargement
|
||||
|
||||
Les bibliothèques sont chargées via CDN dans la page HTML :
|
||||
- Pas besoin d'installation locale
|
||||
- Mise à jour possible en modifiant les URLs dans `public/team.html`
|
||||
|
||||
## Personnalisation
|
||||
|
||||
### Modifier le Seuil de Disponibilité
|
||||
|
||||
Pour l'équipe de genèse MVP, le seuil est fixé à **50%**. Pour le modifier :
|
||||
|
||||
1. Ouvrir `scripts/generate-team-visualization-data.js`
|
||||
2. Modifier la ligne dans `generateCongestionMatrix()` :
|
||||
```javascript
|
||||
const availableMembers = members.filter(m => m.availability >= 50);
|
||||
```
|
||||
3. Modifier la ligne dans `generateGenesisTeam()` :
|
||||
```javascript
|
||||
const availableMembers = members.filter(m => m.availability >= 50);
|
||||
```
|
||||
4. Régénérer les données
|
||||
|
||||
### Modifier les Couleurs du Graphe
|
||||
|
||||
Les couleurs sont définies dans `public/team.html` dans la fonction `initNetworkGraph()` :
|
||||
|
||||
```javascript
|
||||
const ringColor = {
|
||||
'core': '#ff4444',
|
||||
'strategic': '#ff8800',
|
||||
'support': '#4488ff',
|
||||
'legacy': '#888888'
|
||||
}[tech.ring] || '#999999';
|
||||
```
|
||||
|
||||
### Ajouter une Visualisation
|
||||
|
||||
Pour ajouter une nouvelle visualisation :
|
||||
|
||||
1. Ajouter un onglet dans le HTML
|
||||
2. Créer la fonction d'initialisation
|
||||
3. Ajouter les données nécessaires dans `generate-team-visualization-data.js`
|
||||
4. Appeler la fonction dans `initVisualizations()`
|
||||
|
||||
## Cas d'Usage Concrets
|
||||
|
||||
### Identifier une Congestion Critique
|
||||
|
||||
1. Ouvrir l'onglet **"Matrice Congestion"**
|
||||
2. Repérer les technologies core avec peu ou pas de points
|
||||
3. Vérifier dans l'onglet **"Graphe Réseau"** qui maîtrise cette technologie
|
||||
4. Si une seule personne : **Risque critique** (départ = blocage)
|
||||
|
||||
### Composer une Équipe pour un Projet
|
||||
|
||||
1. Ouvrir l'onglet **"Équipe Genèse MVP"**
|
||||
2. Vérifier les technologies couvertes
|
||||
3. Si des technologies sont non couvertes :
|
||||
- Former un membre existant
|
||||
- Recruter une compétence
|
||||
- Changer de technologie
|
||||
4. Estimer la capacité disponible (somme des disponibilités)
|
||||
|
||||
### Analyser la Polyvalence
|
||||
|
||||
1. Ouvrir l'onglet **"Graphe Réseau"**
|
||||
2. Repérer les membres avec beaucoup de connexions (polyvalents)
|
||||
3. Repérer les membres avec peu de connexions (spécialisés)
|
||||
4. Équilibrer l'équipe selon les besoins
|
||||
|
||||
## Limitations Actuelles
|
||||
|
||||
- **Seuil fixe** : Disponibilité >= 50% pour l'équipe de genèse (non configurable dans l'UI)
|
||||
- **Technologies core uniquement** : La matrice de congestion ne montre que les technologies `ring: core`
|
||||
- **Pas de filtres interactifs** : Impossible de filtrer par quadrant, niveau, etc. dans l'interface
|
||||
- **Données statiques** : Nécessite de régénérer le JSON après chaque modification
|
||||
|
||||
## Améliorations Futures Possibles
|
||||
|
||||
- Filtres interactifs (quadrant, ring, niveau de compétence)
|
||||
- Export PDF/PNG des visualisations
|
||||
- Historique des équipes de genèse
|
||||
- Calcul automatique de la charge de travail
|
||||
- Suggestions de formation basées sur les gaps
|
||||
- Intégration avec un système de planning (Gantt)
|
||||
|
||||
## Support
|
||||
|
||||
Pour toute question ou problème :
|
||||
- Consulter les logs du script de génération
|
||||
- Vérifier que les fichiers Markdown sont bien formatés
|
||||
- Vérifier que le fichier JSON est bien généré et accessible
|
||||
|
||||
## Fichiers Associés
|
||||
|
||||
- **Script de génération** : `scripts/generate-team-visualization-data.js`
|
||||
- **Page HTML** : `public/team.html`
|
||||
- **Données JSON** : `public/team-visualization-data.json`
|
||||
- **Profils équipe** : `docs/data/team/*.md`
|
||||
- **Technologies** : `radar-business/2025-01-15/*.md`
|
||||
- **Navigation** : `public/strategie-script.js` (fonction `addLinksToHeader()`)
|
||||
|
||||
Reference in New Issue
Block a user