[#1899] Add graphic for commit diffstat

frontend/src/components/c-stacked-bar-chart.vue

@@ -0,0 +1,23 @@
+<template lang="pug">
+#summary
+ .summary-chart__contrib--bar(
+ v-for="bar in bars"
+ v-bind:title="bar.tooltipText",
+ v-bind:style="{ width: `${bar.width}%`,\
+ 'background-color': bar.color }"
+ )
+</template>
+
+<script lang="ts">
+import { PropType, defineComponent } from 'vue';
+import { Bar } from '../types/types';
+
+export default defineComponent({
+ props: {
+ bars: {
+ type: Array as PropType<Bar[]>,
+ required: true,
+ },
+ },
+});
+</script>

frontend/src/components/c-summary-charts.vue

@@ -223,22 +223,25 @@
  .summary-chart__contrib(
  v-for="(widths, fileType) in getFileTypeContributionBars(user.fileTypeContribution)"
  )
- .summary-chart__contrib--bar(
- v-for="width in widths",
- v-bind:style="{ width: `${width}%`,\
- 'background-color': fileTypeColors[fileType] }",
- v-bind:title="`${fileType}: ${user.fileTypeContribution[fileType]} lines, \
- total: ${user.checkedFileTypeContribution} lines (contribution from ${minDate} to \
- ${maxDate})`"
+ c-stacked-bar-chart(
+ v-bind:bars="widths.map((width) => {\
+ return {width: width,\
+ color: fileTypeColors[fileType],\
+ tooltipText: `${fileType}: ${user.fileTypeContribution[fileType]} lines, \
+ total: ${user.checkedFileTypeContribution} lines (contribution from ${minDate} to \
+ ${maxDate})`}\
+ })"
  )
  template(v-else)
  .summary-chart__contrib(
  v-bind:title="`Total contribution from ${minDate} to ${maxDate}: \
  ${user.checkedFileTypeContribution} lines`"
  )
- .summary-chart__contrib--bar(
- v-for="width in getContributionBars(user.checkedFileTypeContribution)",
- v-bind:style="{ width: `${width}%` }"
+ c-stacked-bar-chart(
+ v-bind:bars="getContributionBars(user.checkedFileTypeContribution)\
+ .map((width) => {\
+ return {width: width};\
+ })"
  )
 </template>
 
@@ -248,6 +251,7 @@
 
 import brokenLinkDisabler from '../mixin/brokenLinkMixin';
 import cRamp from './c-ramp.vue';
+import cStackedBarChart from './c-stacked-bar-chart.vue';
 import { Repo, User } from '../types/types';
 import { FilterGroupSelection, FilterTimeFrame, SortGroupSelection } from '../types/summary';
 import { StoreState, ZoomInfo } from '../types/vuex.d';
@@ -257,6 +261,7 @@
  name: 'c-summary-charts',
  components: {
  cRamp,
+ cStackedBarChart,
  },
  mixins: [brokenLinkDisabler],
  props: {
@@ -559,6 +564,7 @@
  zFileTypeColors: this.fileTypeColors,
  zFromRamp: false,
  zFilterSearch: filterSearch,
+ zAvgContributionSize: this.getAvgContributionSize(user.repoId),
  };
  this.addSelectedTab(user.name, user.repoName, 'zoom', isMerged);
  this.$store.commit('updateTabZoomInfo', info);
@@ -627,7 +633,7 @@
  getBaseTarget(target: HTMLElement | null): HTMLElement | null {
  if (!target) {
  // 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;
  }
@@ -794,6 +800,23 @@
  return explanation;
  },
 
+ getAvgContributionSize(repoId: string): number {
+ let totalContribution = 0;
+ let totalCommits = 0;
+
+ this.filteredRepos.forEach((repo) => {
+ repo.forEach((user) => {
+ if (user.repoId === repoId) {
+ user.commits?.forEach((commit) => {
+ totalCommits += 1;
+ totalContribution += (commit.insertions + commit.deletions);
+ });
+ }
+ });
+ });
+
+ return totalContribution / totalCommits;
+ },
  },
 });
 </script>

frontend/src/types/types.ts

@@ -77,3 +77,9 @@ export interface AuthorshipFile {
  segments?: AuthorshipFileSegment[];
  wasCodeLoaded: boolean;
 }
+
+export interface Bar {
+ width: number;
+ color?: string;
+ tooltipText?: string;
+}

frontend/src/types/vuex.d.ts

