fixed styling

client/src/components/circle/SimpleCircleDiagram.vue

@@ -28,7 +28,9 @@ export default {
     console.log(this.pieData)
     var data = this.pieData;
 
-    var width = this.width, height = this.height, radius = Math.min(width, height) / 2.5
+    const width = this.width
+    const height = this.height
+    const radius = Math.min(width, height) / 2.5
 
 
     var svg = d3.select(this.$el)
@@ -47,7 +49,7 @@ export default {
 // Generate the arcs
     var arc = d3
       .arc()
-      .innerRadius(radius / 2.5)
+      .innerRadius(radius / 2)
       .padAngle(12 / 360)
       .outerRadius(radius);
 
@@ -60,28 +62,21 @@ export default {
 
 //Draw arc paths
     arcs.append("path")
-      .attr("fill", color)
       .attr("d", arc)
   }
 }
 
 </script>
 
-<style>
-.range-input {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin-bottom: 10px;
-}
+<style scoped>
+  .demo-chart{
+    fill: rgb(65 181 250);
+  }
 
-input {
-  margin-left: 10px;
-}
 </style>
 
 
 <template>
-    <svg class="demo-chart" :viewBox="viewBox"> </svg>
+    <svg class="demo-chart" :viewBox="viewBox" > </svg>
 </template>
 

client/src/views/LearningPathView.vue

@@ -74,7 +74,7 @@ export default {
         <div class="m-8 p-4 topic border-l flex flex-col justify-start" v-for="topic in learningPathContents.topics">
           <div class="font-bold text-blue-900 mb-4">{{topic.title}}</div>
           <div class="flex flex-row">
-            <button class="circle mr-8" aria-label="circle.title" v-for="circle in topic.circles">
+            <button class="circle mr-8" aria-label="circle.title" v-for="circle in topic.circles" @click="$router.push('/circle/'+circle.slug)">
             <SimpleCircleDiagram class="w-48 h-48" :learning-sequences="circle.learning_sequences"></SimpleCircleDiagram>
             <div class="text-center text-xl text-blue-900 font-bold mt-4">{{ circle.title }}</div>