From 1ba30fd663f4c2a5bc6f542db6a975c32b9bcd13 Mon Sep 17 00:00:00 2001
From: Lorenz Padberg <lorenz.padberg@iterativ.ch>
Date: Tue, 14 Jun 2022 17:46:30 +0200
Subject: [PATCH 01/10] f

---
 .../src/components/circle/CircleDiagram.vue   |  79 +++-----
 .../circle/LearningPathCircleDiagram.vue      | 171 ++++++++----------
 client/src/components/circle/italy.json       |   0
 client/src/components/circle/map.html         |  10 +
 client/src/views/LearningPathView.vue         |   4 +-
 5 files changed, 121 insertions(+), 143 deletions(-)
 create mode 100644 client/src/components/circle/italy.json
 create mode 100644 client/src/components/circle/map.html

diff --git a/client/src/components/circle/CircleDiagram.vue b/client/src/components/circle/CircleDiagram.vue
index e850a3a7..3f2e4ef6 100644
--- a/client/src/components/circle/CircleDiagram.vue
+++ b/client/src/components/circle/CircleDiagram.vue
@@ -1,75 +1,58 @@
 <script>
-import * as d3 from 'd3';
+import * as d3 from 'd3'
 
 export default {
   mounted() {
+    const data = [5, 5, 5, 5, 5]
 
-    var data = [5, 5, 5, 5, 5];
+    const width = 500,
+      height = 500,
+      radius = Math.min(width, height) / 2.5
 
-    var width = 500, height = 500, radius = Math.min(width, height) / 2.5
+    const svg = d3.select(this.$el).append('svg').attr('width', 500).attr('height', 500)
 
+    const g = svg.append('g').attr('transform', 'translate(' + width / 2 + ',' + height / 2 + ')')
 
-    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';
+    const color = '#99C7E7'
 
     // Generate the pie
-    var pie = d3.pie();
+    const pie = d3.pie()
 
-// Generate the arcs
-    var arc = d3
+    // Generate the arcs
+    const arc = d3
       .arc()
       .innerRadius(radius / 2.5)
       .padAngle(12 / 360)
-      .outerRadius(radius);
+      .outerRadius(radius)
 
-// Generate the arrows
-    var arrow = d3.arc()
+    // Generate the arrows
+    const arrow = d3
+      .arc()
       .innerRadius(radius * 1.15)
       .padAngle(30 / 360)
-      .outerRadius(radius * 1.16);
+      .outerRadius(radius * 1.16)
 
+    //Generate groups
+    const arcs = g.selectAll('arc').data(pie(data)).enter().append('g').attr('class', 'arc')
 
-//Generate groups
-    var arcs = g.selectAll("arc")
+    //Generate groups
+    const arrows = g
+      .selectAll('arrow')
       .data(pie(data))
       .enter()
-      .append("g")
-      .attr("class", "arc")
+      .append('g')
+      .attr('class', 'arrow')
+      .attr('marker-start', 'url(#triangle)')
 
+    const markers = g.selectAll('arrow').attr('transform', 'translate(60, 60) rotate(30)')
 
-//Generate groups
-    var arrows = g.selectAll("arrow")
-      .data(pie(data))
-      .enter()
-      .append("g")
-      .attr("class", "arrow")
-      .attr("marker-start", "url(#triangle)")
+    //Draw arc paths
+    arcs.append('path').attr('fill', color).attr('d', arc)
 
-    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)
-
-
-  }
+    //Draw arrow paths
+    arrows.append('path').attr('fill', color).attr('d', arrow)
+  },
 }
-
-
 </script>
 
 <style>
@@ -85,8 +68,6 @@ input {
 }
 </style>
 
-
 <template>
   <div class="demo-chart" width="500" heigth="500"/>
 </template>
-
diff --git a/client/src/components/circle/LearningPathCircleDiagram.vue b/client/src/components/circle/LearningPathCircleDiagram.vue
index 8cc97a90..0e1cc1a4 100644
--- a/client/src/components/circle/LearningPathCircleDiagram.vue
+++ b/client/src/components/circle/LearningPathCircleDiagram.vue
@@ -2,7 +2,6 @@
 import * as d3 from 'd3'
 import * as _ from 'underscore'
 
-
 export default {
   props: {
     learninglearningPathContents: {
@@ -102,51 +101,115 @@ export default {
     },
   },
   computed: {
-
     viewBox() {
       return `0 0 ${this.width} ${this.height}`
     },
     circles() {
-      return _.flatten(_.pluck(this.learninglearningPathContents.topics, 'circles'));
+
+      let internalCircles = _.flatten(_.pluck(this.learninglearningPathContents.topics, 'circles'))
+      _.forEach(internalCircles, function (circle) {
+        let pieWeights = new Array(Math.max(circle.learning_sequences.length, 1)).fill(1)
+        let pieGenerator = d3.pie()
+        let pieData = pieGenerator(pieWeights)
+        circle.pieData = pieData
+      });
+      return internalCircles
     },
     svg() {
-
       const width = this.width
       const height = this.height
       return d3.select(this.$el).append('svg').attr('width', width).attr('height', height)
-    }
-
+    },
   },
 
   mounted() {
-
     function getPieDataForCircle(circle) {
-      const newArray = new Array(Math.max(d[2].learning_sequences.length, 1)).fill(1)
-      return newArray
+      return new Array(Math.max(circle.learning_sequences.length, 1)).fill(1)
     }
 
-    const learningPathContents = []
+    console.log(this.circles)
 
-    const data = this.pieData
 
     const circleWidth = 150
-
-
     const radius = (circleWidth * 0.7) / 2
-    console.log(this.viewBox)
 
 
-    const cicles = this.svg
-      .selectAll('circle')
+    // Create append pie charts to the main svg
+    const pie = this.svg.selectAll('.pie')
+      .data(this.circles)
+
+    pie
+      .enter()
+      .append('g')
+      .attr('class', 'pie')
+      .attr('fill', 'red')
+      .attr('transform', (d, i) => {
+        let x_coord = (i + 1) * circleWidth - radius + 100
+        return 'translate(' + x_coord + ', 40)'
+      })
+
+    let g = this.svg.selectAll('.pie')
+      // .append('circle')
+      // .attr('r', d => {
+      //   return 30
+      // })
+      // .attr('fill', 'green')
+      // .attr('class', 'test')
+
+
+
+    //
+    // let g = this.svg.selectAll('g').data(d => {
+    //   if (d) {
+    //     console.log(d.pieData + 'sdfklm');
+    //     return d.pieData
+    //   } else {
+    //     console.log('sdf')
+    //     return []
+    //   }
+    // })
+
+
+    g.enter().append('g').attr('class', 'arc')
+
+    const arc = d3.arc()
+      .outerRadius(300)
+      .innerRadius(0);
+
+    g.append('path').attr('fill', 'red').attr('d', arc)
+
+
+
+    // //Generate groups
+    // const arcs = g
+    //   .selectAll('arc')
+    //   .data(pie([5, 5, 5, 5]))
+    //   .enter()
+    //   .append('path')
+    //   .attr('d', arc)
+
+    // const pies =  g.selectAll('arcs')
+    //   .data([1, 2, 3])
+    //   .enter()
+    //   .append('g')
+    //   .attr('cx', (d, i) => {
+    //     return (i + 1) * circleWidth - radius
+    //   })
+    //   .attr('cy', 150)
+    //   .attr('d', arcs)
+
+    const circles = this.svg
+      .selectAll('.blunt_circles')
       .data(this.circles)
       .enter()
       .append('circle')
+      .attr('class', 'blunt_circles')
       .attr('cx', (d, i) => {
         return (i + 1) * circleWidth - radius
       })
       .attr('cy', 150)
       .attr('r', radius)
-      .attr('fill', '#99C7E7')
+     .attr('stroke', 'black')
 
     const circlesText = this.svg
       .selectAll('.circlesText')
@@ -196,80 +259,6 @@ export default {
       .attr('y2', 270)
       .attr('class', 'stroke-gray-500')
       .attr('stroke-width', 1.76)
-
-
-    const g = this.svg.append('g').attr('transform', 'translate(' + this.width / 2 + ',' + this.height / 2 + ')')
-
-
-    // Generate the pie
-    const pie = d3.pie()
-
-    // Generate the arcs
-    const arc = d3
-      .arc()
-      .innerRadius(radius / 2)
-      .padAngle(12 / 360)
-      .outerRadius(radius)
-
-
-    //Generate groups
-    const arcs = g.selectAll('arc')
-      .data(pie(d => getPieDataForCircle(d)))
-      .enter()
-      .append('g')
-      .attr('class', 'arc')
-
-
-    //Draw arc paths
-    arcs.append('path')
-      .attr('d', arc)
-
-    // Add the path using this helper function
-
-    //     console.log(this.pieData)
-    //     const data = this.pieData
-    //
-    //     const width = this.width
-    //     const height = this.height
-    //     const radius = Math.min(width, height) / 2.5
-    //     console.log(this.viewBox)
-    //
-    //
-    //     const svg = d3.select(this.$el)
-    //       .append('svg')
-    //       .attr('width', width)
-    //       .attr('height', height)
-    //
-    //
-    //     const g = svg.append('g').attr('transform', 'translate(' + width / 2 + ',' + height / 2 + ')')
-    //
-    //
-    //     // Generate the pie
-    //     const pie = d3.pie()
-    //
-    // // Generate the arcs
-    //     const arc = d3
-    //       .arc()
-    //       .innerRadius(radius / 2)
-    //       .padAngle(12 / 360)
-    //       .outerRadius(radius)
-    //
-    //
-    // //Generate groups
-    //     const arcs = g.selectAll('arc')
-    //       .data(pie(data))
-    //       .enter()
-    //       .append('g')
-    //       .attr('class', 'arc')
-    //
-    //
-    // //Draw arc paths
-    //     arcs.append('path')
-    //       .attr('d', arc)
-    //
-    //
-    //   }
-    //
   },
 }
 </script>
diff --git a/client/src/components/circle/italy.json b/client/src/components/circle/italy.json
new file mode 100644
index 00000000..e69de29b
diff --git a/client/src/components/circle/map.html b/client/src/components/circle/map.html
new file mode 100644
index 00000000..6b6499c3
--- /dev/null
+++ b/client/src/components/circle/map.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>$Title$</title>
+</head>
+<body>
+$END$
+</body>
+</html>
diff --git a/client/src/views/LearningPathView.vue b/client/src/views/LearningPathView.vue
index 1f54ea75..7fbca5dd 100644
--- a/client/src/views/LearningPathView.vue
+++ b/client/src/views/LearningPathView.vue
@@ -47,13 +47,11 @@ export default {
           topic.circles = []
         }
         if (child.type === 'learnpath.Circle') {
-          console.log(child)
           topic.circles.push(child)
         }
       });
       learningPathContents.topics.push(topic)
