parent
01369648c9
commit
3b9d8f7d4d
@ -0,0 +1,10 @@
|
|||||||
|
#graph-container {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
background-color: #f5f5f5;
|
||||||
|
padding: 20px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
@ -0,0 +1,237 @@
|
|||||||
|
import React, { useEffect } from "react";
|
||||||
|
import { DataSet, Network} from "vis-network/standalone/esm/vis-network";
|
||||||
|
import "./GraphContainer.css";
|
||||||
|
|
||||||
|
const NB_SPORTS = 3;
|
||||||
|
const MIN_AGE = 20;
|
||||||
|
const MAX_AGE = 100;
|
||||||
|
const COLORS = ["blanc", "noir", "jaune", "chocolat"];
|
||||||
|
const SPORTS = ["foot", "tennis", "rugby", "basket"];
|
||||||
|
const NAMES = ["Fabien", "Mélyssa", "Kéké", "David", "Elisa", "Karina", "Fatima", "Pintrand", "Pif", "Nathan", "Thomas", "Carreau", "Léo", "Hélicoptère", "Tank"]
|
||||||
|
|
||||||
|
class Person {
|
||||||
|
id: number = 0;
|
||||||
|
name: string;
|
||||||
|
age: number;
|
||||||
|
color: string;
|
||||||
|
sport: string[];
|
||||||
|
friends: Person[] = [];
|
||||||
|
|
||||||
|
constructor(name: string, age: number, color: string, sport: string[]) {
|
||||||
|
this.name = name;
|
||||||
|
this.age = age;
|
||||||
|
this.color = color;
|
||||||
|
this.sport = sport || [];
|
||||||
|
}
|
||||||
|
|
||||||
|
getAge() {
|
||||||
|
return this.age;
|
||||||
|
}
|
||||||
|
|
||||||
|
setAge(age: number) {
|
||||||
|
this.age = age;
|
||||||
|
}
|
||||||
|
|
||||||
|
addFriend(person: Person) {
|
||||||
|
// Si la personne n'est pas déjà dans la liste d'amis
|
||||||
|
// et qu'il a pas déjà 5 amis ou plus
|
||||||
|
// alors on l'ajoute
|
||||||
|
if (!this.friends.includes(person) && this.friends.length < 5 && person.friends.length < 5) {
|
||||||
|
this.friends.push(person);
|
||||||
|
person.addFriend(this);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
getFriends() {
|
||||||
|
return this.friends;
|
||||||
|
}
|
||||||
|
|
||||||
|
equals(person: Person) {
|
||||||
|
return this.age === person.age &&
|
||||||
|
this.color === person.color &&
|
||||||
|
this.sportsEquals(person);
|
||||||
|
}
|
||||||
|
|
||||||
|
sportsEquals(person:Person) {
|
||||||
|
return this.sport.length === person.sport.length &&
|
||||||
|
this.sport.every(sport => person.sport.includes(sport));
|
||||||
|
}
|
||||||
|
|
||||||
|
toString() {
|
||||||
|
return `Person(id = ${this.id}, age=${this.age}, color=${this.color}, sport=${this.sport}, friends=${this.friends.length})`;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Génère un élément aléatoire d'un tableau
|
||||||
|
function getRandomElement(array: any[]) {
|
||||||
|
return array[Math.floor(Math.random() * array.length)];
|
||||||
|
}
|
||||||
|
|
||||||
|
// Génère un nombre aléatoire entre min et max
|
||||||
|
function getRandomNumber(min: number, max: number) {
|
||||||
|
return Math.floor(Math.random() * (max - min + 1)) + min;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Génère une personne avec un age, une couleur et une liste de sports
|
||||||
|
function generatePerson(possibleNames: string[], possibleSports: string[], existingPeople: Person[]) {
|
||||||
|
// Génère un age entre 20 et 100 ans
|
||||||
|
const age = getRandomNumber(MIN_AGE, MAX_AGE);
|
||||||
|
const color = getRandomElement(COLORS);
|
||||||
|
const sports = [];
|
||||||
|
let name = "";
|
||||||
|
|
||||||
|
// Génère un nombre de sports entre 1 et NB_SPORTS
|
||||||
|
const nbSports = getRandomNumber(1, NB_SPORTS);
|
||||||
|
|
||||||
|
for (let i = 0; i < nbSports; i++) {
|
||||||
|
// Gestion des sports
|
||||||
|
// Si il n'y a plus de sports possibles, on reprend la liste de base
|
||||||
|
if (possibleSports.length === 0) {
|
||||||
|
possibleSports = SPORTS.slice();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Génère un sport aléatoire
|
||||||
|
// Si le sport est déjà dans la liste, on recommence
|
||||||
|
const sport = getRandomElement(possibleSports);
|
||||||
|
if (sports.indexOf(sport) === -1) {
|
||||||
|
possibleSports.splice(possibleSports.indexOf(sport), 1);
|
||||||
|
sports.push(sport);
|
||||||
|
} else {
|
||||||
|
i--;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Gestion des prénoms
|
||||||
|
// Si il n'y a plus de prénoms possibles, on reprend la liste de base
|
||||||
|
if (possibleNames.length === 0) {
|
||||||
|
possibleNames = NAMES.slice();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Génère un prénom aléatoire et le supprime de la liste de prénom disponible
|
||||||
|
name = getRandomElement(possibleNames);
|
||||||
|
possibleNames.splice(possibleNames.indexOf(name), 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
const newPerson = new Person(name, age, color, sports);
|
||||||
|
|
||||||
|
// Vérifie si la personne n'est pas déjà dans la liste
|
||||||
|
// Si déjà dans la liste, on recommence
|
||||||
|
// if (existingPeople.some(person => person.equals(newPerson))) {
|
||||||
|
// return generatePerson(possibleSports, existingPeople);
|
||||||
|
// }
|
||||||
|
|
||||||
|
return newPerson;
|
||||||
|
}
|
||||||
|
|
||||||
|
function generatePeople(nbPeople: number) {
|
||||||
|
const people = [];
|
||||||
|
let possibleSports = SPORTS.slice();
|
||||||
|
let possibleNames = NAMES.slice();
|
||||||
|
|
||||||
|
for (let i = 0; i < nbPeople; i++) {
|
||||||
|
const person = generatePerson(possibleNames, possibleSports, people);
|
||||||
|
person.id += i;
|
||||||
|
people.push(person);
|
||||||
|
}
|
||||||
|
|
||||||
|
return people;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Ajouter des amis aléatoirement entre une liste de personnes
|
||||||
|
function addFriends(people: Person[]) {
|
||||||
|
people.forEach(person => {
|
||||||
|
// const nbFriends = getRandomNumber(0, people.length - 1);
|
||||||
|
const nbFriends = getRandomNumber(1, 5);
|
||||||
|
|
||||||
|
|
||||||
|
for (let i = 0; i < nbFriends; i++) {
|
||||||
|
let friend = getRandomElement(people);
|
||||||
|
|
||||||
|
// S'assurer que l'ami généré aléatoirement est différent de la personne
|
||||||
|
while (friend === person) {
|
||||||
|
friend = getRandomElement(people);
|
||||||
|
}
|
||||||
|
|
||||||
|
person.addFriend(friend);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
const people = generatePeople(40);
|
||||||
|
addFriends(people);
|
||||||
|
|
||||||
|
const MyGraphComponent = () => {
|
||||||
|
useEffect(() => {
|
||||||
|
const container = document.getElementById('graph-container');
|
||||||
|
if (!container) {
|
||||||
|
console.error("Container not found");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Création du réseau
|
||||||
|
const persons: any[] = [];
|
||||||
|
const edges: any[] = [];
|
||||||
|
people.forEach(person => {
|
||||||
|
const visPerson = {id: person.id, label: person.name};
|
||||||
|
persons.push(visPerson);
|
||||||
|
person.friends.forEach(friend => {
|
||||||
|
// Eviter le double sens des relations
|
||||||
|
if (edges.some(edge => edge.from === friend.id && edge.to === person.id || edge.from === person.id && edge.to === friend.id)) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
edges.push({from: person.id, to: friend.id});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
// Charger les données dans le graph
|
||||||
|
const nodes = new DataSet(persons);
|
||||||
|
|
||||||
|
// Configuration des options du Graphe
|
||||||
|
const initialOptions = {
|
||||||
|
nodes: {
|
||||||
|
shape: 'circle',
|
||||||
|
size: 30,
|
||||||
|
font: {
|
||||||
|
size: 20
|
||||||
|
},
|
||||||
|
},
|
||||||
|
layout: {
|
||||||
|
improvedLayout: true,
|
||||||
|
hierarchical: {
|
||||||
|
enabled: false,
|
||||||
|
direction: 'LR', // LR (Left to Right) ou autre selon votre préférence
|
||||||
|
sortMethod: 'hubsize'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
physics: {
|
||||||
|
enabled: true,
|
||||||
|
barnesHut: {
|
||||||
|
gravitationalConstant: -1000,
|
||||||
|
springConstant: 0.001,
|
||||||
|
springLength: 100
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const networkData = { nodes: nodes, edges: edges };
|
||||||
|
const network = new Network(container, networkData, initialOptions);
|
||||||
|
|
||||||
|
// Gérer le changement entre la physique et le déplacement manuel
|
||||||
|
let physicsEnabled = true;
|
||||||
|
|
||||||
|
network.on("dragging", (params) => {
|
||||||
|
if (params.nodes.length > 0) {
|
||||||
|
// Un nœud a été cliqué
|
||||||
|
initialOptions.physics.enabled = false;
|
||||||
|
network.setOptions(initialOptions);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
}, []); // Le tableau vide signifie que cela ne s'exécutera qu'une fois après le premier rendu
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<div id="graph-container"/>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default MyGraphComponent;
|
||||||
@ -0,0 +1,8 @@
|
|||||||
|
import React from "react";
|
||||||
|
import GraphContainer from "../Components/GraphContainer";
|
||||||
|
|
||||||
|
export default function InGame() {
|
||||||
|
return (
|
||||||
|
<GraphContainer />
|
||||||
|
);
|
||||||
|
}
|
||||||
@ -0,0 +1,36 @@
|
|||||||
|
import {
|
||||||
|
Network,
|
||||||
|
Options,
|
||||||
|
Data,
|
||||||
|
Edge,
|
||||||
|
Node
|
||||||
|
} from "vis-network/standalone/esm/vis-network";
|
||||||
|
import React, { useState, useLayoutEffect, useRef } from "react";
|
||||||
|
|
||||||
|
export interface UseVisNetworkOptions {
|
||||||
|
options: Options;
|
||||||
|
nodes: Node[];
|
||||||
|
edges: Edge[];
|
||||||
|
}
|
||||||
|
|
||||||
|
export default (props: UseVisNetworkOptions) => {
|
||||||
|
const { edges, nodes, options } = props;
|
||||||
|
|
||||||
|
const [network, addNetwork] = useState<Network | null>(null);
|
||||||
|
const ref = useRef<HTMLDivElement>(null);
|
||||||
|
|
||||||
|
const data: Data = { nodes, edges };
|
||||||
|
|
||||||
|
useLayoutEffect(() => {
|
||||||
|
if (ref.current) {
|
||||||
|
const instance = new Network(ref.current, data, options);
|
||||||
|
addNetwork(instance);
|
||||||
|
}
|
||||||
|
return () => network?.destroy();
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
return {
|
||||||
|
network,
|
||||||
|
ref
|
||||||
|
};
|
||||||
|
};
|
||||||
Loading…
Reference in new issue