From dc0c12a3478d2c5eb3247b4053903a1b4339909c Mon Sep 17 00:00:00 2001
From: Daniel Egger <daniel.egger@gmail.com>
Date: Mon, 4 Jul 2022 15:05:19 +0200
Subject: [PATCH] Fix render onMounter for CircleDiagram

---
 .../src/components/circle/CircleDiagram.vue   | 32 ++++++++-----------
 client/src/stores/circle.ts                   | 11 ++++---
 2 files changed, 20 insertions(+), 23 deletions(-)

diff --git a/client/src/components/circle/CircleDiagram.vue b/client/src/components/circle/CircleDiagram.vue
index 4845a4f2..6e54004b 100644
--- a/client/src/components/circle/CircleDiagram.vue
+++ b/client/src/components/circle/CircleDiagram.vue
@@ -1,8 +1,9 @@
 <script setup lang="ts">
 import * as d3 from "d3";
-import {computed} from "vue";
+import {computed, onMounted} from "vue";
 import * as _ from 'underscore'
 import {useCircleStore} from '@/stores/circle';
+import * as log from 'loglevel';
 
 const props = defineProps<{
   width: {
@@ -27,6 +28,11 @@ function someFinished(learningSequence) {
   return false;
 }
 
+onMounted(async () => {
+  log.info('CircleDiagram mounted');
+  render();
+});
+
 
 const pieData = computed(() => {
   const circle = circleStore.circle
@@ -34,15 +40,12 @@ const pieData = computed(() => {
 
   if (circle) {
     console.log('initial of compute pie data ', circle)
-    let learningSequences = _.filter(circle.children, (child) => {
-      return child.type === 'learnpath.LearningSequence';
-    })
 
-    let pieWeights = new Array(Math.max(learningSequences.length, 1)).fill(1)
+    let pieWeights = new Array(Math.max(circle.learningSequences.length, 1)).fill(1)
     let pieGenerator = d3.pie()
     let angles = pieGenerator(pieWeights)
     _.forEach(angles, (pie) => {
-      const thisLearningSequence = learningSequences[parseInt(pie.index)]
+      const thisLearningSequence = circle.learningSequences[parseInt(pie.index)]
       pie.title = thisLearningSequence.title
       pie.icon = thisLearningSequence.icon
       pie.startAngle = pie.startAngle + Math.PI
@@ -66,8 +69,7 @@ const blue900 = '#00224D',
   sky400 = '#72CAFF',
   sky500 = '#41B5FA'
 
-
-const render = computed(() => {
+function render() {
   const width = 450, //props.width,
     height = 450, //props.height,
     radius: number = Math.min(width, height) / 2.4,
@@ -208,13 +210,10 @@ const render = computed(() => {
   //Draw arrow paths
   arrows.append('path').attr('fill', gray500).attr('d', arrow)
   return svg
-
-})
-
-
+}
 
 function viewBox() {
-  return `0 0 ${width} ${height}`
+  return `0 0 ${props.width} ${props.height}`
 }
 
 
@@ -224,11 +223,8 @@ function viewBox() {
 <template>
   <div class="svg-container h-full content-center">
     <pre hidden>{{ pieData }}</pre>
-    <pre hidden> {{ render }}</pre>
-    <pre> </pre>
-    <svg class="circle-visualization h-full" :viewBox="viewBox">
-
-      <circle v-if="! pieData" cx="50" cy="50" r="50"/>
+    <pre hidden>{{render()}}</pre>
+    <svg class="circle-visualization h-full" :viewBox="viewBox()">
     </svg>
   </div>
 </template>
diff --git a/client/src/stores/circle.ts b/client/src/stores/circle.ts
index c10ba0e6..9cae128f 100644
--- a/client/src/stores/circle.ts
+++ b/client/src/stores/circle.ts
@@ -20,7 +20,6 @@ export const useCircleStore = defineStore({
   state: () => {
     return {
       circle: undefined,
-      completionData: {},
       currentLearningContent: undefined,
       currentSelfEvaluation: undefined,
       page: 'INDEX',
@@ -36,10 +35,12 @@ export const useCircleStore = defineStore({
         // this.circle.parseCompletionData(completionData);
         const learningPathStore = useLearningPathStore();
         await learningPathStore.loadLearningPath('versicherungsvermittlerin');
-        this.circle = learningPathStore.learningPath.circles.find(circle => circle.slug === slug);
-        if (this.circle) {
-          const completionData = await itGet(`/api/completion/circle/${this.circle.translation_key}/`);
-          this.circle.parseCompletionData(completionData);
+        if (learningPathStore.learningPath) {
+          this.circle = learningPathStore.learningPath.circles.find(circle => circle.slug === slug);
+          if (this.circle) {
+            const completionData = await itGet(`/api/completion/circle/${this.circle.translation_key}/`);
+            this.circle.parseCompletionData(completionData);
+          }
         }
         return Promise.resolve(this.circle)
       } catch (error) {