AJR/TechradarDev
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

docs: Mise a jour documentation page equipe

Browse Source 
- guide-page-equipe.md: Architecture basee sur team-block-script.js
- architecture.md: Mise a jour structure et fonctionnement
- deploiement.md: Scripts Python pour Navigation et _document
- team-block-script.js: Utilise layout cose integre (pas cose-bilkent)
This commit is contained in:
syoul
2025-12-09 17:50:23 +01:00
parent 3553f1d839
commit 240988ed61
4 changed files with 286 additions and 213 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
docs/app/architecture.md
View File

@@ -16,14 +16,15 @@ TechradarDev/
│ ├── FORMAT-BLIP.md # Format des blips business │ ├── FORMAT-BLIP.md # Format des blips business
│ └── README.md # Documentation du radar business │ └── README.md # Documentation du radar business
├── public/ # Fichiers statiques publics ├── public/ # Fichiers statiques publics
│ ├── images/ # Images utilisées dans les descriptions │ ├── images/ # Images utilisees dans les descriptions
│ ├── logo.svg # Logo AJR │ ├── logo.svg # Logo AJR
│ ├── favicon.ico # Icône du site │ ├── favicon.ico # Icone du site
│ ├── robots.txt # Configuration pour les robots │ ├── robots.txt # Configuration pour les robots
│ ├── strategie-script.js # Script pour les pages de stratégie dynamiques │ ├── strategie-script.js # Script pour les pages de strategie dynamiques
│ ├── strategie-link.js # Script alternatif pour les liens stratégie │ ├── strategie-link.js # Script alternatif pour les liens strategie
│ ├── team.html # Page HTML statique pour la visualisation équipe │ ├── team-block-script.js # Script principal pour la page equipe (injection DOM)
│ └── team-visualization-data.json # Données JSON pour les visualisations │ ├── _team-content # Contenu HTML de reference pour la page equipe
│ └── team-visualization-data.json # Donnees JSON pour les visualisations
├── scripts/ # Scripts utilitaires ├── scripts/ # Scripts utilitaires
│ ├── serve-business.sh # Script pour servir le radar business en local │ ├── serve-business.sh # Script pour servir le radar business en local
│ ├── start-business.sh # Script de démarrage pour Docker │ ├── start-business.sh # Script de démarrage pour Docker
@@ -92,12 +93,14 @@ Le projet utilise le framework **aoe_technology_radar** qui est basé sur :
Le projet apporte plusieurs modifications au framework de base : Le projet apporte plusieurs modifications au framework de base :
#### 1. Page Équipe (`/team`) #### 1. Page Equipe (`/team`)
- **Fichier source** : `public/team.html` (HTML statique avec Cytoscape.js et ECharts) - **Script principal** : `public/team-block-script.js` (injection du contenu et visualisations)
- **Route Next.js** : `.techradar/src/pages/team.tsx` (générée par `Dockerfile.business`) - **Route Next.js** : `.techradar/src/pages/team.tsx` (page vide, le script remplace le contenu)
- **Intégration** : La page Next.js charge `team.html` via un iframe - **Chargement** : Le script est charge via `_document.tsx` avec `strategy="beforeInteractive"`
- **Données** : `public/team-visualization-data.json` généré par `scripts/generate-team-visualization-data.js` - **Bibliotheques** : Cytoscape.js et ECharts charges depuis CDN
- **Donnees** : `public/team-visualization-data.json` genere par `scripts/generate-team-visualization-data.js`
- **Layout** : Utilise le layout `cose` integre a Cytoscape (pas de plugin externe)
#### 2. Navigation modifiée #### 2. Navigation modifiée

48
docs/app/deploiement.md
View File

