From ed5e409992dc8d94a8723591bf7e610600eb1267 Mon Sep 17 00:00:00 2001
From: Lorenz Padberg <lorenz.padberg@iterativ.ch>
Date: Mon, 13 Jun 2022 18:01:20 +0200
Subject: [PATCH] added basic grafics to topics

---
 client/package.json                           |   1 +
 .../circle/LearningPathCircleDiagram.vue      | 299 ++++++++++++++++++
 client/src/views/LearningPathView.vue         |  19 +-
 server/vbv_lernwelt/learnpath/models.py       |   2 +-
 4 files changed, 305 insertions(+), 16 deletions(-)
 create mode 100644 client/src/components/circle/LearningPathCircleDiagram.vue

diff --git a/client/package.json b/client/package.json
index a97d722b..8cc8e949 100644
--- a/client/package.json
+++ b/client/package.json
@@ -16,6 +16,7 @@
     "d3": "^7.4.4",
     "loglevel": "^1.8.0",
     "pinia": "^2.0.13",
+    "underscore": "^1.13.4",
     "vue": "^3.2.31",
     "vue-i18n": "^9.1.9",
     "vue-router": "^4.0.14"
diff --git a/client/src/components/circle/LearningPathCircleDiagram.vue b/client/src/components/circle/LearningPathCircleDiagram.vue
new file mode 100644
index 00000000..8cc97a90
--- /dev/null
+++ b/client/src/components/circle/LearningPathCircleDiagram.vue
@@ -0,0 +1,299 @@
+<script>
+import * as d3 from 'd3'
+import * as _ from 'underscore'
+
+
+export default {
+  props: {
+    learninglearningPathContents: {
+      default: {
+        topics: [
+          {
+            id: 4,
+            title: 'Basissdf',
+            slug: 'basissdf',
+            type: 'learnpath.Topic',
+            translation_key: 'fdabcf72-728a-4279-ba34-e079761a14ad',
+            is_visible: false,
+            circles: [
+              {
+                id: 5,
+                title: 'Basis',
+                slug: 'basis',
+                type: 'learnpath.Circle',
+                translation_key: '13951cfd-b36d-42d5-b84a-178f0a7da106',
+                learning_sequences: [],
+              },
+            ],
+          },
+          {
+            id: 6,
+            title: 'Gewinnen von Kunden',
+            slug: 'gewinnen-von-kunden',
+            type: 'learnpath.Topic',
+            translation_key: 'e3a9a61e-2c60-4363-a4a8-d4ef4d4ff466',
+            is_visible: true,
+            circles: [
+              {
+                id: 7,
+                title: 'Gewinnen',
+                slug: 'gewinnen',
+                type: 'learnpath.Circle',
+                translation_key: '23b689c9-8800-4783-9842-725ee5f3a3f1',
+                learning_sequences: [],
+              },
+            ],
+          },
+          {
+            id: 8,
+            title: 'Beraten der Kunden',
+            slug: 'beraten-der-kunden',
+            type: 'learnpath.Topic',
+            translation_key: '66fdc053-68ee-4e53-b8e3-3b3816c4f8f4',
+            is_visible: true,
+            circles: [
+              {
+                id: 9,
+                title: 'Einstieg',
+                slug: 'einstieg',
+                type: 'learnpath.Circle',
+                translation_key: 'a608ce8c-1482-491d-becd-2280787285b3',
+                learning_sequences: [],
+              },
+              {
+                id: 10,
+                title: 'Analyse',
+                slug: 'analyse',
+                type: 'learnpath.Circle',
+                translation_key: '2ca5ba7a-98b8-4511-ba50-bc190714886d',
+                learning_sequences: [
+                  {
+                    id: 11,
+                    title: 'Starten',
+                  },
+                  {
+                    id: 13,
+                    title: 'Beobachten',
+                  },
+                  {
+                    id: 18,
+                    title: 'Anwenden',
+                  },
+                  {
+                    id: 30,
+                    title: 'Üben',
+                  },
+                ],
+              },
+            ],
+          },
+        ],
+      },
+      type: Object,
+    },
+
+    width: {
+      default: 1024,
+      type: Number,
+    },
+    height: {
+      default: 250,
+      type: Number,
+    },
+  },
+  computed: {
+
+    viewBox() {
+      return `0 0 ${this.width} ${this.height}`
+    },
+    circles() {
+      return _.flatten(_.pluck(this.learninglearningPathContents.topics, 'circles'));
+    },
+    svg() {
+
+      const width = this.width
+      const height = this.height
+      return d3.select(this.$el).append('svg').attr('width', width).attr('height', height)
+    }
+
+  },
+
+  mounted() {
+
+    function getPieDataForCircle(circle) {
+      const newArray = new Array(Math.max(d[2].learning_sequences.length, 1)).fill(1)
+      return newArray
+    }
+
+    const learningPathContents = []
+
+    const data = this.pieData
+
+    const circleWidth = 150
+
+
+    const radius = (circleWidth * 0.7) / 2
+    console.log(this.viewBox)
+
+
+    const cicles = this.svg
+      .selectAll('circle')
+      .data(this.circles)
+      .enter()
+      .append('circle')
+      .attr('cx', (d, i) => {
+        return (i + 1) * circleWidth - radius
+      })
+      .attr('cy', 150)
+      .attr('r', radius)
+      .attr('fill', '#99C7E7')
+
+    const circlesText = this.svg
+      .selectAll('.circlesText')
+      .data(this.circles)
+      .enter()
+      .append('text')
+      .attr('x', (d, i) => {
+        return (i + 1) * circleWidth - radius
+      })
+      .attr('y', 150 + radius + 30)
+      .attr('fill', '#00224D')
+      .style('font-size', 19)
+      .text((d) => d.title)
+      .attr('class', 'circlesText')
+      .style('text-anchor', 'middle')
+
+
+    const topicTitles = this.svg
+      .selectAll('.topicTitles')
+      .data(this.learninglearningPathContents.topics)
+      .enter()
+      .append('text')
+      .attr('x', (d, i) => {
+        return i * circleWidth * d.circles.length + 50
+      })
+      .attr('y', 50)
+      .attr('fill', '#00224D')
+
+
+      .style('font-size', 19)
+      .text((d) => d.title)
+      .attr('class', 'topicTitles')
+
+
+    const topicLines = this.svg
+      .selectAll('lines')
+      .data(this.learninglearningPathContents.topics)
+      .enter()
+      .append('line')
+      .attr('x1', (d, i) => {
+        return i * circleWidth * d.circles.length + 30
+      })
+      .attr('y1', 10)
+      .attr('x2', (d, i) => {
+        return i * circleWidth * d.circles.length + 30
+      })
+      .attr('y2', 270)
+      .attr('class', 'stroke-gray-500')
+      .attr('stroke-width', 1.76)
+
+
+    const g = this.svg.append('g').attr('transform', 'translate(' + this.width / 2 + ',' + this.height / 2 + ')')
+
+
+    // Generate the pie
+    const pie = d3.pie()
+
+    // Generate the arcs
+    const arc = d3
+      .arc()
+      .innerRadius(radius / 2)
+      .padAngle(12 / 360)
+      .outerRadius(radius)
+
+
+    //Generate groups
+    const arcs = g.selectAll('arc')
+      .data(pie(d => getPieDataForCircle(d)))
+      .enter()
+      .append('g')
+      .attr('class', 'arc')
+
+
+    //Draw arc paths
+    arcs.append('path')
+      .attr('d', arc)
+
+    // Add the path using this helper function
+
+    //     console.log(this.pieData)
+    //     const data = this.pieData
+    //
+    //     const width = this.width
+    //     const height = this.height
+    //     const radius = Math.min(width, height) / 2.5
+    //     console.log(this.viewBox)
+    //
+    //
+    //     const svg = d3.select(this.$el)
+    //       .append('svg')
+    //       .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 arcs
+    //     const arc = d3
+    //       .arc()
+    //       .innerRadius(radius / 2)
+    //       .padAngle(12 / 360)
+    //       .outerRadius(radius)
+    //
+    //
+    // //Generate groups
+    //     const arcs = g.selectAll('arc')
+    //       .data(pie(data))
+    //       .enter()
+    //       .append('g')
+    //       .attr('class', 'arc')
+    //
+    //
+    // //Draw arc paths
+    //     arcs.append('path')
+    //       .attr('d', arc)
+    //
+    //
+    //   }
+    //
+  },
+}
+</script>
+
+<style scoped>
+.svg-container {
+  display: inline-block;
+  position: relative;
+  width: 100%;
+  padding-bottom: 100%;
+  vertical-align: top;
+  overflow: hidden;
+  fill: rgb(65 181 250);
+}
+
+.svg-content {
+  display: inline-block;
+  position: absolute;
+  top: 0;
+  left: 0;
+  fill: rgb(65 181 250);
+}
+</style>
+
+<template>
+  <div id="container" class="svg-container"></div>
+</template>
diff --git a/client/src/views/LearningPathView.vue b/client/src/views/LearningPathView.vue
index d272f49f..1f54ea75 100644
--- a/client/src/views/LearningPathView.vue
+++ b/client/src/views/LearningPathView.vue
@@ -3,7 +3,7 @@ import axios from 'axios';
 import * as log from 'loglevel';
 
 import MainNavigationBar from '../components/MainNavigationBar.vue';
