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

Currently, there is still some JavaScript code which remains unmigrated.
This allows for type unsafe code to be written, potentially resulting in
unintended behavior.

Let's migrate the rest of the JavaScript code to TypeScript code to
facilitate future changes to the code.

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 -->