@@ -30,6 +30,7 @@ interface ZoomInfo {
  zTimeFrame: string;
  zUntil: string;
  zUser?: User;
+ zAvgContributionSize?: number;
 }
 
 interface SummaryDates {

frontend/src/views/c-zoom.vue

@@ -5,12 +5,12 @@
  .toolbar--multiline(v-if="filteredUser.commits.length && totalCommitMessageBodyCount")
  a(
  v-if="expandedCommitMessagesCount < totalCommitMessageBodyCount",
- v-on:click="toggleAllCommitMessagesBody(true)"
- ) show all commit messages
+ v-on:click="toggleAllCommitMessagesBody(true); toggleDiffstatView(true);"
+ ) show all commit details
  a(
  v-if="expandedCommitMessagesCount > 0",
- v-on:click="toggleAllCommitMessagesBody(false)"
- ) hide all commit messages
+ v-on:click="toggleAllCommitMessagesBody(false); toggleDiffstatView(false);"
+ ) hide all commit details
  .panel-heading
  .group-name
  span(
@@ -132,6 +132,16 @@
  .body(v-if="slice.messageBody !== ''", v-show="slice.isOpen")
  pre {{ slice.messageBody }}
  .dashed-border
+ template(
+ v-if="showDiffstat"
+ v-for="(widths, color) in getContributionBars(slice)"
+ )
+ c-stacked-bar-chart(
+ v-bind:bars="widths.map((width) => {\
+ return {width: width,\
+ color: color}\
+ })"
+ )
 </template>
 
 <script lang="ts">
@@ -140,6 +150,7 @@ import { mapState } from 'vuex';
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
 import brokenLinkDisabler from '../mixin/brokenLinkMixin';
 import cRamp from '../components/c-ramp.vue';
+import cStackedBarChart from '../components/c-stacked-bar-chart.vue';
 import User from '../utils/user';
 import {
  Commit,
@@ -153,6 +164,7 @@ import { StoreState } from '../types/vuex.d';
 function zoomInitialState() {
  return {
  showAllCommitMessageBody: true,
+ showDiffstat: true,
  commitsSortType: CommitsSortType.Time,
  toReverseSortedCommits: true,
  isCommitsFinalized: false,
@@ -166,6 +178,7 @@ export default defineComponent({
  components: {
  FontAwesomeIcon,
  cRamp,
+ cStackedBarChart,
  },
  mixins: [brokenLinkDisabler],
  data() {
@@ -300,6 +313,65 @@ export default defineComponent({
  this.selectedFileTypes = this.fileTypes.slice();
  },
 
+ getContributionBars(slice: CommitResult): { [key: string]: number[] } {
+ let currentBarWidth = 0;
+ const fullBarWidth = 100;
+
+ let avgContributionSize = this.info.zAvgContributionSize;
+ if (avgContributionSize === undefined || avgContributionSize > 1000) {
+ avgContributionSize = 1000;
+ }
+
+ const contributionPerFullBar = avgContributionSize;
+
+ const diffstatMappings: { [key: string]: number } = { limegreen: slice.insertions, red: slice.deletions };
+ const allContributionBars: { [key: string]: number[] } = {};
+
+ if (contributionPerFullBar === 0) {
+ return allContributionBars;
+ }
+
+ Object.keys(diffstatMappings)
+ .forEach((color) => {
+ const contribution = diffstatMappings[color];
+ let barWidth = (contribution / contributionPerFullBar) * fullBarWidth;
+ const contributionBars = [];
+
+ // if contribution bar for file type is able to fit on the current line
+ if (currentBarWidth + barWidth < fullBarWidth) {
+ contributionBars.push(barWidth);
+ currentBarWidth += barWidth;
+ } else {
+ // take up all the space left on the current line
+ contributionBars.push(fullBarWidth - currentBarWidth);
+ barWidth -= fullBarWidth - currentBarWidth;
+ // additional bar width will start on a new line
+ const numOfFullBars = Math.floor(barWidth / fullBarWidth);
+ for (let i = 0; i < numOfFullBars; i += 1) {
+ contributionBars.push(fullBarWidth);
+ }
+ const remainingBarWidth = barWidth % fullBarWidth;
+ if (remainingBarWidth > 0) {
+ contributionBars.push(remainingBarWidth);
+ }
+ currentBarWidth = remainingBarWidth;
+ }
+
+ allContributionBars[color] = contributionBars;
+ });
+
+ // Pad with transparent bars to prevent overflowing bars
+ // from sticking to message title of subsequent commits
+ const transparentBars = [];
+ transparentBars.push(100 - currentBarWidth);
+ for (let i = 0; i < 3; i += 1) {
+ transparentBars.push(100);
+ }
+ allContributionBars.transparent = transparentBars;
+
+ return allContributionBars;
+ },
+
  getSliceLink(slice: CommitResult): string | undefined {
  if (this.info.zIsMerged) {
  return window.getCommitLink(slice.repoId, slice.hash);
@@ -393,6 +465,10 @@ export default defineComponent({
  });
  },
 
+ toggleDiffstatView(isVisible: boolean) {
+ this.showDiffstat = isVisible;
+ },
+
  removeZoomHashes() {
  window.removeHash('zA');
  window.removeHash('zR');