From 2dd08c0d46bceff4a783efa902601fa78951f4b5 Mon Sep 17 00:00:00 2001 From: syoul Date: Tue, 9 Dec 2025 15:00:54 +0100 Subject: [PATCH] =?UTF-8?q?fix:=20simplifier=20team-page.tsx=20pour=20?= =?UTF-8?q?=C3=A9viter=20erreurs=20modules?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Page team.tsx redirige maintenant vers team.html - Évite les imports cytoscape/echarts qui causent MODULE_NOT_FOUND - team.html contient les vraies visualisations avec chargement CDN Corrige l'erreur npm run build dans Docker --- docker/team-page.tsx | 554 +------------------------------------------ 1 file changed, 9 insertions(+), 545 deletions(-) diff --git a/docker/team-page.tsx b/docker/team-page.tsx index 86580ce..1058ce9 100644 --- a/docker/team-page.tsx +++ b/docker/team-page.tsx @@ -1,347 +1,18 @@ // @ts-nocheck -import { useEffect, useState, useRef } from 'react'; -import dynamic from 'next/dynamic'; +import { useEffect, useState } from 'react'; export default function TeamPage() { - const [activeTab, setActiveTab] = useState('network'); - const [data, setData] = useState(null); - const [loading, setLoading] = useState(true); - const [error, setError] = useState(null); - const networkRef = useRef(null); - const matrixRef = useRef(null); + const [mounted, setMounted] = useState(false); useEffect(() => { - // Charger les données équipe - loadTeamData(); + setMounted(true); + // Rediriger vers team.html qui contient les vraies visualisations + if (typeof window !== 'undefined') { + window.location.href = '/team.html'; + } }, []); - useEffect(() => { - // Initialiser les graphiques quand les données sont chargées et l'onglet actif change - if (data && !loading) { - if (activeTab === 'network') { - initNetworkGraph(); - } else if (activeTab === 'congestion') { - initCongestionMatrix(); - } - } - }, [data, loading, activeTab]); - - const loadTeamData = async () => { - try { - console.log('🔄 Chargement des données équipe...'); - const response = await fetch('/team-visualization-data.json'); - if (!response.ok) { - throw new Error(`HTTP ${response.status}: ${response.statusText}`); - } - const jsonData = await response.json(); - console.log('✅ Données chargées:', Object.keys(jsonData)); - setData(jsonData); - } catch (err) { - console.error('❌ Erreur chargement données:', err); - setError(err.message); - } finally { - setLoading(false); - } - }; - - const initNetworkGraph = () => { - if (!data?.network || !networkRef.current) return; - - console.log('📊 Initialisation graphe réseau...'); - - // Import dynamique pour éviter les erreurs SSR - import('cytoscape').then((cytoscape) => { - import('cytoscape-cose-bilkent').then(() => { - const cy = cytoscape.default({ - container: networkRef.current, - elements: data.network, - style: [ - { - selector: 'node[type="technology"]', - style: { - 'background-color': 'data(color)', - 'label': 'data(label)', - 'width': function (ele) { - const coverage = ele.data('coverage') || 0; - return Math.max(30, 30 + coverage * 8); - }, - 'height': function (ele) { - const coverage = ele.data('coverage') || 0; - return Math.max(30, 30 + coverage * 8); - }, - 'font-size': '12px', - 'text-valign': 'center', - 'text-halign': 'center', - color: '#ffffff', - 'text-outline-color': '#1a4d3a', - 'text-outline-width': '2px', - }, - }, - { - selector: 'node[type="member"]', - style: { - 'background-color': '#88ff88', - 'label': 'data(label)', - 'width': function (ele) { - const availability = ele.data('availability') || 0; - return Math.max(25, 25 + availability / 3); - }, - 'height': function (ele) { - const availability = ele.data('availability') || 0; - return Math.max(25, 25 + availability / 3); - }, - 'font-size': '10px', - 'text-valign': 'center', - 'text-halign': 'center', - color: '#1a4d3a', - 'text-outline-color': '#ffffff', - 'text-outline-width': '1px', - }, - }, - { - selector: 'edge', - style: { - width: function (ele) { - return 1 + (ele.data('weight') || 0.5); - }, - 'line-color': '#4ade80', - 'target-arrow-color': '#4ade80', - 'target-arrow-shape': 'triangle', - 'curve-style': 'bezier', - }, - }, - ], - layout: { - name: 'cose-bilkent', - animate: true, - animationDuration: 1000, - nodeRepulsion: 4500, - idealEdgeLength: 100, - edgeElasticity: 0.45, - }, - }); - - // Gestionnaire de clics - cy.on('tap', 'node', function (evt) { - const node = evt.target; - const nodeData = node.data(); - let tooltip = ''; - - if (nodeData.type === 'technology') { - tooltip = - `${nodeData.label}\n` + - `Ring: ${nodeData.ring}\n` + - `Couverture: ${nodeData.coverage} personne(s)\n` + - `Impact: ${nodeData.businessImpact}\n` + - `Gap: ${nodeData.skillGap}`; - } else { - tooltip = - `${nodeData.label}\n` + - `Disponibilité: ${nodeData.availability}%` + - (nodeData.role ? `\nRôle: ${nodeData.role}` : ''); - } - - alert(tooltip); - }); - - console.log('✅ Graphe réseau initialisé'); - }); - }); - }; - - const initCongestionMatrix = () => { - if (!data?.congestionMatrix || !matrixRef.current) return; - - console.log('📈 Initialisation matrice congestion...'); - - // Import dynamique pour éviter les erreurs SSR - import('echarts-for-react').then(() => { - import('echarts').then((echarts) => { - const techs = data.congestionMatrix.map((r) => r.technology); - const members = - data.congestionMatrix[0]?.members.map((m) => m.fullName || m.member) || []; - - const scatterData = []; - data.congestionMatrix.forEach((row, i) => { - row.members.forEach((member, j) => { - scatterData.push([j, i, member.availability, member]); - }); - }); - - const chart = echarts.default.init(matrixRef.current); - const option = { - title: { - text: 'Disponibilité des Technologies Core', - left: 'center', - textStyle: { color: '#e0e0e0' }, - }, - tooltip: { - formatter: function (params) { - if (params.data && params.data[3]) { - const member = params.data[3]; - return ( - `${member.fullName || member.member}
` + - `Technologie: ${techs[params.data[1]]}
` + - `Disponibilité: ${params.data[2]}%` - ); - } - }, - }, - grid: { - left: '10%', - right: '10%', - top: '15%', - bottom: '15%', - containLabel: true, - }, - xAxis: { - type: 'category', - data: members, - axisLabel: { - color: '#e0e0e0', - rotate: 45, - }, - }, - yAxis: { - type: 'category', - data: techs, - axisLabel: { color: '#e0e0e0' }, - }, - visualMap: { - min: 0, - max: 100, - dimension: 2, - orient: 'horizontal', - left: 'center', - top: 'top', - text: ['Élevé', 'Faible'], - textStyle: { color: '#e0e0e0' }, - inRange: { - color: ['#ff4444', '#ff8800', '#4488ff', '#88ff88'], - }, - outOfRange: { - color: '#444444', - }, - }, - series: [ - { - name: 'Disponibilité', - type: 'scatter', - data: scatterData, - symbolSize: function (data) { - return 15 + (data[2] || 0) / 2; - }, - }, - ], - }; - - chart.setOption(option); - console.log('✅ Matrice congestion initialisée'); - }); - }); - }; - - const renderGenesisTeam = () => { - if (!data?.genesisTeam) return
Données équipe non disponibles
; - - const genesis = data.genesisTeam; - return ( -
-

Équipe de Genèse MVP

-
-

Critères de Sélection

-
    -
  • Disponibilité ≥ {genesis.minAvailability}%
    • -
  • Couverture technologique ≥ {genesis.minCoverage} technologies
    • -
  • Taille équipe optimale: {genesis.targetTeamSize} membres
    • -
-
- -
- {genesis.selectedMembers.map((member) => ( -
-
-
-
- {member.fullName || member.member} -
-
- {member.role || ''} • {member.seniority} • {member.coverage} technologie(s) -
-
-
-
- {member.availability}% -
-
Disponibilité
-
-
-
- {member.skills.slice(0, 8).map((skill) => ( - - {skill} - - ))} - {member.skills.length > 8 && ( - - +{member.skills.length - 8} - - )} -
-
- ))} -
-
- ); - }; - - if (loading) { + if (!mounted) { return (
-
- Erreur: {error} -
-
- ); - } - - return ( -
-
-
-
- - ← Retour au Radar - -
-
-

👥 Équipe & Technologies

-

Visualisation des compétences et identification de l'équipe de genèse MVP

-
- -
- - - -
- - {activeTab === 'network' && ( -
-

Graphe Réseau - Technologies et Compétences

-
-
-
- Technologies Core -
-
-
- Technologies Avancées -
-
-
- Technologies Utilitaires -
-
-
- Membres Équipe -
-
-
-
- )} - - {activeTab === 'congestion' && ( -
-

Matrice de Congestion - Technologies Core

-
-
- )} - - {activeTab === 'genesis' && ( -
- {renderGenesisTeam()} -
- )} -
-
- ); + return null; }