Fix some details in d3 diagrams

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

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)";
       });
 

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>

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 {