Fix typecheck errors on CircleDiagram

client/src/components/learningPath/CircleDiagram.vue

@@ -5,8 +5,10 @@ import * as _ from "lodash";
 import * as log from "loglevel";
 import { computed, onMounted } from "vue";
 
+// @ts-ignore
 import colors from "@/colors.json";
 import type { LearningSequence } from "@/types";
+import type { DefaultArcObject } from "d3";
 
 const circleStore = useCircleStore();
 
@@ -33,6 +35,17 @@ onMounted(async () => {
   render();
 });
 
+interface CirclePie extends d3.PieArcDatum<number> {
+  title: string;
+  icon: string;
+  slug: string;
+  translation_key: string;
+  arrowStartAngle: number;
+  arrowEndAngle: number;
+  someFinished: boolean;
+  allFinished: boolean;
+}
+
 const pieData = computed(() => {
   const circle = circleStore.circle;
   console.log("initial of compute pie data ", circle);
@@ -42,193 +55,203 @@ const pieData = computed(() => {
 
     const pieWeights = new Array(Math.max(circle.learningSequences.length, 1)).fill(1);
     const pieGenerator = d3.pie();
-    let angles = pieGenerator(pieWeights);
+    const angles = pieGenerator(pieWeights);
-    _.forEach(angles, (pie) => {
+    let result = angles.map((angle) => {
-      pie.startAngle = pie.startAngle + Math.PI;
+      const thisLearningSequence = circle.learningSequences[angle.index];
-      pie.endAngle = pie.endAngle + Math.PI;
+
-      const thisLearningSequence = circle.learningSequences[pie.index];
+      return Object.assign(
-      pie.title = thisLearningSequence.title;
+        {
-      pie.icon = thisLearningSequence.icon;
+          startAngle: angle.startAngle + Math.PI,
-      pie.arrowStartAngle = pie.endAngle + (pie.startAngle - pie.endAngle) / 2;
+          endAngle: angle.endAngle + Math.PI,
-      pie.arrowEndAngle = pie.startAngle + (pie.startAngle - pie.endAngle) / 2;
+          ..._.pick(thisLearningSequence, ["title", "icon", "translation_key", "slug"]),
-      pie.translation_key = thisLearningSequence.translation_key;
+          arrowStartAngle: angle.endAngle + (angle.startAngle - angle.endAngle) / 2,
-      pie.slug = thisLearningSequence.slug;
+          arrowEndAngle: angle.startAngle + (angle.startAngle - angle.endAngle) / 2,
-      pie.someFinished = someFinished(thisLearningSequence);
+          someFinished: someFinished(thisLearningSequence),
-      pie.allFinished = allFinished(thisLearningSequence);
+          allFinished: allFinished(thisLearningSequence),
+        },
+        angle
+      );
     });
-    angles = angles.reverse();
+    result = result.reverse();
-    return angles;
+    return result as CirclePie[];
   }
-  return {};
+
+  return undefined;
 });
 
 const width = 450;
 const height = 450;
 const radius = Math.min(width, height) / 2.4;
 
-function render() {
+function getColor(d: CirclePie) {
-  const arrowStrokeWidth = 2;
+  let color = colors.gray[300];
+  if (d.someFinished) {
+    color = colors.sky[500];
+  }
+  if (d.allFinished) {
+    color = colors.green[500];
+  }
+  return color;
+}
 
+function getHoverColor(d: CirclePie) {
+  let color = colors.gray[200];
+  if (d.someFinished) {
+    color = colors.sky[400];
+  }
+  if (d.allFinished) {
+    color = colors.green[400];
+  }
+  return color;
+}
+
+function render() {
   const svg = d3.select(".circle-visualization");
   // Clean svg before adding new stuff.
   svg.selectAll("*").remove();
 
-  // Append marker as definition to the svg
+  if (pieData.value) {
-  svg
+    const arrowStrokeWidth = 2;
-    .attr("viewBox", `0 0 ${width} ${height}`)
+    // Append marker as definition to the svg
-    .append("svg:defs")
+    svg
-    .append("svg:marker")
+      .attr("viewBox", `0 0 ${width} ${height}`)
-    .attr("id", "triangle")
+      .append("svg:defs")
-    .attr("refX", 11)
+      .append("svg:marker")
-    .attr("refY", 11)
+      .attr("id", "triangle")
-    .attr("markerWidth", 20)
+      .attr("refX", 11)
-    .attr("markerHeight", 20)
+      .attr("refY", 11)
-    .attr("markerUnits", "userSpaceOnUse")
+      .attr("markerWidth", 20)
-    .attr("orient", "auto")
+      .attr("markerHeight", 20)
-    .append("path")
+      .attr("markerUnits", "userSpaceOnUse")
-    .attr("d", "M -1 0 l 10 0 M 0 -1 l 0 10")
+      .attr("orient", "auto")
-    .attr("transform", "rotate(-90, 10, 0)")
+      .append("path")
-    .attr("stroke-width", arrowStrokeWidth)
+      .attr("d", "M -1 0 l 10 0 M 0 -1 l 0 10")
-    .attr("stroke", colors.gray[500]);
+      .attr("transform", "rotate(-90, 10, 0)")
+      .attr("stroke-width", arrowStrokeWidth)
+      .attr("stroke", colors.gray[500]);
 
-  const g = svg
+    const g = svg
-    .append("g")
+      .append("g")
-    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
+      .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
 
-  function getColor(d) {
+    // Generate the pie diagram wede
-    let color = colors.gray[300];
+    const wedgeGenerator = d3
-    if (d.someFinished) {
+      .arc()
-      color = colors.sky[500];
+      .innerRadius(radius / 2.5)
-    }
+      .padAngle(12 / 360)
-    if (d.allFinished) {
+      .outerRadius(radius);
-      color = colors.green[500];
+
-    }
+    // Generate the arrows
-    return color;
+    const arrowRadius = radius * 1.1;
+
+    const learningSequences = g
+      .selectAll(".learningSegmentArc")
+      .data(pieData.value)
+      .enter()
+      .append("g")
+      .attr("class", "learningSegmentArc")
+      .attr("role", "button")
+      .attr("fill", colors.gray[300]);
+
+    learningSequences
+      .on("mouseover", function (d, i) {
+        d3.select(this)
+          .transition()
+          .duration(200)
+          .attr("fill", (d) => {
+            // @ts-ignore
+            return getHoverColor(d);
+          });
+      })
+      .on("mouseout", function (d, i) {
+        d3.select(this)
+          .transition()
+          .duration(200)
+          .attr("fill", (d) => {
+            // @ts-ignore
+            return getColor(d);
+          });
+      })
+      .on("click", function (d, elm) {
+        console.log("clicked on ", d, elm);
+        document.getElementById(elm.slug)?.scrollIntoView({ behavior: "smooth" });
+      });
+
+    learningSequences
+      .transition()
+      .duration(1)
+      .attr("fill", (d) => {
+        return getColor(d);
+      });
+
+    // @ts-ignore
+    learningSequences.append("path").attr("d", wedgeGenerator);
+
+    const learningSequenceText = 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;
+
+    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 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()
+      .innerRadius(arrowRadius)
+      .outerRadius(arrowRadius + arrowStrokeWidth)
+      .padAngle(20 / 360)
+      .startAngle((d) => {
+        return (d as unknown as CirclePie).arrowStartAngle;
+      })
+      .endAngle((d) => {
+        return (d as unknown as CirclePie).arrowEndAngle;
+      });
+
+    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 () {
+      const last = this.size() - 1;
+      return d3.select(this.nodes()[last]);
+    };
+
+    const all_arows = g.selectAll(".arrow");
+    // @ts-ignore
+    all_arows.last().remove();
+
+    //Draw arrow paths
+    // @ts-ignore
+    arrows.append("path").attr("fill", colors.gray[500]).attr("d", arrow);
   }
-
-  function getHoverColor(d) {
-    let color = colors.gray[200];
-    if (d.someFinished) {
-      color = colors.sky[400];
-    }
-    if (d.allFinished) {
-      color = colors.green[400];
-    }
-    return color;
-  }
-
-  // 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;
-
-  const learningSequences = g
-    .selectAll(".learningSegmentArc")
-    .data(pieData.value)
-    .enter()
-    .append("g")
-    .attr("class", "learningSegmentArc")
-    .attr("role", "button")
-    .attr("fill", colors.gray[300]);
-
-  learningSequences
-    .on("mouseover", function (d, i) {
-      d3.select(this)
-        .transition()
-        .duration(200)
-        .attr("fill", (d) => {
-          return getHoverColor(d);
-        });
-    })
-    .on("mouseout", function (d, i) {
-      d3.select(this)
-        .transition()
-        .duration(200)
-        .attr("fill", (d) => {
-          return getColor(d);
-        });
-    })
-    .on("click", function (d, elm) {
-      console.log("clicked on ", d, elm);
-      document.getElementById(elm.slug)?.scrollIntoView({ behavior: "smooth" });
-    });
-
-  learningSequences
-    .transition()
-    .duration(1)
-    .attr("fill", (d) => {
-      return getColor(d);
-    });
-
-  learningSequences.append("path").attr("d", wedgeGenerator);
-
-  const learningSequenceText = 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);
-      translate = [translate[0], translate[1] + 20];
-      return "translate(" + translate + ")";
-    })
-    .attr("class", "circlesText text-large font-bold")
-    .style("text-anchor", "middle");
-
-  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 + ")";
-    })
-    .attr("class", "filter-blue-900");
-
-  // 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 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 () {
-    const 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", colors.gray[500]).attr("d", arrow);
   return svg;
 }
 </script>

