[#1936] Migrate c-ramp.vue to typescript

frontend/src/components/c-ramp.vue

@@ -7,7 +7,7 @@
           draggable="false",
           v-on:click="rampClick",
           v-bind:href="getLink(commit)", target="_blank",
-          v-bind:title="getContributionMessage(slice, commit)",
+          v-bind:title="getContributionMessageByCommit(slice, commit)",
           v-bind:class="`ramp__slice--color${getRampColor(commit, slice)}`,\
             !isBrokenLink(getLink(commit)) ? '' : 'broken-link'",
           v-bind:style="{\
@@ -34,11 +34,13 @@
       )
 </template>
 
-<script>
+<script lang='ts'>
+import { defineComponent } from 'vue';
 import brokenLinkDisabler from '../mixin/brokenLinkMixin';
 import User from '../utils/user';
+import { Commit, CommitResult } from '../types/types';
 
-export default {
+export default defineComponent({
   name: 'c-ramp',
   mixins: [brokenLinkDisabler],
   props: {
@@ -85,24 +87,32 @@ export default {
   },
   data() {
     return {
-      rampSize: 0.01,
-      mergeCommitRampSize: this.rampSize * 20,
-      deletesContributionRampSize: this.rampSize * 20,
+      rampSize: 0.01 as number,
     };
   },
 
+  computed: {
+    mergeCommitRampSize(): number {
+      return this.rampSize * 20;
+    },
+    deletesContributionRampSize(): number {
+      return this.rampSize * 20;
+    },
+  },
+
   methods: {
-    getLink(commit) {
+    getLink(commit: CommitResult) {
       return window.getCommitLink(commit.repoId, commit.hash);
     },
-    getContributions(commit) {
+    getContributions(commit: CommitResult | Commit) {
       return commit.insertions + commit.deletions;
     },
-    isDeletesContribution(commit) {
+    isDeletesContribution(commit: CommitResult | Commit) {
       return commit.insertions === 0 && commit.deletions > 0;
     },
-    getWidth(slice) {
-      if (slice.isMergeCommit) {
+    getWidth(slice: CommitResult | Commit) {
+      // Check if slice contains 'isMergeCommit' attribute
+      if ('isMergeCommit' in slice && slice.isMergeCommit) {
         return this.mergeCommitRampSize;
       }
       if (this.getContributions(slice) === 0) {
@@ -111,29 +121,29 @@ export default {
       if (this.isDeletesContribution(slice)) {
         return this.deletesContributionRampSize;
       }
-      const newSize = 100 * (slice.insertions / this.avgsize);
+      // '+' unary operator here attempts to convert this.avgsize to number, if it is not already one
+      const newSize = 100 * (slice.insertions / +this.avgsize);
       return Math.max(newSize * this.rampSize, 0.5);
     },
-    getContributionMessage(slice, commit) {
-      let title = '';
-      if (this.tframe === 'commit') {
-        return `[${slice.date}] ${commit.messageTitle}: +${commit.insertions} -${commit.deletions} lines `;
-      }
-
-      title = this.tframe === 'day'
-            ? `[${slice.date}] Daily `
-            : `[${slice.date} till ${slice.endDate}] Weekly `;
+    getContributionMessageByCommit(slice: Commit, commit: CommitResult) {
+      return `[${slice.date}] ${commit.messageTitle}: +${commit.insertions} -${commit.deletions} lines `;
+    },
+    getContributionMessage(slice: Commit) {
+      let title = this.tframe === 'day'
+          ? `[${slice.date}] Daily `
+          : `[${slice.date} till ${slice.endDate}] Weekly `;
       title += `contribution: +${slice.insertions} -${slice.deletions} lines`;
       return title;
     },
-    openTabZoom(user, slice, evt) {
+    openTabZoom(user: User, slice: Commit, evt: MouseEvent) {
       // prevent opening of zoom tab when cmd/ctrl click
       if (window.isMacintosh ? evt.metaKey : evt.ctrlKey) {
         return;
       }
 
       const zoomUser = { ...user };
-      zoomUser.commits = user.dailyCommits;
+      // Type cast here is unsafe
+      zoomUser.commits = user.dailyCommits as Commit[];
 
       const info = {
         zRepo: user.repoName,
@@ -155,27 +165,27 @@ export default {
     },
 
     // position for commit granularity
-    getCommitPos(i, total) {
+    getCommitPos(i: number, total: number) {
       return (((total - i - 1) * window.DAY_IN_MS) / total)
           / (this.getTotalForPos(this.sdate, this.udate) + window.DAY_IN_MS);
     },
     // position for day granularity
-    getSlicePos(date) {
+    getSlicePos(date: string) {
       const total = this.getTotalForPos(this.sdate, this.udate);
-      return (new Date(this.udate) - new Date(date)) / (total + window.DAY_IN_MS);
+      return (new Date(this.udate).valueOf() - new Date(date).valueOf()) / (total + window.DAY_IN_MS);
     },
 
     // get duration in miliseconds between 2 date
-    getTotalForPos(sinceDate, untilDate) {
-      return new Date(untilDate) - new Date(sinceDate);
+    getTotalForPos(sinceDate: string, untilDate: string) {
+      return new Date(untilDate).valueOf() - new Date(sinceDate).valueOf();
     },
-    getRampColor(commit, slice) {
+    getRampColor(commit: CommitResult, slice: Commit) {
       if (this.isDeletesContribution(commit)) {
         return '-deletes';
       }
       return this.getSliceColor(slice);
     },
-    getSliceColor(slice) {
+    getSliceColor(slice: Commit) {
       if (this.isDeletesContribution(slice)) {
         return '-deletes';
       }
@@ -187,7 +197,7 @@ export default {
     },
 
     // Prevent browser from switching to new tab when clicking ramp
-    rampClick(evt) {
+    rampClick(evt: MouseEvent) {
       const isKeyPressed = window.isMacintosh ? evt.metaKey : evt.ctrlKey;
       if (isKeyPressed) {
         evt.preventDefault();
@@ -202,7 +212,7 @@ export default {
       return undefined;
     },
   },
-};
+});
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->