Fix render onMounter for CircleDiagram

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'
 
-
+function render() {
-const render = computed(() => {
   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 hidden>{{render()}}</pre>
-    <pre> </pre>
+    <svg class="circle-visualization h-full" :viewBox="viewBox()">
-    <svg class="circle-visualization h-full" :viewBox="viewBox">
-
-      <circle v-if="! pieData" cx="50" cy="50" r="50"/>
     </svg>
   </div>
 </template>

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 (learningPathStore.learningPath) {
-        if (this.circle) {
+          this.circle = learningPathStore.learningPath.circles.find(circle => circle.slug === slug);
-          const completionData = await itGet(`/api/completion/circle/${this.circle.translation_key}/`);
+          if (this.circle) {
-          this.circle.parseCompletionData(completionData);
+            const completionData = await itGet(`/api/completion/circle/${this.circle.translation_key}/`);
+            this.circle.parseCompletionData(completionData);
+          }
         }
         return Promise.resolve(this.circle)
       } catch (error) {