first really awesome wow effect 🤢

client/src/components/circle/CircleDiagram.vue

@@ -1,30 +1,86 @@
-<script>
+<script setup lang="ts">
-import * as d3 from 'd3'
+import * as d3 from "d3";
+import {useCircleStore} from '@/stores/circle';
+import {onMounted} from "vue";
 
-export default {
+
-  mounted() {
+const props = defineProps<{
+  circleData: {
+    default: {
+      id: 10,
+      title: 'Analyse des letzten Falles',
+      slug: 'analyse',
+      type: 'learnpath.Circle',
+      translation_key: '2ca5ba7a-98b8-4511-ba50-bc190714886d',
+      learning_sequences: [
+        {
+          id: 11,
+          title: 'Starten',
+          done: true,
+        },
+        {
+          id: 13,
+          title: 'Beobachten',
+          done: true,
+        },
+        {
+          id: 18,
+          title: 'Anwenden',
+          done: true,
+        },
+        {
+          id: 30,
+          title: 'Üben',
+          done: false,
+        },
+      ],
+    },
+    type: object
+  },
+  width: {
+    default: 500,
+    type: number,
+  },
+  height: {
+    default: 500,
+    type: number,
+  },
+}>()
+
+onMounted(async () => {
   const data = [5, 5, 5, 5, 5]
 
   const width = 500,
     height = 500,
-      radius = Math.min(width, height) / 2.5
+    radius = Math.min(width, height) / 3
 
-    const svg = d3.select(this.$el).append('svg').attr('width', 500).attr('height', 500)
+  const blue900 = '#00224D',
+    blue700 = '#1A5197',
+    gray100 = '#EDF2F6',
+    gray300 = '#E0E5EC',
+    gray500 = '#B1C1CA',
+    sky400 = '#72CAFF',
+    sky500 = '#41B5FA'
+
+
+  const svg = d3.select('.circle-visualization')
+    .attr('width', width)
+    .attr('height', height)
 
   const g = svg.append('g').attr('transform', 'translate(' + width / 2 + ',' + height / 2 + ')')
 
-    const color = '#99C7E7'
-
   // Generate the pie
   const pie = d3.pie()
 
-    // Generate the arcs
+  // Generate the pie diagram wede
-    const arc = d3
+  const wedge = d3
     .arc()
     .innerRadius(radius / 2.5)
     .padAngle(12 / 360)
     .outerRadius(radius)
 
+
+
   // Generate the arrows
   const arrow = d3
     .arc()
@@ -33,7 +89,31 @@ export default {
     .outerRadius(radius * 1.16)
 
     //Generate groups
-    const arcs = g.selectAll('arc').data(pie(data)).enter().append('g').attr('class', 'arc')
+    const wedgesGroup = g.selectAll('arc').data(pie(data)).enter().append('g').attr('class', 'arc')
+  wedgesGroup.append('path').attr('fill', sky400).attr('d', wedge)
+
+
+    const learningSequenceText = wedgesGroup
+      .append('text')
+      .attr('fill', blue900)
+      .style('font-size', 19)
+      .text((d) => {return 'segment'})
+      .attr("transform", function(d) {
+        let translate = wedge.centroid(d)
+        translate = [translate[0], translate[1] + 20]
+        return "translate(" + translate + ")";  })
+      .attr('class', 'circlesText text-xl font-bold')
+      .style('text-anchor', 'middle')
+
+  const learningSequenceIcon = wedgesGroup.append("svg:image")
+        .attr("xlink:href", "/static/icons/icon-ls-network.svg")
+        .attr("width", 40)
+        .attr("height", 40)
+        .attr("transform", function(d) {
+        let translate = wedge.centroid(d)
+        translate = [translate[0]-20, translate[1] - 35]
+        return "translate(" + translate + ")";  })
+
 
   //Generate groups
   const arrows = g
@@ -46,13 +126,20 @@ export default {
 
   const markers = g.selectAll('arrow').attr('transform', 'translate(60, 60) rotate(30)')
 
-    //Draw arc paths
+  //Draw wedge paths
-    arcs.append('path').attr('fill', color).attr('d', arc)
+
 
   //Draw arrow paths
-    arrows.append('path').attr('fill', color).attr('d', arrow)
+  arrows.append('path').attr('fill', gray300).attr('d', arrow)
-  },
 }
+);
+
+
+function viewBox() {
+  return `0 0 ${width} ${height}`
+}
+
+
 </script>
 
 <style>
@@ -69,5 +156,8 @@ input {
 </style>
 
 <template>
-  <div class="demo-chart" width="500" heigth="500"/>
+  <div class="svg-container h-full content-center">
+    <svg class="circle-visualization h-full" :viewBox="viewBox">
+    </svg>
+  </div>
 </template>

client/src/views/CircleView.vue

@@ -9,6 +9,7 @@ import LearningContent from '@/components/circle/LearningContent.vue';
 import {onMounted} from 'vue'
 import {useCircleStore} from '@/stores/circle';
 import SelfEvaluation from '@/components/circle/SelfEvaluation.vue';
+import CircleDiagram from '@/components/circle/CircleDiagram.vue';
 
 const props = defineProps<{
   circleSlug: string
@@ -45,7 +46,7 @@ onMounted(async () => {
             </h1>
 
             <div class="mt-8">
-              <img src="@/assets/circle-analyse.svg" alt="">
+              <CircleDiagram></CircleDiagram>
             </div>
 
             <div class="border-t-2 border-gray-500 mt-4 lg:hidden">