added text wrapping

client/src/components/circle/LearningPathCircleDiagram.vue

@@ -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',
@@ -168,18 +168,8 @@ export default {
         let pieGenerator = d3.pie()
         let pieData = pieGenerator(pieWeights)
         _.forEach(pieData, function (pie) {
-          let index = parseInt(pie.index)
+          pie.done = circle.learning_sequences.length == 0 ? false : circle.learning_sequences[parseInt(pie.index)].done
-          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
@@ -192,8 +182,6 @@ export default {
   },
 
   mounted() {
-    console.log(this.circles)
-
     const circleWidth = 200
     const radius = (circleWidth * 0.7) / 2
     const blue900 = '#00224D',
@@ -205,7 +193,6 @@ export default {
       sky500 = '#41B5FA'
 
 
-
     // Create append pie charts to the main svg
     const circle_groups = this.svg
       .selectAll('.circle')
@@ -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()
@@ -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')
@@ -295,6 +289,33 @@ export default {
       .attr('stroke-width', 1.76)
 
     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>
@@ -308,7 +329,6 @@ export default {
   vertical-align: top;
   overflow: hidden;
   background: white;
-
 }
 
 .svg-content {
@@ -317,7 +337,6 @@ export default {
   top: 0;
   left: 0;
   background: white;
-
 }
 </style>