From d80b3ba3ef206ecbb52a0dea7266ac4d6bb7f99b Mon Sep 17 00:00:00 2001
From: Daniel Egger <daniel.egger@gmail.com>
Date: Tue, 11 Oct 2022 15:08:51 +0200
Subject: [PATCH] Fix some details in d3 diagrams

---
 .../src/components/learningPath/CircleDiagram.vue  |  3 ++-
 .../learningPath/LearningPathDiagram.vue           | 14 ++++++++------
 client/src/pages/learningPath/LearningPathPage.vue |  2 +-
 client/tailwind.css                                |  4 ++++
 4 files changed, 15 insertions(+), 8 deletions(-)

diff --git a/client/src/components/learningPath/CircleDiagram.vue b/client/src/components/learningPath/CircleDiagram.vue
index fe04d657..568bdebf 100644
--- a/client/src/components/learningPath/CircleDiagram.vue
+++ b/client/src/components/learningPath/CircleDiagram.vue
@@ -194,7 +194,8 @@ function render() {
       let translate = wedgeGenerator.centroid(d);
       translate = [translate[0] - iconWidth / 2, translate[1] - iconWidth];
       return "translate(" + translate + ")";
-    });
+    })
+    .attr("class", "filter-blue-900");
 
   // Create Arrows
   const arrow = d3
diff --git a/client/src/components/learningPath/LearningPathDiagram.vue b/client/src/components/learningPath/LearningPathDiagram.vue
index 711d4d35..b93e0ba9 100644
--- a/client/src/components/learningPath/LearningPathDiagram.vue
+++ b/client/src/components/learningPath/LearningPathDiagram.vue
@@ -89,14 +89,16 @@ export default {
   mounted() {
     log.debug("LearningPathDiagram mounted");
 
+    const circleWidth = this.vertical ? 60 : 200;
+    const radius = (circleWidth * 0.8) / 2;
+
     if (this.vertical) {
       this.width = Math.min(960, window.innerWidth - 32);
       this.height = 860;
+    } else {
+      this.width = circleWidth * this.circles.length;
     }
 
-    const circleWidth = this.vertical ? 60 : 200;
-    const radius = (circleWidth * 0.8) / 2;
-
     function getColor(d) {
       let color = colors.gray[300];
       if (d.someFinished) {
@@ -208,7 +210,7 @@ export default {
       for (let index = 0; index < i; index++) {
         x += circleWidth * topics[index].circles.length;
       }
-      return x + 30;
+      return x + 10;
     }
 
     function getTopicVerticalPosition(i, d, topics) {
@@ -266,7 +268,7 @@ export default {
 
     if (this.vertical) {
       const Circles_X = radius;
-      const Topics_X = Circles_X - radius;
+      const Topics_X = Circles_X - circleWidth;
 
       circle_groups.attr("transform", (d, i) => {
         return (
@@ -302,7 +304,7 @@ export default {
       topicTitles.attr("y", 30);
     } else {
       circle_groups.attr("transform", (d, i) => {
-        const x_coord = (i + 1) * circleWidth - radius;
+        const x_coord = (i + 1) * circleWidth - circleWidth / 2;
         return "translate(" + x_coord + ", 200)";
       });
 
diff --git a/client/src/pages/learningPath/LearningPathPage.vue b/client/src/pages/learningPath/LearningPathPage.vue
index 4ce80d13..e4175d3d 100644
--- a/client/src/pages/learningPath/LearningPathPage.vue
+++ b/client/src/pages/learningPath/LearningPathPage.vue
@@ -68,7 +68,7 @@ const createContinueUrl = (learningPath: LearningPath): [string, boolean] => {
             </button>
           </div>
           <LearningPathDiagram
-            class="max-w-[1680px] w-full"
+            class="mx-auto max-w-[1920px] w-full"
             identifier="mainVisualization"
             :vertical="false"
           ></LearningPathDiagram>
diff --git a/client/tailwind.css b/client/tailwind.css
index 7058ae4c..2b9b963e 100644
--- a/client/tailwind.css
+++ b/client/tailwind.css
@@ -66,6 +66,10 @@ svg {
   .container-large {
     @apply mx-auto max-w-6xl w-full px-4 lg:px-8 py-4;
   }
+
+  .filter-blue-900 {
+    filter: invert(9%) sepia(38%) saturate(5684%) hue-rotate(200deg) brightness(95%) contrast(105%);
+  }
 }
 
 @layer components {