-      console.log(learningPathContents)
-      console.log('oskadfjnmlasdmflkmsadlf')
+
 
 
       this.learningPathContents = learningPathContents;

From 21f69338b624ee243c82bf9737ca5b105544811f Mon Sep 17 00:00:00 2001
From: Lorenz Padberg <lorenz.padberg@iterativ.ch>
Date: Tue, 14 Jun 2022 17:46:30 +0200
Subject: [PATCH 02/10] f

---
 .../src/components/circle/CircleDiagram.vue   |  79 +++-----
 .../circle/LearningPathCircleDiagram.vue      | 171 ++++++++----------
 client/src/components/circle/italy.json       |   0
 client/src/components/circle/map.html         |  10 +
 client/src/views/LearningPathView.vue         |   4 +-
 5 files changed, 121 insertions(+), 143 deletions(-)
 create mode 100644 client/src/components/circle/italy.json
 create mode 100644 client/src/components/circle/map.html

diff --git a/client/src/components/circle/CircleDiagram.vue b/client/src/components/circle/CircleDiagram.vue
index e850a3a7..3f2e4ef6 100644
--- a/client/src/components/circle/CircleDiagram.vue
+++ b/client/src/components/circle/CircleDiagram.vue
@@ -1,75 +1,58 @@
 <script>
-import * as d3 from 'd3';
+import * as d3 from 'd3'
 
 export default {
   mounted() {
+    const data = [5, 5, 5, 5, 5]
 
-    var data = [5, 5, 5, 5, 5];
+    const width = 500,
+      height = 500,
+      radius = Math.min(width, height) / 2.5
 
-    var width = 500, height = 500, radius = Math.min(width, height) / 2.5
+    const svg = d3.select(this.$el).append('svg').attr('width', 500).attr('height', 500)
 
+    const g = svg.append('g').attr('transform', 'translate(' + width / 2 + ',' + height / 2 + ')')
 
-    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';
+    const color = '#99C7E7'
 
     // Generate the pie
-    var pie = d3.pie();
+    const pie = d3.pie()
 
-// Generate the arcs
-    var arc = d3
+    // Generate the arcs
+    const arc = d3
       .arc()
       .innerRadius(radius / 2.5)
       .padAngle(12 / 360)
-      .outerRadius(radius);
+      .outerRadius(radius)
 
-// Generate the arrows
-    var arrow = d3.arc()
+    // Generate the arrows
+    const arrow = d3
+      .arc()
       .innerRadius(radius * 1.15)
       .padAngle(30 / 360)
-      .outerRadius(radius * 1.16);
+      .outerRadius(radius * 1.16)
 
+    //Generate groups
+    const arcs = g.selectAll('arc').data(pie(data)).enter().append('g').attr('class', 'arc')
 
-//Generate groups
-    var arcs = g.selectAll("arc")
+    //Generate groups
+    const arrows = g
+      .selectAll('arrow')
       .data(pie(data))
       .enter()
-      .append("g")
-      .attr("class", "arc")
+      .append('g')
+      .attr('class', 'arrow')
+      .attr('marker-start', 'url(#triangle)')
 
+    const markers = g.selectAll('arrow').attr('transform', 'translate(60, 60) rotate(30)')
 
-//Generate groups
-    var arrows = g.selectAll("arrow")
-      .data(pie(data))
-      .enter()
-      .append("g")
-      .attr("class", "arrow")
-      .attr("marker-start", "url(#triangle)")
+    //Draw arc paths
+    arcs.append('path').attr('fill', color).attr('d', arc)
 
-    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)
-
-
-  }
+    //Draw arrow paths
+    arrows.append('path').attr('fill', color).attr('d', arrow)
+  },
 }
-
-
 </script>
 
 <style>
@@ -85,8 +68,6 @@ input {
 }
 </style>
 
-
 <template>
   <div class="demo-chart" width="500" heigth="500"/>
 </template>
-
diff --git a/client/src/components/circle/LearningPathCircleDiagram.vue b/client/src/components/circle/LearningPathCircleDiagram.vue
index 8cc97a90..0e1cc1a4 100644
--- a/client/src/components/circle/LearningPathCircleDiagram.vue
+++ b/client/src/components/circle/LearningPathCircleDiagram.vue
@@ -2,7 +2,6 @@
 import * as d3 from 'd3'
 import * as _ from 'underscore'
 
-
 export default {
   props: {
     learninglearningPathContents: {
@@ -102,51 +101,115 @@ export default {
     },
   },
   computed: {
-
     viewBox() {
       return `0 0 ${this.width} ${this.height}`
     },
     circles() {
-      return _.flatten(_.pluck(this.learninglearningPathContents.topics, 'circles'));
+
+      let internalCircles = _.flatten(_.pluck(this.learninglearningPathContents.topics, 'circles'))
+      _.forEach(internalCircles, function (circle) {
+        let pieWeights = new Array(Math.max(circle.learning_sequences.length, 1)).fill(1)
+        let pieGenerator = d3.pie()
+        let pieData = pieGenerator(pieWeights)
+        circle.pieData = pieData
+      });
+      return internalCircles
     },
     svg() {
-
       const width = this.width
       const height = this.height
       return d3.select(this.$el).append('svg').attr('width', width).attr('height', height)
-    }
-
+    },
   },
 
   mounted() {
-
     function getPieDataForCircle(circle) {
-      const newArray = new Array(Math.max(d[2].learning_sequences.length, 1)).fill(1)
-      return newArray
+      return new Array(Math.max(circle.learning_sequences.length, 1)).fill(1)
     }
 
-    const learningPathContents = []
+    console.log(this.circles)
 
-    const data = this.pieData
 
     const circleWidth = 150
-
-
     const radius = (circleWidth * 0.7) / 2
-    console.log(this.viewBox)
 
 
-    const cicles = this.svg
-      .selectAll('circle')
+    // Create append pie charts to the main svg
+    const pie = this.svg.selectAll('.pie')
+      .data(this.circles)
+
+    pie
+      .enter()
+      .append('g')
+      .attr('class', 'pie')
+      .attr('fill', 'red')
+      .attr('transform', (d, i) => {
+        let x_coord = (i + 1) * circleWidth - radius + 100
+        return 'translate(' + x_coord + ', 40)'
+      })
+
+    let g = this.svg.selectAll('.pie')
+      // .append('circle')
+      // .attr('r', d => {
+      //   return 30
+      // })
+      // .attr('fill', 'green')
+      // .attr('class', 'test')
+
+
+
+    //
+    // let g = this.svg.selectAll('g').data(d => {
+    //   if (d) {
+    //     console.log(d.pieData + 'sdfklm');
+    //     return d.pieData
+    //   } else {
+    //     console.log('sdf')
+    //     return []
+    //   }
+    // })
+
+
+    g.enter().append('g').attr('class', 'arc')
+
+    const arc = d3.arc()
+      .outerRadius(300)
+      .innerRadius(0);
+
+    g.append('path').attr('fill', 'red').attr('d', arc)
+
+
+
+    // //Generate groups
+    // const arcs = g
+    //   .selectAll('arc')
+    //   .data(pie([5, 5, 5, 5]))
+    //   .enter()
+    //   .append('path')
+    //   .attr('d', arc)
+
+    // const pies =  g.selectAll('arcs')
+    //   .data([1, 2, 3])
+    //   .enter()
+    //   .append('g')
+    //   .attr('cx', (d, i) => {
+    //     return (i + 1) * circleWidth - radius
+    //   })
+    //   .attr('cy', 150)
+    //   .attr('d', arcs)
+
+    const circles = this.svg
+      .selectAll('.blunt_circles')
       .data(this.circles)
       .enter()
       .append('circle')
+      .attr('class', 'blunt_circles')
       .attr('cx', (d, i) => {
         return (i + 1) * circleWidth - radius
       })
       .attr('cy', 150)
       .attr('r', radius)
-      .attr('fill', '#99C7E7')
+     .attr('stroke', 'black')
 
     const circlesText = this.svg
       .selectAll('.circlesText')
@@ -196,80 +259,6 @@ export default {
       .attr('y2', 270)
       .attr('class', 'stroke-gray-500')
       .attr('stroke-width', 1.76)
-
-
-    const g = this.svg.append('g').attr('transform', 'translate(' + this.width / 2 + ',' + this.height / 2 + ')')
-
-
-    // Generate the pie
-    const pie = d3.pie()
-
-    // Generate the arcs
-    const arc = d3
-      .arc()
-      .innerRadius(radius / 2)
-      .padAngle(12 / 360)
-      .outerRadius(radius)
-
-
-    //Generate groups
-    const arcs = g.selectAll('arc')
-      .data(pie(d => getPieDataForCircle(d)))
-      .enter()
-      .append('g')
-      .attr('class', 'arc')
-
-
-    //Draw arc paths
-    arcs.append('path')
-      .attr('d', arc)
-
-    // Add the path using this helper function
-
-    //     console.log(this.pieData)
-    //     const data = this.pieData
-    //
-    //     const width = this.width
-    //     const height = this.height
-    //     const radius = Math.min(width, height) / 2.5
-    //     console.log(this.viewBox)
-    //
-    //
-    //     const svg = d3.select(this.$el)
-    //       .append('svg')
-    //       .attr('width', width)
-    //       .attr('height', height)
-    //
-    //
-    //     const g = svg.append('g').attr('transform', 'translate(' + width / 2 + ',' + height / 2 + ')')
-    //
-    //
-    //     // Generate the pie
-    //     const pie = d3.pie()
-    //
-    // // Generate the arcs
-    //     const arc = d3
-    //       .arc()
-    //       .innerRadius(radius / 2)
-    //       .padAngle(12 / 360)
-    //       .outerRadius(radius)
-    //
-    //
-    // //Generate groups
-    //     const arcs = g.selectAll('arc')
-    //       .data(pie(data))
-    //       .enter()
-    //       .append('g')
-    //       .attr('class', 'arc')
-    //
-    //
-    // //Draw arc paths
-    //     arcs.append('path')
-    //       .attr('d', arc)
-    //
-    //
-    //   }
-    //
   },
 }
 </script>
diff --git a/client/src/components/circle/italy.json b/client/src/components/circle/italy.json
new file mode 100644
index 00000000..e69de29b
diff --git a/client/src/components/circle/map.html b/client/src/components/circle/map.html
new file mode 100644
index 00000000..6b6499c3
--- /dev/null
+++ b/client/src/components/circle/map.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>$Title$</title>
+</head>
+<body>
+$END$
+</body>
+</html>
diff --git a/client/src/views/LearningPathView.vue b/client/src/views/LearningPathView.vue
index 1f54ea75..7fbca5dd 100644
--- a/client/src/views/LearningPathView.vue
+++ b/client/src/views/LearningPathView.vue
@@ -47,13 +47,11 @@ export default {
           topic.circles = []
         }
         if (child.type === 'learnpath.Circle') {
-          console.log(child)
           topic.circles.push(child)
         }
       });
       learningPathContents.topics.push(topic)
