From 25afc5d8a1f8b84bc95c22bc0c9dab6566973ab7 Mon Sep 17 00:00:00 2001
From: Lorenz Padberg <lorenz.padberg@iterativ.ch>
Date: Wed, 13 Apr 2022 17:22:48 +0200
Subject: [PATCH] no chli figuretlet

---
 .../templates/learnpath/circle.html           | 134 +++++++++++-------
 1 file changed, 85 insertions(+), 49 deletions(-)

diff --git a/server/vbv_lernwelt/templates/learnpath/circle.html b/server/vbv_lernwelt/templates/learnpath/circle.html
index e51e8f07..f37753f5 100644
--- a/server/vbv_lernwelt/templates/learnpath/circle.html
+++ b/server/vbv_lernwelt/templates/learnpath/circle.html
@@ -6,65 +6,101 @@
 
 {% block content %}
   <div class="w-full flex mt-6">
-  <div class="bg-white flex flex-col w-1/3 m-5">
-        <div><a href="{% pageurl page.get_parent.get_parent %}">Zurück zum Lernpfad</a></div>
+    <div class="bg-white flex flex-col w-1/3 m-5">
+      <div><a href="{% pageurl page.get_parent.get_parent %}">Zurück zum Lernpfad</a></div>
 
-    <div class="flex justify-center">
-      	<svg width="400" height="400"> </svg>
+      <div class="flex justify-center">
+        <svg width="500" height="500">
+          <defs>
+            <marker id="triangle"
+                    viewBox="0 0 10 10"
+                    refX="5"
+                    refY="5"
+                    markerUnits="strokeWidth"
+                    markerWidth="10" markerHeight="10"
+                    orient="auto" overflow="visible" fill='#99C7E7'>
+              <path d="M -2 5 L 8 0 L 8 10 z"/>
+            </marker>
+
+          </defs>
+        </svg>
+      </div>
+      <h1 class="font-bold text-5xl mt-6 mb-4">{{ page.title }}</h1>
+      <div class="mt4">{{ page.description }}</div>
+      <div class="mt-4">{{ page.goals }}</div>
     </div>
-    <h1 class="font-bold text-5xl mt-6 mb-4">{{ page.title }}</h1>
-    <div class="mt4">{{ page.description }}</div>
-    <div class="mt-4">{{ page.goals }}</div>
-  </div>
 
-  <div class="bg-gray-50 flex-col w-2/3">
-  {% for learning_sequence in page.get_children %}
-    <div class="p-6 max-w-sm mx-auto bg-white shadow-lg m-4">
-      <h2 class="font-bold">{{ learning_sequence.title }}</h2>
-      {% for learning_unit in learning_sequence.get_children %}
-        <div>
-        <h3>{{ learning_unit.title }}</h3>
+    <div class="bg-gray-50 flex-col w-2/3">
+      {% for learning_sequence in page.get_children %}
+        <div class="p-6 max-w-sm mx-auto bg-white shadow-lg m-4">
+          <h2 class="font-bold">{{ learning_sequence.title }}</h2>
+          {% for learning_unit in learning_sequence.get_children %}
+            <div>
+              <h3>{{ learning_unit.title }}</h3>
+            </div>
+          {% endfor %}
         </div>
       {% endfor %}
     </div>
-  {% endfor %}
-  </div>
   </div>
 
   <script>
-		var data = [5,5,5,5,5];
+    var data = [5, 5, 5, 5, 5];
 
-		var svg = d3.select("svg"),
-			width = svg.attr("width"),
-			height = svg.attr("height"),
-			radius = Math.min(width, height) / 2,
-			g = svg.append("g").attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
-
-		var color = d3.scaleOrdinal(['#99C7E7']);
-
-		// Generate the pie
-		var pie = d3.pie();
-
-		// Generate the arcs
-		var arc = d3.arc()
-					.innerRadius(radius/2.5)
-        			.padAngle(12/360)
-					.outerRadius(radius);
-
-		//Generate groups
-		var arcs = g.selectAll("arc")
-					.data(pie(data))
-					.enter()
-					.append("g")
-					.attr("class", "arc")
-
-		//Draw arc paths
-		arcs.append("path")
-			.attr("fill", function(d, i) {
-				return color(i);
-			})
-			.attr("d", arc);
-	</script>
+    var svg = d3.select("svg"),
+      width = svg.attr("width"),
+      height = svg.attr("height"),
+      radius = Math.min(width, height) / 2.5,
+      g = svg.append("g").attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
 
 
+    var color = '#99C7E7';
+
+    // Generate the pie
+    var pie = d3.pie();
+
+    // Generate the arcs
+    var arc = d3.arc()
+      .innerRadius(radius / 2.5)
+      .padAngle(12 / 360)
+      .outerRadius(radius);
+
+    // Generate the arrows
+    var arrow = d3.arc()
+      .innerRadius(radius * 1.15)
+      .padAngle(30 / 360)
+      .outerRadius(radius * 1.16);
+
+
+    //Generate groups
+    var arcs = g.selectAll("arc")
+      .data(pie(data))
+      .enter()
+      .append("g")
+      .attr("class", "arc")
+
+
+    //Generate groups
+    var arrows = g.selectAll("arrow")
+      .data(pie(data))
+      .enter()
+      .append("g")
+      .attr("class", "arrow")
+      .attr("marker-start", "url(#triangle)")
+
+
+    var markers = g.selectAll("arrow").attr("transform", "translate(60, 60) rotate(30)")
+
+
+    //Draw arc paths
+    arcs.append("path")
+      .attr("fill", color)
+      .attr("d", arc)
+
+    //Draw arrow paths
+    arrows.append("path")
+      .attr("fill", color)
+      .attr("d", arrow)
+
+  </script>
 {% endblock %}