Add optimise timeline feature

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

@@ -0,0 +1,83 @@
+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', '5/3/2018');
+
+    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', '3/3/2023');
+  });
+
+  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');
+  });
+});

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

@@ -302,6 +302,20 @@ describe('render filter hash', () => {
       .should('contain', 'mergegroup=reposense%2FRepoSense%5Bcypress%5D');
   });
 
+  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 && optimisedMinimumDate != null && optimisedMaximumDate != null")
+  span {{new Date(optimisedMinimumDate).toLocaleDateString()}}
+  span {{new Date(optimisedMaximumDate).toLocaleDateString()}}
 </template>
 
 <script lang='ts'>
@@ -83,10 +89,18 @@ export default defineComponent({
       type: Boolean,
       default: false,
     },
+    optimiseTimeline: {
+      type: Boolean,
+      default: false,
+    },
   },
-  data(): {rampSize: number} {
+  data(): {
+    rampSize: number,
+    optimisedPadding: number,
+    } {
     return {
       rampSize: 0.01 as number,
+      optimisedPadding: 3, // as % of total timeline,
     };
   },
 
@@ -97,6 +111,16 @@ export default defineComponent({
     deletesContributionRampSize(): number {
       return this.rampSize * 20;
     },
+    optimisedMinimumDate(): number | null {
+      return this.user.commits.length === 0
+        ? null
+        : Math.min(...this.user.commits.map((commit) => new Date(commit.date).valueOf()));
+    },
+    optimisedMaximumDate(): number | null {
+      return this.user.commits.length === 0
+        ? null
+        : Math.max(...this.user.commits.map((commit) => new Date(commit.date).valueOf()));
+    },
   },
 
   methods: {
@@ -177,6 +201,13 @@ export default defineComponent({
     },
     // position for day granularity
     getSlicePos(date: string): number {
+      if (this.optimiseTimeline) {
+        if (this.optimisedMinimumDate === null || this.optimisedMaximumDate === null) {
+          return 0;
+        }
+        const total = this.optimisedMaximumDate - this.optimisedMinimumDate;
+        return (new Date(this.optimisedMaximumDate).valueOf() - new Date(date).valueOf()) / (total + window.DAY_IN_MS);
+      }
       const total = this.getTotalForPos(this.sdate, this.udate);
       return (new Date(this.udate).valueOf() - new Date(date).valueOf()) / (total + window.DAY_IN_MS);
     },
@@ -267,4 +298,17 @@ export default defineComponent({
     }
   }
 }
+
+.ramp-padding {
+  height: 100%;
+  position: relative;
+}
+
+.date-indicators {
+  @include mono-font;
+  color: mui-color('grey', '700');
+  display: flex;
+  justify-content: space-between;
+  padding-top: 1px;
+}
 </style>

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

@@ -274,7 +274,9 @@
           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="optimiseTimeline"
+        )
         .overlay
 
       .summary-chart__contribution
@@ -374,6 +376,10 @@ export default defineComponent({
       type: Number,
       default: undefined,
     },
+    optimiseTimeline: {
+      type: Boolean,
+      default: false,
+    },
   },
   data(): {
       drags: Array<number>,

frontend/src/views/c-summary.vue

@@ -73,6 +73,13 @@
             v-bind:disabled="filterGroupSelection === 'groupByNone'"
           )
           span merge all groups
+        label.optimise-timeline
+          input.mui-checkbox(
+            type="checkbox",
+            v-model="optimiseTimeline",
+            v-on:change="getFiltered"
+          )
+          span optimise timeline
   .error-message-box(v-if="Object.entries(errorMessages).length && !isWidgetMode")
     .error-message-box__close-button(v-on:click="dismissTab($event)") ×
     .error-message-box__message The following issues occurred when analyzing the following repositories:
@@ -133,7 +140,8 @@
     v-bind:max-date="maxDate",
     v-bind:sort-group-selection="sortGroupSelection",
     v-bind:chart-group-index="chartGroupIndex",
-    v-bind:chart-index="chartIndex"
+    v-bind:chart-index="chartIndex",
+    v-bind:optimise-timeline="optimiseTimeline"
   )
 </template>
 
@@ -213,7 +221,8 @@ export default defineComponent({
     chartGroupIndex: number | undefined,
     chartIndex: number | undefined,
     errorIsShowingMore: boolean,
-    numberOfErrorMessagesToShow: number
+    numberOfErrorMessagesToShow: number,
+    optimiseTimeline: boolean,
     } {
     return {
       checkedFileTypes: [] as Array<string>,
@@ -243,6 +252,7 @@ export default defineComponent({
       chartIndex: undefined as number | undefined,
       errorIsShowingMore: false,
       numberOfErrorMessagesToShow: 4,
+      optimiseTimeline: false,
     };
   },
   computed: {
@@ -410,7 +420,7 @@ export default defineComponent({
     },
 
     setSummaryHash(): void {
-      const { addHash, encodeHash } = window;
+      const { addHash, encodeHash, removeHash } = window;
 
       addHash('search', this.filterSearch);
       addHash('sort', this.sortGroupSelection);
@@ -444,6 +454,12 @@ export default defineComponent({
         window.removeHash('checkedFileTypes');
       }
 
+      if (this.optimiseTimeline) {
+        addHash('optimiseTimeline', 'true');
+      } else {
+        removeHash('optimiseTimeline');
+      }
+
       encodeHash();
     },
 
@@ -492,6 +508,9 @@ export default defineComponent({
       if (hash.chartIndex) {
         this.chartIndex = parseInt(hash.chartIndex, 10);
       }
+      if (hash.optimiseTimeline) {
+        this.optimiseTimeline = convertBool(hash.optimiseTimeline);
+      }
     },
 
     getGroupName(group: Array<User>): string {