-      console.log(learningPathContents)
-      console.log('oskadfjnmlasdmflkmsadlf')
+
 
 
       this.learningPathContents = learningPathContents;

From b24bbc3f6280e1c276eaffa9d4a12ca295604c34 Mon Sep 17 00:00:00 2001
From: Lorenz Padberg <lorenz.padberg@iterativ.ch>
Date: Wed, 15 Jun 2022 14:12:50 +0200
Subject: [PATCH 03/10] circles working

---
 .../circle/LearningPathCircleDiagram.vue      | 103 +++++-------------
 1 file changed, 26 insertions(+), 77 deletions(-)

diff --git a/client/src/components/circle/LearningPathCircleDiagram.vue b/client/src/components/circle/LearningPathCircleDiagram.vue
index 0e1cc1a4..314d49b9 100644
--- a/client/src/components/circle/LearningPathCircleDiagram.vue
+++ b/client/src/components/circle/LearningPathCircleDiagram.vue
@@ -123,106 +123,55 @@ export default {
   },
 
   mounted() {
-    function getPieDataForCircle(circle) {
-      return new Array(Math.max(circle.learning_sequences.length, 1)).fill(1)
-    }
+
 
     console.log(this.circles)
 
-
-    const circleWidth = 150
+    const circleWidth = 200
     const radius = (circleWidth * 0.7) / 2
 
 
     // Create append pie charts to the main svg
-    const pie = this.svg.selectAll('.pie')
+    const circle_groups = this.svg.selectAll('.circle')
       .data(this.circles)
-
-    pie
       .enter()
       .append('g')
-      .attr('class', 'pie')
-      .attr('fill', 'red')
+      .attr('class', 'circle')
       .attr('transform', (d, i) => {
-        let x_coord = (i + 1) * circleWidth - radius + 100
-        return 'translate(' + x_coord + ', 40)'
+        let x_coord = (i + 1) * circleWidth - radius
+        return 'translate(' + x_coord + ', 150)'
       })
 
-    let g = this.svg.selectAll('.pie')
-      // .append('circle')
-      // .attr('r', d => {
-      //   return 30
-      // })
-      // .attr('fill', 'green')
-      // .attr('class', 'test')
 
 
-
-    //
-    // let g = this.svg.selectAll('g').data(d => {
-    //   if (d) {
-    //     console.log(d.pieData + 'sdfklm');
-    //     return d.pieData
-    //   } else {
-    //     console.log('sdf')
-    //     return []
-    //   }
-    // })
+    // Arc Generator
+    const arc = d3
+      .arc()
+      .innerRadius(radius / 2)
+      .padAngle(12 / 360)
+      .outerRadius(radius)
 
 
-    g.enter().append('g').attr('class', 'arc')
-
-    const arc = d3.arc()
-      .outerRadius(300)
-      .innerRadius(0);
-
-    g.append('path').attr('fill', 'red').attr('d', arc)
-
-
-
-    // //Generate groups
-    // const arcs = g
-    //   .selectAll('arc')
-    //   .data(pie([5, 5, 5, 5]))
-    //   .enter()
-    //   .append('path')
-    //   .attr('d', arc)
-
-    // const pies =  g.selectAll('arcs')
-    //   .data([1, 2, 3])
-    //   .enter()
-    //   .append('g')
-    //   .attr('cx', (d, i) => {
-    //     return (i + 1) * circleWidth - radius
-    //   })
-    //   .attr('cy', 150)
-    //   .attr('d', arcs)
-
-    const circles = this.svg
-      .selectAll('.blunt_circles')
-      .data(this.circles)
+//Generate groups
+    const arcs = this.svg
+      .selectAll('g')
+      .selectAll('.arc')
+      .data(d => { return d.pieData})
       .enter()
-      .append('circle')
-      .attr('class', 'blunt_circles')
-      .attr('cx', (d, i) => {
-        return (i + 1) * circleWidth - radius
-      })
-      .attr('cy', 150)
-      .attr('r', radius)
-     .attr('stroke', 'black')
+      .append('g')
+      .attr('class', 'arc')
 
-    const circlesText = this.svg
-      .selectAll('.circlesText')
-      .data(this.circles)
-      .enter()
+
+//Draw arc paths
+    arcs.append('path')
+      .attr('d', arc)
+
+    const circlesText = circle_groups
       .append('text')
-      .attr('x', (d, i) => {
-        return (i + 1) * circleWidth - radius
-      })
-      .attr('y', 150 + radius + 30)
       .attr('fill', '#00224D')
       .style('font-size', 19)
       .text((d) => d.title)
+      .attr('y', radius + 30)
       .attr('class', 'circlesText')
       .style('text-anchor', 'middle')
 

From 14b2ce0176636c9ec312beee599bb7a4da8f7f1b Mon Sep 17 00:00:00 2001
From: Lorenz Padberg <lorenz.padberg@iterativ.ch>
Date: Wed, 15 Jun 2022 16:14:19 +0200
Subject: [PATCH 04/10] aded hover and done state

---
 .../circle/LearningPathCircleDiagram.vue      | 155 ++++++++++++++----
 1 file changed, 122 insertions(+), 33 deletions(-)

diff --git a/client/src/components/circle/LearningPathCircleDiagram.vue b/client/src/components/circle/LearningPathCircleDiagram.vue
index 314d49b9..b3ef788c 100644
--- a/client/src/components/circle/LearningPathCircleDiagram.vue
+++ b/client/src/components/circle/LearningPathCircleDiagram.vue
@@ -21,7 +21,17 @@ export default {
                 slug: 'basis',
                 type: 'learnpath.Circle',
                 translation_key: '13951cfd-b36d-42d5-b84a-178f0a7da106',
-                learning_sequences: [],
+                learning_sequences: [{
+                    id: 11,
+                    title: 'Starten',
+                    done: false
+                  },
+                  {
+                    id: 13,
+                    title: 'Beobachten',
+                    done: false
+
+                  }],
               },
             ],
           },
@@ -39,7 +49,37 @@ export default {
                 slug: 'gewinnen',
                 type: 'learnpath.Circle',
                 translation_key: '23b689c9-8800-4783-9842-725ee5f3a3f1',
-                learning_sequences: [],
+                learning_sequences: [ {
+                    id: 11,
+                    title: 'Starten',
+                    done: true
+                  },
+                  {
+                    id: 13,
+                    title: 'Beobachten',
+                    done: false
+
+                  },{
+                    id: 11,
+                    title: 'Starten',
+                    done: false
+                  },
+                  {
+                    id: 13,
+                    title: 'Beobachten',
+                    done: false
+
+                  },{
+                    id: 11,
+                    title: 'Starten',
+                    done: true
+                  },
+                  {
+                    id: 13,
+                    title: 'Beobachten',
+                    done: false
+
+                  },],
               },
             ],
           },
@@ -57,7 +97,17 @@ export default {
                 slug: 'einstieg',
                 type: 'learnpath.Circle',
                 translation_key: 'a608ce8c-1482-491d-becd-2280787285b3',
-                learning_sequences: [],
+                learning_sequences: [ {
+                    id: 11,
+                    title: 'Starten',
+                    done: true
+                  },
+                  {
+                    id: 13,
+                    title: 'Beobachten',
+                    done: false
+
+                  },],
               },
               {
                 id: 10,
@@ -69,18 +119,25 @@ export default {
                   {
                     id: 11,
                     title: 'Starten',
+                    done: true
                   },
                   {
                     id: 13,
                     title: 'Beobachten',
+                    done: true
+
                   },
                   {
                     id: 18,
                     title: 'Anwenden',
+                    done: true
+
                   },
                   {
                     id: 30,
                     title: 'Üben',
+                    done: false
+
                   },
                 ],
               },
@@ -92,11 +149,11 @@ export default {
     },
 
     width: {
-      default: 1024,
+      default: 1200,
       type: Number,
     },
     height: {
-      default: 250,
+      default: 350,
       type: Number,
     },
   },
@@ -105,14 +162,26 @@ export default {
       return `0 0 ${this.width} ${this.height}`
     },
     circles() {
-
       let internalCircles = _.flatten(_.pluck(this.learninglearningPathContents.topics, 'circles'))
       _.forEach(internalCircles, function (circle) {
         let pieWeights = new Array(Math.max(circle.learning_sequences.length, 1)).fill(1)
         let pieGenerator = d3.pie()
         let pieData = pieGenerator(pieWeights)
+        _.forEach(pieData, function(pie){
+          let index = parseInt(pie.index)
+          console.log(circle)
+          if (circle.learning_sequences.length == 0) {
+            pie.done = false
+          }
+          else {
+            pie.done = circle.learning_sequences[parseInt(pie.index)].done
+          }
+        })
+
+
+
         circle.pieData = pieData
-      });
+      })
       return internalCircles
     },
     svg() {
@@ -123,59 +192,78 @@ export default {
   },
 
   mounted() {
-
-
     console.log(this.circles)
 
     const circleWidth = 200
     const radius = (circleWidth * 0.7) / 2
+    const blue900 = '#00224D',
+      blue700 = '#1A5197',
+      gray100 = '#EDF2F6',
+      gray300 = '#E0E5EC',
+      gray500 = '#B1C1CA',
+      sky400 = '#72CAFF',
+      sky500 =  '#41B5FA'
+
 
 
     // Create append pie charts to the main svg
-    const circle_groups = this.svg.selectAll('.circle')
+    const circle_groups = this.svg
+      .selectAll('.circle')
       .data(this.circles)
       .enter()
       .append('g')
       .attr('class', 'circle')
       .attr('transform', (d, i) => {
         let x_coord = (i + 1) * circleWidth - radius
-        return 'translate(' + x_coord + ', 150)'
+        return 'translate(' + x_coord + ', 200)'
+      })
+      .on('mouseover', function (d, i) {
+        d3.select(this).selectAll('.learningSegmentArc').transition().duration('200').attr('fill', d => {return d.done ? sky400 : gray100})
+      })
+      .on('mouseout', function (d, i) {
+        d3.select(this).selectAll('.learningSegmentArc').transition().duration('200').attr('fill', d => {return d.done ? sky500 : gray300})
       })
 
-
-
-    // Arc Generator
-    const arc = d3
+    const arcGenerator = d3
       .arc()
       .innerRadius(radius / 2)
       .padAngle(12 / 360)
       .outerRadius(radius)
 
 
-//Generate groups
+    //Generate groups
     const arcs = this.svg
       .selectAll('g')
-      .selectAll('.arc')
-      .data(d => { return d.pieData})
+      .selectAll('.learningSegmentArc')
+      .attr('fill', (d) => {
+        let color = 'red'
+        return color
+      } )
+      .data((d) => {
+        return d.pieData
+      })
       .enter()
       .append('g')
-      .attr('class', 'arc')
+      .attr('class', 'learningSegmentArc')
+      .attr('fill', gray300)
 
 
-//Draw arc paths
-    arcs.append('path')
-      .attr('d', arc)
+      arcs.transition().duration('1000').attr('fill', d => {return d.done ? sky500 : gray300})
+
+
+
+    //Draw arc paths
+    arcs.append('path').attr('d', arcGenerator)
 
     const circlesText = circle_groups
       .append('text')
-      .attr('fill', '#00224D')
+      .attr('fill', blue900)
       .style('font-size', 19)
       .text((d) => d.title)
       .attr('y', radius + 30)
-      .attr('class', 'circlesText')
+      .attr('class', 'circlesText text-xl font-bold')
       .style('text-anchor', 'middle')
 
-
     const topicTitles = this.svg
       .selectAll('.topicTitles')
       .data(this.learninglearningPathContents.topics)
@@ -185,13 +273,10 @@ export default {
         return i * circleWidth * d.circles.length + 50
       })
       .attr('y', 50)
-      .attr('fill', '#00224D')
-
-
+      .attr('fill', blue900)
       .style('font-size', 19)
       .text((d) => d.title)
-      .attr('class', 'topicTitles')
-
+      .attr('class', 'topicTitles font-bold')
 
     const topicLines = this.svg
       .selectAll('lines')
@@ -205,9 +290,11 @@ export default {
       .attr('x2', (d, i) => {
         return i * circleWidth * d.circles.length + 30
       })
-      .attr('y2', 270)
+      .attr('y2', 0)
       .attr('class', 'stroke-gray-500')
       .attr('stroke-width', 1.76)
+
+    topicLines.transition().duration('1000').attr('y2',350)
   },
 }
 </script>
