added done status

client/src/components/circle/CircleDiagram.vue

@@ -64,8 +64,9 @@ function calculatePieData(circle) {
     pie.icon = learningSequences[parseInt(pie.index)].icon
     pie.startAngle = pie.startAngle + Math.PI
     pie.endAngle = pie.endAngle + Math.PI
-    pie.arrowStartAngle = pie.endAngle + (pie.startAngle- pie.endAngle) / 2
-    pie.arrowEndAngle = pie.startAngle + (pie.startAngle- pie.endAngle) / 2
+    pie.arrowStartAngle = pie.endAngle + (pie.startAngle - pie.endAngle) / 2
+    pie.arrowEndAngle = pie.startAngle + (pie.startAngle - pie.endAngle) / 2
+    pie.done = false
   })
   pieData = pieData.reverse()
   return pieData
@@ -121,6 +122,7 @@ onMounted(async () => {
       .padAngle(12 / 360)
       .outerRadius(radius)
 
+
     // Generate the arrows
     const arrowRadius = radius * 1.1
 
@@ -128,15 +130,31 @@ onMounted(async () => {
       .arc()
       .innerRadius(arrowRadius)
       .outerRadius(arrowRadius + arrowStrokeWidth)
-      .padAngle(30 / 360)
-      .startAngle(d => {return d.arrowStartAngle})
-      .endAngle(d => {return d.arrowEndAngle})
+      .padAngle(20 / 360)
+      .startAngle(d => {
+        return d.arrowStartAngle
+      })
+      .endAngle(d => {
+        return d.arrowEndAngle
+      })
 
 
     //Generate groups
-    const wedgesGroup = g.selectAll('arc').data(pieData).enter().append('g').attr('class', 'arc')
+    const wedgesGroup = g.selectAll('learningSegmentArc').data(pieData).enter().append('g')
 
-    wedgesGroup.append('path').attr('fill', sky400).attr('d', wedge)
+      .attr('class', 'learningSegmentArc')
+        .attr('role', 'button')
+        .attr('fill', gray300)
+
+  wedgesGroup
+      .transition()
+      .duration('1000')
+      .attr('fill', (d) => {
+        return d.done ? sky500 : gray300
+      })
+
+
+    wedgesGroup.append('path').attr('d', wedge)
 
 
     const learningSequenceText = wedgesGroup
@@ -164,7 +182,7 @@ onMounted(async () => {
       .attr("height", iconWidth)
       .attr("transform", function (d) {
         let translate = wedge.centroid(d)
-        translate = [translate[0] - iconWidth/2, translate[1] - iconWidth]
+        translate = [translate[0] - iconWidth / 2, translate[1] - iconWidth]
         return "translate(" + translate + ")";
       })