From 84bf372a58d3e7a7af7e14d2789fc0ee3b2c1a5f Mon Sep 17 00:00:00 2001
From: Lorenz Padberg <lorenz.padberg@iterativ.ch>
Date: Wed, 8 Jun 2022 16:17:24 +0200
Subject: [PATCH] added first version of cirlce diagram

---
 .../src/components/circle/CircleDiagram.vue   | 92 +++++++++++++++++++
 .../components/circle/SimpleCircleDiagram.vue | 86 +++++++++++++++--
 client/src/views/LearningPathView.vue         | 20 ++--
 3 files changed, 179 insertions(+), 19 deletions(-)
 create mode 100644 client/src/components/circle/CircleDiagram.vue

diff --git a/client/src/components/circle/CircleDiagram.vue b/client/src/components/circle/CircleDiagram.vue
new file mode 100644
index 00000000..e850a3a7
--- /dev/null
+++ b/client/src/components/circle/CircleDiagram.vue
@@ -0,0 +1,92 @@
+<script>
+import * as d3 from 'd3';
+
+export default {
+  mounted() {
+
+    var data = [5, 5, 5, 5, 5];
+
+    var width = 500, height = 500, radius = Math.min(width, height) / 2.5
+
+
+    var svg = d3.select(this.$el)
+      .append('svg')
+      .attr('width', 500)
+      .attr('height', 500)
+
+
+    var 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>
+
+<style>
+.range-input {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 10px;
+}
+
+input {
+  margin-left: 10px;
+}
+</style>
+
+
+<template>
+  <div class="demo-chart" width="500" heigth="500"/>
+</template>
+
diff --git a/client/src/components/circle/SimpleCircleDiagram.vue b/client/src/components/circle/SimpleCircleDiagram.vue
index e213eba3..e6b976ca 100644
--- a/client/src/components/circle/SimpleCircleDiagram.vue
+++ b/client/src/components/circle/SimpleCircleDiagram.vue
@@ -1,13 +1,87 @@
-<template>
-$END$
-</template>
-
 <script>
+import * as d3 from 'd3';
+
 export default {
-name: "SimpleCircleDiagram"
+  props: {
+    learningSequeces: {required: false,
+      default: [{title: '', done: false}, {title: '', done: false}, {title: '', done: false}, {title: '', done: false}]},
+     width: {
+      default: 250,
+      type: Number,
+    },
+    height: {
+      default: 250,
+      type: Number,
+    }
+  },
+  computed: {
+    pieData () {
+      return new Array(this.learningSequeces.length).fill(1);
+    },
+    viewBox() {
+      return `0 0 ${this.width} ${this.height}`;
+    }
+
+  },
+
+  mounted() {
+    console.log(this.pieData)
+    var data = this.pieData;
+
+    var width = this.width, height = this.height, radius = Math.min(width, height) / 2.5
+
+
+    var svg = d3.select(this.$el)
+      .append('svg')
+      .attr('width', width)
+      .attr('height', height)
+
+
+    var 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 groups
+    var arcs = g.selectAll("arc")
+      .data(pie(data))
+      .enter()
+      .append("g")
+      .attr("class", "arc")
+
+//Draw arc paths
+    arcs.append("path")
+      .attr("fill", color)
+      .attr("d", arc)
+  }
 }
+
 </script>
 
-<style scoped>
+<style>
+.range-input {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 10px;
+}
 
+input {
+  margin-left: 10px;
+}
 </style>
+
+
+<template>
+    <svg class="demo-chart" :viewBox="viewBox"> </svg>
+</template>
+
diff --git a/client/src/views/LearningPathView.vue b/client/src/views/LearningPathView.vue
index 0cd084e5..6031cc7a 100644
--- a/client/src/views/LearningPathView.vue
+++ b/client/src/views/LearningPathView.vue
@@ -3,10 +3,10 @@ import axios from 'axios';
 import * as log from 'loglevel';
 
 import MainNavigationBar from '../components/MainNavigationBar.vue';
-import LearningSequence from '../components/circle/LearningSequence.vue';
+import SimpleCircleDiagram from '../components/circle/SimpleCircleDiagram.vue';
 
 export default {
-  components: {LearningSequence, MainNavigationBar},
+  components: {MainNavigationBar, SimpleCircleDiagram},
   props: ['learningPathSlug',],
   data() {
     return {
@@ -23,7 +23,6 @@ export default {
       method: 'get',
       url: `/learnpath/api/learningpath/${this.learningPathSlug}/`,
     }).then((response) => {
-      log.debug(response.data);
       this.learningPathData = response.data
 
 
@@ -39,7 +38,6 @@ export default {
         }
 
       response.data.children.forEach((child) => {
-        console.log(child, '////')
         if (child.type === 'learnpath.Topic') {
           if (topic.id != 0){
             learningPathContents.topics.push(topic)
@@ -57,10 +55,6 @@ export default {
 
 
       this.learningPathContents = learningPathContents;
-      console.log(learningPathContents)
-
-      // extract cirlces
-
 
     });
 
@@ -80,11 +74,11 @@ export default {
         <div class="m-8 p-4 topic border-l flex flex-col justify-start" v-for="topic in learningPathContents.topics">
           <div class="font-bold text-blue-900 mb-4">{{topic.title}}</div>
           <div class="flex flex-row">
-            <div class="circle mr-8" v-for="circle in topic.circles">
-            <img src="@/assets/circle-analyse.svg" alt="" height="200" width="200">
+            <button class="circle mr-8" aria-label="circle.title" v-for="circle in topic.circles">
+            <SimpleCircleDiagram class="w-48 h-48"></SimpleCircleDiagram>
             <div class="text-center text-xl text-blue-900 font-bold mt-4">{{ circle.title }}</div>
 
-          </div>
+          </button>
 
 
           </div>
@@ -106,9 +100,9 @@ export default {
           </div>
           <div class="p-8  border-l ">Nächster Schirtt
             <h3>Analyse: Anwenden</h3>
-            <div class="btn-blue mt-4">
+            <button class="btn-blue mt-4">
               Los geht's
-            </div>
+            </button>
           </div>
 
         </div>