@@ -110,36 +110,48 @@ Le `Dockerfile.business` effectue les opérations suivantes :
- Copie des blips business : `radar-business/2025-01-15/*` → `.techradar/data/radar/2025-01-15/` - Copie des blips business : `radar-business/2025-01-15/*` → `.techradar/data/radar/2025-01-15/`
- Copie de la config : `radar-business/config-business.json` → `.techradar/data/config.json` - Copie de la config : `radar-business/config-business.json` → `.techradar/data/config.json`
4. **Modifications personnalisées** : 4. **Modifications personnalisees** :
- Création de `.techradar/src/pages/team.tsx` (page Next.js pour `/team`) - Creation de `.techradar/src/pages/team.tsx` (page Next.js vide pour `/team`)
- Modification de `.techradar/src/pages/_document.tsx` via script Python :
- Ajout du chargement de `team-block-script.js` avec `strategy="beforeInteractive"`
- Modification de `.techradar/src/components/Navigation/Navigation.tsx` via script Python : - Modification de `.techradar/src/components/Navigation/Navigation.tsx` via script Python :
- Suppression de tous les liens Équipe existants (évite les doublons) - Suppression de tous les liens Equipe existants (evite les doublons)
- Ajout d'un seul lien "👥 Équipe" après le lien "Vue d'ensemble" - Ajout d'un seul lien "Equipe" apres le lien "Vue d'ensemble"
5. **Build Next.js** : 5. **Build Next.js** :
- `npm run build:data` : Génère les données du radar - `npm run build:data` : Génère les données du radar
- `npm run build` : Build de l'application Next.js - `npm run build` : Build de l'application Next.js
6. **Copie des fichiers publics** : 6. **Copie des fichiers publics** :
- Copie de `public/team.html` et `public/team-visualization-data.json` vers `.techradar/public/` - Copie de `public/team-block-script.js` et `public/team-visualization-data.json` vers `.techradar/public/`
- Les fichiers sont ensuite copiés dans `out/` après le build - Les fichiers sont ensuite copies dans `out/` apres le build
7. **Démarrage** : 7. **Demarrage** :
- Exécution de `scripts/start-business.sh` qui : - Execution de `scripts/start-business.sh` qui :
- Vérifie que `team.html` et `team-visualization-data.json` sont dans `out/` - Verifie que `team-visualization-data.json` est dans `out/`
- Les copie depuis `public/` si nécessaire - Le copie depuis `public/` si necessaire
- Démarre le serveur statique `serve` sur le port 3000 - Demarre le serveur statique `serve` sur le port 3000 (sans `--single`)
### Script Python pour Navigation.tsx ### Scripts Python pour les modifications
Le script `/tmp/add_team_link.py` dans le Dockerfile : #### Script pour Navigation.tsx
1. **Vérifie l'existence du fichier** : `.techradar/src/components/Navigation/Navigation.tsx` Le script `docker/add_team_link.py` :
2. **Supprime tous les liens Équipe existants** : Évite les doublons même si le script s'exécute plusieurs fois
3. **Ajoute un seul lien Équipe** : Après le lien "Vue d'ensemble"
4. **Vérifie le résultat** : S'assure qu'il n'y a qu'un seul lien après l'opération
Le script shell `/tmp/add_team_link.sh` orchestre l'exécution et vérifie le résultat. 1. **Verifie l'existence du fichier** : `.techradar/src/components/Navigation/Navigation.tsx`
2. **Supprime tous les liens Equipe existants** : Evite les doublons meme si le script s'execute plusieurs fois
3. **Ajoute un seul lien Equipe** : Apres le lien "Vue d'ensemble"
4. **Verifie le resultat** : S'assure qu'il n'y a qu'un seul lien apres l'operation
Le script shell `docker/add_team_link.sh` orchestre l'execution et verifie le resultat.
#### Script pour _document.tsx
Le script `docker/patch_document.py` :
1. **Ajoute l'import de Script** : Si pas deja present dans le fichier
2. **Modifie le composant Head** : Ajoute le chargement de `team-block-script.js`
3. **Strategie beforeInteractive** : Le script est charge avant le rendu Next.js
### Authentification Git pour Portainer ### Authentification Git pour Portainer

414
docs/app/guide-page-equipe.md
View File

