From b95a0410d17916be4fb4697b1680ec52955835d0 Mon Sep 17 00:00:00 2001
From: Nekori <eric.li@edu.univ-paris13.fr>
Date: Wed, 28 Apr 2021 19:34:34 +0200
Subject: [PATCH] prototype de graph

---
 html/base.html              |  2 ++
 html/export_yaml_to_html.py | 30 ++++++++++++-----
 html/graphTemplate.html     | 19 +++++++++++
 html/graphTemplate.js       | 67 +++++++++++++++++++++++++++++++++++++
 4 files changed, 109 insertions(+), 9 deletions(-)
 create mode 100644 html/graphTemplate.html
 create mode 100644 html/graphTemplate.js
diff --git a/html/base.html b/html/base.html
index 29514d3..db1a38e 100644
--- a/html/base.html
+++ b/html/base.html
@@ -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">
diff --git a/html/export_yaml_to_html.py b/html/export_yaml_to_html.py
index b163941..0be95a9 100644
--- a/html/export_yaml_to_html.py
+++ b/html/export_yaml_to_html.py
@@ -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")
diff --git a/html/graphTemplate.html b/html/graphTemplate.html
new file mode 100644
index 0000000..3b2a3eb
--- /dev/null
+++ b/html/graphTemplate.html
@@ -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 %}
\ No newline at end of file
diff --git a/html/graphTemplate.js b/html/graphTemplate.js
new file mode 100644
index 0000000..e341c62
--- /dev/null
+++ b/html/graphTemplate.js
@@ -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; });
+}
\ No newline at end of file
