Fixed topics rendering

client/src/components/circle/LearningPathDiagram.vue

@@ -69,10 +69,14 @@ export default {
           let pieGenerator = d3.pie()
           let pieData = pieGenerator(pieWeights)
           pieData.forEach((pie) => {
+            pie.startAngle = pie.startAngle + Math.PI
+            pie.endAngle = pie.endAngle + Math.PI
             const lp = circle.learningSequences[parseInt(pie.index)];
             pie.done = circle.someFinishedInLearningSequence(lp.translation_key);
           });
-          circle.pieData = pieData
+          circle.pieData = pieData.reverse()
+
+
         });
         return internalCircles
       }
@@ -97,6 +101,7 @@ export default {
       sky500 = '#41B5FA'
 
     let vueRouter = this.$router
+    console.log('this.learningpath', this.learningPathStore.learningPath)
 
     // Create append pie charts to the main svg
     const circle_groups = this.svg
@@ -113,7 +118,7 @@ export default {
         d3.select(this)
           .selectAll('.learningSegmentArc')
           .transition()
-          .duration('200')
+          .duration(200)
           .attr('fill', (d) => {
             return d.done ? sky400 : gray100
           })
@@ -122,7 +127,7 @@ export default {
         d3.select(this)
           .selectAll('.learningSegmentArc')
           .transition()
-          .duration('200')
+          .duration(200)
           .attr('fill', (d) => {
             return d.done ? sky500 : gray300
           })
@@ -143,7 +148,7 @@ export default {
     const arcs = this.svg
       .selectAll('g')
       .selectAll('.learningSegmentArc')
-      .data((d) => {
+      .data((d) => {console.log('DDDD', d)
         return d.pieData
       })
       .enter()
@@ -153,7 +158,7 @@ export default {
 
     arcs
       .transition()
-      .duration('1000')
+      .duration(1000)
       .attr('fill', (d) => {
         return d.done ? sky500 : gray300
       })
@@ -175,7 +180,7 @@ export default {
 
     const topicGroups = this.svg
       .selectAll('.topic')
-      .data(this.learningPathContents.topics)
+      .data(this.learningPathStore.learningPath.topics)
       .enter()
       .append('g')
       .attr('transform', (d, i) => {