@@ -220,7 +307,8 @@ export default {
   padding-bottom: 100%;
   vertical-align: top;
   overflow: hidden;
-  fill: rgb(65 181 250);
+    background: white;
+
 }
 
 .svg-content {
@@ -228,7 +316,8 @@ export default {
   position: absolute;
   top: 0;
   left: 0;
-  fill: rgb(65 181 250);
+    background: white;
+
 }
 </style>
 

From 7ddcd13b1009936667f2ba81ed63f8892f8acd2a Mon Sep 17 00:00:00 2001
From: Lorenz Padberg <lorenz.padberg@iterativ.ch>
Date: Wed, 15 Jun 2022 16:45:06 +0200
Subject: [PATCH 05/10] added text wrapping

---
 .../circle/LearningPathCircleDiagram.vue      | 105 +++++++++++-------
 1 file changed, 62 insertions(+), 43 deletions(-)

diff --git a/client/src/components/circle/LearningPathCircleDiagram.vue b/client/src/components/circle/LearningPathCircleDiagram.vue
index b3ef788c..7e65ac56 100644
--- a/client/src/components/circle/LearningPathCircleDiagram.vue
+++ b/client/src/components/circle/LearningPathCircleDiagram.vue
@@ -22,10 +22,10 @@ export default {
                 type: 'learnpath.Circle',
                 translation_key: '13951cfd-b36d-42d5-b84a-178f0a7da106',
                 learning_sequences: [{
-                    id: 11,
-                    title: 'Starten',
-                    done: false
-                  },
+                  id: 11,
+                  title: 'Starten',
+                  done: false
+                },
                   {
                     id: 13,
                     title: 'Beobachten',
@@ -49,17 +49,17 @@ export default {
                 slug: 'gewinnen',
                 type: 'learnpath.Circle',
                 translation_key: '23b689c9-8800-4783-9842-725ee5f3a3f1',
-                learning_sequences: [ {
-                    id: 11,
-                    title: 'Starten',
-                    done: true
-                  },
+                learning_sequences: [{
+                  id: 11,
+                  title: 'Starten',
+                  done: true
+                },
                   {
                     id: 13,
                     title: 'Beobachten',
                     done: false
 
-                  },{
+                  }, {
                     id: 11,
                     title: 'Starten',
                     done: false
@@ -69,7 +69,7 @@ export default {
                     title: 'Beobachten',
                     done: false
 
-                  },{
+                  }, {
                     id: 11,
                     title: 'Starten',
                     done: true
@@ -97,11 +97,11 @@ export default {
                 slug: 'einstieg',
                 type: 'learnpath.Circle',
                 translation_key: 'a608ce8c-1482-491d-becd-2280787285b3',
-                learning_sequences: [ {
-                    id: 11,
-                    title: 'Starten',
-                    done: true
-                  },
+                learning_sequences: [{
+                  id: 11,
+                  title: 'Starten',
+                  done: true
+                },
                   {
                     id: 13,
                     title: 'Beobachten',
@@ -111,7 +111,7 @@ export default {
               },
               {
                 id: 10,
-                title: 'Analyse',
+                title: 'Analyse des letzten Falles',
                 slug: 'analyse',
                 type: 'learnpath.Circle',
                 translation_key: '2ca5ba7a-98b8-4511-ba50-bc190714886d',
@@ -167,19 +167,9 @@ export default {
         let pieWeights = new Array(Math.max(circle.learning_sequences.length, 1)).fill(1)
         let pieGenerator = d3.pie()
         let pieData = pieGenerator(pieWeights)
-        _.forEach(pieData, function(pie){
-          let index = parseInt(pie.index)
-          console.log(circle)
-          if (circle.learning_sequences.length == 0) {
-            pie.done = false
-          }
-          else {
-            pie.done = circle.learning_sequences[parseInt(pie.index)].done
-          }
+        _.forEach(pieData, function (pie) {
+          pie.done = circle.learning_sequences.length == 0 ? false : circle.learning_sequences[parseInt(pie.index)].done
         })
-
-
-
         circle.pieData = pieData
       })
       return internalCircles
@@ -192,8 +182,6 @@ export default {
   },
 
   mounted() {
-    console.log(this.circles)
-
     const circleWidth = 200
     const radius = (circleWidth * 0.7) / 2
     const blue900 = '#00224D',
@@ -202,8 +190,7 @@ export default {
       gray300 = '#E0E5EC',
       gray500 = '#B1C1CA',
       sky400 = '#72CAFF',
-      sky500 =  '#41B5FA'
-
+      sky500 = '#41B5FA'
 
 
     // Create append pie charts to the main svg
@@ -218,11 +205,16 @@ export default {
         return 'translate(' + x_coord + ', 200)'
       })
       .on('mouseover', function (d, i) {
-        d3.select(this).selectAll('.learningSegmentArc').transition().duration('200').attr('fill', d => {return d.done ? sky400 : gray100})
+        d3.select(this).selectAll('.learningSegmentArc').transition().duration('200').attr('fill', d => {
+          return d.done ? sky400 : gray100
+        })
       })
       .on('mouseout', function (d, i) {
-        d3.select(this).selectAll('.learningSegmentArc').transition().duration('200').attr('fill', d => {return d.done ? sky500 : gray300})
+        d3.select(this).selectAll('.learningSegmentArc').transition().duration('200').attr('fill', d => {
+          return d.done ? sky500 : gray300
+        })
       })
+      .attr('role', 'button')
 
     const arcGenerator = d3
       .arc()
@@ -238,7 +230,7 @@ export default {
       .attr('fill', (d) => {
         let color = 'red'
         return color
-      } )
+      })
       .data((d) => {
         return d.pieData
       })
@@ -248,8 +240,9 @@ export default {
       .attr('fill', gray300)
 
 
-      arcs.transition().duration('1000').attr('fill', d => {return d.done ? sky500 : gray300})
-
+    arcs.transition().duration('1000').attr('fill', d => {
+      return d.done ? sky500 : gray300
+    })
 
 
     //Draw arc paths
@@ -263,6 +256,7 @@ export default {
       .attr('y', radius + 30)
       .attr('class', 'circlesText text-xl font-bold')
       .style('text-anchor', 'middle')
+      .call(wrap, 200-20);
 
     const topicTitles = this.svg
       .selectAll('.topicTitles')
@@ -294,7 +288,34 @@ export default {
       .attr('class', 'stroke-gray-500')
       .attr('stroke-width', 1.76)
 
-    topicLines.transition().duration('1000').attr('y2',350)
+    topicLines.transition().duration('1000').attr('y2', 350)
+
+
+    function wrap(text, width) {
+      text.each(function () {
+        let text = d3.select(this),
+          words = text.text().split(/\s+/).reverse(),
+          word,
+          line = [],
+          lineNumber = 0,
+          lineHeight = 1.1, // ems
+          y = text.attr('y'),
+          dy = 0,//parseFloat(text.attr('dy')),
+          tspan = text.text(null).append('tspan').attr('x', 0).attr('y', y).attr('dy', dy + 'em');
+        while (word = words.pop()) {
+          line.push(word);
+          tspan.text(line.join(' '));
+          if (tspan.node().getComputedTextLength() > width) {
+            line.pop();
+            tspan.text(line.join(' '));
+            line = [word];
+
+            tspan = text.append('tspan').attr('x', 0).attr('y', y).attr('dy', ++lineNumber * lineHeight + dy + 'em').text(word);
+          }
+        }
+      });
+    }
+
   },
 }
 </script>
@@ -307,8 +328,7 @@ export default {
   padding-bottom: 100%;
   vertical-align: top;
   overflow: hidden;
-    background: white;
-
+  background: white;
 }
 
 .svg-content {
@@ -316,8 +336,7 @@ export default {
   position: absolute;
   top: 0;
   left: 0;
-    background: white;
-
+  background: white;
 }
 </style>
 

From 46275fe775b1cdd14bb19aedb06b19cbd77604e4 Mon Sep 17 00:00:00 2001
From: Lorenz Padberg <lorenz.padberg@iterativ.ch>
Date: Mon, 27 Jun 2022 11:07:35 +0200
Subject: [PATCH 06/10] some fixes

---
 .../circle/LearningPathCircleDiagram.vue      | 178 +++++++++++-------
 client/src/views/LearningPathView.vue         |   8 +-
 2 files changed, 110 insertions(+), 76 deletions(-)

diff --git a/client/src/components/circle/LearningPathCircleDiagram.vue b/client/src/components/circle/LearningPathCircleDiagram.vue
index 7e65ac56..5ff3451a 100644
--- a/client/src/components/circle/LearningPathCircleDiagram.vue
+++ b/client/src/components/circle/LearningPathCircleDiagram.vue
@@ -21,17 +21,18 @@ export default {
                 slug: 'basis',
                 type: 'learnpath.Circle',
                 translation_key: '13951cfd-b36d-42d5-b84a-178f0a7da106',
-                learning_sequences: [{
-                  id: 11,
-                  title: 'Starten',
-                  done: false
-                },
+                learning_sequences: [
+                  {
+                    id: 11,
+                    title: 'Starten',
+                    done: false,
+                  },
                   {
                     id: 13,
                     title: 'Beobachten',
-                    done: false
-
-                  }],
+                    done: false,
+                  },
+                ],
               },
             ],
           },
@@ -49,37 +50,38 @@ export default {
                 slug: 'gewinnen',
                 type: 'learnpath.Circle',
                 translation_key: '23b689c9-8800-4783-9842-725ee5f3a3f1',
-                learning_sequences: [{
-                  id: 11,
-                  title: 'Starten',
-                  done: true
-                },
+                learning_sequences: [
                   {
-                    id: 13,
-                    title: 'Beobachten',
-                    done: false
-
-                  }, {
                     id: 11,
                     title: 'Starten',
-                    done: false
+                    done: true,
                   },
                   {
                     id: 13,
                     title: 'Beobachten',
-                    done: false
-
-                  }, {
+                    done: false,
+                  },
+                  {
                     id: 11,
                     title: 'Starten',
-                    done: true
+                    done: false,
                   },
                   {
                     id: 13,
                     title: 'Beobachten',
-                    done: false
-
-                  },],
+                    done: false,
+                  },
+                  {
+                    id: 11,
+                    title: 'Starten',
+                    done: true,
+                  },
+                  {
+                    id: 13,
+                    title: 'Beobachten',
+                    done: false,
+                  },
+                ],
               },
             ],
           },
@@ -97,17 +99,18 @@ export default {
                 slug: 'einstieg',
                 type: 'learnpath.Circle',
                 translation_key: 'a608ce8c-1482-491d-becd-2280787285b3',
-                learning_sequences: [{
-                  id: 11,
-                  title: 'Starten',
-                  done: true
-                },
+                learning_sequences: [
+                  {
+                    id: 11,
+                    title: 'Starten',
+                    done: true,
+                  },
                   {
                     id: 13,
                     title: 'Beobachten',
-                    done: false
-
-                  },],
+                    done: false,
+                  },
+                ],
               },
               {
                 id: 10,
@@ -119,25 +122,22 @@ export default {
                   {
                     id: 11,
                     title: 'Starten',
-                    done: true
+                    done: true,
                   },
                   {
                     id: 13,
                     title: 'Beobachten',
-                    done: true
-
+                    done: true,
                   },
                   {
                     id: 18,
                     title: 'Anwenden',
-                    done: true
-
+                    done: true,
                   },
                   {
                     id: 30,
                     title: 'Üben',
-                    done: false
-
+                    done: false,
                   },
                 ],
               },
@@ -149,7 +149,7 @@ export default {
     },
 
     width: {
-      default: 1200,
+      default: 800,
       type: Number,
     },
     height: {
@@ -175,13 +175,24 @@ export default {
       return internalCircles
     },
     svg() {
-      const width = this.width
-      const height = this.height
-      return d3.select(this.$el).append('svg').attr('width', width).attr('height', height)
+      const width = '100%'
+      const height = 350
+
+      const div_w = d3.select('.svg-container').style('width').split('px').shift()
+      const div_h = d3.select('.svg-container').style('height').split('px').shift()
+      console.log("my height", div_h, div_w)
+      return d3
+        .select('.learning-path-visualization')
+        .attr('viewBox', '0 0 ' + div_w + ' ' + div_h)
+        .attr('preserveAspectRatio', 'xMinYMin meet') //.attr('width', width).attr('height', height)
+    },
+    render() {
+      console.log('skljdnfksldnjf' + this.width)
     },
   },
 
   mounted() {
+    console.log(this.width, this.height)
     const circleWidth = 200
     const radius = (circleWidth * 0.7) / 2
     const blue900 = '#00224D',
@@ -192,7 +203,6 @@ export default {
       sky400 = '#72CAFF',
       sky500 = '#41B5FA'
 
-
     // Create append pie charts to the main svg
     const circle_groups = this.svg
       .selectAll('.circle')
@@ -205,14 +215,22 @@ export default {
         return 'translate(' + x_coord + ', 200)'
       })
       .on('mouseover', function (d, i) {
-        d3.select(this).selectAll('.learningSegmentArc').transition().duration('200').attr('fill', d => {
-          return d.done ? sky400 : gray100
-        })
+        d3.select(this)
+          .selectAll('.learningSegmentArc')
+          .transition()
+          .duration('200')
+          .attr('fill', (d) => {
+            return d.done ? sky400 : gray100
+          })
       })
       .on('mouseout', function (d, i) {
-        d3.select(this).selectAll('.learningSegmentArc').transition().duration('200').attr('fill', d => {
-          return d.done ? sky500 : gray300
-        })
+        d3.select(this)
+          .selectAll('.learningSegmentArc')
+          .transition()
+          .duration('200')
+          .attr('fill', (d) => {
+            return d.done ? sky500 : gray300
+          })
       })
       .attr('role', 'button')
 
@@ -222,7 +240,6 @@ export default {
       .padAngle(12 / 360)
       .outerRadius(radius)
 
-
     //Generate groups
     const arcs = this.svg
       .selectAll('g')
@@ -239,11 +256,12 @@ export default {
       .attr('class', 'learningSegmentArc')
       .attr('fill', gray300)
 
-
-    arcs.transition().duration('1000').attr('fill', d => {
-      return d.done ? sky500 : gray300
-    })
-
+    arcs
+      .transition()
+      .duration('1000')
+      .attr('fill', (d) => {
+        return d.done ? sky500 : gray300
+      })
 
     //Draw arc paths
     arcs.append('path').attr('d', arcGenerator)
@@ -256,7 +274,7 @@ export default {
       .attr('y', radius + 30)
       .attr('class', 'circlesText text-xl font-bold')
       .style('text-anchor', 'middle')
-      .call(wrap, 200-20);
+      .call(wrap, 200 - 20)
 
     const topicTitles = this.svg
       .selectAll('.topicTitles')
@@ -290,7 +308,6 @@ export default {
 
     topicLines.transition().duration('1000').attr('y2', 350)
 
-
     function wrap(text, width) {
       text.each(function () {
         let text = d3.select(this),
@@ -300,22 +317,31 @@ export default {
           lineNumber = 0,
           lineHeight = 1.1, // ems
           y = text.attr('y'),
-          dy = 0,//parseFloat(text.attr('dy')),
-          tspan = text.text(null).append('tspan').attr('x', 0).attr('y', y).attr('dy', dy + 'em');
-        while (word = words.pop()) {
-          line.push(word);
-          tspan.text(line.join(' '));
+          dy = 0, //parseFloat(text.attr('dy')),
+          tspan = text
+            .text(null)
+            .append('tspan')
+            .attr('x', 0)
+            .attr('y', y)
+            .attr('dy', dy + 'em')
+        while ((word = words.pop())) {
+          line.push(word)
+          tspan.text(line.join(' '))
           if (tspan.node().getComputedTextLength() > width) {
-            line.pop();
-            tspan.text(line.join(' '));
-            line = [word];
+            line.pop()
+            tspan.text(line.join(' '))
+            line = [word]
 
-            tspan = text.append('tspan').attr('x', 0).attr('y', y).attr('dy', ++lineNumber * lineHeight + dy + 'em').text(word);
+            tspan = text
+              .append('tspan')
+              .attr('x', 0)
+              .attr('y', y)
+              .attr('dy', ++lineNumber * lineHeight + dy + 'em')
+              .text(word)
           }
         }
-      });
+      })
     }
-
   },
 }
 </script>
@@ -331,7 +357,7 @@ export default {
   background: white;
 }
 
-.svg-content {
+.learning-path-visualization {
   display: inline-block;
   position: absolute;
   top: 0;
@@ -341,5 +367,11 @@ export default {
 </style>
 
 <template>
-  <div id="container" class="svg-container"></div>
+  <div class="svg-container">
+    <svg>
+      <rect style="fill: rgb(0, 170, 0); stroke-width: 1; stroke: rgb(0, 0, 0)" />
+    </svg>
+  </div>
+  <!--  <svg class="learning-path-visualization"  width="10%" height="10%" viewBox="0 0 50 50">-->
+  <!--  </svg>-->
 </template>
diff --git a/client/src/views/LearningPathView.vue b/client/src/views/LearningPathView.vue
index 7fbca5dd..90568c77 100644
--- a/client/src/views/LearningPathView.vue
+++ b/client/src/views/LearningPathView.vue
@@ -65,16 +65,18 @@ export default {
 </script>
 
 <template>
-  <div class="bg-gray-100 h-screen">
+  <div class="bg-gray-300 h-screen">
 
     <MainNavigationBar/>
 
     <div class="learningpath flex flex-col">
 
-      <SimpleCircleDiagram class="w-48 h-48" :learning-path-contents="learningPathContents.topics"></SimpleCircleDiagram>
-
 
       <div class="flex flex-col h-max p-6">
+              <div class="bg-green-500 h-64">
+   <SimpleCircleDiagram class="object-scale-down" :learning-path-contents="learningPathContents.topics"></SimpleCircleDiagram>
+      </div>
+
         <div class="text-blue-dark font-bold text-7xl m-12">
           {{ learningPathData.title }}
         </div>

From 0ccec140a4d8b1295ba6b3ef5e0ed79999feb717 Mon Sep 17 00:00:00 2001
From: Lorenz Padberg <lorenz.padberg@iterativ.ch>
Date: Mon, 27 Jun 2022 13:53:50 +0200
Subject: [PATCH 07/10] Added basic navigation fixed svg sizing

---
 client/src/assets/learning_path.svg           |  0
 .../circle/LearningPathCircleDiagram.vue      | 57 ++++++-------------
 client/src/views/HomeView.vue                 |  2 +-
 client/src/views/LearningPathView.vue         | 32 +++++------
 4 files changed, 34 insertions(+), 57 deletions(-)
 create mode 100644 client/src/assets/learning_path.svg

diff --git a/client/src/assets/learning_path.svg b/client/src/assets/learning_path.svg
new file mode 100644
index 00000000..e69de29b
diff --git a/client/src/components/circle/LearningPathCircleDiagram.vue b/client/src/components/circle/LearningPathCircleDiagram.vue
index 5ff3451a..233cd958 100644
--- a/client/src/components/circle/LearningPathCircleDiagram.vue
+++ b/client/src/components/circle/LearningPathCircleDiagram.vue
@@ -149,17 +149,18 @@ export default {
     },
 
     width: {
-      default: 800,
+      default: 1440,
       type: Number,
     },
     height: {
-      default: 350,
+      default: 256,
       type: Number,
     },
   },
   computed: {
     viewBox() {
-      return `0 0 ${this.width} ${this.height}`
+      console.log(this.width, this.height)
+      return `0 0 ${this.width} ${this.height* 1.5}`
     },
     circles() {
       let internalCircles = _.flatten(_.pluck(this.learninglearningPathContents.topics, 'circles'))
@@ -175,26 +176,17 @@ export default {
       return internalCircles
     },
     svg() {
-      const width = '100%'
-      const height = 350
+      return d3.select('.learning-path-visualization')
 
-      const div_w = d3.select('.svg-container').style('width').split('px').shift()
-      const div_h = d3.select('.svg-container').style('height').split('px').shift()
-      console.log("my height", div_h, div_w)
-      return d3
-        .select('.learning-path-visualization')
-        .attr('viewBox', '0 0 ' + div_w + ' ' + div_h)
-        .attr('preserveAspectRatio', 'xMinYMin meet') //.attr('width', width).attr('height', height)
-    },
-    render() {
-      console.log('skljdnfksldnjf' + this.width)
     },
+
   },
 
   mounted() {
+
     console.log(this.width, this.height)
     const circleWidth = 200
-    const radius = (circleWidth * 0.7) / 2
+    const radius = (circleWidth * 0.8) / 2
     const blue900 = '#00224D',
       blue700 = '#1A5197',
       gray100 = '#EDF2F6',
@@ -203,6 +195,8 @@ export default {
       sky400 = '#72CAFF',
       sky500 = '#41B5FA'
 
+    let vueRouter =  this.$router
+
     // Create append pie charts to the main svg
     const circle_groups = this.svg
       .selectAll('.circle')
@@ -232,6 +226,10 @@ export default {
             return d.done ? sky500 : gray300
           })
       })
+      .on('click', function (d, i) {
+        vueRouter.push('/circle/'+i.slug)
+      })
+
       .attr('role', 'button')
 
     const arcGenerator = d3
@@ -346,32 +344,11 @@ export default {
 }
 </script>
 
-<style scoped>
-.svg-container {
-  display: inline-block;
-  position: relative;
-  width: 100%;
-  padding-bottom: 100%;
-  vertical-align: top;
-  overflow: hidden;
-  background: white;
-}
-
-.learning-path-visualization {
-  display: inline-block;
-  position: absolute;
-  top: 0;
-  left: 0;
-  background: white;
-}
-</style>
 
 <template>
-  <div class="svg-container">
-    <svg>
-      <rect style="fill: rgb(0, 170, 0); stroke-width: 1; stroke: rgb(0, 0, 0)" />
+  <div class="svg-container h-full content-start	">
+    <svg class="learning-path-visualization h-full" :viewBox="viewBox">
     </svg>
   </div>
-  <!--  <svg class="learning-path-visualization"  width="10%" height="10%" viewBox="0 0 50 50">-->
-  <!--  </svg>-->
+
 </template>
diff --git a/client/src/views/HomeView.vue b/client/src/views/HomeView.vue
index de8b39f2..35d4e0b9 100644
--- a/client/src/views/HomeView.vue
+++ b/client/src/views/HomeView.vue
@@ -10,7 +10,7 @@ import MainNavigationBar from '@/components/MainNavigationBar.vue';</script>
     <div class="mt-8 flex flex-col lg:flex-row justify-start gap-4">
       <router-link class="link text-xl" to="/styleguide">Styelguide</router-link>
       <a class="link text-xl" href="/login/">Login</a>
-<!--            <router-link class="link text-xl" to="/learningpath/versicherungsvermittlerin">Lernpfad "Versicherungsvermittlerin" (Login benötigt)</router-link>-->
+           <router-link class="link text-xl" to="/learningpath/versicherungsvermittlerin">Lernpfad "Versicherungsvermittlerin" (Login benötigt)</router-link>
       <router-link class="link text-xl" to="/circle/analyse">Circle "Analyse" (Login benötigt)</router-link>
     </div>
   </main>
diff --git a/client/src/views/LearningPathView.vue b/client/src/views/LearningPathView.vue
index 90568c77..e484e8be 100644
--- a/client/src/views/LearningPathView.vue
+++ b/client/src/views/LearningPathView.vue
@@ -26,20 +26,20 @@ export default {
       this.learningPathData = response.data
 
 
-      let learningPathContents = { topics: [] }
-      let topic =       {
-            id : 0,
-            title : '',
-            slug : '',
-            type : 'learnpath.Topic',
-            translation_key : '',
-            is_visible : false,
-            cirlces : []
-        }
+      let learningPathContents = {topics: []}
+      let topic = {
+        id: 0,
+        title: '',
+        slug: '',
+        type: 'learnpath.Topic',
+        translation_key: '',
+        is_visible: false,
+        cirlces: []
+      }
 
       response.data.children.forEach((child) => {
         if (child.type === 'learnpath.Topic') {
-          if (topic.id != 0){
+          if (topic.id != 0) {
             learningPathContents.topics.push(topic)
           }
 
@@ -53,7 +53,6 @@ export default {
       learningPathContents.topics.push(topic)
 
 
-
       this.learningPathContents = learningPathContents;
 
     });
@@ -72,10 +71,11 @@ export default {
     <div class="learningpath flex flex-col">
 
 
-      <div class="flex flex-col h-max p-6">
-              <div class="bg-green-500 h-64">
-   <SimpleCircleDiagram class="object-scale-down" :learning-path-contents="learningPathContents.topics"></SimpleCircleDiagram>
-      </div>
+      <div class="flex flex-col h-max">
+        <div class="bg-white h-80 pt-8">
+<!--          <img  src="@/assets/learning_path.svg" alt="" class="h-full">-->
+          <SimpleCircleDiagram :learning-path-contents="learningPathContents.topics"></SimpleCircleDiagram>
+        </div>
 
         <div class="text-blue-dark font-bold text-7xl m-12">
           {{ learningPathData.title }}

From cf6dc509227003b38cdaee0751c05f8044c435ae Mon Sep 17 00:00:00 2001
From: Lorenz Padberg <lorenz.padberg@iterativ.ch>
Date: Mon, 27 Jun 2022 15:12:19 +0200
Subject: [PATCH 08/10] test_dani

---
 .../circle/LearningPathCircleDiagram.vue      | 294 +++++++++---------
 client/src/views/LearningPathView.vue         |  18 +-
 2 files changed, 156 insertions(+), 156 deletions(-)

diff --git a/client/src/components/circle/LearningPathCircleDiagram.vue b/client/src/components/circle/LearningPathCircleDiagram.vue
index 233cd958..a00739e1 100644
--- a/client/src/components/circle/LearningPathCircleDiagram.vue
+++ b/client/src/components/circle/LearningPathCircleDiagram.vue
@@ -4,147 +4,147 @@ import * as _ from 'underscore'
 
 export default {
   props: {
-    learninglearningPathContents: {
-      default: {
-        topics: [
-          {
-            id: 4,
-            title: 'Basissdf',
-            slug: 'basissdf',
-            type: 'learnpath.Topic',
-            translation_key: 'fdabcf72-728a-4279-ba34-e079761a14ad',
-            is_visible: false,
-            circles: [
-              {
-                id: 5,
-                title: 'Basis',
-                slug: 'basis',
-                type: 'learnpath.Circle',
-                translation_key: '13951cfd-b36d-42d5-b84a-178f0a7da106',
-                learning_sequences: [
-                  {
-                    id: 11,
-                    title: 'Starten',
-                    done: false,
-                  },
-                  {
-                    id: 13,
-                    title: 'Beobachten',
-                    done: false,
-                  },
-                ],
-              },
-            ],
-          },
-          {
-            id: 6,
-            title: 'Gewinnen von Kunden',
-            slug: 'gewinnen-von-kunden',
-            type: 'learnpath.Topic',
-            translation_key: 'e3a9a61e-2c60-4363-a4a8-d4ef4d4ff466',
-            is_visible: true,
-            circles: [
-              {
-                id: 7,
-                title: 'Gewinnen',
-                slug: 'gewinnen',
-                type: 'learnpath.Circle',
-                translation_key: '23b689c9-8800-4783-9842-725ee5f3a3f1',
-                learning_sequences: [
-                  {
-                    id: 11,
-                    title: 'Starten',
-                    done: true,
-                  },
-                  {
-                    id: 13,
-                    title: 'Beobachten',
-                    done: false,
-                  },
-                  {
-                    id: 11,
-                    title: 'Starten',
-                    done: false,
-                  },
-                  {
-                    id: 13,
-                    title: 'Beobachten',
-                    done: false,
-                  },
-                  {
-                    id: 11,
-                    title: 'Starten',
-                    done: true,
-                  },
-                  {
-                    id: 13,
-                    title: 'Beobachten',
-                    done: false,
-                  },
-                ],
-              },
-            ],
-          },
-          {
-            id: 8,
-            title: 'Beraten der Kunden',
-            slug: 'beraten-der-kunden',
-            type: 'learnpath.Topic',
-            translation_key: '66fdc053-68ee-4e53-b8e3-3b3816c4f8f4',
-            is_visible: true,
-            circles: [
-              {
-                id: 9,
-                title: 'Einstieg',
-                slug: 'einstieg',
-                type: 'learnpath.Circle',
-                translation_key: 'a608ce8c-1482-491d-becd-2280787285b3',
-                learning_sequences: [
-                  {
-                    id: 11,
-                    title: 'Starten',
-                    done: true,
-                  },
-                  {
-                    id: 13,
-                    title: 'Beobachten',
-                    done: false,
-                  },
-                ],
-              },
-              {
-                id: 10,
-                title: 'Analyse des letzten Falles',
-                slug: 'analyse',
-                type: 'learnpath.Circle',
-                translation_key: '2ca5ba7a-98b8-4511-ba50-bc190714886d',
-                learning_sequences: [
-                  {
-                    id: 11,
-                    title: 'Starten',
-                    done: true,
-                  },
-                  {
-                    id: 13,
-                    title: 'Beobachten',
-                    done: true,
-                  },
-                  {
-                    id: 18,
-                    title: 'Anwenden',
-                    done: true,
-                  },
-                  {
-                    id: 30,
-                    title: 'Üben',
-                    done: false,
-                  },
-                ],
-              },
-            ],
-          },
-        ],
-      },
+    learningPathContents: {
+      default: 34,
+      //   topics: [
+      //     {
+      //       id: 4,
+      //       title: 'Basissdf',
+      //       slug: 'basissdf',
+      //       type: 'learnpath.Topic',
+      //       translation_key: 'fdabcf72-728a-4279-ba34-e079761a14ad',
+      //       is_visible: false,
+      //       circles: [
+      //         {
+      //           id: 5,
+      //           title: 'Basis',
+      //           slug: 'basis',
+      //           type: 'learnpath.Circle',
+      //           translation_key: '13951cfd-b36d-42d5-b84a-178f0a7da106',
+      //           learning_sequences: [
+      //             {
+      //               id: 11,
+      //               title: 'Starten',
+      //               done: false,
+      //             },
+      //             {
+      //               id: 13,
+      //               title: 'Beobachten',
+      //               done: false,
+      //             },
+      //           ],
+      //         },
+      //       ],
+      //     },
+      //     // {
+      //     //   id: 6,
+      //     //   title: 'Gewinnen von Kunden',
+      //     //   slug: 'gewinnen-von-kunden',
+      //     //   type: 'learnpath.Topic',
+      //     //   translation_key: 'e3a9a61e-2c60-4363-a4a8-d4ef4d4ff466',
+      //     //   is_visible: true,
+      //     //   circles: [
+      //     //     {
+      //     //       id: 7,
+      //     //       title: 'Gewinnen',
+      //     //       slug: 'gewinnen',
+      //     //       type: 'learnpath.Circle',
+      //     //       translation_key: '23b689c9-8800-4783-9842-725ee5f3a3f1',
+      //     //       learning_sequences: [
+      //     //         {
+      //     //           id: 11,
+      //     //           title: 'Starten',
+      //     //           done: true,
+      //     //         },
+      //     //         {
+      //     //           id: 13,
+      //     //           title: 'Beobachten',
+      //     //           done: false,
+      //     //         },
+      //     //         {
+      //     //           id: 11,
+      //     //           title: 'Starten',
+      //     //           done: false,
+      //     //         },
+      //     //         {
+      //     //           id: 13,
+      //     //           title: 'Beobachten',
+      //     //           done: false,
+      //     //         },
+      //     //         {
+      //     //           id: 11,
+      //     //           title: 'Starten',
+      //     //           done: true,
+      //     //         },
+      //     //         {
+      //     //           id: 13,
+      //     //           title: 'Beobachten',
+      //     //           done: false,
+      //     //         },
+      //     //       ],
+      //     //     },
+      //     //   ],
+      //     // },
+      //     // {
+      //     //   id: 8,
+      //     //   title: 'Beraten der Kunden',
+      //     //   slug: 'beraten-der-kunden',
+      //     //   type: 'learnpath.Topic',
+      //     //   translation_key: '66fdc053-68ee-4e53-b8e3-3b3816c4f8f4',
+      //     //   is_visible: true,
+      //     //   circles: [
+      //     //     {
+      //     //       id: 9,
+      //     //       title: 'Einstieg',
+      //     //       slug: 'einstieg',
+      //     //       type: 'learnpath.Circle',
+      //     //       translation_key: 'a608ce8c-1482-491d-becd-2280787285b3',
+      //     //       learning_sequences: [
+      //     //         {
+      //     //           id: 11,
+      //     //           title: 'Starten',
+      //     //           done: true,
+      //     //         },
+      //     //         {
+      //     //           id: 13,
+      //     //           title: 'Beobachten',
+      //     //           done: false,
+      //     //         },
+      //     //       ],
+      //     //     },
+      //     //     {
+      //     //       id: 10,
+      //     //       title: 'Analyse des letzten Falles',
+      //     //       slug: 'analyse',
+      //     //       type: 'learnpath.Circle',
+      //     //       translation_key: '2ca5ba7a-98b8-4511-ba50-bc190714886d',
+      //     //       learning_sequences: [
+      //     //         {
+      //     //           id: 11,
+      //     //           title: 'Starten',
+      //     //           done: true,
+      //     //         },
+      //     //         {
+      //     //           id: 13,
+      //     //           title: 'Beobachten',
+      //     //           done: true,
+      //     //         },
+      //     //         {
+      //     //           id: 18,
+      //     //           title: 'Anwenden',
+      //     //           done: true,
+      //     //         },
+      //     //         {
+      //     //           id: 30,
+      //     //           title: 'Üben',
+      //     //           done: false,
+      //     //         },
+      //     //       ],
+      //     //     },
+      //     //   ],
+      //     // },
+      //   ],
+      // },
       type: Object,
     },
 
@@ -159,12 +159,14 @@ export default {
   },
   computed: {
     viewBox() {
-      console.log(this.width, this.height)
       return `0 0 ${this.width} ${this.height* 1.5}`
     },
     circles() {
-      let internalCircles = _.flatten(_.pluck(this.learninglearningPathContents.topics, 'circles'))
+      console.log(this.learningPathContents)
+
+      let internalCircles = _.flatten(_.pluck(this.learningPathContents.topics, 'circles'))
       _.forEach(internalCircles, function (circle) {
+        console.log('circle', circle)
         let pieWeights = new Array(Math.max(circle.learning_sequences.length, 1)).fill(1)
         let pieGenerator = d3.pie()
         let pieData = pieGenerator(pieWeights)
@@ -183,6 +185,7 @@ export default {
   },
 
   mounted() {
+    console.log('cirlces', this.circles)
 
     console.log(this.width, this.height)
     const circleWidth = 200
@@ -276,7 +279,7 @@ export default {
 
     const topicTitles = this.svg
       .selectAll('.topicTitles')
-      .data(this.learninglearningPathContents.topics)
+      .data(this.learningPathContents.topics)
       .enter()
       .append('text')
       .attr('x', (d, i) => {
@@ -290,7 +293,7 @@ export default {
 
     const topicLines = this.svg
       .selectAll('lines')
-      .data(this.learninglearningPathContents.topics)
+      .data(this.learningPathContents.topics)
       .enter()
       .append('line')
       .attr('x1', (d, i) => {
@@ -346,6 +349,7 @@ export default {
 
 
 <template>
+  <pre>{{learningPathContents}}</pre>
   <div class="svg-container h-full content-start	">
     <svg class="learning-path-visualization h-full" :viewBox="viewBox">
     </svg>
diff --git a/client/src/views/LearningPathView.vue b/client/src/views/LearningPathView.vue
index e484e8be..6661c685 100644
--- a/client/src/views/LearningPathView.vue
+++ b/client/src/views/LearningPathView.vue
@@ -5,7 +5,10 @@ import * as log from 'loglevel';
 import MainNavigationBar from '../components/MainNavigationBar.vue';
 import SimpleCircleDiagram from '../components/circle/LearningPathCircleDiagram.vue';
 
+
 export default {
+
+
   components: {MainNavigationBar, SimpleCircleDiagram},
   props: ['learningPathSlug',],
   data() {
@@ -17,14 +20,14 @@ export default {
       learningSequences: [],
     }
   },
-  mounted() {
+  beforeMount() {
     log.debug('LearningPath mounted', this.learningPathSlug);
     axios({
       method: 'get',
       url: `/learnpath/api/learningpath/${this.learningPathSlug}/`,
     }).then((response) => {
-      this.learningPathData = response.data
 
+      this.learningPathData = response.data
 
       let learningPathContents = {topics: []}
       let topic = {
@@ -36,13 +39,11 @@ export default {
         is_visible: false,
         cirlces: []
       }
-
       response.data.children.forEach((child) => {
         if (child.type === 'learnpath.Topic') {
           if (topic.id != 0) {
-            learningPathContents.topics.push(topic)
+            learningPathContents.topics.push(child)
           }
-
           topic = child
           topic.circles = []
         }
@@ -51,8 +52,6 @@ export default {
         }
       });
       learningPathContents.topics.push(topic)
-
-
       this.learningPathContents = learningPathContents;
 
     });
@@ -69,12 +68,9 @@ export default {
     <MainNavigationBar/>
 
     <div class="learningpath flex flex-col">
-
-
       <div class="flex flex-col h-max">
         <div class="bg-white h-80 pt-8">
-<!--          <img  src="@/assets/learning_path.svg" alt="" class="h-full">-->
-          <SimpleCircleDiagram :learning-path-contents="learningPathContents.topics"></SimpleCircleDiagram>
+          <SimpleCircleDiagram :learning-path-contents="learningPathContents"></SimpleCircleDiagram>
         </div>
 
         <div class="text-blue-dark font-bold text-7xl m-12">

From 6918822554794877b14599f866b4abac430bb889 Mon Sep 17 00:00:00 2001
From: Lorenz Padberg <lorenz.padberg@iterativ.ch>
Date: Mon, 27 Jun 2022 16:12:12 +0200
Subject: [PATCH 09/10] connected visualisation to real data

---
 .../src/components/circle/LearningPathCircleDiagram.vue   | 8 +-------
 client/src/views/LearningPathView.vue                     | 7 ++++---
 2 files changed, 5 insertions(+), 10 deletions(-)

diff --git a/client/src/components/circle/LearningPathCircleDiagram.vue b/client/src/components/circle/LearningPathCircleDiagram.vue
index a00739e1..56983cae 100644
--- a/client/src/components/circle/LearningPathCircleDiagram.vue
+++ b/client/src/components/circle/LearningPathCircleDiagram.vue
@@ -162,16 +162,14 @@ export default {
       return `0 0 ${this.width} ${this.height* 1.5}`
     },
     circles() {
-      console.log(this.learningPathContents)
 
       let internalCircles = _.flatten(_.pluck(this.learningPathContents.topics, 'circles'))
       _.forEach(internalCircles, function (circle) {
-        console.log('circle', circle)
         let pieWeights = new Array(Math.max(circle.learning_sequences.length, 1)).fill(1)
         let pieGenerator = d3.pie()
         let pieData = pieGenerator(pieWeights)
         _.forEach(pieData, function (pie) {
-          pie.done = circle.learning_sequences.length == 0 ? false : circle.learning_sequences[parseInt(pie.index)].done
+          pie.done = circle.learning_sequences.length === 0 ? false : circle.learning_sequences[parseInt(pie.index)].done
         })
         circle.pieData = pieData
       })
@@ -185,9 +183,6 @@ export default {
   },
 
   mounted() {
-    console.log('cirlces', this.circles)
-
-    console.log(this.width, this.height)
     const circleWidth = 200
     const radius = (circleWidth * 0.8) / 2
     const blue900 = '#00224D',
@@ -349,7 +344,6 @@ export default {
 
 
 <template>
-  <pre>{{learningPathContents}}</pre>
   <div class="svg-container h-full content-start	">
     <svg class="learning-path-visualization h-full" :viewBox="viewBox">
     </svg>
diff --git a/client/src/views/LearningPathView.vue b/client/src/views/LearningPathView.vue
index 6661c685..163f9c43 100644
--- a/client/src/views/LearningPathView.vue
+++ b/client/src/views/LearningPathView.vue
@@ -15,12 +15,12 @@ export default {
     return {
       count: 0,
       learningPathData: {},
-      learningPathContents: {},
+      learningPathContents: null,
       circles: [],
       learningSequences: [],
     }
   },
-  beforeMount() {
+  mounted() {
     log.debug('LearningPath mounted', this.learningPathSlug);
     axios({
       method: 'get',
@@ -63,7 +63,8 @@ export default {
 </script>
 
 <template>
-  <div class="bg-gray-300 h-screen">
+  <div class="bg-gray-300 h-screen" v-if="learningPathContents">
+
 
     <MainNavigationBar/>
 

From a92437ce5be8db88f882c6ef2bb14bd653d13957 Mon Sep 17 00:00:00 2001
From: Lorenz Padberg <lorenz.padberg@iterativ.ch>
Date: Mon, 27 Jun 2022 16:17:50 +0200
Subject: [PATCH 10/10] refactoring

---
 ...cleDiagram.vue => LearningPathDiagram.vue} | 280 +++++++++---------
 client/src/views/LearningPathView.vue         |   6 +-
 2 files changed, 143 insertions(+), 143 deletions(-)
 rename client/src/components/circle/{LearningPathCircleDiagram.vue => LearningPathDiagram.vue} (52%)

diff --git a/client/src/components/circle/LearningPathCircleDiagram.vue b/client/src/components/circle/LearningPathDiagram.vue
similarity index 52%
rename from client/src/components/circle/LearningPathCircleDiagram.vue
rename to client/src/components/circle/LearningPathDiagram.vue
index 56983cae..42f3aa1a 100644
--- a/client/src/components/circle/LearningPathCircleDiagram.vue
+++ b/client/src/components/circle/LearningPathDiagram.vue
@@ -5,146 +5,146 @@ import * as _ from 'underscore'
 export default {
   props: {
     learningPathContents: {
-      default: 34,
-      //   topics: [
-      //     {
-      //       id: 4,
-      //       title: 'Basissdf',
-      //       slug: 'basissdf',
-      //       type: 'learnpath.Topic',
-      //       translation_key: 'fdabcf72-728a-4279-ba34-e079761a14ad',
-      //       is_visible: false,
-      //       circles: [
-      //         {
-      //           id: 5,
-      //           title: 'Basis',
-      //           slug: 'basis',
-      //           type: 'learnpath.Circle',
-      //           translation_key: '13951cfd-b36d-42d5-b84a-178f0a7da106',
-      //           learning_sequences: [
-      //             {
-      //               id: 11,
-      //               title: 'Starten',
-      //               done: false,
-      //             },
-      //             {
-      //               id: 13,
-      //               title: 'Beobachten',
-      //               done: false,
-      //             },
-      //           ],
-      //         },
-      //       ],
-      //     },
-      //     // {
-      //     //   id: 6,
-      //     //   title: 'Gewinnen von Kunden',
-      //     //   slug: 'gewinnen-von-kunden',
-      //     //   type: 'learnpath.Topic',
-      //     //   translation_key: 'e3a9a61e-2c60-4363-a4a8-d4ef4d4ff466',
-      //     //   is_visible: true,
-      //     //   circles: [
-      //     //     {
-      //     //       id: 7,
-      //     //       title: 'Gewinnen',
-      //     //       slug: 'gewinnen',
-      //     //       type: 'learnpath.Circle',
-      //     //       translation_key: '23b689c9-8800-4783-9842-725ee5f3a3f1',
-      //     //       learning_sequences: [
-      //     //         {
-      //     //           id: 11,
-      //     //           title: 'Starten',
-      //     //           done: true,
-      //     //         },
-      //     //         {
-      //     //           id: 13,
-      //     //           title: 'Beobachten',
-      //     //           done: false,
-      //     //         },
-      //     //         {
-      //     //           id: 11,
-      //     //           title: 'Starten',
-      //     //           done: false,
-      //     //         },
-      //     //         {
-      //     //           id: 13,
-      //     //           title: 'Beobachten',
-      //     //           done: false,
-      //     //         },
-      //     //         {
-      //     //           id: 11,
-      //     //           title: 'Starten',
-      //     //           done: true,
-      //     //         },
-      //     //         {
-      //     //           id: 13,
-      //     //           title: 'Beobachten',
-      //     //           done: false,
-      //     //         },
-      //     //       ],
-      //     //     },
-      //     //   ],
-      //     // },
-      //     // {
-      //     //   id: 8,
-      //     //   title: 'Beraten der Kunden',
-      //     //   slug: 'beraten-der-kunden',
-      //     //   type: 'learnpath.Topic',
-      //     //   translation_key: '66fdc053-68ee-4e53-b8e3-3b3816c4f8f4',
-      //     //   is_visible: true,
-      //     //   circles: [
-      //     //     {
-      //     //       id: 9,
-      //     //       title: 'Einstieg',
-      //     //       slug: 'einstieg',
-      //     //       type: 'learnpath.Circle',
-      //     //       translation_key: 'a608ce8c-1482-491d-becd-2280787285b3',
-      //     //       learning_sequences: [
-      //     //         {
-      //     //           id: 11,
-      //     //           title: 'Starten',
-      //     //           done: true,
-      //     //         },
-      //     //         {
-      //     //           id: 13,
-      //     //           title: 'Beobachten',
-      //     //           done: false,
-      //     //         },
-      //     //       ],
-      //     //     },
-      //     //     {
-      //     //       id: 10,
-      //     //       title: 'Analyse des letzten Falles',
-      //     //       slug: 'analyse',
-      //     //       type: 'learnpath.Circle',
-      //     //       translation_key: '2ca5ba7a-98b8-4511-ba50-bc190714886d',
-      //     //       learning_sequences: [
-      //     //         {
-      //     //           id: 11,
-      //     //           title: 'Starten',
-      //     //           done: true,
-      //     //         },
-      //     //         {
-      //     //           id: 13,
-      //     //           title: 'Beobachten',
-      //     //           done: true,
-      //     //         },
-      //     //         {
-      //     //           id: 18,
-      //     //           title: 'Anwenden',
-      //     //           done: true,
-      //     //         },
-      //     //         {
-      //     //           id: 30,
-      //     //           title: 'Üben',
-      //     //           done: false,
-      //     //         },
-      //     //       ],
-      //     //     },
-      //     //   ],
-      //     // },
-      //   ],
-      // },
+      default: {
+        topics: [
+          {
+            id: 4,
+            title: 'Basissdf',
+            slug: 'basissdf',
+            type: 'learnpath.Topic',
+            translation_key: 'fdabcf72-728a-4279-ba34-e079761a14ad',
+            is_visible: false,
+            circles: [
+              {
+                id: 5,
+                title: 'Basis',
+                slug: 'basis',
+                type: 'learnpath.Circle',
+                translation_key: '13951cfd-b36d-42d5-b84a-178f0a7da106',
+                learning_sequences: [
+                  {
+                    id: 11,
+                    title: 'Starten',
+                    done: false,
+                  },
+                  {
+                    id: 13,
+                    title: 'Beobachten',
+                    done: false,
+                  },
+                ],
+              },
+            ],
+          },
+          // {
+          //   id: 6,
+          //   title: 'Gewinnen von Kunden',
+          //   slug: 'gewinnen-von-kunden',
+          //   type: 'learnpath.Topic',
+          //   translation_key: 'e3a9a61e-2c60-4363-a4a8-d4ef4d4ff466',
+          //   is_visible: true,
+          //   circles: [
+          //     {
+          //       id: 7,
+          //       title: 'Gewinnen',
+          //       slug: 'gewinnen',
+          //       type: 'learnpath.Circle',
+          //       translation_key: '23b689c9-8800-4783-9842-725ee5f3a3f1',
+          //       learning_sequences: [
+          //         {
+          //           id: 11,
+          //           title: 'Starten',
+          //           done: true,
+          //         },
+          //         {
+          //           id: 13,
+          //           title: 'Beobachten',
+          //           done: false,
+          //         },
+          //         {
+          //           id: 11,
+          //           title: 'Starten',
+          //           done: false,
+          //         },
+          //         {
+          //           id: 13,
+          //           title: 'Beobachten',
+          //           done: false,
+          //         },
+          //         {
+          //           id: 11,
+          //           title: 'Starten',
+          //           done: true,
+          //         },
+          //         {
+          //           id: 13,
+          //           title: 'Beobachten',
+          //           done: false,
+          //         },
+          //       ],
+          //     },
+          //   ],
+          // },
+          // {
+          //   id: 8,
+          //   title: 'Beraten der Kunden',
+          //   slug: 'beraten-der-kunden',
+          //   type: 'learnpath.Topic',
+          //   translation_key: '66fdc053-68ee-4e53-b8e3-3b3816c4f8f4',
+          //   is_visible: true,
+          //   circles: [
+          //     {
+          //       id: 9,
+          //       title: 'Einstieg',
+          //       slug: 'einstieg',
+          //       type: 'learnpath.Circle',
+          //       translation_key: 'a608ce8c-1482-491d-becd-2280787285b3',
+          //       learning_sequences: [
+          //         {
+          //           id: 11,
+          //           title: 'Starten',
+          //           done: true,
+          //         },
+          //         {
+          //           id: 13,
+          //           title: 'Beobachten',
+          //           done: false,
+          //         },
+          //       ],
+          //     },
+          //     {
+          //       id: 10,
+          //       title: 'Analyse des letzten Falles',
+          //       slug: 'analyse',
+          //       type: 'learnpath.Circle',
+          //       translation_key: '2ca5ba7a-98b8-4511-ba50-bc190714886d',
+          //       learning_sequences: [
+          //         {
+          //           id: 11,
+          //           title: 'Starten',
+          //           done: true,
+          //         },
+          //         {
+          //           id: 13,
+          //           title: 'Beobachten',
+          //           done: true,
+          //         },
+          //         {
+          //           id: 18,
+          //           title: 'Anwenden',
+          //           done: true,
+          //         },
+          //         {
+          //           id: 30,
+          //           title: 'Üben',
+          //           done: false,
+          //         },
+          //       ],
+          //     },
+          //   ],
+          // },
+        ],
+      },
       type: Object,
     },
 
diff --git a/client/src/views/LearningPathView.vue b/client/src/views/LearningPathView.vue
index 163f9c43..52f53ac0 100644
--- a/client/src/views/LearningPathView.vue
+++ b/client/src/views/LearningPathView.vue
@@ -3,13 +3,13 @@ import axios from 'axios';
 import * as log from 'loglevel';
 
 import MainNavigationBar from '../components/MainNavigationBar.vue';
-import SimpleCircleDiagram from '../components/circle/LearningPathCircleDiagram.vue';
+import LearningPathDiagram from '../components/circle/LearningPathDiagram.vue';
 
 
 export default {
 
 
-  components: {MainNavigationBar, SimpleCircleDiagram},
+  components: {MainNavigationBar, LearningPathDiagram},
   props: ['learningPathSlug',],
   data() {
     return {
@@ -71,7 +71,7 @@ export default {
     <div class="learningpath flex flex-col">
       <div class="flex flex-col h-max">
         <div class="bg-white h-80 pt-8">
-          <SimpleCircleDiagram :learning-path-contents="learningPathContents"></SimpleCircleDiagram>
+          <LearningPathDiagram :learning-path-contents="learningPathContents"></LearningPathDiagram>
         </div>
 
         <div class="text-blue-dark font-bold text-7xl m-12">