-
Notifications
You must be signed in to change notification settings - Fork 154
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[#1899] Add graphic for commit diffstat #2010
Changes from 21 commits
2963a8f
cc4c913
eef1ea0
b7d47ea
168dac9
e78c45e
02a87a6
7783db8
4bcd5a8
2cc49e7
56ff61e
afe8c4c
d0fe7b0
9e3e48b
b53af8b
b8d718e
8b8a1ff
5168a60
9d063b5
2f5acbb
70a69f4
06d2f55
8b592e3
eb9b0d6
2698ade
40962d2
e6f2cb8
2860caa
59ce334
2366ad1
0ae39bd
70183cf
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Thanks for starting with the Cypress tests for this feature @nseah21. I think this file can be renamed to something like Apart from checking if the diffstat has rendered, we can also check:
|
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,11 @@ | ||
describe('contribution bars', () => { | ||
it('should render container for contribution bars', () => { | ||
cy.get('.icon-button.fa-list-ul') | ||
.should('be.visible') | ||
.first() | ||
.click(); | ||
|
||
cy.get('#tab-zoom .commit-message .stacked-bar-container') | ||
.should('be.visible'); | ||
}); | ||
}); |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,39 @@ | ||
<template lang="pug"> | ||
.stacked-bar-container | ||
.stacked-bar__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> | ||
|
||
<style scoped lang="scss"> | ||
@import '../styles/_colors.scss'; | ||
|
||
.stacked-bar-container { | ||
display: flex; | ||
flex-wrap: wrap; | ||
} | ||
|
||
.stacked-bar__contrib--bar { | ||
background-color: mui-color('blue'); | ||
height: 4px; | ||
margin-top: 2px; | ||
} | ||
|
||
</style> |
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -220,25 +220,17 @@ | |
|
||
.summary-chart__contribution | ||
template(v-if="filterBreakdown") | ||
.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})`" | ||
.summary-chart__contrib | ||
c-stacked-bar-chart( | ||
v-bind:bars="getFileTypeContributionBars(user.fileTypeContribution, user.checkedFileTypeContribution)" | ||
) | ||
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)" | ||
) | ||
</template> | ||
|
||
|
@@ -248,7 +240,8 @@ | |
|
||
import brokenLinkDisabler from '../mixin/brokenLinkMixin'; | ||
import cRamp from './c-ramp.vue'; | ||
import { Repo, User } from '../types/types'; | ||
import cStackedBarChart from './c-stacked-bar-chart.vue'; | ||
import { Bar, Repo, 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'; | ||
|
@@ -257,6 +250,7 @@ | |
name: 'c-summary-charts', | ||
components: { | ||
cRamp, | ||
cStackedBarChart, | ||
}, | ||
mixins: [brokenLinkDisabler], | ||
props: { | ||
|
@@ -376,12 +370,15 @@ | |
this.retrieveSelectedTabHash(); | ||
}, | ||
methods: { | ||
getFileTypeContributionBars(fileTypeContribution: AuthorFileTypeContributions): { [key: string]: number[] } { | ||
getFileTypeContributionBars( | ||
fileTypeContribution: AuthorFileTypeContributions, | ||
checkedFileTypeContribution: number | undefined, | ||
): Bar[] { | ||
let currentBarWidth = 0; | ||
const fullBarWidth = 100; | ||
const contributionPerFullBar = (this.avgContributionSize * 2); | ||
|
||
const allFileTypesContributionBars: { [key: string]: number[] } = {}; | ||
const allFileTypesContributionBars: Bar[] = []; | ||
if (contributionPerFullBar === 0) { | ||
return allFileTypesContributionBars; | ||
} | ||
|
@@ -413,7 +410,15 @@ | |
currentBarWidth = remainingBarWidth; | ||
} | ||
|
||
allFileTypesContributionBars[fileType] = contributionBars; | ||
contributionBars.forEach((width) => { | ||
allFileTypesContributionBars.push({ | ||
width, | ||
color: this.fileTypeColors[fileType], | ||
tooltipText: `${fileType}: ${fileTypeContribution[fileType]} lines, \ | ||
total: ${checkedFileTypeContribution} lines (contribution from ${this.minDate} to | ||
${this.maxDate})`, | ||
}); | ||
}); | ||
}); | ||
|
||
return allFileTypesContributionBars; | ||
|
@@ -435,20 +440,20 @@ | |
return group.reduce((acc, ele) => acc + (ele.checkedFileTypeContribution ?? 0), 0); | ||
}, | ||
|
||
getContributionBars(totalContribution: number): number[] { | ||
const res: number[] = []; | ||
getContributionBars(totalContribution: number): Bar[] { | ||
const res: Bar[] = []; | ||
const contributionLimit = (this.avgContributionSize * 2); | ||
if (contributionLimit === 0) { | ||
return res; | ||
} | ||
const cnt = Math.floor(totalContribution / contributionLimit); | ||
for (let cntId = 0; cntId < cnt; cntId += 1) { | ||
res.push(100); | ||
res.push({ color: 'red', width: 100 }); | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. |
||
} | ||
|
||
const last = (totalContribution % contributionLimit) / contributionLimit; | ||
if (last !== 0) { | ||
res.push(last * 100); | ||
res.push({ width: last * 100 }); | ||
} | ||
|
||
return res; | ||
|
@@ -559,6 +564,7 @@ | |
zFileTypeColors: this.fileTypeColors, | ||
zFromRamp: false, | ||
zFilterSearch: filterSearch, | ||
zAvgContributionSize: this.getAvgContributionSize(), | ||
}; | ||
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,21 @@ | |
return explanation; | ||
}, | ||
|
||
getAvgContributionSize(): number { | ||
let totalContribution = 0; | ||
let totalCommits = 0; | ||
|
||
this.filteredRepos.forEach((repo) => { | ||
repo.forEach((user) => { | ||
user.commits?.forEach((commit) => { | ||
totalCommits += 1; | ||
totalContribution += (commit.insertions + commit.deletions); | ||
}); | ||
}); | ||
}); | ||
|
||
return totalContribution / totalCommits; | ||
}, | ||
}, | ||
}); | ||
</script> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thanks for taking a look into this @nseah21. The date
2023-03-03
may not pass Cypress tests in your local machine but is the date that is required for the CI frontend tests to pass. The discrepancy is probably due to a time zone issue as the commit was made close to midnight. Perhaps we can create a new issue to investigate why the date varies on different machines.