From 4d614b10cc3edd2a283c888211afe08e43898d43 Mon Sep 17 00:00:00 2001
From: Elia Bieri <elia.bieri@iterativ.ch>
Date: Wed, 17 May 2023 15:16:09 +0200
Subject: [PATCH] Fix circle diagram text

---
 .../learningPath/circlePage/CircleDiagram.vue | 38 ++++++++++++++++++-
 1 file changed, 37 insertions(+), 1 deletion(-)

diff --git a/client/src/pages/learningPath/circlePage/CircleDiagram.vue b/client/src/pages/learningPath/circlePage/CircleDiagram.vue
index 71986614..72232256 100644
--- a/client/src/pages/learningPath/circlePage/CircleDiagram.vue
+++ b/client/src/pages/learningPath/circlePage/CircleDiagram.vue
@@ -1,5 +1,7 @@
 <script setup lang="ts">
+import { showIcon } from "@/pages/learningPath/circlePage/learningSequenceUtils";
 import { useCircleStore } from "@/stores/circle";
+import type { DefaultArcObject } from "d3";
 import * as d3 from "d3";
 import pick from "lodash/pick";
 import * as log from "loglevel";
@@ -144,6 +146,7 @@ function render() {
     // Generate the arrows
     const arrowRadius = radius * 1.1;
 
+    /* eslint-disable */
     const learningSequences = g
       .selectAll(".learningSegmentArc")
       .data(pieData.value)
@@ -153,7 +156,6 @@ function render() {
       .attr("role", "button")
       .attr("fill", colors.gray[300]);
 
-    /* eslint-disable */
     learningSequences
       .on("mouseover", function (d, i) {
         d3.select(this)
@@ -189,6 +191,40 @@ function render() {
     learningSequences.append("path").attr("d", wedgeGenerator);
     /* eslint-enable */
 
+    learningSequences
+      .append("text")
+      .attr("fill", colors.blue[900])
+      .style("font-size", "15px")
+      .text((d) => {
+        return d.title;
+      })
+      .attr("transform", function (d) {
+        let translate = wedgeGenerator.centroid(d as unknown as DefaultArcObject);
+        translate = [translate[0], translate[1] + 20];
+        return "translate(" + translate + ")";
+      })
+      .attr("class", "circlesText text-large font-bold")
+      .style("text-anchor", "middle");
+
+    const iconWidth = 25;
+
+    learningSequences
+      .append("svg:image")
+      .attr("xlink:href", (d) => {
+        if (showIcon(d.icon)) {
+          return "/static/icons/" + d.icon.replace("it-", "") + ".svg";
+        }
+        return "";
+      })
+      .attr("width", iconWidth)
+      .attr("height", iconWidth)
+      .attr("transform", function (d) {
+        let translate = wedgeGenerator.centroid(d as unknown as DefaultArcObject);
+        translate = [translate[0] - iconWidth / 2, translate[1] - iconWidth];
+        return "translate(" + translate + ")";
+      })
+      .attr("class", "filter-blue-900");
+
     // Create Arrows
     const arrow = d3
       .arc()