From 463fd5eee7b9477a050f88b8e0d07bd9404af037 Mon Sep 17 00:00:00 2001
From: Lorenz Padberg <lorenz.padberg@iterativ.ch>
Date: Tue, 28 Jun 2022 14:59:57 +0200
Subject: [PATCH] removed last arrow

---
 .../src/components/circle/CircleDiagram.vue   | 47 +++++++++++--------
 1 file changed, 28 insertions(+), 19 deletions(-)

diff --git a/client/src/components/circle/CircleDiagram.vue b/client/src/components/circle/CircleDiagram.vue
index a3f02fe7..ff1454ec 100644
--- a/client/src/components/circle/CircleDiagram.vue
+++ b/client/src/components/circle/CircleDiagram.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import * as d3 from "d3";
-import {computed,ref,  onMounted} from "vue";
+import {onMounted, ref} from "vue";
 import * as _ from 'underscore'
 
 
@@ -74,7 +74,7 @@ function calculatePieData(circle) {
 
 onMounted(async () => {
     const root = ref(null)
-  console.log(root?.value)
+    console.log(root?.value)
     let pieData = calculatePieData(props.circleData),
       width = 450, //props.width,
       height = 450, //props.height,
@@ -139,13 +139,13 @@ onMounted(async () => {
 
 
     //Generate groups
-    const wedgesGroup = g.selectAll('.learningSegmentArc').data(pieData).enter().append('g')
+    const learningSequences = g.selectAll('.learningSegmentArc').data(pieData).enter().append('g')
       .attr('class', 'learningSegmentArc')
       .attr('role', 'button')
       .attr('fill', gray300)
 
 
-      wedgesGroup
+    learningSequences
       .on('mouseover', function (d, i) {
         d3.select(this)
           .transition()
@@ -154,16 +154,16 @@ onMounted(async () => {
             return d.done ? sky400 : gray100
           })
       })
-        .on('mouseout', function (d, i) {
-          d3.select(this)
-            .transition()
-            .duration('200')
-            .attr('fill', (d) => {
-              return d.done ? sky500 : gray300
-            })
-        })
+      .on('mouseout', function (d, i) {
+        d3.select(this)
+          .transition()
+          .duration('200')
+          .attr('fill', (d) => {
+            return d.done ? sky500 : gray300
+          })
+      })
 
-    wedgesGroup
+    learningSequences
       .transition()
       .duration('1000')
       .attr('fill', (d) => {
@@ -171,10 +171,10 @@ onMounted(async () => {
       })
 
 
-    wedgesGroup.append('path').attr('d', wedge)
+    learningSequences.append('path').attr('d', wedge)
 
 
-    const learningSequenceText = wedgesGroup
+    const learningSequenceText = learningSequences
       .append('text')
       .attr('fill', blue900)
       .style('font-size', 15)
@@ -191,7 +191,7 @@ onMounted(async () => {
 
     const iconWidth = 25
 
-    const learningSequenceIcon = wedgesGroup.append("svg:image")
+    const learningSequenceIcon = learningSequences.append("svg:image")
       .attr("xlink:href", (d) => {
         return "/static/icons/" + d.icon.replace("it-", "") + ".svg"
       })
@@ -204,22 +204,31 @@ onMounted(async () => {
       })
 
 
-
     //Generate groups
     const arrows = g
-      .selectAll('arrow')
+      .selectAll('.arrow')
       .data(pieData)
       .enter()
       .append('g')
       .attr('class', 'arrow')
       .attr('marker-end', 'url(#triangle)')
 
-    //arrows[3].remove()
+
+    d3.selection.prototype.last = function () {
+      console.log('last', this)
+      let last = this.size() - 1;
+      return d3.select(this.nodes()[last]);
+    };
+
+
+    const all_arows = g.selectAll('.arrow')
+    all_arows.last().remove()
 
 
     //Draw arrow paths
     arrows.append('path').attr('fill', gray500).attr('d', arrow)
 
+
   }
 );