Added basic navigation fixed svg sizing

client/src/components/circle/LearningPathCircleDiagram.vue

@@ -149,17 +149,18 @@ export default {
     },
 
     width: {
-      default: 800,
+      default: 1440,
       type: Number,
     },
     height: {
-      default: 350,
+      default: 256,
       type: Number,
     },
   },
   computed: {
     viewBox() {
-      return `0 0 ${this.width} ${this.height}`
+      console.log(this.width, this.height)
+      return `0 0 ${this.width} ${this.height* 1.5}`
     },
     circles() {
       let internalCircles = _.flatten(_.pluck(this.learninglearningPathContents.topics, 'circles'))
@@ -175,26 +176,17 @@ export default {
       return internalCircles
     },
     svg() {
-      const width = '100%'
-      const height = 350
+      return d3.select('.learning-path-visualization')
 
-      const div_w = d3.select('.svg-container').style('width').split('px').shift()
-      const div_h = d3.select('.svg-container').style('height').split('px').shift()
-      console.log("my height", div_h, div_w)
-      return d3
-        .select('.learning-path-visualization')
-        .attr('viewBox', '0 0 ' + div_w + ' ' + div_h)
-        .attr('preserveAspectRatio', 'xMinYMin meet') //.attr('width', width).attr('height', height)
-    },
-    render() {
-      console.log('skljdnfksldnjf' + this.width)
     },
+
   },
 
   mounted() {
+
     console.log(this.width, this.height)
     const circleWidth = 200
-    const radius = (circleWidth * 0.7) / 2
+    const radius = (circleWidth * 0.8) / 2
     const blue900 = '#00224D',
       blue700 = '#1A5197',
       gray100 = '#EDF2F6',
@@ -203,6 +195,8 @@ export default {
       sky400 = '#72CAFF',
       sky500 = '#41B5FA'
 
+    let vueRouter =  this.$router
+
     // Create append pie charts to the main svg
     const circle_groups = this.svg
       .selectAll('.circle')
@@ -232,6 +226,10 @@ export default {
             return d.done ? sky500 : gray300
           })
       })
+      .on('click', function (d, i) {
+        vueRouter.push('/circle/'+i.slug)
+      })
+
       .attr('role', 'button')
 
     const arcGenerator = d3
@@ -346,32 +344,11 @@ export default {
 }
 </script>
 
-<style scoped>
-.svg-container {
-  display: inline-block;
-  position: relative;
-  width: 100%;
-  padding-bottom: 100%;
-  vertical-align: top;
-  overflow: hidden;
-  background: white;
-}
-
-.learning-path-visualization {
-  display: inline-block;
-  position: absolute;
-  top: 0;
-  left: 0;
-  background: white;
-}
-</style>
 
 <template>
-  <div class="svg-container">
-    <svg>
-      <rect style="fill: rgb(0, 170, 0); stroke-width: 1; stroke: rgb(0, 0, 0)" />
+  <div class="svg-container h-full content-start	">
+    <svg class="learning-path-visualization h-full" :viewBox="viewBox">
     </svg>
   </div>
-  <!--  <svg class="learning-path-visualization"  width="10%" height="10%" viewBox="0 0 50 50">-->
-  <!--  </svg>-->
+
 </template>

client/src/views/HomeView.vue

@@ -10,7 +10,7 @@ import MainNavigationBar from '@/components/MainNavigationBar.vue';</script>
     <div class="mt-8 flex flex-col lg:flex-row justify-start gap-4">
       <router-link class="link text-xl" to="/styleguide">Styelguide</router-link>
       <a class="link text-xl" href="/login/">Login</a>
-<!--            <router-link class="link text-xl" to="/learningpath/versicherungsvermittlerin">Lernpfad "Versicherungsvermittlerin" (Login benötigt)</router-link>-->
+           <router-link class="link text-xl" to="/learningpath/versicherungsvermittlerin">Lernpfad "Versicherungsvermittlerin" (Login benötigt)</router-link>
       <router-link class="link text-xl" to="/circle/analyse">Circle "Analyse" (Login benötigt)</router-link>
     </div>
   </main>

client/src/views/LearningPathView.vue

@@ -26,20 +26,20 @@ export default {
       this.learningPathData = response.data
 
 
-      let learningPathContents = { topics: [] }
-      let topic =       {
-            id : 0,
-            title : '',
-            slug : '',
-            type : 'learnpath.Topic',
-            translation_key : '',
-            is_visible : false,
-            cirlces : []
-        }
+      let learningPathContents = {topics: []}
+      let topic = {
+        id: 0,
+        title: '',
+        slug: '',
+        type: 'learnpath.Topic',
+        translation_key: '',
+        is_visible: false,
+        cirlces: []
+      }
 
       response.data.children.forEach((child) => {
         if (child.type === 'learnpath.Topic') {
-          if (topic.id != 0){
+          if (topic.id != 0) {
             learningPathContents.topics.push(topic)
           }
 
@@ -53,7 +53,6 @@ export default {
       learningPathContents.topics.push(topic)
 
 
-
       this.learningPathContents = learningPathContents;
 
     });
@@ -72,10 +71,11 @@ export default {
     <div class="learningpath flex flex-col">
 
 
-      <div class="flex flex-col h-max p-6">
-              <div class="bg-green-500 h-64">
-   <SimpleCircleDiagram class="object-scale-down" :learning-path-contents="learningPathContents.topics"></SimpleCircleDiagram>
-      </div>
+      <div class="flex flex-col h-max">
+        <div class="bg-white h-80 pt-8">
+<!--          <img  src="@/assets/learning_path.svg" alt="" class="h-full">-->
+          <SimpleCircleDiagram :learning-path-contents="learningPathContents.topics"></SimpleCircleDiagram>
+        </div>
 
         <div class="text-blue-dark font-bold text-7xl m-12">
           {{ learningPathData.title }}