From f66b046e1bb7994d0a9798ff6530d3d7d3fcc7a7 Mon Sep 17 00:00:00 2001
From: David <davids89034@gmail.com>
Date: Tue, 4 Apr 2023 14:53:07 +0800
Subject: [PATCH 1/5] Change brokenLinkMixin to accept undefined as well

---
 frontend/src/mixin/brokenLinkMixin.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/mixin/brokenLinkMixin.ts b/frontend/src/mixin/brokenLinkMixin.ts
index 2a7714647c..cda35dbb3c 100644
--- a/frontend/src/mixin/brokenLinkMixin.ts
+++ b/frontend/src/mixin/brokenLinkMixin.ts
@@ -7,10 +7,10 @@ export default defineComponent({
     };
   },
   methods: {
-    isBrokenLink(link: string) {
+    isBrokenLink(link: string | undefined) {
       return link === undefined;
     },
-    getLinkMessage(link: string, linkMessage: string): string {
+    getLinkMessage(link: string | undefined, linkMessage: string): string {
       if (this.isBrokenLink(link)) {
         return this.disabledLinkMessage;
       }

From ad1b25ca33083ce4bcb0aac1dfcfc8efad3c59e8 Mon Sep 17 00:00:00 2001
From: David <davids89034@gmail.com>
Date: Tue, 4 Apr 2023 14:53:45 +0800
Subject: [PATCH 2/5] Fix mistake in window.getAuthorDisplayName type
 definition

---
 frontend/src/types/window.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/types/window.ts b/frontend/src/types/window.ts
index a8a338d68b..8180527408 100644
--- a/frontend/src/types/window.ts
+++ b/frontend/src/types/window.ts
@@ -62,7 +62,7 @@ declare global {
     getBlameLink: (repoId: string, branch: string, filepath: string) => string | undefined;
     getHistoryLink: (repoId: string, branch: string, filepath: string) => string | undefined;
     getGroupName: (group: UserType[], filterGroupSelection: string) => string;
-    getAuthorDisplayName: (authorRepos: Repo[]) => string;
+    getAuthorDisplayName: (authorRepos: UserType[]) => string;
     api: Api;
     sinceDate: string;
     untilDate: string;

From 7417d33892f4ab22ad8b92d8e69831005508d957 Mon Sep 17 00:00:00 2001
From: David <davids89034@gmail.com>
Date: Tue, 4 Apr 2023 14:54:11 +0800
Subject: [PATCH 3/5] Migrate c-summary-charts to TypeScript

---
 frontend/src/components/c-summary-charts.vue | 138 +++++++++++--------
 1 file changed, 78 insertions(+), 60 deletions(-)

diff --git a/frontend/src/components/c-summary-charts.vue b/frontend/src/components/c-summary-charts.vue
index 6a089ddcb4..c52579608e 100644
--- a/frontend/src/components/c-summary-charts.vue
+++ b/frontend/src/components/c-summary-charts.vue
@@ -181,13 +181,18 @@
             )
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent } from 'vue';
 import { mapState } from 'vuex';
 
 import brokenLinkDisabler from '../mixin/brokenLinkMixin';
 import cRamp from './c-ramp.vue';
+import { User } from '../types/types';
+import { FilterGroupSelection, FilterTimeFrame, SortGroupSelection } from '../types/summary';
+import { StoreState, ZoomInfo } from '../types/vuex.d';
+import { AuthorFileTypeContributions } from '../types/zod/commits-type';
 
-export default {
+export default defineComponent({
   name: 'c-summary-charts',
   components: {
     cRamp,
@@ -195,11 +200,11 @@ export default {
   mixins: [brokenLinkDisabler],
   props: {
     checkedFileTypes: {
-      type: Array,
+      type: Array<String>,
       required: true,
     },
     filtered: {
-      type: Array,
+      type: Array<Array<User>>,
       required: true,
     },
     avgContributionSize: {
@@ -212,11 +217,11 @@ export default {
     },
     filterGroupSelection: {
       type: String,
-      default: 'groupByRepos',
+      default: FilterGroupSelection.GroupByRepos,
     },
     filterTimeFrame: {
       type: String,
-      default: 'commit',
+      default: FilterTimeFrame.Commit,
     },
     filterSinceDate: {
       type: String,
@@ -244,26 +249,26 @@ export default {
     },
     sortGroupSelection: {
       type: String,
-      default: 'groupTitle',
+      default: SortGroupSelection.GroupTitle,
     },
   },
   data() {
     return {
-      drags: [],
-      activeRepo: null,
-      activeUser: null,
-      activeTabType: null,
+      drags: [] as number[],
+      activeRepo: null as string | null,
+      activeUser: null as string | null,
+      activeTabType: null as string | null,
       isTabOnMergedGroup: false,
     };
   },
 
   computed: {
-    avgCommitSize() {
+    avgCommitSize(): number {
       let totalCommits = 0;
       let totalCount = 0;
       this.filteredRepos.forEach((repo) => {
         repo.forEach((user) => {
-          user.commits.forEach((slice) => {
+          user.commits?.forEach((slice) => {
             if (slice.insertions > 0) {
               totalCount += 1;
               totalCommits += slice.insertions;
@@ -274,11 +279,14 @@ export default {
       return totalCommits / totalCount;
     },
 
-    filteredRepos() {
+    filteredRepos(): User[][] {
       return this.filtered.filter((repo) => repo.length > 0);
     },
 
-    ...mapState(['mergedGroups', 'fileTypeColors']),
+    ...mapState({
+      mergedGroups: (state: unknown) => (state as StoreState).mergedGroups,
+      fileTypeColors: (state: unknown) => (state as StoreState).fileTypeColors,
+    }),
   },
   watch: {
     '$store.state.isTabActive': function () {
@@ -291,11 +299,11 @@ export default {
     this.retrieveSelectedTabHash();
   },
   methods: {
-    getFileTypeContributionBars(fileTypeContribution) {
+    getFileTypeContributionBars(fileTypeContribution: AuthorFileTypeContributions): { [key: string]: number[] } {
       let currentBarWidth = 0;
       const fullBarWidth = 100;
       const contributionPerFullBar = (this.avgContributionSize * 2);
-      const allFileTypesContributionBars = {};
+      const allFileTypesContributionBars: { [key: string]: number[] } = {};
 
       Object.keys(fileTypeContribution)
         .filter((fileType) => this.checkedFileTypes.includes(fileType))
@@ -330,8 +338,8 @@ export default {
       return allFileTypesContributionBars;
     },
 
-    getFileTypes(repo) {
-      const fileTypes = [];
+    getFileTypes(repo: User[]): string[] {
+      const fileTypes: string[] = [];
       repo.forEach((user) => {
         Object.keys(user.fileTypeContribution).forEach((fileType) => {
           if (this.checkedFileTypes.includes(fileType) && !fileTypes.includes(fileType)) {
@@ -342,11 +350,11 @@ export default {
       return fileTypes;
     },
 
-    getGroupTotalContribution(group) {
+    getGroupTotalContribution(group: User[]): number {
       return group.reduce((acc, ele) => acc + ele.checkedFileTypeContribution, 0);
     },
 
-    getContributionBars(totalContribution) {
+    getContributionBars(totalContribution: number): number[] {
       const res = [];
       const contributionLimit = (this.avgContributionSize * 2);
 
@@ -363,23 +371,23 @@ export default {
       return res;
     },
 
-    getAuthorProfileLink(repo, userName) {
+    getAuthorProfileLink(repo: User, userName: string): string | undefined {
       return window.getAuthorLink(repo.repoId, userName);
     },
 
-    getGroupRepoLinkMessage(repo) {
+    getGroupRepoLinkMessage(repo: User): string {
       return this.getLinkMessage(this.getRepoLink(repo), 'Click to view group\'s repo');
     },
 
-    getAuthorProfileLinkMessage(repo) {
+    getAuthorProfileLinkMessage(repo: User): string {
       return this.getLinkMessage(this.getAuthorProfileLink(repo, repo.name), 'Click to view author\'s profile');
     },
 
-    getRepoLinkMessage(repo) {
+    getRepoLinkMessage(repo: User): string {
       return this.getLinkMessage(this.getRepoLink(repo), 'Click to view repo');
     },
 
-    getRepoLink(repo) {
+    getRepoLink(repo: User): string | undefined {
       const { REPOS } = window;
       const { location, branch } = REPOS[repo.repoId];
 
@@ -390,7 +398,7 @@ export default {
       return repo.location;
     },
 
-    getRepoIcon(repo) {
+    getRepoIcon(repo: User): string[] {
       const domainName = window.REPOS[repo.repoId].location.domainName;
 
       switch (domainName) {
@@ -406,7 +414,7 @@ export default {
     },
 
     // triggering opening of tabs //
-    openTabAuthorship(user, repo, index, isMerged) {
+    openTabAuthorship(user: User, repo: User[], index: number, isMerged: boolean): void {
       const {
         minDate, maxDate, checkedFileTypes,
       } = this;
@@ -426,7 +434,7 @@ export default {
       this.$store.commit('updateTabAuthorshipInfo', info);
     },
 
-    openTabZoomSubrange(user, evt, isMerged) {
+    openTabZoomSubrange(user: User, evt: MouseEvent, isMerged: boolean): void {
       const isKeyPressed = window.isMacintosh ? evt.metaKey : evt.ctrlKey;
 
       if (isKeyPressed) {
@@ -439,7 +447,7 @@ export default {
 
       // skip if accidentally clicked on ramp chart
       if (this.drags.length === 2 && this.drags[1] - this.drags[0]) {
-        const tdiff = new Date(this.filterUntilDate) - new Date(this.filterSinceDate);
+        const tdiff = (new Date(this.filterUntilDate)).valueOf() - (new Date(this.filterSinceDate)).valueOf();
         const idxs = this.drags.map((x) => (x * tdiff) / 100);
         const tsince = window.getDateStr(new Date(this.filterSinceDate).getTime() + idxs[0]);
         const tuntil = window.getDateStr(new Date(this.filterSinceDate).getTime() + idxs[1]);
@@ -448,13 +456,13 @@ export default {
       }
     },
 
-    openTabZoom(user, since, until, isMerged) {
+    openTabZoom(user: User, since: string, until: string, isMerged: boolean): void {
       const {
         avgCommitSize, filterGroupSelection, filterTimeFrame, filterSearch,
       } = this;
       // Deep copy to ensure changes in zoom (e.g. toggle state) won't affect summary, and vice versa
       const clonedUser = JSON.parse(JSON.stringify(user));
-      const info = {
+      const info: ZoomInfo = {
         zRepo: user.repoName,
         zAuthor: user.name,
         zFilterGroup: filterGroupSelection,
@@ -473,31 +481,41 @@ export default {
       this.$store.commit('updateTabZoomInfo', info);
     },
 
-    getBaseTarget(target) {
+    getBaseTarget(target: HTMLElement | null): HTMLElement | null {
+      if (!target) {
+        // Should never reach here
+        return null;
+      }
       return target.className === 'summary-chart__ramp'
           ? target
           : this.getBaseTarget(target.parentElement);
     },
 
-    dragViewDown(evt) {
+    dragViewDown(evt: MouseEvent): void {
       window.deactivateAllOverlays();
 
       const pos = evt.clientX;
-      const ramp = this.getBaseTarget(evt.target);
+      const ramp = this.getBaseTarget(evt.target as HTMLElement);
+      if (!ramp || !ramp.parentElement) {
+        return;
+      }
       this.drags = [pos];
 
       const base = ramp.offsetWidth;
       const offset = ramp.parentElement.offsetLeft;
 
-      const overlay = ramp.getElementsByClassName('overlay')[0];
+      const overlay = ramp.getElementsByClassName('overlay')[0] as HTMLElement;
       overlay.style.marginLeft = '0';
       overlay.style.width = `${((pos - offset) * 100) / base}%`;
       overlay.className += ' edge';
     },
 
-    dragViewUp(evt) {
+    dragViewUp(evt: MouseEvent): void {
       window.deactivateAllOverlays();
-      const ramp = this.getBaseTarget(evt.target);
+      const ramp = this.getBaseTarget(evt.target as HTMLElement);
+      if (!ramp || !ramp.parentElement) {
+        return;
+      }
 
       const base = ramp.offsetWidth;
       this.drags.push(evt.clientX);
@@ -506,43 +524,43 @@ export default {
       const offset = ramp.parentElement.offsetLeft;
       this.drags = this.drags.map((x) => ((x - offset) * 100) / base);
 
-      const overlay = ramp.getElementsByClassName('overlay')[0];
+      const overlay = ramp.getElementsByClassName('overlay')[0] as HTMLElement;
       overlay.style.marginLeft = `${this.drags[0]}%`;
       overlay.style.width = `${this.drags[1] - this.drags[0]}%`;
       overlay.className += ' show';
     },
 
-    getPercentile(index) {
-      if (this.filterGroupSelection === 'groupByNone') {
+    getPercentile(index: number): string {
+      if (this.filterGroupSelection === FilterGroupSelection.GroupByNone) {
         return (Math.round(((index + 1) * 1000) / this.filtered[0].length) / 10).toFixed(1);
       }
       return (Math.round(((index + 1) * 1000) / this.filtered.length) / 10).toFixed(1);
     },
 
-    getGroupName(group) {
+    getGroupName(group: User[]): string {
       return window.getGroupName(group, this.filterGroupSelection);
     },
 
-    isGroupMerged(groupName) {
+    isGroupMerged(groupName: string): boolean {
       return this.mergedGroups.includes(groupName);
     },
 
-    handleMergeGroup(groupName) {
+    handleMergeGroup(groupName: string): void {
       const info = this.mergedGroups;
       info.push(groupName);
       this.$store.commit('updateMergedGroup', info);
     },
 
-    handleExpandGroup(groupName) {
+    handleExpandGroup(groupName: string): void {
       const info = this.mergedGroups.filter((x) => x !== groupName);
       this.$store.commit('updateMergedGroup', info);
     },
 
-    getAuthorDisplayName(repo) {
+    getAuthorDisplayName(repo: User[]): string {
       return window.getAuthorDisplayName(repo);
     },
 
-    retrieveSelectedTabHash() {
+    retrieveSelectedTabHash(): void {
       const hash = window.hashParams;
 
       if (hash.tabAuthor) {
@@ -558,9 +576,9 @@ export default {
       }
 
       if (hash.isTabOnMergedGroup) {
-        if (this.filterGroupSelection === 'groupByAuthors') {
+        if (this.filterGroupSelection === FilterGroupSelection.GroupByAuthors) {
           this.activeRepo = null;
-        } else if (this.filterGroupSelection === 'groupByRepos') {
+        } else if (this.filterGroupSelection === FilterGroupSelection.GroupByRepos) {
           this.activeUser = null;
         }
         this.isTabOnMergedGroup = true;
@@ -571,14 +589,14 @@ export default {
       }
     },
 
-    addSelectedTab(userName, repo, tabType, isMerged) {
-      if (!isMerged || this.filterGroupSelection === 'groupByAuthors') {
+    addSelectedTab(userName: string, repo: string, tabType: string, isMerged: boolean): void {
+      if (!isMerged || this.filterGroupSelection === FilterGroupSelection.GroupByAuthors) {
         this.activeUser = userName;
       } else {
         this.activeUser = null;
       }
 
-      if (isMerged && this.filterGroupSelection === 'groupByAuthors') {
+      if (isMerged && this.filterGroupSelection === FilterGroupSelection.GroupByAuthors) {
         this.activeRepo = null;
       } else {
         this.activeRepo = repo;
@@ -596,7 +614,7 @@ export default {
       window.encodeHash();
     },
 
-    removeSelectedTab() {
+    removeSelectedTab(): void {
       this.activeUser = null;
       this.activeRepo = null;
       this.activeTabType = null;
@@ -605,13 +623,13 @@ export default {
       window.encodeHash();
     },
 
-    isSelectedTab(userName, repo, tabType, isMerged) {
+    isSelectedTab(userName: string, repo: string, tabType: string, isMerged: boolean): boolean {
       if (!isMerged) {
         return this.activeUser === userName && this.activeRepo === repo
             && this.activeTabType === tabType;
       }
 
-      if (this.filterGroupSelection === 'groupByAuthors') {
+      if (this.filterGroupSelection === FilterGroupSelection.GroupByAuthors) {
         return this.isTabOnMergedGroup && this.activeUser === userName
             && this.activeTabType === tabType;
       }
@@ -620,17 +638,17 @@ export default {
           && this.activeTabType === tabType;
     },
 
-    isSelectedGroup(userName, repo) {
+    isSelectedGroup(userName: string, repo: string): boolean {
       return this.isTabOnMergedGroup
-          && ((this.filterGroupSelection === 'groupByRepos' && this.activeRepo === repo)
-          || (this.filterGroupSelection === 'groupByAuthors' && this.activeUser === userName));
+          && ((this.filterGroupSelection === FilterGroupSelection.GroupByRepos && this.activeRepo === repo)
+          || (this.filterGroupSelection === FilterGroupSelection.GroupByAuthors && this.activeUser === userName));
     },
 
-    getPercentileExplanation(j) {
+    getPercentileExplanation(j: number): string {
       const explanation = `Based on the current sorting order, this item is in the top ${this.getPercentile(j)}%`;
       return explanation;
     },
 
   },
-};
+});
 </script>

From cf588da7d440c83ec41099bd669c66de63654cff Mon Sep 17 00:00:00 2001
From: vvidday <davids89034@gmail.com>
Date: Fri, 7 Apr 2023 15:59:24 +0800
Subject: [PATCH 4/5] Add console statement in getBaseTarget branch

---
 frontend/src/components/c-summary-charts.vue | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/c-summary-charts.vue b/frontend/src/components/c-summary-charts.vue
index 6dd2389a01..2ebf24ba72 100644
--- a/frontend/src/components/c-summary-charts.vue
+++ b/frontend/src/components/c-summary-charts.vue
@@ -489,7 +489,9 @@ export default defineComponent({
 
     getBaseTarget(target: HTMLElement | null): HTMLElement | null {
       if (!target) {
-        // Should never reach here
+        // Should never reach here - function assumes that target is a child of the div with class 'summary-chart__ramp'
+        console.error('Error: The getBaseTarget function in c-summary-charts.vue has been called on an element that is '
+        + 'not a child of the div with class summary-chart__ramp. This might affect the drag view functionality.');
         return null;
       }
       return target.className === 'summary-chart__ramp'

From de929b955e88354c5c5ed9555d1915c8de9666f3 Mon Sep 17 00:00:00 2001
From: David Ong <45852430+vvidday@users.noreply.github.com>
Date: Fri, 7 Apr 2023 16:45:43 +0800
Subject: [PATCH 5/5] Change type to primitive string

Co-authored-by: Charisma Kausar <68203159+ckcherry23@users.noreply.github.com>
---
 frontend/src/components/c-summary-charts.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/components/c-summary-charts.vue b/frontend/src/components/c-summary-charts.vue
index 2ebf24ba72..8b7b0cde4f 100644
--- a/frontend/src/components/c-summary-charts.vue
+++ b/frontend/src/components/c-summary-charts.vue
@@ -200,7 +200,7 @@ export default defineComponent({
   mixins: [brokenLinkDisabler],
   props: {
     checkedFileTypes: {
-      type: Array<String>,
+      type: Array<string>,
       required: true,
     },
     filtered: {