connected visualisation to real data

client/src/components/circle/LearningPathCircleDiagram.vue

@@ -162,16 +162,14 @@ export default {
       return `0 0 ${this.width} ${this.height* 1.5}`
     },
     circles() {
-      console.log(this.learningPathContents)
 
       let internalCircles = _.flatten(_.pluck(this.learningPathContents.topics, 'circles'))
       _.forEach(internalCircles, function (circle) {
-        console.log('circle', circle)
         let pieWeights = new Array(Math.max(circle.learning_sequences.length, 1)).fill(1)
         let pieGenerator = d3.pie()
         let pieData = pieGenerator(pieWeights)
         _.forEach(pieData, function (pie) {
-          pie.done = circle.learning_sequences.length == 0 ? false : circle.learning_sequences[parseInt(pie.index)].done
+          pie.done = circle.learning_sequences.length === 0 ? false : circle.learning_sequences[parseInt(pie.index)].done
         })
         circle.pieData = pieData
       })
@@ -185,9 +183,6 @@ export default {
   },
 
   mounted() {
-    console.log('cirlces', this.circles)
-
-    console.log(this.width, this.height)
     const circleWidth = 200
     const radius = (circleWidth * 0.8) / 2
     const blue900 = '#00224D',
@@ -349,7 +344,6 @@ export default {
 
 
 <template>
-  <pre>{{learningPathContents}}</pre>
   <div class="svg-container h-full content-start	">
     <svg class="learning-path-visualization h-full" :viewBox="viewBox">
     </svg>

client/src/views/LearningPathView.vue

@@ -15,12 +15,12 @@ export default {
     return {
       count: 0,
       learningPathData: {},
-      learningPathContents: {},
+      learningPathContents: null,
       circles: [],
       learningSequences: [],
     }
   },
-  beforeMount() {
+  mounted() {
     log.debug('LearningPath mounted', this.learningPathSlug);
     axios({
       method: 'get',
@@ -63,7 +63,8 @@ export default {
 </script>
 
 <template>
-  <div class="bg-gray-300 h-screen">
+  <div class="bg-gray-300 h-screen" v-if="learningPathContents">
+
 
     <MainNavigationBar/>