Add half done to circle diagramm

client/src/components/circle/CircleDiagram.vue

@@ -14,6 +14,13 @@ function someFinished(learningSequence) {
   return false;
 }
 
+function allFinished(learningSequence) {
+  if (circleStore.circle) {
+    return circleStore.circle.allFinishedInLearningSequence(learningSequence.translation_key);
+  }
+  return false;
+}
+
 onMounted(async () => {
   log.info('CircleDiagram mounted');
   render();
@@ -39,7 +46,8 @@ const pieData = computed(() => {
       pie.arrowStartAngle = pie.endAngle + (pie.startAngle - pie.endAngle) / 2
       pie.arrowEndAngle = pie.startAngle + (pie.startAngle - pie.endAngle) / 2
       pie.translation_key = thisLearningSequence.translation_key
-      pie.done = someFinished(thisLearningSequence)
+      pie.someFinished = someFinished(thisLearningSequence)
+      pie.allFinished = allFinished(thisLearningSequence)
     })
     angles = angles.reverse()
     return angles
@@ -54,7 +62,9 @@ const blue900 = '#00224D',
   gray300 = '#E0E5EC',
   gray500 = '#B1C1CA',
   sky400 = '#72CAFF',
-  sky500 = '#41B5FA'
+  sky500 = '#41B5FA',
+  green500 = '#54CE8B',
+  green400 = '#78DEA3'
 
 const width = 450
 const height = 450
@@ -84,6 +94,28 @@ function render() {
   const g = svg.append('g').attr('transform', 'translate(' + width / 2 + ',' + height / 2 + ')')
 
 
+  function getColor(d) {
+    let color = gray300
+    if (d.someFinished) {
+      color = sky500
+    }
+    if (d.allFinished) {
+      color = green500
+    }
+    return color
+  }
+
+  function getHoverColor(d) {
+    let color = gray100
+    if (d.someFinished) {
+      color = sky400
+    }
+    if (d.allFinished) {
+      color = green400
+    }
+    return color
+  }
+
   // Generate the pie diagram wede
   const wedgeGenerator = d3
     .arc()
@@ -108,16 +140,17 @@ function render() {
         .transition()
         .duration('200')
         .attr('fill', (d) => {
-          return d.done ? sky400 : gray100
+          return getHoverColor(d)
         })
 
+
     })
     .on('mouseout', function (d, i) {
       d3.select(this)
         .transition()
         .duration('200')
         .attr('fill', (d) => {
-          return d.done ? sky500 : gray300
+          return getColor(d)
         })
     })
     .on('click', function (d, elm) {
@@ -125,11 +158,12 @@ function render() {
       document.getElementById(elm.translation_key)?.scrollIntoView({behavior: 'smooth'})
     })
 
+
   learningSequences
     .transition()
-    .duration('1')
+    .duration(1)
     .attr('fill', (d) => {
-      return d.done ? sky500 : gray300
+      return getColor(d)
     })
 
 
@@ -208,7 +242,7 @@ function render() {
 <template>
   <div class="svg-container h-full content-center">
     <pre hidden>{{ pieData }}</pre>
-    <pre hidden>{{render()}}</pre>
+    <pre hidden>{{ render() }}</pre>
     <svg class="circle-visualization h-full">
       <circle v-if="!circleStore.circle" :cx="width / 2" :cy="height / 2" :r="radius" :color="gray300"/>
       <circle v-if="!circleStore.circle" :cx="width / 2" :cy="height / 2" :r="radius / 2.5" color="white"/>

client/src/components/circle/LearningPathDiagram.vue

@@ -72,7 +72,9 @@ export default {
       gray300 = '#E0E5EC',
       gray500 = '#B1C1CA',
       sky400 = '#72CAFF',
-      sky500 = '#41B5FA'
+      sky500 = '#41B5FA',
+      green500 = '#54CE8B',
+      green400 = '#78DEA3'
 
     let vueRouter = this.$router
 
@@ -90,7 +92,7 @@ export default {
           .transition()
           .duration(200)
           .attr('fill', (d) => {
-            return d.done ? sky400 : gray100
+            return d.done ? green400 : gray100
           })
       })
       .on('mouseout', function (d, i) {
@@ -99,7 +101,7 @@ export default {
           .transition()
           .duration(200)
           .attr('fill', (d) => {
-            return d.done ? sky500 : gray300
+            return d.done ? green500 : gray300
           })
       })
       .on('click', function (d, i) {
@@ -130,7 +132,7 @@ export default {
       .transition()
       .duration(1000)
       .attr('fill', (d) => {
-        return d.done ? sky500 : gray300
+        return d.done ? green500 : gray300
       })
 
     //Draw arc paths

client/src/components/circle/LearningSequence.vue

@@ -22,6 +22,14 @@ const someFinished = computed(() => {
   return false;
 })
 
+const allFinished = computed(() => {
+  if (props.learningSequence && circleStore.circle) {
+    return circleStore.circle.allFinishedInLearningSequence(props.learningSequence.translation_key);
+  }
+
+  return false;
+})
+
 </script>
 
 <template>
@@ -37,6 +45,7 @@ const someFinished = computed(() => {
     <div
       class="bg-white px-4 border border-gray-500 border-l-4"
       :class="{
+        'border-l-green-500': allFinished,
         'border-l-sky-500': someFinished,
         'border-l-gray-500': !someFinished,
       }"

client/src/services/circle.ts

@@ -165,6 +165,21 @@ export class Circle implements LearningWagtailPage {
     return false;
   }
 
+  public allFinishedInLearningSequence(translationKey: string): boolean {
+    if (translationKey) {
+      const finishedContents =  this.flatChildren.filter((lc) => {
+        return lc.completed && lc.parentLearningSequence?.translation_key === translationKey;
+      }).length;
+
+      const totalContents =  this.flatChildren.filter((lc) => {
+        return lc.parentLearningSequence?.translation_key === translationKey;
+      }).length;
+      return finishedContents === totalContents
+    }
+
+    return false;
+  }
+
   public parseCompletionData(completionData: CircleCompletion[]) {
     this.flatChildren.forEach((page) => {
       const pageIndex = completionData.findIndex((e) => {