From 3767edce04167feea9a88b6b6efaf416fddac0ce Mon Sep 17 00:00:00 2001
From: Lorenz Padberg <lorenz.padberg@iterativ.ch>
Date: Thu, 11 Aug 2022 17:11:29 +0200
Subject: [PATCH 1/2] Add half done to circle diagramm

---
 .../src/components/circle/CircleDiagram.vue   | 48 ++++++++++++++++---
 .../components/circle/LearningPathDiagram.vue | 10 ++--
 .../components/circle/LearningSequence.vue    |  9 ++++
 client/src/services/circle.ts                 | 15 ++++++
 4 files changed, 71 insertions(+), 11 deletions(-)

diff --git a/client/src/components/circle/CircleDiagram.vue b/client/src/components/circle/CircleDiagram.vue
index 1eb10a51..5f10b46a 100644
--- a/client/src/components/circle/CircleDiagram.vue
+++ b/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"/>
diff --git a/client/src/components/circle/LearningPathDiagram.vue b/client/src/components/circle/LearningPathDiagram.vue
index 6d428941..95befce9 100644
--- a/client/src/components/circle/LearningPathDiagram.vue
+++ b/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
diff --git a/client/src/components/circle/LearningSequence.vue b/client/src/components/circle/LearningSequence.vue
index e82b21ce..2de781af 100644
--- a/client/src/components/circle/LearningSequence.vue
+++ b/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,
       }"
diff --git a/client/src/services/circle.ts b/client/src/services/circle.ts
index 9b9abdcd..e467b1b9 100644
--- a/client/src/services/circle.ts
+++ b/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) => {

From 67545f474ad4b124587e6449fb30d4b8444bbe81 Mon Sep 17 00:00:00 2001
From: Lorenz Padberg <lorenz.padberg@iterativ.ch>
Date: Mon, 15 Aug 2022 15:51:51 +0200
Subject: [PATCH 2/2] Added green state to learning path diagramm

---
 .../src/components/circle/CircleDiagram.vue   |  3 +-
 .../components/circle/LearningPathDiagram.vue | 57 ++++++++++++++++---
 2 files changed, 51 insertions(+), 9 deletions(-)

diff --git a/client/src/components/circle/CircleDiagram.vue b/client/src/components/circle/CircleDiagram.vue
index 5f10b46a..c65a6481 100644
--- a/client/src/components/circle/CircleDiagram.vue
+++ b/client/src/components/circle/CircleDiagram.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import * as d3 from "d3";
 import {computed, onMounted} from "vue";
-import * as _ from 'underscore'
+import * as _ from 'lodash'
 import {useCircleStore} from '@/stores/circle';
 import * as log from 'loglevel';
 
@@ -227,7 +227,6 @@ function render() {
     return d3.select(this.nodes()[last]);
   };
 
-
   const all_arows = g.selectAll('.arrow')
   all_arows.last().remove()
 
diff --git a/client/src/components/circle/LearningPathDiagram.vue b/client/src/components/circle/LearningPathDiagram.vue
index 95befce9..2d4c6380 100644
--- a/client/src/components/circle/LearningPathDiagram.vue
+++ b/client/src/components/circle/LearningPathDiagram.vue
@@ -2,6 +2,7 @@
 import * as d3 from 'd3';
 import {useLearningPathStore} from '../../stores/learningPath';
 
+
 export default {
   props: {
     width: {
@@ -25,22 +26,41 @@ export default {
     const learningPathStore = useLearningPathStore()
     return {learningPathStore}
   },
+
+
   computed: {
     viewBox() {
       return `0 0 ${this.width} ${this.height * 1.5}`
     },
     circles() {
+
+      function someFinished(circle, learningSequence) {
+        if (circle) {
+          return circle.someFinishedInLearningSequence(learningSequence.translation_key);
+        }
+        return false;
+      }
+
+      function allFinished(circle, learningSequence) {
+        if (circle) {
+          return circle.allFinishedInLearningSequence(learningSequence.translation_key);
+        }
+        return false;
+      }
+
       if (this.learningPathStore.learningPath) {
         let internalCircles = []
         this.learningPathStore.learningPath.circles.forEach((circle) => {
-          let pieWeights = new Array(Math.max(circle.learningSequences.length, 1)).fill(1)
-          let pieGenerator = d3.pie()
+          const pieWeights = new Array(Math.max(circle.learningSequences.length, 1)).fill(1)
+          const pieGenerator = d3.pie()
           let pieData = pieGenerator(pieWeights)
           pieData.forEach((pie) => {
+            const thisLearningSequence = circle.learningSequences[parseInt(pie.index)]
             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);
+            pie.done = circle.someFinishedInLearningSequence(thisLearningSequence.translation_key);
+            pie.someFinished = someFinished(circle, thisLearningSequence)
+            pie.allFinished = allFinished(circle, thisLearningSequence)
           });
           let newCircle = {}
           newCircle.pieData = pieData.reverse()
@@ -76,6 +96,29 @@ export default {
       green500 = '#54CE8B',
       green400 = '#78DEA3'
 
+
+    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
+    }
+
     let vueRouter = this.$router
 
 
@@ -92,7 +135,7 @@ export default {
           .transition()
           .duration(200)
           .attr('fill', (d) => {
-            return d.done ? green400 : gray100
+            return getHoverColor(d)
           })
       })
       .on('mouseout', function (d, i) {
@@ -101,7 +144,7 @@ export default {
           .transition()
           .duration(200)
           .attr('fill', (d) => {
-            return d.done ? green500 : gray300
+            return getColor(d)
           })
       })
       .on('click', function (d, i) {
@@ -132,7 +175,7 @@ export default {
       .transition()
       .duration(1000)
       .attr('fill', (d) => {
-        return d.done ? green500 : gray300
+        return getColor(d)
       })
 
     //Draw arc paths