build: remplacer heredoc team.tsx par COPY
- Ajout docker/team-page.tsx avec le composant React complet - Remplacement du heredoc dans Dockerfile.business par un COPY - Évite les erreurs de parsing Docker (unknown instruction: import) Assure la compatibilité Portainer sans syntaxe heredoc
This commit is contained in:
syoul
@@ -100,480 +100,8 @@ RUN echo "📊 Comptage des fichiers .md dans .techradar/data/radar" && \
|
|||||||
|
|
||||||
# Créer la page Next.js /team ET un fichier HTML statique /team/index.html
|
# Créer la page Next.js /team ET un fichier HTML statique /team/index.html
|
||||||
# La page Next.js pour le routing, le HTML statique pour garantir l'affichage
|
# La page Next.js pour le routing, le HTML statique pour garantir l'affichage
|
||||||
RUN mkdir -p .techradar/src/pages && \
|
RUN mkdir -p .techradar/src/pages
|
||||||
cat > .techradar/src/pages/team.tsx << 'EOF'
|
COPY docker/team-page.tsx .techradar/src/pages/team.tsx
|
||||||
import { useEffect, useState, useRef } from 'react';
|
|
||||||
import dynamic from 'next/dynamic';
|
|
||||||
|
|
||||||
// Chargement dynamique des bibliothèques pour éviter les erreurs SSR
|
|
||||||
const CytoscapeComponent = dynamic(() => import('cytoscape'), { ssr: false });
|
|
||||||
const EChartsComponent = dynamic(() => import('echarts-for-react'), { ssr: false });
|
|
||||||
|
|
||||||
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);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
// Charger les données équipe
|
|
||||||
loadTeamData();
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
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}<br/>\` +
|
|
||||||
\`Technologie: \${techs[params.data[1]]}<br/>\` +
|
|
||||||
\`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 <div>Données équipe non disponibles</div>;
|
|
||||||
|
|
||||||
const genesis = data.genesisTeam;
|
|
||||||
return (
|
|
||||||
<div>
|
|
||||||
<h2 style={{marginBottom: '20px'}}>Équipe de Genèse MVP</h2>
|
|
||||||
<div style={{background: 'rgba(74, 222, 128, 0.1)', padding: '20px', borderRadius: '8px', marginBottom: '20px'}}>
|
|
||||||
<h3 style={{color: '#4ade80', marginBottom: '10px'}}>Critères de Sélection</h3>
|
|
||||||
<ul style={{marginLeft: '20px'}}>
|
|
||||||
<li>Disponibilité ≥ {genesis.minAvailability}%</li>
|
|
||||||
<li>Couverture technologique ≥ {genesis.minCoverage} technologies</li>
|
|
||||||
<li>Taille équipe optimale: {genesis.targetTeamSize} membres</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div style={{display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(300px, 1fr))', gap: '20px', marginTop: '20px'}}>
|
|
||||||
{genesis.selectedMembers.map(member => (
|
|
||||||
<div key={member.member} style={{background: 'rgba(26, 77, 58, 0.5)', borderRadius: '8px', padding: '20px', border: '1px solid rgba(74, 222, 128, 0.3)'}}>
|
|
||||||
<div style={{display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '10px'}}>
|
|
||||||
<div>
|
|
||||||
<div style={{fontSize: '18px', fontWeight: 'bold', color: '#4ade80'}}>{member.fullName || member.member}</div>
|
|
||||||
<div style={{fontSize: '12px', color: '#a0a0a0', marginTop: '4px'}}>
|
|
||||||
{member.role || ''} • {member.seniority} • {member.coverage} technologie(s)
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div style={{textAlign: 'right'}}>
|
|
||||||
<div style={{fontSize: '24px', color: '#4ade80', fontWeight: 'bold'}}>{member.availability}%</div>
|
|
||||||
<div style={{fontSize: '12px', color: '#a0a0a0'}}>Disponibilité</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div style={{display: 'flex', flexWrap: 'wrap', gap: '8px', marginTop: '10px'}}>
|
|
||||||
{member.skills.slice(0, 8).map(skill => (
|
|
||||||
<span key={skill} style={{background: 'rgba(74, 222, 128, 0.2)', color: '#4ade80', padding: '4px 8px', borderRadius: '4px', fontSize: '12px'}}>
|
|
||||||
{skill}
|
|
||||||
</span>
|
|
||||||
))}
|
|
||||||
{member.skills.length > 8 && (
|
|
||||||
<span style={{background: 'rgba(74, 222, 128, 0.2)', color: '#4ade80', padding: '4px 8px', borderRadius: '4px', fontSize: '12px'}}>
|
|
||||||
+{member.skills.length - 8}
|
|
||||||
</span>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
if (loading) {
|
|
||||||
return (
|
|
||||||
<div style={{
|
|
||||||
width: '100vw',
|
|
||||||
height: '100vh',
|
|
||||||
background: '#1a4d3a',
|
|
||||||
display: 'flex',
|
|
||||||
alignItems: 'center',
|
|
||||||
justifyContent: 'center',
|
|
||||||
position: 'fixed',
|
|
||||||
top: 0,
|
|
||||||
left: 0,
|
|
||||||
zIndex: 9999
|
|
||||||
}}>
|
|
||||||
<div style={{color: 'white', fontSize: '18px'}}>
|
|
||||||
Chargement des visualisations équipe...
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (error) {
|
|
||||||
return (
|
|
||||||
<div style={{
|
|
||||||
width: '100vw',
|
|
||||||
height: '100vh',
|
|
||||||
background: '#1a4d3a',
|
|
||||||
display: 'flex',
|
|
||||||
alignItems: 'center',
|
|
||||||
justifyContent: 'center',
|
|
||||||
position: 'fixed',
|
|
||||||
top: 0,
|
|
||||||
left: 0,
|
|
||||||
zIndex: 9999
|
|
||||||
}}>
|
|
||||||
<div style={{color: 'white', fontSize: '18px'}}>
|
|
||||||
Erreur: {error}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div style={{
|
|
||||||
width: '100vw',
|
|
||||||
minHeight: '100vh',
|
|
||||||
background: '#1a4d3a',
|
|
||||||
fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif',
|
|
||||||
color: '#e0e0e0',
|
|
||||||
padding: '20px'
|
|
||||||
}}>
|
|
||||||
<div style={{maxWidth: '1400px', margin: '0 auto'}}>
|
|
||||||
<header style={{
|
|
||||||
textAlign: 'center',
|
|
||||||
marginBottom: '30px',
|
|
||||||
padding: '20px',
|
|
||||||
background: 'rgba(26, 77, 58, 0.5)',
|
|
||||||
borderRadius: '8px'
|
|
||||||
}}>
|
|
||||||
<div style={{display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '10px'}}>
|
|
||||||
<a href="/" style={{color: '#4ade80', textDecoration: 'none', fontSize: '18px', fontWeight: 'bold'}}>← Retour au Radar</a>
|
|
||||||
<div></div>
|
|
||||||
</div>
|
|
||||||
<h1 style={{color: '#4ade80', marginBottom: '10px'}}>👥 Équipe & Technologies</h1>
|
|
||||||
<p>Visualisation des compétences et identification de l'équipe de genèse MVP</p>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<div style={{display: 'flex', gap: '10px', marginBottom: '20px', flexWrap: 'wrap'}}>
|
|
||||||
<button
|
|
||||||
onClick={() => setActiveTab('network')}
|
|
||||||
style={{
|
|
||||||
padding: '12px 24px',
|
|
||||||
background: activeTab === 'network' ? '#4ade80' : 'rgba(74, 222, 128, 0.2)',
|
|
||||||
border: '1px solid #4ade80',
|
|
||||||
borderRadius: '6px',
|
|
||||||
color: activeTab === 'network' ? '#1a4d3a' : '#4ade80',
|
|
||||||
cursor: 'pointer',
|
|
||||||
fontSize: '14px',
|
|
||||||
transition: 'all 0.3s ease',
|
|
||||||
fontWeight: activeTab === 'network' ? 'bold' : 'normal'
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Graphe Réseau
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
onClick={() => setActiveTab('congestion')}
|
|
||||||
style={{
|
|
||||||
padding: '12px 24px',
|
|
||||||
background: activeTab === 'congestion' ? '#4ade80' : 'rgba(74, 222, 128, 0.2)',
|
|
||||||
border: '1px solid #4ade80',
|
|
||||||
borderRadius: '6px',
|
|
||||||
color: activeTab === 'congestion' ? '#1a4d3a' : '#4ade80',
|
|
||||||
cursor: 'pointer',
|
|
||||||
fontSize: '14px',
|
|
||||||
transition: 'all 0.3s ease',
|
|
||||||
fontWeight: activeTab === 'congestion' ? 'bold' : 'normal'
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Matrice Congestion
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
onClick={() => setActiveTab('genesis')}
|
|
||||||
style={{
|
|
||||||
padding: '12px 24px',
|
|
||||||
background: activeTab === 'genesis' ? '#4ade80' : 'rgba(74, 222, 128, 0.2)',
|
|
||||||
border: '1px solid #4ade80',
|
|
||||||
borderRadius: '6px',
|
|
||||||
color: activeTab === 'genesis' ? '#1a4d3a' : '#4ade80',
|
|
||||||
cursor: 'pointer',
|
|
||||||
fontSize: '14px',
|
|
||||||
transition: 'all 0.3s ease',
|
|
||||||
fontWeight: activeTab === 'genesis' ? 'bold' : 'normal'
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Équipe Genèse MVP
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{activeTab === 'network' && (
|
|
||||||
<div style={{
|
|
||||||
background: 'rgba(26, 77, 58, 0.3)',
|
|
||||||
padding: '20px',
|
|
||||||
borderRadius: '8px',
|
|
||||||
marginBottom: '20px'
|
|
||||||
}}>
|
|
||||||
<h2 style={{marginBottom: '20px'}}>Graphe Réseau - Technologies et Compétences</h2>
|
|
||||||
<div style={{
|
|
||||||
display: 'flex',
|
|
||||||
flexWrap: 'wrap',
|
|
||||||
gap: '15px',
|
|
||||||
marginBottom: '20px',
|
|
||||||
padding: '15px',
|
|
||||||
background: 'rgba(0, 0, 0, 0.2)',
|
|
||||||
borderRadius: '6px'
|
|
||||||
}}>
|
|
||||||
<div style={{display: 'flex', alignItems: 'center', gap: '8px', fontSize: '14px'}}>
|
|
||||||
<div style={{width: '16px', height: '16px', borderRadius: '50%', background: '#ff4444'}}></div>
|
|
||||||
<span>Technologies Core</span>
|
|
||||||
</div>
|
|
||||||
<div style={{display: 'flex', alignItems: 'center', gap: '8px', fontSize: '14px'}}>
|
|
||||||
<div style={{width: '16px', height: '16px', borderRadius: '50%', background: '#ff8800'}}></div>
|
|
||||||
<span>Technologies Avancées</span>
|
|
||||||
</div>
|
|
||||||
<div style={{display: 'flex', alignItems: 'center', gap: '8px', fontSize: '14px'}}>
|
|
||||||
<div style={{width: '16px', height: '16px', borderRadius: '50%', background: '#4488ff'}}></div>
|
|
||||||
<span>Technologies Utilitaires</span>
|
|
||||||
</div>
|
|
||||||
<div style={{display: 'flex', alignItems: 'center', gap: '8px', fontSize: '14px'}}>
|
|
||||||
<div style={{width: '16px', height: '16px', borderRadius: '50%', background: '#88ff88'}}></div>
|
|
||||||
<span>Membres Équipe</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div ref={networkRef} style={{width: '100%', height: '600px', border: '1px solid rgba(74, 222, 128, 0.3)', borderRadius: '8px'}}></div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{activeTab === 'congestion' && (
|
|
||||||
<div style={{
|
|
||||||
background: 'rgba(26, 77, 58, 0.3)',
|
|
||||||
padding: '20px',
|
|
||||||
borderRadius: '8px',
|
|
||||||
marginBottom: '20px'
|
|
||||||
}}>
|
|
||||||
<h2 style={{marginBottom: '20px'}}>Matrice de Congestion - Technologies Core</h2>
|
|
||||||
<div ref={matrixRef} style={{width: '100%', height: '600px', border: '1px solid rgba(74, 222, 128, 0.3)', borderRadius: '8px'}}></div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{activeTab === 'genesis' && (
|
|
||||||
<div style={{
|
|
||||||
background: 'rgba(26, 77, 58, 0.3)',
|
|
||||||
padding: '20px',
|
|
||||||
borderRadius: '8px',
|
|
||||||
marginBottom: '20px'
|
|
||||||
}}>
|
|
||||||
{renderGenesisTeam()}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
EOF
|
|
||||||
|
|
||||||
# Script Python pour ajouter le lien Équipe dans Navigation.tsx (supprime TOUS les doublons)
|
# Script Python pour ajouter le lien Équipe dans Navigation.tsx (supprime TOUS les doublons)
|
||||||
RUN cat > /tmp/add_team_link.py << 'PYEOF'
|
RUN cat > /tmp/add_team_link.py << 'PYEOF'
|
||||||
|
|||||||
578
docker/team-page.tsx
Normal file
578
docker/team-page.tsx
Normal file
@@ -0,0 +1,578 @@
|
|||||||
|
import { useEffect, useState, useRef } from 'react';
|
||||||
|
import dynamic from 'next/dynamic';
|
||||||
|
|
||||||
|
// Chargement dynamique des bibliothèques pour éviter les erreurs SSR
|
||||||
|
const CytoscapeComponent = dynamic(() => import('cytoscape'), { ssr: false });
|
||||||
|
const EChartsComponent = dynamic(() => import('echarts-for-react'), { ssr: false });
|
||||||
|
|
||||||
|
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);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
// Charger les données équipe
|
||||||
|
loadTeamData();
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
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}<br/>` +
|
||||||
|
`Technologie: ${techs[params.data[1]]}<br/>` +
|
||||||
|
`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 <div>Données équipe non disponibles</div>;
|
||||||
|
|
||||||
|
const genesis = data.genesisTeam;
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<h2 style={{ marginBottom: '20px' }}>Équipe de Genèse MVP</h2>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
background: 'rgba(74, 222, 128, 0.1)',
|
||||||
|
padding: '20px',
|
||||||
|
borderRadius: '8px',
|
||||||
|
marginBottom: '20px',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<h3 style={{ color: '#4ade80', marginBottom: '10px' }}>Critères de Sélection</h3>
|
||||||
|
<ul style={{ marginLeft: '20px' }}>
|
||||||
|
<li>Disponibilité ≥ {genesis.minAvailability}%</li>
|
||||||
|
<li>Couverture technologique ≥ {genesis.minCoverage} technologies</li>
|
||||||
|
<li>Taille équipe optimale: {genesis.targetTeamSize} membres</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
display: 'grid',
|
||||||
|
gridTemplateColumns: 'repeat(auto-fill, minmax(300px, 1fr))',
|
||||||
|
gap: '20px',
|
||||||
|
marginTop: '20px',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{genesis.selectedMembers.map((member) => (
|
||||||
|
<div
|
||||||
|
key={member.member}
|
||||||
|
style={{
|
||||||
|
background: 'rgba(26, 77, 58, 0.5)',
|
||||||
|
borderRadius: '8px',
|
||||||
|
padding: '20px',
|
||||||
|
border: '1px solid rgba(74, 222, 128, 0.3)',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
display: 'flex',
|
||||||
|
justifyContent: 'space-between',
|
||||||
|
alignItems: 'center',
|
||||||
|
marginBottom: '10px',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div>
|
||||||
|
<div style={{ fontSize: '18px', fontWeight: 'bold', color: '#4ade80' }}>
|
||||||
|
{member.fullName || member.member}
|
||||||
|
</div>
|
||||||
|
<div style={{ fontSize: '12px', color: '#a0a0a0', marginTop: '4px' }}>
|
||||||
|
{member.role || ''} • {member.seniority} • {member.coverage} technologie(s)
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div style={{ textAlign: 'right' }}>
|
||||||
|
<div style={{ fontSize: '24px', color: '#4ade80', fontWeight: 'bold' }}>
|
||||||
|
{member.availability}%
|
||||||
|
</div>
|
||||||
|
<div style={{ fontSize: '12px', color: '#a0a0a0' }}>Disponibilité</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div style={{ display: 'flex', flexWrap: 'wrap', gap: '8px', marginTop: '10px' }}>
|
||||||
|
{member.skills.slice(0, 8).map((skill) => (
|
||||||
|
<span
|
||||||
|
key={skill}
|
||||||
|
style={{
|
||||||
|
background: 'rgba(74, 222, 128, 0.2)',
|
||||||
|
color: '#4ade80',
|
||||||
|
padding: '4px 8px',
|
||||||
|
borderRadius: '4px',
|
||||||
|
fontSize: '12px',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{skill}
|
||||||
|
</span>
|
||||||
|
))}
|
||||||
|
{member.skills.length > 8 && (
|
||||||
|
<span
|
||||||
|
style={{
|
||||||
|
background: 'rgba(74, 222, 128, 0.2)',
|
||||||
|
color: '#4ade80',
|
||||||
|
padding: '4px 8px',
|
||||||
|
borderRadius: '4px',
|
||||||
|
fontSize: '12px',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
+{member.skills.length - 8}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
if (loading) {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
width: '100vw',
|
||||||
|
height: '100vh',
|
||||||
|
background: '#1a4d3a',
|
||||||
|
display: 'flex',
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'center',
|
||||||
|
position: 'fixed',
|
||||||
|
top: 0,
|
||||||
|
left: 0,
|
||||||
|
zIndex: 9999,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div style={{ color: 'white', fontSize: '18px' }}>
|
||||||
|
Chargement des visualisations équipe...
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (error) {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
width: '100vw',
|
||||||
|
height: '100vh',
|
||||||
|
background: '#1a4d3a',
|
||||||
|
display: 'flex',
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'center',
|
||||||
|
position: 'fixed',
|
||||||
|
top: 0,
|
||||||
|
left: 0,
|
||||||
|
zIndex: 9999,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div style={{ color: 'white', fontSize: '18px' }}>
|
||||||
|
Erreur: {error}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
width: '100vw',
|
||||||
|
minHeight: '100vh',
|
||||||
|
background: '#1a4d3a',
|
||||||
|
fontFamily:
|
||||||
|
'-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif',
|
||||||
|
color: '#e0e0e0',
|
||||||
|
padding: '20px',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div style={{ maxWidth: '1400px', margin: '0 auto' }}>
|
||||||
|
<header
|
||||||
|
style={{
|
||||||
|
textAlign: 'center',
|
||||||
|
marginBottom: '30px',
|
||||||
|
padding: '20px',
|
||||||
|
background: 'rgba(26, 77, 58, 0.5)',
|
||||||
|
borderRadius: '8px',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
display: 'flex',
|
||||||
|
justifyContent: 'space-between',
|
||||||
|
alignItems: 'center',
|
||||||
|
marginBottom: '10px',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<a
|
||||||
|
href="/"
|
||||||
|
style={{
|
||||||
|
color: '#4ade80',
|
||||||
|
textDecoration: 'none',
|
||||||
|
fontSize: '18px',
|
||||||
|
fontWeight: 'bold',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
← Retour au Radar
|
||||||
|
</a>
|
||||||
|
<div></div>
|
||||||
|
</div>
|
||||||
|
<h1 style={{ color: '#4ade80', marginBottom: '10px' }}>👥 Équipe & Technologies</h1>
|
||||||
|
<p>Visualisation des compétences et identification de l'équipe de genèse MVP</p>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<div style={{ display: 'flex', gap: '10px', marginBottom: '20px', flexWrap: 'wrap' }}>
|
||||||
|
<button
|
||||||
|
onClick={() => setActiveTab('network')}
|
||||||
|
style={{
|
||||||
|
padding: '12px 24px',
|
||||||
|
background: activeTab === 'network' ? '#4ade80' : 'rgba(74, 222, 128, 0.2)',
|
||||||
|
border: '1px solid #4ade80',
|
||||||
|
borderRadius: '6px',
|
||||||
|
color: activeTab === 'network' ? '#1a4d3a' : '#4ade80',
|
||||||
|
cursor: 'pointer',
|
||||||
|
fontSize: '14px',
|
||||||
|
transition: 'all 0.3s ease',
|
||||||
|
fontWeight: activeTab === 'network' ? 'bold' : 'normal',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Graphe Réseau
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={() => setActiveTab('congestion')}
|
||||||
|
style={{
|
||||||
|
padding: '12px 24px',
|
||||||
|
background: activeTab === 'congestion' ? '#4ade80' : 'rgba(74, 222, 128, 0.2)',
|
||||||
|
border: '1px solid #4ade80',
|
||||||
|
borderRadius: '6px',
|
||||||
|
color: activeTab === 'congestion' ? '#1a4d3a' : '#4ade80',
|
||||||
|
cursor: 'pointer',
|
||||||
|
fontSize: '14px',
|
||||||
|
transition: 'all 0.3s ease',
|
||||||
|
fontWeight: activeTab === 'congestion' ? 'bold' : 'normal',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Matrice Congestion
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={() => setActiveTab('genesis')}
|
||||||
|
style={{
|
||||||
|
padding: '12px 24px',
|
||||||
|
background: activeTab === 'genesis' ? '#4ade80' : 'rgba(74, 222, 128, 0.2)',
|
||||||
|
border: '1px solid #4ade80',
|
||||||
|
borderRadius: '6px',
|
||||||
|
color: activeTab === 'genesis' ? '#1a4d3a' : '#4ade80',
|
||||||
|
cursor: 'pointer',
|
||||||
|
fontSize: '14px',
|
||||||
|
transition: 'all 0.3s ease',
|
||||||
|
fontWeight: activeTab === 'genesis' ? 'bold' : 'normal',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Équipe Genèse MVP
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{activeTab === 'network' && (
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
background: 'rgba(26, 77, 58, 0.3)',
|
||||||
|
padding: '20px',
|
||||||
|
borderRadius: '8px',
|
||||||
|
marginBottom: '20px',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<h2 style={{ marginBottom: '20px' }}>Graphe Réseau - Technologies et Compétences</h2>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
display: 'flex',
|
||||||
|
flexWrap: 'wrap',
|
||||||
|
gap: '15px',
|
||||||
|
marginBottom: '20px',
|
||||||
|
padding: '15px',
|
||||||
|
background: 'rgba(0, 0, 0, 0.2)',
|
||||||
|
borderRadius: '6px',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div style={{ display: 'flex', alignItems: 'center', gap: '8px', fontSize: '14px' }}>
|
||||||
|
<div style={{ width: '16px', height: '16px', borderRadius: '50%', background: '#ff4444' }}></div>
|
||||||
|
<span>Technologies Core</span>
|
||||||
|
</div>
|
||||||
|
<div style={{ display: 'flex', alignItems: 'center', gap: '8px', fontSize: '14px' }}>
|
||||||
|
<div style={{ width: '16px', height: '16px', borderRadius: '50%', background: '#ff8800' }}></div>
|
||||||
|
<span>Technologies Avancées</span>
|
||||||
|
</div>
|
||||||
|
<div style={{ display: 'flex', alignItems: 'center', gap: '8px', fontSize: '14px' }}>
|
||||||
|
<div style={{ width: '16px', height: '16px', borderRadius: '50%', background: '#4488ff' }}></div>
|
||||||
|
<span>Technologies Utilitaires</span>
|
||||||
|
</div>
|
||||||
|
<div style={{ display: 'flex', alignItems: 'center', gap: '8px', fontSize: '14px' }}>
|
||||||
|
<div style={{ width: '16px', height: '16px', borderRadius: '50%', background: '#88ff88' }}></div>
|
||||||
|
<span>Membres Équipe</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
ref={networkRef}
|
||||||
|
style={{
|
||||||
|
width: '100%',
|
||||||
|
height: '600px',
|
||||||
|
border: '1px solid rgba(74, 222, 128, 0.3)',
|
||||||
|
borderRadius: '8px',
|
||||||
|
}}
|
||||||
|
></div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{activeTab === 'congestion' && (
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
background: 'rgba(26, 77, 58, 0.3)',
|
||||||
|
padding: '20px',
|
||||||
|
borderRadius: '8px',
|
||||||
|
marginBottom: '20px',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<h2 style={{ marginBottom: '20px' }}>Matrice de Congestion - Technologies Core</h2>
|
||||||
|
<div
|
||||||
|
ref={matrixRef}
|
||||||
|
style={{
|
||||||
|
width: '100%',
|
||||||
|
height: '600px',
|
||||||
|
border: '1px solid rgba(74, 222, 128, 0.3)',
|
||||||
|
borderRadius: '8px',
|
||||||
|
}}
|
||||||
|
></div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{activeTab === 'genesis' && (
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
background: 'rgba(26, 77, 58, 0.3)',
|
||||||
|
padding: '20px',
|
||||||
|
borderRadius: '8px',
|
||||||
|
marginBottom: '20px',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{renderGenesisTeam()}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user