aded hover and done state

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})
       })
 
-
+    const arcGenerator = d3
-
-    // Arc Generator
-    const arc = d3
       .arc()
       .innerRadius(radius / 2)
       .padAngle(12 / 360)
       .outerRadius(radius)
 
 
-//Generate groups
+    //Generate groups
     const arcs = this.svg
       .selectAll('g')
-      .selectAll('.arc')
+      .selectAll('.learningSegmentArc')
-      .data(d => { return d.pieData})
+      .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.transition().duration('1000').attr('fill', d => {return d.done ? sky500 : gray300})
-    arcs.append('path')
+
-      .attr('d', arc)
+
+
+    //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>