Add optimise timeline feature

docs/ug/usingReports.md

@@ -119,6 +119,7 @@ The `Tool Bar` at the top of the Chart panel provides a set of configuration opt
 * `Merge group`: merges all the ramp charts of each group into a single ramp chart; aggregates the contribution of each group.
  * viewing of authored code of the group as a whole is available when `group by repos`.
 * `Show tags`: shows the tags of all the repos under a group
+* `Trim timeline`: trims the starting and ending portion of each ramp where no commits were made; only the part of each ramp where commits were made will be shown.
 
 Notes:<br>
 [1] **`Sort groups by`**: each main group has its own index and percentile according to its ranking position after sorting (e.g., if the groups are sorted by contribution in descending order, a 25% percentile indicates that the group is in the top 25% of the whole cohort in terms of contribution)<br>.

frontend/cypress/tests/chartView/chartView_optimiseTimeline.cy.js

@@ -0,0 +1,148 @@
+describe('optimise timeline', () => {
+ it('ramp padding should only exist when optimise timeline is checked', () => {
+ cy.get('#summary label.optimise-timeline > input:visible')
+ .should('be.visible')
+ .uncheck()
+ .should('be.not.checked');
+
+ cy.get('#summary-charts .summary-chart')
+ .first()
+ .find('.summary-chart__ramp .ramp .ramp-padding')
+ .should('have.css', 'left', '0px');
+
+ cy.get('#summary label.optimise-timeline > input:visible')
+ .should('be.visible')
+ .check()
+ .should('be.checked');
+
+ cy.get('#summary-charts .summary-chart')
+ .first()
+ .find('.summary-chart__ramp .ramp .ramp-padding')
+ .should('have.not.css', 'left', '0px');
+ });
+
+ it('should retain the same number of ramp slices', () => {
+ cy.get('#summary-charts .summary-chart')
+ .first()
+ .find('.summary-chart__ramp .ramp .ramp-padding a')
+ .then(($el) => {
+ const rampSlices = $el.length;
+
+ cy.get('#summary label.optimise-timeline > input:visible')
+ .should('be.visible')
+ .check()
+ .should('be.checked');
+
+ cy.get('#summary-charts .summary-chart')
+ .first()
+ .find('.summary-chart__ramp .ramp .ramp-padding a')
+ .should('have.length', rampSlices);
+ });
+ });
+
+ it('start and end date indicators should exist', () => {
+ cy.get('#summary label.optimise-timeline > input:visible')
+ .should('be.visible')
+ .check()
+ .should('be.checked');
+
+ cy.get('#summary-charts .summary-chart')
+ .first()
+ .find('.summary-chart__ramp .date-indicators span')
+ .first()
+ .should('have.text', '2018-05-03');
+
+ cy.get('#summary-charts .summary-chart')
+ .first()
+ .find('.summary-chart__ramp .date-indicators span')
+ .last()
+
+ // 3/3 on GitHub CI, 3/4 on local
+ .should('have.text', '2023-03-03');
+ });
+
+ it('no commits in range should not have date indicators', () => {
+ cy.get('#summary label.optimise-timeline > input:visible')
+ .should('be.visible')
+ .check()
+ .should('be.checked');
+
+ // change since date
+ cy.get('input[name="since"]')
+ .type('2018-12-31');
+
+ // change until date
+ cy.get('input[name="until"]')
+ .type('2019-01-01');
+
+ cy.get('#summary-charts .summary-chart')
+ .first()
+ .find('.summary-chart__ramp .date-indicators')
+ .should('not.exist');
+ });
+
+ it('zoom panel range should work correctly when timeline is optimised', () => {
+ cy.get('.icon-button.fa-list-ul')
+ .should('exist')
+ .first()
+ .click();
+
+ cy.get('#tab-zoom')
+ .should('be.visible');
+
+ cy.get('#tab-zoom .ramp a')
+ .first()
+ .invoke('css', 'right')
+ .then((val) => parseFloat(val))
+ .should('gt', 0);
+
+ cy.get('#summary label.optimise-timeline > input')
+ .check()
+ .should('be.checked');
+
+ cy.get('.icon-button.fa-list-ul')
+ .should('exist')
+ .first()
+ .click();
+
+ cy.get('#tab-zoom')
+ .should('be.visible');
+
+ cy.get('#tab-zoom .period')
+ .should('contain', '2018-05-03 to 2023-03-03');
+
+ cy.get('#tab-zoom .ramp a')
+ .first()
+ .invoke('css', 'right')
+ .then((val) => parseFloat(val))
+ .should('lt', 1);
+ });
+
+ it('subzoom panel range should work correctly when timeline is optimised', () => {
+ const zoomKey = Cypress.platform === 'darwin' ? '{meta}' : '{ctrl}';
+
+ cy.get('#summary label.optimise-timeline > input:visible')
+ .should('be.visible')
+ .check()
+ .should('be.checked');
+
+ // clicking from the 10th px to the 50th px in the ramp
+ cy.get('body').type(zoomKey, { release: false })
+ .get('#summary-charts .summary-chart__ramp .ramp')
+ .first()
+ .click(110, 20)
+ .click(120, 20);
+
+ cy.get('#tab-zoom')
+ .should('be.visible');
+
+ cy.get('#tab-zoom .ramp .ramp__slice')
+ .should('have.length', 1);
+
+ cy.get('#tab-zoom .ramp .ramp__slice')
+ .invoke('attr', 'title')
+ .then((title) => {
+ cy.wrap(title).should('eq', '[2019-08-18] AboutUs: update team members (#867): +94 -12 lines ');
+ });
+ });
+});

