[#2148] Show tags on the ramp chart

docs/ug/usingReports.md

@@ -117,6 +117,7 @@ The `Tool Bar` at the top of the Chart panel provides a set of configuration opt
  * a breakdown of the number of lines of codes added to each file type (if the checkbox is checked). More info on note [3] below.
 * `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
 
 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_showTags.cy.js

@@ -0,0 +1,44 @@
+describe('show tags', () => {
+ it('unchecked should not display any tags for a group', () => {
+ cy.get('#summary label.show-tags > input:visible')
+ .should('be.visible')
+ .uncheck()
+ .should('not.be.checked');
+
+ cy.get('.summary-charts__title--tags')
+ .should('not.exist');
+ });
+
+ it('checked should display all tags for a group', () => {
+ cy.get('#summary label.show-tags > input:visible')
+ .should('be.visible')
+ .check()
+ .should('be.checked');
+
+ cy.get('#summary label.merge-group > input:visible')
+ .should('be.visible')
+ .check()
+ .should('be.checked');
+
+ cy.get('.icon-button.fa-list-ul')
+ .should('exist')
+ .first()
+ .click();
+
+ const correctTags = [];
+
+ cy.get('.zoom__title--tags')
+ .find('.tag')
+ .each(($tag) => correctTags.push($tag.text().trim())).then(() => {
+ cy.get('.summary-charts__title--tags')
+ .find('.tag')
+ .each(($tag) => {
+ expect(correctTags).to.include($tag.text().trim());
+ });
+
+ cy.get('.summary-charts__title--tags')
+ .find('.tag')
+ .should('have.length', correctTags.length);
+ });
+ });
+});

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

@@ -139,6 +139,14 @@
  v-if="sortGroupSelection.includes('totalCommits')"
  ) {{ getPercentile(i) }} %&nbsp
  span.tooltip-text.right-aligned {{ getPercentileExplanation(i) }}
+ .summary-charts__title--tags(v-if="viewRepoTags && getTags(repo).length > 0")
+ .tag(
+ v-for="tag in getTags(repo)",
+ vbind:key="tag",
+ tabindex="-1"
+ )
+ font-awesome-icon(icon="tags")
+ span  {{ tag }}
  .summary-charts__fileType--breakdown(v-if="filterBreakdown")
  template(v-if="filterGroupSelection !== 'groupByNone'")
  .summary-charts__fileType--breakdown__legend(
@@ -371,6 +379,10 @@ export default defineComponent({
  type: Number,
  default: undefined,
  },
+ viewRepoTags: {
+ type: Boolean,
+ default: false,
+ },
  },
  data() {
  return {
@@ -875,6 +887,15 @@ export default defineComponent({
 
  return totalContribution / totalCommits;
  },
+
+ getTags(repo: Array<User>): Array<string> {
+ return [...new Set(repo.flatMap((r) => r.commits).flatMap((c) => c.commitResults).flatMap((r) => r.tags))]
+ .filter(Boolean) as Array<string>;
+ },
  },
 });
 </script>
+
+<style lang="scss" scoped>
+@import '../styles/tags.scss';
+</style>

frontend/src/styles/summary-chart.scss

@@ -97,6 +97,7 @@
  &__title {
  align-items: center;
  display: flex;
+ flex-wrap: wrap;
  font-weight: bold;
  text-align: left;
 
@@ -128,6 +129,10 @@
  @include mini-font;
  display: inline;
  }
+
+ &--tags {
+ margin: .25rem 0;
+ }
  }
 
  &__fileType--breakdown {

frontend/src/styles/tags.scss

@@ -0,0 +1,16 @@
+@import 'colors';
+
+/* Tags in commits */
+.tag {
+ @include mini-font;
+ background: mui-color('grey', '600');
+ border-radius: 5px;
+ color: mui-color('white');
+ display: inline-block;
+ margin: .2rem .2rem .2rem 0;
+ padding: 0 3px 0 3px;
+
+ .fa-tags {
+ width: .65rem;
+ }
+}

frontend/src/views/c-summary.vue

@@ -73,6 +73,12 @@
  v-bind:disabled="filterGroupSelection === 'groupByNone'"
  )
  span merge all groups
+ label.show-tags
+ input.mui-checkbox(
+ type="checkbox",
+ v-model="viewRepoTags"
+ )
+ span show tags
  .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 +139,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:view-repo-tags="viewRepoTags"
  )
 </template>
 
@@ -211,6 +218,7 @@ export default defineComponent({
  chartIndex: undefined as number | undefined,
  errorIsShowingMore: false,
  numberOfErrorMessagesToShow: 4,
+ viewRepoTags: false,
  };
  },
  computed: {

frontend/src/views/c-zoom.vue

@@ -529,6 +529,7 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 @import '../styles/_colors.scss';
+@import '../styles/tags.scss';
 
 #tab-zoom {
  .zoom {
@@ -558,21 +559,6 @@ export default defineComponent({
  h3 {
  @include large-font;
  }
-
- /* Tags in commits */
- .tag {
- @include mini-font;
- background: mui-color('grey', '600');
- border-radius: 5px;
- color: mui-color('white');
- display: inline-block;
- margin: .2rem .2rem .2rem 0;
- padding: 0 3px 0 3px;
-
- .fa-tags {
- width: .65rem;
- }
- }
  }
  }