rotated learning sequences

client/src/components/circle/CircleDiagram.vue

@@ -61,7 +61,10 @@ function calculatePieData(circle){
         _.forEach(pieData, (pie) => {
           pie.title = learningSequences[parseInt(pie.index)].title
           pie.icon = learningSequences[parseInt(pie.index)].icon
+          pie.startAngle = pie.startAngle + Math.PI
+          pie.endAngle = pie.endAngle + Math.PI
         })
+        pieData = pieData.reverse()
         return pieData
 }
 
@@ -107,7 +110,9 @@ onMounted(async () => {
     .arc()
     .innerRadius(radius * 1.15)
     .padAngle(30 / 360)
-    .outerRadius(radius * 1.16)
+    .startAngle(d => {return d.startAngle + (d.startAngle - d.endAngle)/2})
+    .endAngle(d => {return d.endAngle + (d.startAngle - d.endAngle)/2})
+    .outerRadius(radius * 1.165)
 
     //Generate groups
     const wedgesGroup = g.selectAll('arc').data(pieData).enter().append('g').attr('class', 'arc')
@@ -163,18 +168,6 @@ function viewBox() {
 
 </script>
 
-<style>
-.range-input {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin-bottom: 10px;
-}
-
-input {
-  margin-left: 10px;
-}
-</style>
 
 <template>
   <div class="svg-container h-full content-center">

client/src/views/CircleView.vue

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