From dad0942049d6c5db6e1b08ad988d9c34c392ea6c Mon Sep 17 00:00:00 2001
From: Lorenz Padberg <lorenz.padberg@iterativ.ch>
Date: Mon, 27 Jun 2022 17:37:53 +0200
Subject: [PATCH] =?UTF-8?q?first=20really=20awesome=20wow=20effect=20=20?=
 =?UTF-8?q?=C2=A0=F0=9F=A4=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/circle/CircleDiagram.vue   | 194 +++++++++++++-----
 client/src/views/CircleView.vue               |   3 +-
 2 files changed, 144 insertions(+), 53 deletions(-)

diff --git a/client/src/components/circle/CircleDiagram.vue b/client/src/components/circle/CircleDiagram.vue
index 3f2e4ef6..b6167af9 100644
--- a/client/src/components/circle/CircleDiagram.vue
+++ b/client/src/components/circle/CircleDiagram.vue
@@ -1,58 +1,145 @@
-<script>
-import * as d3 from 'd3'
+<script setup lang="ts">
+import * as d3 from "d3";
+import {useCircleStore} from '@/stores/circle';
+import {onMounted} from "vue";
 
-export default {
-  mounted() {
-    const data = [5, 5, 5, 5, 5]
 
-    const width = 500,
-      height = 500,
-      radius = Math.min(width, height) / 2.5
-
-    const svg = d3.select(this.$el).append('svg').attr('width', 500).attr('height', 500)
-
-    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
-    const arc = d3
-      .arc()
-      .innerRadius(radius / 2.5)
-      .padAngle(12 / 360)
-      .outerRadius(radius)
-
-    // Generate the arrows
-    const arrow = d3
-      .arc()
-      .innerRadius(radius * 1.15)
-      .padAngle(30 / 360)
-      .outerRadius(radius * 1.16)
-
-    //Generate groups
-    const arcs = g.selectAll('arc').data(pie(data)).enter().append('g').attr('class', 'arc')
-
-    //Generate groups
-    const arrows = g
-      .selectAll('arrow')
-      .data(pie(data))
-      .enter()
-      .append('g')
-      .attr('class', 'arrow')
-      .attr('marker-start', 'url(#triangle)')
-
-    const markers = g.selectAll('arrow').attr('transform', 'translate(60, 60) rotate(30)')
-
-    //Draw arc paths
-    arcs.append('path').attr('fill', color).attr('d', arc)
-
-    //Draw arrow paths
-    arrows.append('path').attr('fill', color).attr('d', arrow)
+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) / 3
+
+  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 + ')')
+
+  // Generate the pie
+  const pie = d3.pie()
+
+  // Generate the pie diagram wede
+  const wedge = d3
+    .arc()
+    .innerRadius(radius / 2.5)
+    .padAngle(12 / 360)
+    .outerRadius(radius)
+
+
+
+  // Generate the arrows
+  const arrow = d3
+    .arc()
+    .innerRadius(radius * 1.15)
+    .padAngle(30 / 360)
+    .outerRadius(radius * 1.16)
+
+    //Generate groups
+    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
+    .selectAll('arrow')
+    .data(pie(data))
+    .enter()
+    .append('g')
+    .attr('class', 'arrow')
+    .attr('marker-start', 'url(#triangle)')
+
+  const markers = g.selectAll('arrow').attr('transform', 'translate(60, 60) rotate(30)')
+
+  //Draw wedge paths
+
+
+  //Draw arrow paths
+  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>
diff --git a/client/src/views/CircleView.vue b/client/src/views/CircleView.vue
index b6c049e1..88fae2d5 100644
--- a/client/src/views/CircleView.vue
+++ b/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">