<!DOCTYPE html>
<html>
<head>
<title><%= title %></title>
<style type="text/css">
html, body {
font: 10pt arial;
}
#mynetwork {
width: 800px;
height: 800px;
border: 1px solid lightgray;
}
</style>
<script type="text/javascript" src="https://visjs.github.io/vis-network/standalone/umd/vis-network.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<!-- <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script> -->
<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script type="text/babel">
function FormComponent(props) {
var container = document.getElementById('mynetwork');
const [allNodes, setAllNodes] = React.useState([]);
const [allEdges, setAllEdges] = React.useState([]);
const [promotionMin, setPromotionMin] = React.useState(2021);
const [promotionMax, setPromotionMax] = React.useState(2021);
const [nodeMin, setNodeMin] = React.useState(10);
const [edgeMin, setEdgeMin] = React.useState(5);
const [submitted, setSubmitted] = React.useState(true);
const [ready, setReady] = React.useState(false);
const [error, setError] = React.useState(false);
// React.useEffect(() => {
// }, [ready, error])
React.useEffect(() => {
axios.post('/get_promotion')
.then(result => {
setPromotionMin(result.data.promotion);
setPromotionMax(result.data.promotion);
})
}, [])
React.useEffect(() => {
setReady(false);
setError(false);
axios.post('/', {
promotion_min: promotionMin,
promotion_max: promotionMax
})
.then(result => {
setAllEdges(result.data.all_edges);
setAllNodes(result.data.all_nodes);
setReady(true);
})
.catch(err => setError(true))
}, [promotionMin, promotionMax])
function handleSubmit (event) {
event.preventDefault();
let nodes = [];
allNodes.forEach(node => {
if (node.value >= nodeMin) {
nodes.push({
id: node.id,
value: node.value,
label: `${node.label}, ${node.value} membres`
});
}
})
let edges = [];
allEdges.forEach(edge => {
if (edge.value >= edgeMin) {
edges.push({
from: edge.from,
to: edge.to,
value: edge.value,
title: `${edge.value} membres en commun`
});
}
})
var data = {
nodes: nodes,
edges: edges
};
var options = {
nodes: {
shape: 'dot'
}
};
let network = new vis.Network(container, data, options);
}
return (
<form onSubmit={handleSubmit}>
<div>
<label htmlFor="promotionMin">Promotion minimale : </label>
<input type="number" id="promotionMin" value={promotionMin} onChange={e => setPromotionMin(e.target.value)} />
</div>
<div>
<label htmlFor="promotionMax">Promotion maximale : </label>
<input type="number" id="promotionMax" value={promotionMax} onChange={e => setPromotionMax(e.target.value)} />
</div>
<div>
<label htmlFor="nodeMin">Taille minimale :</label>
<input type="number" id="nodeMin" value={nodeMin} onChange={e => setNodeMin(e.target.value)} />
</div>
<div>
<label htmlFor="edgeMin">Consanguinité :</label>
<input type="number" id="edgeMin" value={edgeMin} onChange={e => setEdgeMin(e.target.value)} />
</div>
<button type="submit">Générer</button>
{error
? <p style={{color: "red"}}>Erreur</p>
: (ready
? <p style={{color: "green"}}>Prêt</p>
: <p style={{color: "orange"}}>Chargement</p>
)}
</form>
)
}
ReactDOM.render(React.createElement(FormComponent), document.getElementById('form'));
</script>
</head>
<body>
<h1><%= title %></h1>
<p>
<b>Comment ça marche ?</b><br>
Lorsqu'on arrive sur le site ou que l'on change l'une des promotions, le site charge les données liées aux promotions.<br>
Quand le champ de texte sous le menu indique prêt, vous pouvez générer le graphe en cliquant sur le bouton Générer ci-dessous.<br>
Les promotions prises en compte seront les promotions situées entre la promotion minimale et la promotion maximale (inclusion large)<br>
Vous pouvez modifier la taille des assos ainsi que la consanguinité minimales, puis générer le graphe à nouveau.<br>
Vous pouvez déplacer le graphe ou zoomer dessus pour voir les détails.
</p>
<div id="form"></div>
<div id="mynetwork"></div>
<p>Crédit : <a href="https://linkcs.fr/user/2018barthezt">moi</a></br>
J'avais la flemme de faire du front, si tu te plains, c'est un paps !</p>
</body>
</html>