From c9cc2c2cb6e642808bf3bf9b2d5dd64a9f4d9fb7 Mon Sep 17 00:00:00 2001
From: Lorenz Padberg <lorenz.padberg@iterativ.ch>
Date: Thu, 30 Jun 2022 11:02:52 +0200
Subject: [PATCH] first viable version

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

diff --git a/client/src/components/circle/CircleDiagram.vue b/client/src/components/circle/CircleDiagram.vue
index c2bba0e5..c40ec640 100644
--- a/client/src/components/circle/CircleDiagram.vue
+++ b/client/src/components/circle/CircleDiagram.vue
@@ -1,8 +1,7 @@
 <script setup lang="ts">
 import * as d3 from "d3";
-import {computed, onMounted, reactive, ref} from "vue";
+import {computed, onMounted} from "vue";
 import * as _ from 'underscore'
-import {useCircleStore} from "@/stores/circle";
 
 const props = defineProps<{
   circleStore: {},
@@ -21,15 +20,15 @@ const props = defineProps<{
 
 
 function someFinished(learningSequence) {
-    return props.circleStore.flatChildren.filter((lc) => {
-      return lc.completed && lc.parentLearningSequence?.translation_key === learningSequence.translation_key;
-    }).length > 0;
+  return props.circleStore.flatChildren.filter((lc) => {
+    return lc.completed && lc.parentLearningSequence?.translation_key === learningSequence.translation_key;
+  }).length > 0;
 }
 
 
 const pieData = computed(() => {
-    const circle = props.circleStore.circleData, completionData = props.circleStore.completionData
-      console.log('initial of compute pie data ', circle, completionData)
+  const circle = props.circleStore.circleData, completionData = props.circleStore.completionData
+  console.log('initial of compute pie data ', circle, completionData)
 
   if (circle && completionData) {
     console.log('initial of compute pie data ', circle, completionData)
@@ -38,7 +37,6 @@ const pieData = computed(() => {
     })
 
     const completionDataByPageId = _.object(_.map(completionData, function (item) {
-      console.log(item)
       return [item.page_key, item]
     }))
 
@@ -53,7 +51,6 @@ const pieData = computed(() => {
       pie.endAngle = pie.endAngle + Math.PI
       pie.arrowStartAngle = pie.endAngle + (pie.startAngle - pie.endAngle) / 2
       pie.arrowEndAngle = pie.startAngle + (pie.startAngle - pie.endAngle) / 2
-      console.log(someFinished(thisLearningSequence))
       pie.done = someFinished(thisLearningSequence)
     })
     angles = angles.reverse()
@@ -64,169 +61,158 @@ const pieData = computed(() => {
 
 
 const blue900 = '#00224D',
-      blue700 = '#1A5197',
-      gray100 = '#EDF2F6',
-      gray300 = '#E0E5EC',
-      gray500 = '#B1C1CA',
-      sky400 = '#72CAFF',
-      sky500 = '#41B5FA'
+  blue700 = '#1A5197',
+  gray100 = '#EDF2F6',
+  gray300 = '#E0E5EC',
+  gray500 = '#B1C1CA',
+  sky400 = '#72CAFF',
+  sky500 = '#41B5FA'
 
 
-const svg = computed(() => {
-  
-})
-
-const render = computed( () => {
+const render = computed(() => {
   const width = 450, //props.width,
-      height = 450, //props.height,
-      radius: number = Math.min(width, height) / 2.4,
-      arrowStrokeWidth = 2
+    height = 450, //props.height,
+    radius: number = Math.min(width, height) / 2.4,
+    arrowStrokeWidth = 2
 
 
+  const svg = d3.select('.circle-visualization')
+    .attr('width', width)
+    .attr('height', height)
+
+  // Append markter as definition to the svg
+  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)
+
+  const g = svg.append('g').attr('transform', 'translate(' + width / 2 + ',' + height / 2 + ')')
 
 
-    const svg = d3.select('.circle-visualization')
-      .attr('width', width)
-      .attr('height', height)
-
-      // Append markter as definition to the svg
-    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)
-
-    const g = svg.append('g').attr('transform', 'translate(' + width / 2 + ',' + height / 2 + ')')
+  // Generate the pie diagram wede
+  const wedgeGenerator = d3
+    .arc()
+    .innerRadius(radius / 2.5)
+    .padAngle(12 / 360)
+    .outerRadius(radius)
 
 
+  // Generate the arrows
+  const arrowRadius = radius * 1.1
 
 
-    // Generate the pie diagram wede
-    const wedgeGenerator = d3
-      .arc()
-      .innerRadius(radius / 2.5)
-      .padAngle(12 / 360)
-      .outerRadius(radius)
+  const learningSequences = g.selectAll('.learningSegmentArc').data(pieData.value).enter().append('g')
+    .attr('class', 'learningSegmentArc')
+    .attr('role', 'button')
+    .attr('fill', gray300)
 
 
-    // Generate the arrows
-    const arrowRadius = radius * 1.1
+  learningSequences
+    .on('mouseover', function (d, i) {
+      d3.select(this)
+        .transition()
+        .duration('200')
+        .attr('fill', (d) => {
+          return d.done ? sky400 : gray100
+        })
+
+    })
+    .on('mouseout', function (d, i) {
+      d3.select(this)
+        .transition()
+        .duration('200')
+        .attr('fill', (d) => {
+          return d.done ? sky500 : gray300
+        })
+    })
+
+  learningSequences
+    .transition()
+    .duration('1')
+    .attr('fill', (d) => {
+      return d.done ? sky500 : gray300
+    })
 
 
-    const learningSequences = g.selectAll('.learningSegmentArc').data(pieData.value).enter().append('g')
-      .attr('class', 'learningSegmentArc')
-      .attr('role', 'button')
-      .attr('fill', gray300)
+  learningSequences.append('path').attr('d', wedgeGenerator)
 
 
-    learningSequences
-      .on('mouseover', function (d, i) {
-        d3.select(this)
-          .transition()
-          .duration('200')
-          .attr('fill', (d) => {
-            return d.done ? sky400 : gray100
-          })
+  const learningSequenceText = learningSequences
+    .append('text')
+    .attr('fill', blue900)
+    .style('font-size', 15)
+    .text((d) => {
+      return d.title
+    })
+    .attr("transform", function (d) {
+      let translate = wedgeGenerator.centroid(d)
+      translate = [translate[0], translate[1] + 20]
+      return "translate(" + translate + ")";
+    })
+    .attr('class', 'circlesText text-xl font-bold')
+    .style('text-anchor', 'middle')
 
-      })
-      .on('mouseout', function (d, i) {
-        d3.select(this)
-          .transition()
-          .duration('200')
-          .attr('fill', (d) => {
-            return d.done ? sky500 : gray300
-          })
-      })
+  const iconWidth = 25
 
-    learningSequences
-      .transition()
-      .duration('1000')
-      .attr('fill', (d) => {
-        return d.done ? sky500 : gray300
-      })
+  const learningSequenceIcon = learningSequences.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 = wedgeGenerator.centroid(d)
+      translate = [translate[0] - iconWidth / 2, translate[1] - iconWidth]
+      return "translate(" + translate + ")";
+    })
 
 
-    learningSequences.append('path').attr('d', wedgeGenerator)
+  // Create Arrows
+  const arrow = d3
+    .arc()
+    .innerRadius(arrowRadius)
+    .outerRadius(arrowRadius + arrowStrokeWidth)
+    .padAngle(20 / 360)
+    .startAngle(d => {
+      return d.arrowStartAngle
+    })
+    .endAngle(d => {
+      return d.arrowEndAngle
+    })
 
 
-    const learningSequenceText = learningSequences
-      .append('text')
-      .attr('fill', blue900)
-      .style('font-size', 15)
-      .text((d) => {
-        return d.title
-      })
-      .attr("transform", function (d) {
-        let translate = wedgeGenerator.centroid(d)
-        translate = [translate[0], translate[1] + 20]
-        return "translate(" + translate + ")";
-      })
-      .attr('class', 'circlesText text-xl font-bold')
-      .style('text-anchor', 'middle')
+  const arrows = g
+    .selectAll('.arrow')
+    .data(pieData.value)
+    .join('g')
+    .attr('class', 'arrow')
+    .attr('marker-end', 'url(#triangle)')
 
-    const iconWidth = 25
-
-    const learningSequenceIcon = learningSequences.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 = wedgeGenerator.centroid(d)
-        translate = [translate[0] - iconWidth / 2, translate[1] - iconWidth]
-        return "translate(" + translate + ")";
-      })
+  // remove last arrow
+  d3.selection.prototype.last = function () {
+    let last = this.size() - 1;
+    return d3.select(this.nodes()[last]);
+  };
 
 
-    // Create Arrows
-    const arrow = d3
-      .arc()
-      .innerRadius(arrowRadius)
-      .outerRadius(arrowRadius + arrowStrokeWidth)
-      .padAngle(20 / 360)
-      .startAngle(d => {
-        return d.arrowStartAngle
-      })
-      .endAngle(d => {
-        return d.arrowEndAngle
-      })
+  const all_arows = g.selectAll('.arrow')
+  all_arows.last().remove()
 
-
-    const arrows = g
-      .selectAll('.arrow')
-      .data(pieData.value)
-      .join('g')
-      .attr('class', 'arrow')
-      .attr('marker-end', 'url(#triangle)')
-
-    // remove last arrow
-    d3.selection.prototype.last = function () {
-      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)
+  //Draw arrow paths
+  arrows.append('path').attr('fill', gray500).attr('d', arrow)
   return svg
 
 })
 
-onMounted(async () => {
-  }
-);
 
 
 function viewBox() {
@@ -239,10 +225,12 @@ function viewBox() {
 
 <template>
   <div class="svg-container h-full content-center">
-    <pre hidden>{{pieData}}</pre>
-    <pre hidden> {{render}}</pre>
+    <pre hidden>{{ pieData }}</pre>
+    <pre hidden> {{ render }}</pre>
     <pre> </pre>
     <svg class="circle-visualization h-full" :viewBox="viewBox">
+
+      <circle v-if="! pieData" cx="50" cy="50" r="50"/>
     </svg>
   </div>
 </template>
diff --git a/client/src/views/CircleView.vue b/client/src/views/CircleView.vue
index 77dd57c6..1b2ff255 100644
--- a/client/src/views/CircleView.vue
+++ b/client/src/views/CircleView.vue
@@ -45,7 +45,7 @@ onMounted(async () => {
               {{ circleStore.circleData.title }}
             </h1>
 
-            <div v-if="circleStore.circleData.learningSequences && circleStore.completionData" class="w-full mt-8">
+            <div v-if="circleStore.circleData.learningSequences && circleStore.flatChildren" class="w-full mt-8">
               <CircleDiagram :circle-store="circleStore"></CircleDiagram>
             </div>