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