@@ -1,141 +1,146 @@
# Guide de la Page Équipe & Technologies # Guide de la Page Equipe & Technologies
## Introduction ## Introduction
La page **Équipe & Technologies** (`/team`) 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. La page **Equipe & Technologies** (`/team`) est une interface de visualisation interactive qui permet d'analyser les competences de l'equipe, d'identifier les congestions (technologies avec peu de personnes) et de composer une equipe de genese pour un MVP.
Cette page est accessible depuis le radar via le lien **"👥 Équipe"** dans le header de navigation. Cette page est accessible depuis le radar via le lien **"Equipe"** dans le header de navigation.
## Architecture Technique ## Architecture Technique
La page utilise une architecture pure React/Next.js : La page utilise une architecture basee sur l'injection de contenu cote client :
- **Page Next.js** : `/team` (vraie page React avec hooks et états)
- **Import dynamique** : Cytoscape.js et ECharts chargés côté client seulement (évite erreurs SSR)
- **État React** : Gestion des onglets, données et erreurs via useState/useEffect
- **Refs React** : Containers pour les graphiques gérés proprement
- **Navigation** : Lien intégré directement dans le composant React `Navigation.tsx` (modifié par script Python)
Cette approche moderne utilise pleinement les capacités de React tout en évitant les problèmes SSR avec les bibliothèques de visualisation. - **Script principal** : `public/team-block-script.js` charge par Next.js via `_document.tsx`
- **Remplacement DOM** : Le script detecte la route `/team` et remplace le contenu du body
- **Chargement dynamique** : Cytoscape.js et ECharts sont charges depuis CDN
- **Donnees JSON** : `public/team-visualization-data.json` genere par script Node.js
- **Navigation** : Lien integre dans `Navigation.tsx` (modifie par script Python lors du build)
### Fichiers impliqués Cette approche evite les conflits SSR tout en permettant des visualisations interactives riches.
- **Page Next.js** : `.techradar/src/pages/team.tsx` (vraie page React créée par `Dockerfile.business`) ### Fichiers impliques
- **Données JSON** : `public/team-visualization-data.json` (généré par `scripts/generate-team-visualization-data.js`)
- **Navigation** : `.techradar/src/components/Navigation/Navigation.tsx` (modifiée par script Python)
- **Bibliothèques** : `cytoscape`, `cytoscape-cose-bilkent`, `echarts-for-react` (installées automatiquement)
## Accès - **Script principal** : `public/team-block-script.js` (injection du contenu et visualisations)
- **Page Next.js** : `.techradar/src/pages/team.tsx` (page vide, le script remplace le contenu)
- **Donnees JSON** : `public/team-visualization-data.json` (genere par `scripts/generate-team-visualization-data.js`)
- **Navigation** : `.techradar/src/components/Navigation/Navigation.tsx` (modifiee par script Python)
- **Document modifie** : `.techradar/src/pages/_document.tsx` (modifie pour charger le script)
- **URL** : `/team` (route Next.js avec vraie page React) ## Acces
- **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 - **URL** : `/team` ou `/team/`
- **Lien de navigation** : Disponible dans le header du radar (bouton "Equipe")
- **Authentification** : Meme protection que le radar (mot de passe `laplank-radar`)
La page propose trois visualisations complémentaires : ## Fonctionnalites
### 1. Graphe Réseau La page propose trois visualisations complementaires accessibles via des onglets :
**Objectif** : Visualiser les connexions entre technologies et membres de l'équipe. ### 1. Graphe Reseau
**Fonctionnalités** : **Objectif** : Visualiser les connexions entre technologies et membres de l'equipe.
- **Nœuds technologies** :
**Fonctionnalites** :
- **Noeuds technologies** :
- Couleur selon le ring (Adopt=vert, Trial=bleu, Assess=orange, Hold=rouge) - Couleur selon le ring (Adopt=vert, Trial=bleu, Assess=orange, Hold=rouge)
- Taille proportionnelle au nombre de personnes maîtrisant la technologie - Taille proportionnelle au nombre de personnes maitrisant la technologie
- Label avec le nom de la technologie - Label avec le nom de la technologie
- **Nœuds membres** : - **Noeuds membres** :
- Couleur verte - Couleur verte
- Taille proportionnelle à la disponibilité - Taille proportionnelle a la disponibilite
- Label avec le nom du membre - Label avec le nom du membre
- **Liens** : - **Liens** :
- Connectent les technologies aux membres qui les maîtrisent - Connectent les technologies aux membres qui les maitrisent
- Épaisseur selon le niveau de compétence - Epaisseur selon le niveau de competence
**Utilisation** : **Utilisation** :
- Zoom : Molette de la souris ou pincement sur mobile - Zoom : Molette de la souris ou pincement sur mobile
- Pan : Clic gauche + glisser - Pan : Clic gauche + glisser
- Tooltip : Survol d'un nœud pour voir les détails - Animation : Le graphe s'organise automatiquement au chargement
**Technologie** : Cytoscape.js avec le layout CoSE-Bilkent **Technologie** : Cytoscape.js avec le layout CoSE (integre)
### 2. Matrice de Congestion ### 2. Matrice de Congestion
**Objectif** : Identifier les technologies avec faible couverture d'équipe (congestions). **Objectif** : Identifier les technologies avec faible couverture d'equipe (congestions).
**Fonctionnalités** : **Fonctionnalites** :
- **Axe X** : Membres de l'équipe - **Axe X** : Membres de l'equipe
- **Axe Y** : Technologies (uniquement les technologies "adopt" - anciennement "core") - **Axe Y** : Technologies (uniquement les technologies "adopt")
- **Couleurs** : - **Points verts** : Indiquent qu'un membre maitrise une technologie
- Vert : Technologie maîtrisée par le membre - **Taille des points** : Proportionnelle a la disponibilite du membre
- Rouge : Technologie non maîtrisée
- Intensité selon le niveau de compétence
**Utilisation** : **Utilisation** :
- Cliquer sur une cellule pour voir les détails - Survoler un point pour voir les details (membre, technologie, disponibilite)
- Filtrer par technologie ou membre - Identifier visuellement les technologies avec peu de personnes (peu de points sur une ligne)
- Identifier visuellement les technologies avec peu de personnes
**Note** : Seules les technologies avec `ring: adopt` sont affichées dans la matrice, car ce sont les technologies fondamentales en production (anciennement classées comme "core"). **Note** : Seules les technologies avec `ring: adopt` sont affichees dans la matrice, car ce sont les technologies fondamentales en production.
**Technologie** : ECharts (heatmap) **Technologie** : ECharts (scatter plot)
### 3. Équipe de Genèse MVP ### 3. Equipe de Genese MVP
**Objectif** : Composer automatiquement une équipe minimale pour un MVP en 2 mois avec mobilisation quotidienne. **Objectif** : Composer automatiquement une equipe minimale pour un MVP en 2 mois avec mobilisation quotidienne.
**Fonctionnalités** : **Fonctionnalites** :
- **Sélection automatique** : Algorithme qui sélectionne les membres selon : - **Selection automatique** : Algorithme qui selectionne les membres selon :
- Disponibilité >= 50% - Disponibilite >= 50%
- Couverture maximale des technologies critiques (technologies avec `ring: adopt` - anciennement "core") - Couverture maximale des technologies critiques (technologies avec `ring: adopt`)
- Équilibre des compétences - Equilibre des competences
- **Statistiques** : - **Statistiques** :
- Nombre de membres sélectionnés - Nombre de membres selectionnes
- Pourcentage de technologies couvertes - Capacite totale (somme des disponibilites)
- Technologies critiques non couvertes - Disponibilite moyenne
- **Recommandations** : - Technologies couvertes / total
- Technologies à former - **Cartes membres** :
- Compétences manquantes - Nom et role
- Risques identifiés - Niveau de seniorite
- Disponibilite
- Technologies maitrisees
- **Alertes** :
- Technologies critiques non couvertes (en rouge)
- Impact business et skill gap pour chaque technologie manquante
**Technologie** : Algorithme JavaScript avec affichage HTML/CSS **Technologie** : HTML/CSS genere dynamiquement par JavaScript
## Données ## Donnees
### Sources de données ### Sources de donnees
1. **Profils équipe** : `docs/data/team/*.md` (fichiers Markdown avec métadonnées YAML) 1. **Profils equipe** : `docs/data/team/*.md` (fichiers Markdown avec metadonnees YAML)
2. **Technologies** : `radar-business/2025-01-15/*.md` (blips avec métadonnées) 2. **Technologies** : `radar-business/2025-01-15/*.md` (blips avec metadonnees)
### Génération des données ### Generation des donnees
Le script `scripts/generate-team-visualization-data.js` : Le script `scripts/generate-team-visualization-data.js` :
1. **Lit les profils équipe** depuis `docs/data/team/*.md` 1. **Lit les profils equipe** depuis `docs/data/team/*.md`
2. **Lit les technologies** depuis `radar-business/2025-01-15/*.md` 2. **Lit les technologies** depuis `radar-business/2025-01-15/*.md`
3. **Génère** `public/team-visualization-data.json` avec : 3. **Genere** `public/team-visualization-data.json` avec :
- `network` : Données réseau (nodes/edges) pour Cytoscape.js - `network` : Donnees reseau (nodes/edges) pour Cytoscape.js
- `congestionMatrix` : Matrice de congestion pour ECharts - `congestionMatrix` : Matrice de congestion pour ECharts
- `genesisTeam` : Équipe de genèse MVP avec statistiques - `genesisTeam` : Equipe de genese MVP avec statistiques
- `technologies` : Liste des technologies avec métadonnées - `technologies` : Liste des technologies avec metadonnees
- `members` : Liste des membres avec compétences - `members` : Liste des membres avec competences
- `generatedAt` : Date de generation
### Exécuter la génération ### Executer la generation
```bash ```bash
node scripts/generate-team-visualization-data.js node scripts/generate-team-visualization-data.js
``` ```
**Important** : Régénérer les données après chaque modification des profils équipe ou des technologies. **Important** : Regenerer les donnees apres chaque modification des profils equipe ou des technologies.
## Structure des profils équipe ## Structure des profils equipe
Les profils sont stockés dans `docs/data/team/*.md` avec le format suivant : Les profils sont stockes dans `docs/data/team/*.md` avec le format suivant :
```markdown ```markdown
--- ---
name: "pseudo" name: "pseudo"
fullName: "Nom complet" fullName: "Nom complet"
role: "Rôle" role: "Role"
availability: 50 availability: 50
seniorityLevel: expert seniorityLevel: expert
yearsExperience: 8 yearsExperience: 8
@@ -152,192 +157,247 @@ skills:
lastUsed: "2024-11" lastUsed: "2024-11"
softSkills: softSkills:
- "Autonomie" - "Autonomie"
- "Pédagogie" - "Pedagogie"
projects: projects:
- "Projet1" - "Projet1"
- "Projet2" - "Projet2"
--- ---
Description du membre de l'équipe. Description du membre de l'equipe.
``` ```
### Métadonnées ### Metadonnees
- **name** : Pseudo unique (utilisé comme identifiant) - **name** : Pseudo unique (utilise comme identifiant)
- **fullName** : Nom complet - **fullName** : Nom complet
- **role** : Rôle dans l'équipe - **role** : Role dans l'equipe
- **availability** : Disponibilité en pourcentage (0-100) - **availability** : Disponibilite en pourcentage (0-100)
- **seniorityLevel** : Niveau de séniorité (junior, intermediate, senior, expert) - **seniorityLevel** : Niveau de seniorite (junior, intermediate, senior, expert)
- **yearsExperience** : Années d'expérience totales - **yearsExperience** : Annees d'experience totales
- **joinDate** : Date d'arrivée (format YYYY-MM) - **joinDate** : Date d'arrivee (format YYYY-MM)
- **interests** : Centres d'intérêt - **interests** : Centres d'interet
- **skills** : Liste des compétences techniques avec niveau, années et dernière utilisation - **skills** : Liste des competences techniques avec niveau, annees et derniere utilisation
- **softSkills** : Compétences comportementales - **softSkills** : Competences comportementales
- **projects** : Projets sur lesquels le membre a travaillé - **projects** : Projets sur lesquels le membre a travaille
## Processus de build ## Processus de build
### Dans le Dockerfile ### Dans le Dockerfile
1. **Installation dépendances** : Installe `cytoscape`, `cytoscape-cose-bilkent`, `echarts-for-react` 1. **Copie des fichiers publics** : `public/team-block-script.js` et `public/team-visualization-data.json` vers `.techradar/public/`
2. **Création de la page Next.js** : Génère `.techradar/src/pages/team.tsx` (vraie page React) 2. **Creation de la page Next.js** : Genere `.techradar/src/pages/team.tsx` (page vide)
3. **Modification de Navigation** : Ajoute le lien "👥 Équipe" dans `.techradar/src/components/Navigation/Navigation.tsx` via script Python 3. **Modification de _document.tsx** : Ajoute le chargement de `team-block-script.js` avec `strategy="beforeInteractive"`
4. **Copie des données** : Copie `public/team-visualization-data.json` vers `.techradar/public/` 4. **Modification de Navigation** : Ajoute le lien "Equipe" dans `Navigation.tsx` via script Python
5. **Build Next.js** : Génère les fichiers statiques dans `out/` avec la page React complète 5. **Build Next.js** : Genere les fichiers statiques dans `out/`
6. **Copie finale** : S'assure que les fichiers team sont dans `out/`
### Script Python pour Navigation.tsx ### Script Python pour Navigation.tsx
Le script `/tmp/add_team_link.py` dans le Dockerfile : Le script `docker/add_team_link.py` :
1. **Supprime tous les liens Équipe existants** : Évite les doublons 1. **Supprime tous les liens Equipe existants** : Evite les doublons
2. **Ajoute un seul lien Équipe** : Après le lien "Vue d'ensemble" 2. **Ajoute un seul lien Equipe** : Apres le lien "Vue d'ensemble"
3. **Vérifie le résultat** : S'assure qu'il n'y a qu'un seul lien 3. **Verifie le resultat** : S'assure qu'il n'y a qu'un seul lien
**Important** : Les scripts JavaScript (`strategie-script.js`, `strategie-link.js`) qui ajoutaient des liens dans le header ont été désactivés pour éviter les doublons. ### Script Python pour _document.tsx
## Technologies utilisées Le script `docker/patch_document.py` :
### Bibliothèques JavaScript 1. **Ajoute l'import de Script** : Si pas deja present
2. **Ajoute le chargement du script** : `team-block-script.js` avec `strategy="beforeInteractive"`
- **Cytoscape.js** : Graphique réseau interactif (import dynamique) ## Technologies utilisees
- **Cytoscape CoSE-Bilkent** : Layout algorithm pour le graphique (import dynamique)
- **ECharts pour React** : Matrice de congestion (composant React)
- **React Hooks** : Gestion d'état (useState, useEffect, useRef)
- **Next.js dynamic import** : Chargement côté client seulement (évite erreurs SSR)
### Chargement des données ### Bibliotheques JavaScript (chargees depuis CDN)
Les données sont chargées depuis `/team-visualization-data.json` via `fetch()` au chargement de la page. - **Cytoscape.js** : Graphique reseau interactif (v3.26.0)
- **ECharts** : Matrice de congestion scatter plot (v5.4.3)
### Layout du graphe
Le graphe reseau utilise le layout **CoSE** (Compound Spring Embedder) integre a Cytoscape.js. Ce layout :
- Organise les noeuds avec un algorithme force-directed
- Prend en compte les labels pour eviter les chevauchements
- S'anime lors du chargement initial
### Chargement des donnees
Les donnees sont chargees depuis `/team-visualization-data.json` via `fetch()` au chargement de la page.
## Fonctionnement du script
Le script `team-block-script.js` fonctionne ainsi :
1. **Detection de la route** : Verifie si le chemin commence par `/team`
2. **Remplacement du DOM** : Injecte le HTML de la page (header, onglets, containers)
3. **Injection du CSS** : Ajoute les styles pour la page
4. **Chargement des bibliotheques** : Charge Cytoscape et ECharts depuis CDN
5. **Chargement des donnees** : Fetch `/team-visualization-data.json`
6. **Initialisation des visualisations** : Cree le graphe, la matrice et l'equipe de genese
7. **Gestion des onglets** : Permet de basculer entre les trois visualisations
## Utilisation ## Utilisation
### Visualiser les compétences ### Visualiser les competences
1. Ouvrir l'onglet **"Graphe Réseau"** 1. Ouvrir l'onglet **"Graphe Reseau"**
2. Explorer les connexions entre technologies et membres 2. Explorer les connexions entre technologies et membres
3. Identifier les technologies avec beaucoup de personnes (gros nœuds) 3. Identifier les technologies avec beaucoup de personnes (gros noeuds)
4. Identifier les technologies avec peu de personnes (petits nœuds = congestions) 4. Identifier les technologies avec peu de personnes (petits noeuds = congestions)
### Identifier les congestions ### Identifier les congestions
1. Ouvrir l'onglet **"Matrice Congestion"** 1. Ouvrir l'onglet **"Matrice Congestion"**
2. Repérer les colonnes (technologies) avec beaucoup de cases rouges 2. Reperer les lignes (technologies) avec peu de points verts
3. Ces technologies ont une faible couverture d'équipe 3. Ces technologies ont une faible couverture d'equipe
4. Actions recommandées : 4. Actions recommandees :
- Former l'équipe - Former l'equipe
- Recruter - Recruter
- Documenter - Documenter
### Composer une Équipe pour un Projet ### Composer une Equipe pour un Projet
1. Ouvrir l'onglet **"Équipe Genèse MVP"** 1. Ouvrir l'onglet **"Equipe Genese MVP"**
2. L'équipe est automatiquement sélectionnée selon : 2. L'equipe est automatiquement selectionnee selon :
- Disponibilité >= 50% - Disponibilite >= 50%
- Couverture maximale des technologies - Couverture maximale des technologies
3. Consulter les statistiques : 3. Consulter les statistiques et les cartes membres
- Technologies couvertes 4. Verifier les technologies non couvertes (en rouge)
- Technologies manquantes
- Recommandations
## Personnalisation ## Personnalisation
### Modifier le seuil de disponibilité ### Modifier le seuil de disponibilite
Pour l'équipe de genèse MVP, le seuil est fixé à **50%**. Pour le modifier : Pour l'equipe de genese MVP, le seuil est fixe a **50%**. Pour le modifier :
1. Ouvrir `scripts/generate-team-visualization-data.js` 1. Ouvrir `scripts/generate-team-visualization-data.js`
2. Modifier le filtre `m.availability >= 50` dans les fonctions `generateCongestionMatrix()` et `generateGenesisTeam()` 2. Modifier le filtre `m.availability >= 50` dans les fonctions `generateCongestionMatrix()` et `generateGenesisTeam()`
3. Régénérer les données : `node scripts/generate-team-visualization-data.js` 3. Regenerer les donnees : `node scripts/generate-team-visualization-data.js`
**Note** : Les technologies critiques utilisées pour la sélection sont celles avec `ring: adopt` (anciennement "core"). Pour modifier ce critère, changer le filtre `t.ring === 'adopt'` dans `generateGenesisTeam()`. **Note** : Les technologies critiques utilisees pour la selection sont celles avec `ring: adopt`. Pour modifier ce critere, changer le filtre `t.ring === 'adopt'` dans `generateGenesisTeam()`.
### Ajouter de nouvelles visualisations ### Modifier le layout du graphe
1. Modifier `.techradar/src/pages/team.tsx` (généré par le Dockerfile) Le layout est configure dans `public/team-block-script.js` dans la fonction `initNetwork()` :
2. Ajouter un nouvel état dans `useState` pour l'onglet
3. Ajouter un bouton dans la section des onglets ```javascript
4. Implémenter la logique React pour charger et afficher les données layout: {
5. Utiliser des refs React pour les containers des nouvelles visualisations name: 'cose',
nodeDimensionsIncludeLabels: true,
idealEdgeLength: 100,
nodeRepulsion: 4500,
gravity: 0.25,
numIter: 1000,
animate: true,
animationDuration: 800
}
```
Parametres disponibles :
- `nodeRepulsion` : Force de repulsion entre noeuds (plus eleve = plus espaces)
- `gravity` : Force de gravite vers le centre
- `numIter` : Nombre d'iterations de l'algorithme
- `animationDuration` : Duree de l'animation en ms
## Maintenance ## Maintenance
### Mettre à jour les profils équipe ### Mettre a jour les profils equipe
1. Modifier les fichiers dans `docs/data/team/*.md` 1. Modifier les fichiers dans `docs/data/team/*.md`
2. Régénérer les données : `node scripts/generate-team-visualization-data.js` 2. Regenerer les donnees : `node scripts/generate-team-visualization-data.js`
3. Commiter les deux fichiers (profils + données JSON) 3. Commiter les deux fichiers (profils + donnees JSON)
4. Rebuild Docker pour deployer
### Ajouter un nouveau membre ### Ajouter un nouveau membre
1. Créer un fichier `docs/data/team/pseudo.md` 1. Creer un fichier `docs/data/team/pseudo.md`
2. Remplir toutes les métadonnées 2. Remplir toutes les metadonnees (voir format ci-dessus)
3. Régénérer les données 3. Regenerer les donnees
4. Vérifier que le membre apparaît dans les visualisations 4. Verifier que le membre apparait dans les visualisations
### Mettre à jour les compétences ### Mettre a jour les competences
1. Modifier la section `skills` dans le profil équipe 1. Modifier la section `skills` dans le profil equipe
2. Régénérer les données 2. Regenerer les donnees
3. Vérifier que les connexions sont mises à jour dans le graphe 3. Verifier que les connexions sont mises a jour dans le graphe
## Troubleshooting ## Troubleshooting
### Le lien "👥 Équipe" n'apparaît pas dans le header ### Le lien "Equipe" n'apparait pas dans le header
**Causes possibles** : **Causes possibles** :
- Le script Python n'a pas été exécuté - Le script Python n'a pas ete execute
- Le fichier Navigation.tsx n'a pas été trouvé - Le fichier Navigation.tsx n'a pas ete trouve
- Erreur dans le script Python - Erreur dans le script Python
**Solutions** : **Solutions** :
1. Vérifier les logs Docker lors du build 1. Verifier les logs Docker lors du build
2. Vérifier que le fichier `.techradar/src/components/Navigation/Navigation.tsx` existe 2. Verifier que le fichier `.techradar/src/components/Navigation/Navigation.tsx` existe
3. Rebuild avec `--no-cache` pour forcer l'exécution du script 3. Rebuild avec `--no-cache` pour forcer l'execution du script
### La page `/team` retourne 404 ### La page `/team` affiche le radar au lieu des visualisations
**Causes possibles** : **Causes possibles** :
- Le fichier `team.html` n'est pas dans `out/` - Le script `team-block-script.js` n'est pas charge
- La page Next.js `team.tsx` n'a pas été créée - Le script n'est pas modifie dans `_document.tsx`
**Solutions** : **Solutions** :
1. Vérifier que `public/team.html` existe 1. Verifier la console du navigateur (F12) pour les erreurs
2. Vérifier que le Dockerfile a bien créé `.techradar/src/pages/team.tsx` 2. Verifier que le script `patch_document.py` a ete execute lors du build
3. Vérifier que `team.html` a été copié dans `out/` 3. Rebuild avec `--no-cache`
### Les visualisations sont vides ### Les visualisations sont vides ou affichent une erreur
**Causes possibles** : **Causes possibles** :
- Le fichier `team-visualization-data.json` n'a pas été généré - Le fichier `team-visualization-data.json` n'a pas ete genere
- Le fichier n'est pas accessible depuis `/team.html` - Le fichier n'est pas accessible depuis le navigateur
- Erreur dans les donnees
**Solutions** : **Solutions** :
1. Générer les données : `node scripts/generate-team-visualization-data.js` 1. Generer les donnees : `node scripts/generate-team-visualization-data.js`
2. Vérifier que le fichier existe dans `public/team-visualization-data.json` 2. Verifier que le fichier existe dans `public/team-visualization-data.json`
3. Vérifier que le fichier a été copié dans `out/` 3. Verifier la console du navigateur pour les erreurs JavaScript
4. Vérifier la console du navigateur pour les erreurs JavaScript 4. Tester l'acces direct : `http://localhost:3006/team-visualization-data.json`
### Les données ne sont pas à jour ### Le graphe ne s'affiche pas
**Solution** : Régénérer les données après chaque modification : **Causes possibles** :
- Cytoscape.js n'a pas pu etre charge depuis CDN
- Erreur dans la configuration du layout
**Solutions** :
1. Verifier la connexion internet (CDN)
2. Verifier la console pour les erreurs de chargement
3. Verifier que le layout `cose` est bien utilise (pas `cose-bilkent`)
### Les donnees ne sont pas a jour
**Solution** : Regenerer les donnees apres chaque modification :
```bash ```bash
node scripts/generate-team-visualization-data.js node scripts/generate-team-visualization-data.js
``` ```
## Fichiers associés Puis rebuild Docker :
```bash
docker compose -f docker-compose.business.yml build --no-cache
docker compose -f docker-compose.business.yml up -d
```
- **Page React** : `.techradar/src/pages/team.tsx` (vraie page React avec hooks et états) ## Fichiers associes
- **Données JSON** : `public/team-visualization-data.json` (généré)
- **Script de génération** : `scripts/generate-team-visualization-data.js` - **Script principal** : `public/team-block-script.js` (injection et visualisations)
- **Profils équipe** : `docs/data/team/*.md` (fichiers Markdown avec métadonnées YAML) - **Page Next.js** : `docker/team-page.tsx` (page vide copiee vers `.techradar/src/pages/team.tsx`)
- **Technologies** : `radar-business/2025-01-15/*.md` (blips avec métadonnées) - **Donnees JSON** : `public/team-visualization-data.json` (genere)
- **Navigation modifiée** : `.techradar/src/components/Navigation/Navigation.tsx` (modifiée par script Python) - **Script de generation** : `scripts/generate-team-visualization-data.js`
- **Bibliothèques** : `cytoscape`, `cytoscape-cose-bilkent`, `echarts-for-react` (installées automatiquement) - **Profils equipe** : `docs/data/team/*.md` (fichiers Markdown avec metadonnees YAML)
- **Technologies** : `radar-business/2025-01-15/*.md` (blips avec metadonnees)
- **Script Navigation** : `docker/add_team_link.py` (ajoute le lien dans Navigation.tsx)
- **Script Document** : `docker/patch_document.py` (ajoute le chargement du script)
## Ressources ## Ressources
- [Guide de développement](./developpement.md) - [Guide de developpement](./developpement.md)
- [Guide de déploiement](./deploiement.md) - [Guide de deploiement](./deploiement.md)
- [Guide de dépannage](./troubleshooting.md) - [Guide de depannage](./troubleshooting.md)
- Documentation Cytoscape.js : https://js.cytoscape.org/ - Documentation Cytoscape.js : https://js.cytoscape.org/
- Documentation ECharts : https://echarts.apache.org/ - Documentation ECharts : https://echarts.apache.org/

