eric.li/Referentiels
2
0
Fork 0
forked from viennet/Referentiels
Code Issues Pull Requests Projects Releases Wiki Activity

prototype de graph

Browse Source
This commit is contained in:
Éric Li 2021-04-28 19:34:34 +02:00
parent d6e00909be
commit b95a0410d1
4 changed files with 109 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
html/base.html
View File

@ -9,6 +9,7 @@
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
<script src="https://unpkg.com/lunr/lunr.js"></script>
{% block head %}{% endblock %}
</head>
<body>
<!-- Barre de navigation -->
@ -38,6 +39,7 @@
<a class="navbar-item" href="index.html">Semestre 6</a>
</div>
<div class="navbar-end">
<a class="navbar-item" href="graph.html">Graphique</a>
<div class="navbar-item">
<!-- Bouton pour afficher un boite de dialogue pour la recherche -->
<button id="rechercheBouton" class="button is-rounded is-primary">

30
html/export_yaml_to_html.py
View File

@ -222,6 +222,9 @@ documents = {}
# Dictionnaire de ACs contenant la liste des SAE qui les mobilisent
SAE_mobilise_AC = {}
# Dictionnaires des relations entre les ressources pour le graph
relations = {"nodes": [], "links": []}
# Création des pages individuelles ressources, saes, exemples
for indexSem, sem in enumerate(ressources):
for i, ressource in enumerate(ressources[sem]):
@ -244,6 +247,15 @@ for indexSem, sem in enumerate(ressources):
# Ajout des informations de ressource pour la recherche dans une liste
defineSearchTerm(data, url, documents)
template.stream(datas).dump(REPERTOIRE_HTML + "/" + url)
relations["nodes"].append({"id": data["code"]})
for sae in data["sae"]:
if not any(sae in node["id"] for node in relations["nodes"]): relations["nodes"].append({"id": sae})
relations["links"].append({"source": data["code"], "target": sae, "type": "RessourceToSAE"})
for rt in data["acs"]:
for ac in data["acs"][rt]:
if not any(ac in node["id"] for node in relations["nodes"]): relations["nodes"].append({"id": ac})
relations["links"].append({"source": data["code"], "target": ac, "type": "RessourceToAC"})
#Créer un fichier contenant la liste des ressources du semestre
data = {"data" : ressources[sem],"sem" : sem} # "data" contient un tableau des ressources du semestre
@ -270,9 +282,16 @@ for indexSem, sem in enumerate(ressources):
for rt, acs in sae.getInfo()["acs"].items():
for ac in acs:
if ac not in SAE_mobilise_AC: SAE_mobilise_AC[ac] = []
if not ac in SAE_mobilise_AC: SAE_mobilise_AC[ac] = []
SAE_mobilise_AC[ac].append(sae.getInfo())
if not any(data["code"] in node["id"] for node in relations["nodes"]):
relations["nodes"].append({"id": data["code"]})
for rt in data["acs"]:
for ac in data["acs"][rt]:
if not any(ac in node["id"] for node in relations["nodes"]): relations["nodes"].append({"id": ac})
relations["links"].append({"source": data["code"], "target": ac, "type": "SAEToAC"})
for sae in exemples[sem]:
i = 1 # Nommage des fichiers exemple sae peut être modifier
for j, exemple in enumerate(exemples[sem][sae]):
@ -335,14 +354,7 @@ template_recherche = env.get_template("baseTemplate.js")
template_recherche.stream(documents=documents).dump(REPERTOIRE_JS + "/base.js")
# Créer un fichier contenant le graphe des relations entres les toutes les ressources
"""
data = []
for sem in ressources:
for ressource in ressources[sem]:
data.append({"key": ressource.getInfo()["code"]})
datas = {"data": data}
"""
datas = {"data": SAE_mobilise_AC}
datas = {"data": relations}
template_graph = env.get_template("graphTemplate.html")
template_graphJS = env.get_template("graphTemplate.js")
template_graph.stream().dump(REPERTOIRE_HTML + "/graph.html")

19
html/graphTemplate.html Normal file
View File

@ -0,0 +1,19 @@
{% extends "base.html" %}
{% block title %}Relation des ressources{% endblock %}
{% block head %}
<script src="https://d3js.org/d3.v5.js"></script>
{% endblock %}
{% block content %}
<style>
.node {
stroke: #000;
stroke-width: 1.5px;
}
.link {
stroke: #999;
stroke-width: 1.5px;
}
</style>
<svg width="960" height="500"></svg>
<script src="js/graph.js"></script>
{% endblock %}

67
html/graphTemplate.js Normal file
View File

@ -0,0 +1,67 @@
drag = simulation => {
function dragstarted(event) {
if (!event.active) simulation.alphaTarget(0.3).restart();
event.subject.fx = event.subject.x;
event.subject.fy = event.subject.y;
}
function dragged(event) {
event.subject.fx = event.x;
event.subject.fy = event.y;
}
function dragended(event) {
if (!event.active) simulation.alphaTarget(0);
event.subject.fx = null;
event.subject.fy = null;
}
return d3.drag()
.on("start", dragstarted)
.on("drag", dragged)
.on("end", dragended);
}
var svg = d3.select("svg"),
width = +svg.attr("width"),
height = +svg.attr("height");
var simulation = d3.forceSimulation()
.force("charge", d3.forceManyBody().strength(-200))
.force("link", d3.forceLink().id(function(d) { return d.id; }).distance(40))
.force("x", d3.forceX(width / 2))
.force("y", d3.forceY(height / 2))
.on("tick", ticked);
var link = svg.selectAll(".link"),
node = svg.selectAll(".node");
graph = {{data}}
simulation.nodes(graph.nodes);
simulation.force("link").links(graph.links);
link = link
.data(graph.links)
.enter().append("line")
.attr("class", "link");
node = node
.data(graph.nodes)
.enter().append("circle")
.attr("class", "node")
.attr("r", 6)
.style("fill", function(d) { return d.id; });
function ticked() {
link.attr("x1", function(d) { return d.source.x; })
.attr("y1", function(d) { return d.source.y; })
.attr("x2", function(d) { return d.target.x; })
.attr("y2", function(d) { return d.target.y; });
node.attr("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; });
}