- added DataMetricsBadge.vue component for showing metrics downloads, views and citations

- npm updates
- new major version typescript 5

src/views/dataset-detail.component/dataset-detail.component.ts

@@ -9,11 +9,14 @@ import advancedFormat from "dayjs/plugin/advancedFormat";
 import VsInput from "@/components/vs-input/vs-input.vue";
 import { Suggestion } from "@/models/dataset";
 import { VUE_APP_PORTAL } from "@/constants";
+// import DataMetricsBadge from "data-metrics-badge/dist/data-metrics-badge.js";
+import DataMetricsBadge from "@/components/datacite/DataMetricsBadge.vue";
 
 @Component({
     name: "DatasetDetailComponent",
     components: {
         VsInput,
+        DataMetricsBadge,
     },
 })
 export default class DatasetDetailComponent extends Vue {
@@ -29,6 +32,12 @@ export default class DatasetDetailComponent extends Vue {
     public openAccessLicences: Array<string> = ["CC-BY-4.0", "CC-BY-SA-4.0"];
     public portal = VUE_APP_PORTAL + "/api/file/download/";
 
+    public post = {
+        views: 25,
+        downloads: 1262,
+        citations: 2424,
+    };
+
     created(): void {
         dayjs.extend(advancedFormat);
         this.getDataset(this.datasetId);

src/views/dataset-detail.component/dataset-detail.component.vue

@@ -156,6 +156,9 @@
                     <div class="card">
                         <div class="column">
                             <h2 class="label uppercase">Details</h2>
+                            <!-- <data-metrics-badge doi="10.7272/q6g15xs4" display="regular"></data-metrics-badge> -->
+                            <!-- <data-metrics-badge doi="10.24341/tethys.209" display="small" v-bind:data-input="post"></data-metrics-badge> -->
+                            <data-metrics-badge v-bind:doi="dataset.identifier.value" display="small"></data-metrics-badge>
                         </div>
                     </div>
                     <div class="card">