client/src/components/learningPath/LearningSequence.vue

@@ -121,8 +121,8 @@ const learningSequenceBorderClass = computed(() => {
               <span class="flex gap-4 items-center xl:h-10">
                 <button
                   class="cursor-pointer w-full sm:w-auto text-left"
-                  @click.stop="circleStore.openLearningContent(learningContent)"
                   :data-cy="`${learningContent.slug}`"
+                  @click.stop="circleStore.openLearningContent(learningContent)"
                 >
                   {{ learningContent.title }}
                 </button>

client/src/components/ui/ItCheckbox.vue

@@ -22,8 +22,8 @@ defineEmits(["update:modelValue"]);
       'opacity-50': disabled,
       'cursor-not-allowed': disabled,
     }"
-    @click="$emit('update:modelValue', !modelValue)"
     class="w-8 h-8 cursor-pointer"
+    @click="$emit('update:modelValue', !modelValue)"
   >
     <button
       v-if="modelValue"

client/src/fetchHelpers.ts

@@ -39,7 +39,6 @@ export const itPost = (url: RequestInfo, data: unknown, options: RequestInit = {
     options
   );
 
-  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
   // @ts-ignore
   options.headers["X-CSRFToken"] = getCookieValue("csrftoken");
 

client/src/pages/competence/CompetenceListPage.vue

@@ -13,8 +13,8 @@ const competenceStore = useCompetenceStore();
   <div class="container-large">
     <nav class="py-4 lg:pb-8">
       <router-link
-        class="btn-text inline-flex items-center pl-0"
         v-if="competenceStore.competenceProfilePage"
+        class="btn-text inline-flex items-center pl-0"
         :to="competenceStore.competenceProfilePage?.frontend_url"
       >
         <it-icon-arrow-left />

client/src/pages/competence/SinglePerformanceCriteriaPage.vue

@@ -63,7 +63,7 @@ findCriteria();
       @back="router.back()"
       @next="router.back()"
     >
-      <div class="container-medium" v-if="currentQuestion">
+      <div v-if="currentQuestion" class="container-medium">
         <div class="mt-4 lg:mt-8 p-6 lg:p-12 border">
           <h2 class="heading-2">
             {{ currentQuestion.competence_id }} {{ currentQuestion.title }}