frontend/cypress/tests/codeView/codeView_renderFilterHash.cy.js

@@ -316,6 +316,20 @@ describe('render filter hash', () => {
  .should('contain', 'viewRepoTags=true');
  });
 
+ it('optimise timeline: url params should persist after change and reload', () => {
+ cy.get('#summary label.optimise-timeline input:visible')
+ .should('be.visible')
+ .check();
+
+ cy.url()
+ .should('contain', 'optimiseTimeline=true');
+
+ cy.reload();
+
+ cy.url()
+ .should('contain', 'optimiseTimeline=true');
+ });
+
  it('checked file types: url params should persist after change and reload', () => {
  cy.get('#summary label.filter-breakdown input:visible')
  .should('not.be.checked');

frontend/src/components/c-ramp.vue

@@ -1,22 +1,25 @@
 <template lang="pug">
 .ramp
  template(v-if="tframe === 'commit'")
- template(v-for="(slice, j) in user.commits")
- template(v-for="(commit, k) in slice.commitResults")
- a.ramp__slice(
- draggable="false",
- v-on:click="rampClick",
- v-bind:href="getLink(commit)", target="_blank",
- v-bind:title="getContributionMessageByCommit(slice, commit)",
- v-bind:class="`ramp__slice--color${getRampColor(commit, slice)}`,\
- !isBrokenLink(getLink(commit)) ? '' : 'broken-link'",
- v-bind:style="{\
- zIndex: user.commits.length - j,\
- borderLeftWidth: `${getWidth(commit)}em`,\
- right: `${((getSlicePos(slice.date)\
- + (getCommitPos(k, slice.commitResults.length))) * 100)}%`\
- }"
- )
+ .ramp-padding(
+ v-bind:style="optimiseTimeline ? {width: `${100 - optimisedPadding * 2}%`, left: `${optimisedPadding}%`} : ''"
+ )
+ template(v-for="(slice, j) in user.commits")
+ template(v-for="(commit, k) in slice.commitResults")
+ a.ramp__slice(
+ draggable="false",
+ v-on:click="rampClick",
+ v-bind:href="getLink(commit)", target="_blank",
+ v-bind:title="getContributionMessageByCommit(slice, commit)",
+ v-bind:class="`ramp__slice--color${getRampColor(commit, slice)}`,\
+ !isBrokenLink(getLink(commit)) ? '' : 'broken-link'",
+ v-bind:style="{\
+ zIndex: user.commits.length - j,\
+ borderLeftWidth: `${getWidth(commit)}em`,\
+ right: `${((getSlicePos(slice.date)\
+ + (getCommitPos(k, slice.commitResults.length))) * 100)}%`\
+ }"
+ )
 
  template(v-else)
  a(v-bind:href="getReportLink()", target="_blank")
@@ -30,8 +33,11 @@
  zIndex: user.commits.length - j,\
  borderLeftWidth: `${getWidth(slice)}em`,\
  right: `${(getSlicePos(tframe === 'day' ? slice.date : slice.endDate) * 100)}%` \
-  }"
+ }"
  )
