Make vertical alignment of diagram

client/src/components/circle/LearningPathDiagram.vue

@@ -47,9 +47,13 @@ export default {
       type: Number,
     },
     height: {
-      default: 256,
+      default: 256 * 3,
       type: Number,
     },
+    vertical: {
+      default: true,
+      type: Boolean
+    }
   },
   setup() {
     const learningPathStore = useLearningPathStore()
@@ -89,7 +93,7 @@ export default {
   },
 
   mounted() {
-    const circleWidth = 200
+    const circleWidth = this.vertical ? 100 : 200
     const radius = (circleWidth * 0.8) / 2
     const blue900 = '#00224D',
       blue700 = '#1A5197',
@@ -108,10 +112,6 @@ export default {
       .enter()
       .append('g')
       .attr('class', 'circle')
-      .attr('transform', (d, i) => {
-        let x_coord = (i + 1) * circleWidth - radius
-        return 'translate(' + x_coord + ', 200)'
-      })
       .on('mouseover', function (d, i) {
         d3.select(this)
           .selectAll('.learningSegmentArc')
@@ -170,18 +170,46 @@ export default {
       .attr('fill', blue900)
       .style('font-size', 19)
       .text((d) => d.title)
-      .attr('y', radius + 30)
       .attr('class', 'circlesText text-xl font-bold hidden lg:block')
-      .style('text-anchor', 'middle')
-      .call(wrap, circleWidth - 20)
 
+    const topicHeigtOffset = 20
+    const topicHeight = 35
+    const circleHeigth = circleWidth + 20
 
     function getTopicPosition(i, d, topics) {
-      let x = 0
+      let pos = topicHeigtOffset
+
       for (let index = 0; index < i; index++) {
-        x += circleWidth * topics[index].circles.length
+        let topic = topics[index]
+        if (topic.is_visible) {
+          pos += topicHeight
+        }
+        pos += circleHeigth * topic.circles.length
+      }
+      return pos + 20
+    }
+
+
+    function getCircleVerticalPostion(i, d, topics) {
+      let y = circleHeigth / 2 + topicHeigtOffset
+      for (let topic_index = 0; topic_index < topics.length; topic_index++) {
+        const topic = topics[topic_index]
+        console.log(topic.title)
+        if (topic.is_visible) {
+          y += topicHeight
+
+        }
+        for (let circle_index = 0; circle_index < topic.circles.length; circle_index++) {
+          let circle = topic.circles[circle_index]
+          console.log('-  ' + circle.title)
+          if (circle.id === d.id) {
+            console.log('found')
+            return y
+          }
+          y += circleHeigth
+
+        }
       }
-      return x + 30
     }
 
 
@@ -190,33 +218,109 @@ export default {
       .data(this.learningPathStore.learningPath.topics)
       .enter()
       .append('g')
-      .attr('transform', (d, i) => {
-        return "translate(" + getTopicPosition(i, d, this.learningPathStore.learningPath.topics) + ",0)"
-      })
       .attr('class', (d) => {
         return 'topic '.concat(d.is_visible ? "hidden lg:block" : "hidden")
       })
 
     const topicLines = topicGroups
       .append('line')
-      .attr('x1', -10)
-      .attr('y1', 0)
-      .attr('x2', -10)
-      .attr('y2', 0)
       .attr('class', 'stroke-gray-500')
       .attr('stroke-width', 1.76)
 
-    const topicTitles = topicGroups
+    const ç = topicGroups
       .append('text')
-      .attr('y', 20)
       .attr('fill', blue900)
       .style('font-size', 19)
       .text((d) => d.title)
-      .attr('class', 'topicTitles font-bold')
-      .call(wrap, circleWidth)
 
 
-    topicLines.transition().duration('1000').attr('y2', 350)
+    // Calculate positions of objects
+
+    if (this.vertical) {
+      circle_groups
+        .attr('transform', (d, i) => {
+          return 'translate(100,' + getCircleVerticalPostion(i, d, this.learningPathStore.learningPath.topics) + ')'
+        })
+
+      circlesText
+        .attr('y', 7)
+        .attr('x', radius + 40)
+
+      const Topics_X = 100 - radius
+
+      topicGroups.attr('transform', (d, i) => {
+        return "translate(" + Topics_X + ", " + getTopicPosition(i, d, this.learningPathStore.learningPath.topics) + ")"
+      })
+        .attr('class', 'topicTitles')
+
+
+      topicLines.attr('x1', 0)
+        .attr('y1', -20)
+        .attr('x2', 0)
+        .attr('y2', -20)
+        .transition().duration('1000').attr('x2', this.width * 0.8)
+
+
+    } else {
+      circle_groups.attr('transform', (d, i) => {
+        let x_coord = (i + 1) * circleWidth - radius
+        return 'translate(' + x_coord + ', 200)'
+      })
+
+      circlesText.attr('y', radius + 30)
+        .style('text-anchor', 'middle')
+        .call(wrap, circleWidth - 20)
+
+      topicGroups.attr('transform', (d, i) => {
+        return "translate(" + getTopicPosition(i, d, this.learningPathStore.learningPath.topics) + ",0)"
+      })
+
+      topicLines.attr('x1', -10)
+        .attr('y1', 0)
+        .attr('x2', -10)
+        .attr('y2', 0)
+        .transition().duration('1000').attr('y2', 350)
+
+      topicGroups.attr('y', 20)
+        .call(wrap, circleWidth)
+        .attr('class', 'topicTitles font-bold')
+
+
+    }
+
+
+    function flipToVertical() {
+
+      this.height = 2000
+
+      const animationTime = 1000
+      circle_groups
+        .transition().duration(animationTime).attr('transform', (d, i) => {
+        let y_coord = ((i + 1) * circleWidth - radius) * 0.5
+        return 'translate(200, ' + y_coord + ') scale(0.5)'
+      }).on("end", d => {
+        addTexts()
+      })
+      circle_groups.selectAll('.circlesText').attr('class', 'hidden')
+      topicGroups.attr('class', 'hidden')
+
+
+      function addTexts() {
+
+
+        circle_groups
+          .append('text')
+          .attr('fill', blue900)
+          .style('font-size', 45)
+          .text((d) => d.title)
+          .attr('y', 0)
+          .attr('x', radius + 30)
+          .attr('class', 'circlesText text-xl font-bold')
+          .style('text-anchor', 'left')
+      }
+
+
+    }
 
     function wrap(text, width) {
       text.each(function () {
@@ -258,9 +362,15 @@ export default {
 
 
 <template>
-  <div class="svg-container h-full content-start">
+  <div class="flex flex-col">
-    <svg class="learning-path-visualization h-full" :viewBox="viewBox">
+    <button class="content-center">
-    </svg>
+      <it-icon-list/>
+      Listen ansicht anzeigen
+    </button>
+    <div class="svg-container h-full content-start">
+      <svg class="learning-path-visualization h-full" :viewBox="viewBox">
+      </svg>
+    </div>
   </div>
 
 </template>

client/src/views/LearningPathView.vue

@@ -36,9 +36,10 @@ onMounted(async () => {
 
         <h1 class="m-12">{{ learningPathStore.learningPath.title }}</h1>
 
-        <div class="bg-white m-12 p-8 flex flex-col lg:flex-row  divide-y lg:divide-y-0 lg:divide-x divide-gray-500 justify-start">
+        <div
+          class="bg-white m-12 p-8 flex flex-col lg:flex-row  divide-y lg:divide-y-0 lg:divide-x divide-gray-500 justify-start">
           <div class="p-8 flex-auto">
-            <h2>Willkommmen zurück, {{userStore.first_name}}</h2>
+            <h2>Willkommmen zurück, {{ userStore.first_name }}</h2>
             <p class="mt-4 text-xl">
               Du hast bereits drei circles bearbeitet, mach weiter so!
             </p>