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,37 +55,63 @@ 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();
 
+  if (pieData.value) {
+    const arrowStrokeWidth = 2;
     // Append marker as definition to the svg
     svg
       .attr("viewBox", `0 0 ${width} ${height}`)
@@ -95,28 +134,6 @@ function render() {
       .append("g")
       .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
 
-  function getColor(d) {
-    let color = colors.gray[300];
-    if (d.someFinished) {
-      color = colors.sky[500];
-    }
-    if (d.allFinished) {
-      color = colors.green[500];
-    }
-    return color;
-  }
-
-  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()
@@ -142,6 +159,7 @@ function render() {
           .transition()
           .duration(200)
           .attr("fill", (d) => {
+            // @ts-ignore
             return getHoverColor(d);
           });
       })
@@ -150,6 +168,7 @@ function render() {
           .transition()
           .duration(200)
           .attr("fill", (d) => {
+            // @ts-ignore
             return getColor(d);
           });
       })
@@ -165,6 +184,7 @@ function render() {
         return getColor(d);
       });
 
+    // @ts-ignore
     learningSequences.append("path").attr("d", wedgeGenerator);
 
     const learningSequenceText = learningSequences
@@ -175,7 +195,7 @@ function render() {
         return d.title;
       })
       .attr("transform", function (d) {
-      let translate = wedgeGenerator.centroid(d);
+        let translate = wedgeGenerator.centroid(d as unknown as DefaultArcObject);
         translate = [translate[0], translate[1] + 20];
         return "translate(" + translate + ")";
       })
@@ -192,7 +212,7 @@ function render() {
       .attr("width", iconWidth)
       .attr("height", iconWidth)
       .attr("transform", function (d) {
-      let translate = wedgeGenerator.centroid(d);
+        let translate = wedgeGenerator.centroid(d as unknown as DefaultArcObject);
         translate = [translate[0] - iconWidth / 2, translate[1] - iconWidth];
         return "translate(" + translate + ")";
       })
@@ -205,10 +225,10 @@ function render() {
       .outerRadius(arrowRadius + arrowStrokeWidth)
       .padAngle(20 / 360)
       .startAngle((d) => {
-      return d.arrowStartAngle;
+        return (d as unknown as CirclePie).arrowStartAngle;
       })
       .endAngle((d) => {
-      return d.arrowEndAngle;
+        return (d as unknown as CirclePie).arrowEndAngle;
       });
 
     const arrows = g
@@ -225,10 +245,13 @@ function render() {
     };
 
     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);
+  }
   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 }}