first viable version

client/src/components/circle/CircleDiagram.vue

@@ -1,8 +1,7 @@
 <script setup lang="ts">
 import * as d3 from "d3";
-import {computed, onMounted, reactive, ref} from "vue";
+import {computed, onMounted} from "vue";
 import * as _ from 'underscore'
-import {useCircleStore} from "@/stores/circle";
 
 const props = defineProps<{
   circleStore: {},
@@ -38,7 +37,6 @@ const pieData = computed(() => {
     })
 
     const completionDataByPageId = _.object(_.map(completionData, function (item) {
-      console.log(item)
       return [item.page_key, item]
     }))
 
@@ -53,7 +51,6 @@ const pieData = computed(() => {
       pie.endAngle = pie.endAngle + Math.PI
       pie.arrowStartAngle = pie.endAngle + (pie.startAngle - pie.endAngle) / 2
       pie.arrowEndAngle = pie.startAngle + (pie.startAngle - pie.endAngle) / 2
-      console.log(someFinished(thisLearningSequence))
       pie.done = someFinished(thisLearningSequence)
     })
     angles = angles.reverse()
@@ -72,19 +69,13 @@ const blue900 = '#00224D',
   sky500 = '#41B5FA'
 
 
-const svg = computed(() => {
+const render = computed(() => {
-  
-})
-
-const render = computed( () => {
   const width = 450, //props.width,
     height = 450, //props.height,
     radius: number = Math.min(width, height) / 2.4,
     arrowStrokeWidth = 2
 
 
-
-
   const svg = d3.select('.circle-visualization')
     .attr('width', width)
     .attr('height', height)
@@ -107,8 +98,6 @@ const render = computed( () => {
   const g = svg.append('g').attr('transform', 'translate(' + width / 2 + ',' + height / 2 + ')')
 
 
-
-
   // Generate the pie diagram wede
   const wedgeGenerator = d3
     .arc()
@@ -148,7 +137,7 @@ const render = computed( () => {
 
   learningSequences
     .transition()
-      .duration('1000')
+    .duration('1')
     .attr('fill', (d) => {
       return d.done ? sky500 : gray300
     })
@@ -224,9 +213,6 @@ const render = computed( () => {
 
 })
 
-onMounted(async () => {
-  }
-);
 
 
 function viewBox() {
@@ -239,10 +225,12 @@ function viewBox() {
 
 <template>
   <div class="svg-container h-full content-center">
-    <pre hidden>{{pieData}}</pre>
+    <pre hidden>{{ pieData }}</pre>
-    <pre hidden> {{render}}</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"/>
     </svg>
   </div>
 </template>

client/src/views/CircleView.vue

@@ -45,7 +45,7 @@ onMounted(async () => {
               {{ circleStore.circleData.title }}
             </h1>
 
-            <div v-if="circleStore.circleData.learningSequences && circleStore.completionData" class="w-full mt-8">
+            <div v-if="circleStore.circleData.learningSequences && circleStore.flatChildren" class="w-full mt-8">
               <CircleDiagram :circle-store="circleStore"></CircleDiagram>
             </div>