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] 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