+.date-indicators(v-if="optimiseTimeline")
+ span {{optimisedMinimumDate}}
+ span {{optimisedMaximumDate}}
 </template>
 
 <script lang='ts'>
@@ -83,10 +89,26 @@ export default defineComponent({
  type: Boolean,
  default: false,
  },
+ optimiseTimeline: {
+ type: Boolean,
+ default: false,
+ },
+ optimisedMinimumDate: {
+ type: String,
+ default: '',
+ },
+ optimisedMaximumDate: {
+ type: String,
+ default: '',
+ },
  },
- data(): {rampSize: number} {
+ data(): {
+ rampSize: number,
+ optimisedPadding: number,
+ } {
  return {
  rampSize: 0.01 as number,
+ optimisedPadding: 3, // as % of total timeline,
  };
  },
 
@@ -172,13 +194,20 @@ export default defineComponent({
 
  // position for commit granularity
  getCommitPos(i: number, total: number): number {
+ const totalTime = this.optimiseTimeline
+ ? this.getTotalForPos(this.optimisedMinimumDate, this.optimisedMaximumDate)
+ : this.getTotalForPos(this.sdate, this.udate);
  return (((total - i - 1) * window.DAY_IN_MS) / total)
- / (this.getTotalForPos(this.sdate, this.udate) + window.DAY_IN_MS);
+ / (totalTime + window.DAY_IN_MS);
  },
  // position for day granularity
  getSlicePos(date: string): number {
- const total = this.getTotalForPos(this.sdate, this.udate);
- return (new Date(this.udate).valueOf() - new Date(date).valueOf()) / (total + window.DAY_IN_MS);
+ const toDate = this.optimiseTimeline ? this.optimisedMaximumDate : this.udate;
+ const total = this.optimiseTimeline
+ ? this.getTotalForPos(this.optimisedMinimumDate, this.optimisedMaximumDate)
+ : this.getTotalForPos(this.sdate, this.udate);
+
+ return (new Date(toDate).valueOf() - new Date(date).valueOf()) / (total + window.DAY_IN_MS);
  },
 
  // get duration in miliseconds between 2 date
@@ -267,4 +296,16 @@ export default defineComponent({
  }
  }
 }
+
+.ramp-padding {
+ height: 100%;
+ position: relative;
+}
+
+.date-indicators {
+ color: mui-color('grey', '700');
+ display: flex;
+ justify-content: space-between;
+ padding-top: 1px;
+}
 </style>

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

@@ -100,7 +100,12 @@
  a(
  v-if="!isChartGroupWidgetMode",
  onclick="deactivateAllOverlays()",
- v-on:click="openTabZoom(repo[0], filterSinceDate, filterUntilDate, isGroupMerged(getGroupName(repo)))"
+ v-on:click="openTabZoom(\
+ repo[0],\
+ getIsOptimising(repo[0]) ? getOptimisedMinimumDate(repo[0]) : filterSinceDate,\
+ getIsOptimising(repo[0]) ? getOptimisedMaximumDate(repo[0]) : filterUntilDate,\
+ isGroupMerged(getGroupName(repo))\
+ )"
  )
  .tooltip(
  v-on:mouseover="onTooltipHover(`summary-charts-${i}-commit-breakdown`)",
@@ -230,7 +235,12 @@
  a(
  v-if="!isChartGroupWidgetMode",
  onclick="deactivateAllOverlays()",
- v-on:click="openTabZoom(user, filterSinceDate, filterUntilDate, isGroupMerged(getGroupName(repo)))"
+ v-on:click="openTabZoom(\
+ user,\
+ getIsOptimising(user) ? getOptimisedMinimumDate(user) : filterSinceDate,\
+ getIsOptimising(user) ? getOptimisedMaximumDate(user) : filterUntilDate,\
+ isGroupMerged(getGroupName(repo))\
+ )"
  )
  .tooltip(
  v-on:mouseover="onTooltipHover(`repo-${i}-author-${j}-commit-breakdown`)",
@@ -296,7 +306,11 @@
  v-bind:avgsize="avgCommitSize",
  v-bind:mergegroup="isGroupMerged(getGroupName(repo))",
  v-bind:filtersearch="filterSearch",
- v-bind:is-widget-mode="isChartGroupWidgetMode")
+ v-bind:is-widget-mode="isChartGroupWidgetMode",
+ v-bind:optimise-timeline="getIsOptimising(user)",
+ v-bind:optimised-minimum-date="getOptimisedMinimumDate(user)",
+ v-bind:optimised-maximum-date="getOptimisedMaximumDate(user)"
+ )
  .overlay
 
  .summary-chart__contribution
@@ -400,6 +414,10 @@ export default defineComponent({
  type: Boolean,
  default: false,
  },
+ optimiseTimeline: {
+ type: Boolean,
+ default: false,
+ },
  },
  data(): {
  drags: Array<number>,
@@ -609,6 +627,21 @@ export default defineComponent({
  return ['fas', 'database'];
  }
  },
+ getOptimisedMinimumDate(user: User): string {
+ return user.commits.length === 0
+ ? this.filterSinceDate
+ : user.commits.reduce((prev, curr) => (new Date(prev.date) < new Date(curr.date) ? prev : curr))
+ .date;
+ },
+ getOptimisedMaximumDate(user: User): string {
+ return user.commits.length === 0
+ ? this.filterUntilDate
+ : user.commits.reduce((prev, curr) => (new Date(prev.date) > new Date(curr.date) ? prev : curr))
+ .date;
+ },
+ getIsOptimising(user: User): boolean {
+ return user.commits.length !== 0 && this.optimiseTimeline;
+ },
 
  getTagLink(repo: User, tag: string): string | undefined {
  return window.filterUnsupported(`${window.getRepoLinkUnfiltered(repo.repoId)}releases/tag/${tag}`);
@@ -648,12 +681,17 @@ export default defineComponent({
 
  // skip if accidentally clicked on ramp chart
  if (this.drags.length === 2 && this.drags[1] - this.drags[0]) {
- // additional day was added to include the date represented by filterUntilDate
- const tdiff = (new Date(this.filterUntilDate)).valueOf() - (new Date(this.filterSinceDate)).valueOf()
- + window.DAY_IN_MS;
+ const fromDate = (new Date(this.getIsOptimising(user)
+ ? this.getOptimisedMinimumDate(user)
+ : this.filterSinceDate)).valueOf();
+ const toDate = (new Date(this.getIsOptimising(user)
+ ? this.getOptimisedMaximumDate(user)
+ : this.filterUntilDate)).valueOf();
+
+ const tdiff = toDate - fromDate + window.DAY_IN_MS;
  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]);
+ const tsince = window.getDateStr(fromDate + idxs[0]);
+ const tuntil = window.getDateStr(fromDate + idxs[1]);
  this.drags = [];
  this.openTabZoom(user, tsince, tuntil, isMerged);
  }