-import SimpleCircleDiagram from '../components/circle/SimpleCircleDiagram.vue';
+import SimpleCircleDiagram from '../components/circle/LearningPathCircleDiagram.vue';
 
 export default {
   components: {MainNavigationBar, SimpleCircleDiagram},
@@ -52,6 +52,8 @@ export default {
         }
       });
       learningPathContents.topics.push(topic)
+      console.log(learningPathContents)
+      console.log('oskadfjnmlasdmflkmsadlf')
 
 
       this.learningPathContents = learningPathContents;
@@ -70,23 +72,10 @@ export default {
     <MainNavigationBar/>
 
     <div class="learningpath flex flex-col">
-      <div class="flex flex-row  justify-start bg-white">
-        <div class="m-8 p-4 topic border-l flex flex-col justify-start" v-for="topic in learningPathContents.topics">
-          <div class="font-bold text-blue-900 mb-4">{{topic.title}}</div>
-          <div class="flex flex-row">
-            <button class="circle mr-8" aria-label="circle.title" v-for="circle in topic.circles" @click="$router.push('/circle/'+circle.slug)">
-            <SimpleCircleDiagram class="w-48 h-48" :learning-sequences="circle.learning_sequences"></SimpleCircleDiagram>
-            <div class="text-center text-xl text-blue-900 font-bold mt-4">{{ circle.title }}</div>
 
-          </button>
+      <SimpleCircleDiagram class="w-48 h-48" :learning-path-contents="learningPathContents.topics"></SimpleCircleDiagram>
 
 
-          </div>
-
-
-        </div>
-
-      </div>
       <div class="flex flex-col h-max p-6">
         <div class="text-blue-dark font-bold text-7xl m-12">
           {{ learningPathData.title }}
diff --git a/server/vbv_lernwelt/learnpath/models.py b/server/vbv_lernwelt/learnpath/models.py
index 862a901f..22fd92c1 100644
--- a/server/vbv_lernwelt/learnpath/models.py
+++ b/server/vbv_lernwelt/learnpath/models.py
@@ -87,7 +87,7 @@ class Circle(Page):
 
     @property
     def learning_sequences(self):
-        return  self.get_children().filter(content_type__model='learningsequence').values('id', 'title')
+        return self.get_children().filter(content_type__model='learningsequence').values('id', 'title')
 
     @classmethod
     def get_serializer_class(cls):