fix: fixed typing in components; adjusted ts config

apps/ern-genturis/index.html

@@ -16,6 +16,6 @@
       </strong>
     </noscript>
     <div id="app"></div>
-    <script type="module" src="/src/main.js"></script>
+    <script type="module" src="/src/main.ts"></script>
   </body>
 </html>

apps/ern-genturis/package.json

@@ -2,6 +2,8 @@
   "name": "ern-genturis",
   "version": "0.1.0",
   "private": true,
+  "main": "dist/index",
+  "types": "dist/index",
   "scripts": {
     "dev": "vite",
     "build": "vite build",

apps/ern-genturis/src/components/QuickLinks.vue

@@ -12,46 +12,26 @@
   </nav>
 </template>
 
-<script setup>
+<script setup lang="ts">
+// @ts-ignore
 import { LinkCard } from "molgenis-viz";
 
-const props = defineProps({
-  // an array of objects containing hrefs, labels, and background image paths
-  // that are used in the molgenis-viz component LinkCard. This is designed to work with interal pages only. All links must defined in the router.js file. If you would like to render any other links, please use the default slot.
-  data: {
-    type: Array,
-    default: [],
-    required: true,
-  },
-
-  // The name of the property that contains the router name
-  name: {
-    type: String,
-    required: true,
-  },
-
-  // The name of the property in each object that contains the text to display for each link
-  label: {
-    type: String,
-    required: true,
-  },
-
-  // (optional) the name of the property that contains the location of an image. If supplied,
-  // this will render the image in the background.
-  imageSrc: {
-    type: String,
-  },
+interface IObjectKeyPairs {
+  [key: string]: string;
+}
 
-  // Specify the vertical height of the LinkCard components
-  height: {
-    type: String,
-    default: "medium",
-    validator: (value) => {
-      const options = ["xsmall", "small", "medium", "large"];
-      return options.includes(value);
-    },
-  },
-});
+withDefaults(
+  defineProps<{
+    data: IObjectKeyPairs[];
+    name: string;
+    label: string;
+    imageSrc: string;
+    height?: "xsmall" | "small" | "medium" | "large";
+  }>(),
+  {
+    height: "medium",
+  }
+);
 </script>
 
 <style lang="scss">

apps/ern-genturis/src/main.js → apps/ern-genturis/src/main.ts

@@ -1,5 +1,8 @@
 import { createApp } from "vue";
+
+// @ts-ignore
 import App from "./App.vue";
+// @ts-ignore
 import router from "./router/router";
 
 import "molgenis-components/dist/style.css";

apps/ern-genturis/src/views/view-home.vue

@@ -135,6 +135,8 @@
 <script setup lang="ts">
 // @ts-ignore
 import { Page, PageHeader, PageSection } from "molgenis-viz";
+// @ts-ignore
 import QuickLinks from "../components/QuickLinks.vue";
+// @ts-ignore
 import Address from "../components/Address.vue";
 </script>

apps/ern-genturis/src/views/view-public-dashboard.vue

@@ -39,7 +39,7 @@
             }"
             :pointRadius="4"
             :tooltipTemplate="