12
public/team-block-script.js
View File

@@ -129,8 +129,8 @@
try { try {
await loadScript('https://cdn.jsdelivr.net/npm/cytoscape@3.26.0/dist/cytoscape.min.js'); await loadScript('https://cdn.jsdelivr.net/npm/cytoscape@3.26.0/dist/cytoscape.min.js');
console.log('EQUIPE: Cytoscape charge'); console.log('EQUIPE: Cytoscape charge');
await loadScript('https://cdn.jsdelivr.net/npm/cytoscape-cose-bilkent@4.1.0/cytoscape-cose-bilkent.min.js'); // Utilisation du layout cose integre (pas de plugin externe necessaire)
console.log('EQUIPE: Cytoscape-cose-bilkent charge');
await loadScript('https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js'); await loadScript('https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js');
console.log('EQUIPE: ECharts charge'); console.log('EQUIPE: ECharts charge');
@@ -204,16 +204,14 @@
} }
], ],
layout: { layout: {
name: 'cose-bilkent', name: 'cose',
nodeDimensionsIncludeLabels: true, nodeDimensionsIncludeLabels: true,
idealEdgeLength: 100, idealEdgeLength: 100,
nodeRepulsion: 4500, nodeRepulsion: 4500,
nestingFactor: 0.1,
gravity: 0.25, gravity: 0.25,
numIter: 2500, numIter: 1000,
tile: true,
animate: true, animate: true,
animationDuration: 1000 animationDuration: 800
} }
}); });
console.log('EQUIPE: Graphe reseau initialise'); console.log('EQUIPE: Graphe reseau initialise');