From a8a239e39564856f853fa2d852dfaf0f7b237e71 Mon Sep 17 00:00:00 2001
From: Lorenz Padberg <lorenz.padberg@iterativ.ch>
Date: Tue, 28 Jun 2022 13:31:50 +0200
Subject: [PATCH] added arrows correctly

---
 .../src/components/circle/CircleDiagram.vue   | 180 +++++++++++-------
 1 file changed, 108 insertions(+), 72 deletions(-)

diff --git a/client/src/components/circle/CircleDiagram.vue b/client/src/components/circle/CircleDiagram.vue
index 24fe91fb..a0fccceb 100644
--- a/client/src/components/circle/CircleDiagram.vue
+++ b/client/src/components/circle/CircleDiagram.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import * as d3 from "d3";
-import {useCircleStore} from '@/stores/circle';
 import {onMounted} from "vue";
 import * as _ from 'underscore'
 
@@ -41,7 +40,7 @@ const props = defineProps<{
   width: {
     default: 500,
     type: number,
-        required: false
+    required: false
 
   },
   height: {
@@ -52,112 +51,149 @@ const props = defineProps<{
 }>()
 
 
-function calculatePieData(circle){
-        let learningSequences = _.filter(circle.children, (child) => { return child.type === 'learnpath.LearningSequence'; })
-        let pieWeights = new Array(Math.max(learningSequences.length, 1)).fill(1)
-        let pieGenerator = d3.pie()
-        let pieData = pieGenerator(pieWeights)
+function calculatePieData(circle) {
+  let learningSequences = _.filter(circle.children, (child) => {
+    return child.type === 'learnpath.LearningSequence';
+  })
+  let pieWeights = new Array(Math.max(learningSequences.length, 1)).fill(1)
+  let pieGenerator = d3.pie()
+  let pieData = pieGenerator(pieWeights)
   console.log(pieData)
-        _.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
+  _.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
+    pie.arrowStartAngle = pie.endAngle + (pie.startAngle- pie.endAngle) / 2
+    pie.arrowEndAngle = pie.startAngle + (pie.startAngle- pie.endAngle) / 2
+  })
+  pieData = pieData.reverse()
+  return pieData
 }
 
 onMounted(async () => {
 
 
+    let pieData = calculatePieData(props.circleData)
 
-  let pieData = calculatePieData(props.circleData)
+    const width = 500,
+      height = 500,
+      radius = Math.min(width, height) / 3
 
-  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 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 svg = d3.select('.circle-visualization')
+      .attr('width', width)
+      .attr('height', height)
 
-  const g = svg.append('g').attr('transform', 'translate(' + width / 2 + ',' + height / 2 + ')')
+    const g = svg.append('g').attr('transform', 'translate(' + width / 2 + ',' + height / 2 + ')')
 
-  // Generate the pie
-  const pie = d3.pie()
+    const arrowStrokeWidth = 2
 
-  // Generate the pie diagram wede
-  const wedge = d3
-    .arc()
-    .innerRadius(radius / 2.5)
-    .padAngle(12 / 360)
-    .outerRadius(radius)
+    svg.append("svg:defs").append("svg:marker")
+      .attr("id", "triangle")
+      .attr("refX", 11)
+      .attr("refY", 11)
+      .attr("markerWidth", 20)
+      .attr("markerHeight", 20)
+      .attr("markerUnits", "userSpaceOnUse")
+      .attr("orient", "auto")
+      .append("path")
+      .attr("d", "M -1 0 l 10 0 M 0 -1 l 0 10")
+      .attr('transform', 'rotate(-90, 10, 0)')
+      .attr('stroke-width', arrowStrokeWidth)
+      .attr('stroke', gray500)
 
+    // 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 arrowRadius = radius * 1.1
+
+    const arrow = d3
+      .arc()
+      .innerRadius(arrowRadius)
+      .outerRadius(arrowRadius + arrowStrokeWidth)
+      .padAngle(30 / 360)
+      .startAngle(d => {return d.arrowStartAngle})
+      .endAngle(d => {return d.arrowEndAngle})
 
-  // Generate the arrows
-  const arrow = d3
-    .arc()
-    .innerRadius(radius * 1.15)
-    .padAngle(30 / 360)
-    .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')
-  wedgesGroup.append('path').attr('fill', sky400).attr('d', wedge)
+
+    wedgesGroup.append('path').attr('fill', sky400).attr('d', wedge)
 
 
     const learningSequenceText = wedgesGroup
       .append('text')
       .attr('fill', blue900)
       .style('font-size', 15)
-      .text((d) => {return d.title})
-      .attr("transform", function(d) {
+      .text((d) => {
+        return d.title
+      })
+      .attr("transform", function (d) {
         let translate = wedge.centroid(d)
         translate = [translate[0], translate[1] + 20]
-        return "translate(" + translate + ")";  })
+        return "translate(" + translate + ")";
+      })
       .attr('class', 'circlesText text-xl font-bold')
       .style('text-anchor', 'middle')
 
-  const learningSequenceIcon = wedgesGroup.append("svg:image")
-        .attr("xlink:href", (d) => {return "/static/icons/"+d.icon.replace("it-", "")+".svg"})
-        .attr("width", 30)
-        .attr("height", 30)
-        .attr("transform", function(d) {
+    const iconWidth = 25
+
+    const learningSequenceIcon = wedgesGroup.append("svg:image")
+      .attr("xlink:href", (d) => {
+        return "/static/icons/" + d.icon.replace("it-", "") + ".svg"
+      })
+      .attr("width", iconWidth)
+      .attr("height", iconWidth)
+      .attr("transform", function (d) {
         let translate = wedge.centroid(d)
-        translate = [translate[0]-20, translate[1] - 35]
-        return "translate(" + translate + ")";  })
+        translate = [translate[0] - iconWidth/2, translate[1] - iconWidth]
+        return "translate(" + translate + ")";
+      })
 
 
-  //Generate groups
-  const arrows = g
-    .selectAll('arrow')
-    .data(pieData)
-    .enter()
-    .append('g')
-    .attr('class', 'arrow')
-    .attr('marker-start', 'url(#triangle)')
+    //Generate groups
+    const arrows = g
+      .selectAll('arrow')
+      .data(pieData)
+      .enter()
+      .append('g')
+      .attr('class', 'arrow')
+      .attr('marker-end', 'url(#triangle)')
 
-  const markers = g.selectAll('arrow').attr('transform', 'translate(60, 60) rotate(30)')
-
-  //Draw wedge paths
+    //arrows[3].remove()
 
 
-  //Draw arrow paths
-  arrows.append('path').attr('fill', gray300).attr('d', arrow)
-}
+    //Draw arrow paths
+    arrows.append('path').attr('fill', gray500).attr('d', arrow)
+    //   .transition()
+    //   .duration(500)
+    //   .delay(function (d, i) {return i * 200;})
+    //   .attrTween('d', function (d) {
+    //   var i = d3.interpolate(d.arrowStartAngle, d.arrowEndAngle);
+    //   return function (t) {
+    //     d.arrowEndAngle = i(t);
+    //     return d;
+    //   }
+    // })
+  }
 );