-              (row) => {
+              (row: IOrganisations) => {
                 return `
                 <p class='title'>${row.name}</p>
                 <p class='location'>${row.city}, ${row.country}</p>
@@ -97,6 +97,7 @@
 import { ref, onMounted } from "vue";
 import gql from "graphql-tag";
 import { request } from "graphql-request";
+// @ts-ignore
 import {
   Page,
   Dashboard,
@@ -110,23 +111,26 @@ import {
   ColumnChart,
   DataTable,
   DataValueHighlights,
+  // @ts-ignore
 } from "molgenis-viz";
 
 import { seqAlongBy } from "../utils/utils";
 import { max } from "d3";
 const d3 = { max };
 
+interface IProviderInformation {
+  providerIdentifier: string;
+  hasSubmittedData: boolean;
+}
+
 interface IOrganisations {
   name: string;
   code: string;
   city: string;
   country: string;
   latitude: number;
   longitude: number;
-  providerInformation: {
-    providerIdentifier: string;
-    hasSubmittedData: string;
-  };
+  providerInformation: IProviderInformation[];
 }
 
 interface IStatistics {
@@ -189,12 +193,14 @@ async function getOrganisations() {
     "../api/graphql",
     query
   );
-  const data: IOrganisations[] = response.Organisations.map((row) => {
-    const status = row.providerInformation[0].hasSubmittedData
-      ? "Data Submitted"
-      : "No Data";
-    return { ...row, hasSubmittedData: status };
-  });
+  const data: IOrganisations[] = response.Organisations.map(
+    (row: IOrganisations) => {
+      const status = row.providerInformation[0].hasSubmittedData
+        ? "Data Submitted"
+        : "No Data";
+      return { ...row, hasSubmittedData: status };
+    }
+  );
   organisations.value = data;
 }
 

apps/yarn.lock

@@ -2789,7 +2789,7 @@
     de-indent "^1.0.2"
     he "^1.2.0"
 
-"@vue/devtools-api@^6.0.0-beta.11", "@vue/devtools-api@^6.5.0", "@vue/devtools-api@^6.6.3", "@vue/devtools-api@^6.6.4":
+"@vue/devtools-api@^6.5.0", "@vue/devtools-api@^6.6.3", "@vue/devtools-api@^6.6.4":
   version "6.6.4"
   resolved "https://registry.yarnpkg.com/@vue/devtools-api/-/devtools-api-6.6.4.tgz#cbe97fe0162b365edc1dba80e173f90492535343"
   integrity sha512-sGhTPMuXqZ1rVOk32RylztWkfXTRhuS7vgAKv0zjqk8gbsHkJ7xfFf+jbySxt7tWObEJwyKaHMikV/WGDiQm8g==
@@ -7665,13 +7665,6 @@ import-lazy@~4.0.0:
   resolved "https://registry.yarnpkg.com/import-lazy/-/import-lazy-4.0.0.tgz#e8eb627483a0a43da3c03f3e35548be5cb0cc153"
   integrity sha512-rKtvo6a868b5Hu3heneU+L4yEQ4jYKLtjpnPeUdK7h0yzXGmyBTypknlkCvHFBqfX9YlorEiMM6Dnq/5atfHkw==
 
-import@^0.0.6:
-  version "0.0.6"
-  resolved "https://registry.yarnpkg.com/import/-/import-0.0.6.tgz#d0eb79df86aa2677c6db61578a5212b3031e6042"
-  integrity sha512-QPhTdjy9J4wUzmWSG7APkSgMFuPGPw+iJTYUblcfc2AfpqaatbwgCldK1HoLYx+v/+lWvab63GWZtNkcnj9JcQ==
-  dependencies:
-    optimist "0.3.x"
-
 impound@^0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/impound/-/impound-0.1.0.tgz#3f6ff0597fd138f8f2676cc63862bbd005db413a"
@@ -10129,13 +10122,6 @@ opener@^1.5.1:
   resolved "https://registry.yarnpkg.com/opener/-/opener-1.5.2.tgz#5d37e1f35077b9dcac4301372271afdeb2a13598"
   integrity sha512-ur5UIdyw5Y7yEj9wLzhqXiy6GZ3Mwx0yGI+5sMn2r0N0v3cKJvUmFH5yPP+WXh9e0xfyzyJX95D8l088DNFj7A==
 
-optimist@0.3.x:
-  version "0.3.7"
-  resolved "https://registry.yarnpkg.com/optimist/-/optimist-0.3.7.tgz#c90941ad59e4273328923074d2cf2e7cbc6ec0d9"
-  integrity sha512-TCx0dXQzVtSCg2OgY/bO9hjM9cV4XYx09TVK+s3+FhkjT6LovsLe+pPMzpWf+6yXK/hUizs2gUoTw3jHM0VaTQ==
-  dependencies:
-    wordwrap "~0.0.2"
-
 ora@^1.3.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/ora/-/ora-1.4.0.tgz#884458215b3a5d4097592285f93321bb7a79e2e5"
@@ -12533,7 +12519,16 @@ string-env-interpolation@1.0.1:
   resolved "https://registry.yarnpkg.com/string-env-interpolation/-/string-env-interpolation-1.0.1.tgz#ad4397ae4ac53fe6c91d1402ad6f6a52862c7152"
   integrity sha512-78lwMoCcn0nNu8LszbP1UA7g55OeE4v7rCeWnM5B453rnNr4aq+5it3FEYtZrSEiMvHZOZ9Jlqb0OD0M2VInqg==
 
-"string-width-cjs@npm:string-width@^4.2.0", "string-width@^1.0.2 || 2 || 3 || 4", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
+"string-width-cjs@npm:string-width@^4.2.0":
+  version "4.2.3"
+  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
+  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
+  dependencies:
+    emoji-regex "^8.0.0"
+    is-fullwidth-code-point "^3.0.0"
+    strip-ansi "^6.0.1"
+
+"string-width@^1.0.2 || 2 || 3 || 4", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -12573,7 +12568,7 @@ string_decoder@~1.1.1:
   dependencies:
     safe-buffer "~5.1.0"
 
-"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
+"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
   integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
@@ -12594,6 +12589,13 @@ strip-ansi@^4.0.0:
   dependencies:
     ansi-regex "^3.0.0"
 
+strip-ansi@^6.0.0, strip-ansi@^6.0.1:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
+  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
+  dependencies:
+    ansi-regex "^5.0.1"
+
 strip-ansi@^7.0.1:
   version "7.1.0"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-7.1.0.tgz#d5b6568ca689d8561370b0707685d22434faff45"
@@ -14118,11 +14120,6 @@ vue-scrollto@2.20.0:
   dependencies:
     bezier-easing "2.1.0"
 
-vue-tabler-icons@2.21.0:
-  version "2.21.0"
-  resolved "https://registry.yarnpkg.com/vue-tabler-icons/-/vue-tabler-icons-2.21.0.tgz#b4f42285a4cd6ca6c8b986299732d2c0cfa4f2b1"
-  integrity sha512-rEZYPd37j1sd/9gBFtC1u8wj3Pz1S3gLP1tgexvnivzQPXphc6M+7XuTSOd7wtdpaLt1sQgDmuQxIgczzrvf0A==
-
 vue-template-compiler@^2.6.11, vue-template-compiler@^2.7.14:
   version "2.7.16"
   resolved "https://registry.yarnpkg.com/vue-template-compiler/-/vue-template-compiler-2.7.16.tgz#c81b2d47753264c77ac03b9966a46637482bb03b"
@@ -14194,13 +14191,6 @@ vuedraggable@4.1.0:
   dependencies:
     sortablejs "1.14.0"
 
-vuex@4.1.0:
-  version "4.1.0"
-  resolved "https://registry.yarnpkg.com/vuex/-/vuex-4.1.0.tgz#aa1b3ea5c7385812b074c86faeeec2217872e36c"
-  integrity sha512-hmV6UerDrPcgbSy9ORAtNXDr9M4wlNP4pEFKye4ujJF8oqgFFuxDCdOLS3eNoRTtq5O3hoBDh9Doj1bQMYHRbQ==
-  dependencies:
-    "@vue/devtools-api" "^6.0.0-beta.11"
-
 w3c-xmlserializer@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/w3c-xmlserializer/-/w3c-xmlserializer-4.0.0.tgz#aebdc84920d806222936e3cdce408e32488a3073"
@@ -14363,12 +14353,7 @@ wordwrap@^1.0.0, wordwrap@~1.0.0:
   resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-1.0.0.tgz#27584810891456a4171c8d0226441ade90cbcaeb"
   integrity sha512-gvVzJFlPycKc5dZN4yPkP8w7Dc37BtP1yczEneOb4uq34pXZcvrtRTmWV8W+Ume+XCxKgbjM+nevkyFPMybd4Q==
 
-wordwrap@~0.0.2:
-  version "0.0.3"
-  resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-0.0.3.tgz#a3d5da6cd5c0bc0008d37234bbaf1bed63059107"
-  integrity sha512-1tMA907+V4QmxV7dbRvb4/8MaRALK6q9Abid3ndMYnbyo8piisCmeONVqVSXqQA3KaP4SLt5b7ud6E2sqP8TFw==
-
-"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0:
+"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0":
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
   integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
@@ -14385,6 +14370,15 @@ wrap-ansi@^3.0.1:
     string-width "^2.1.1"
     strip-ansi "^4.0.0"
 
+wrap-ansi@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
+  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
+  dependencies:
+    ansi-styles "^4.0.0"
+    string-width "^4.1.0"
+    strip-ansi "^6.0.0"
+
 wrap-ansi@^8.1.0:
   version "8.1.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-8.1.0.tgz#56dc22368ee570face1b49819975d9b9a5ead214"

package.json

@@ -0,0 +1,5 @@
+{
+  "devDependencies": {
+    "@types/d3": "^7.4.3"
+  }
+}