Updated Legend (#56)

* Updated Legend

apps/application-status/components/EachTeamLegend.vue

@@ -0,0 +1,22 @@
+<template>
+ <div class="Main_Legend">
+ <h1 class="Main_Legend-heading">Total Points :</h1>
+ <p>The cumulative count of points associated with tickets in the current sprint.</p>
+ <h1 class="Main_Legend-heading">Total closed releases :</h1>
+ <p>The total number of releases in the closed state, categorized by team.</p>
+ <h1 class="Main_Legend-heading">Total Issues :</h1>
+ <p>The aggregate count of issues within the current sprint.</p>
+ <h1 class="Main_Legend-heading">Total Prod Defects :</h1>
+ <p>The number of defects labeled as Prod Defects.</p>
+ <h1 class="Main_Legend-heading"> Scope Change :</h1>
+ <p>Tickets that are moved to the sprint backlog after the sprint has already started.</p>
+ <h1 class="Main_Legend-heading"> Scope Change Issues :</h1>
+ <p>Tickets that have been added to the sprint backlog after the sprint has already started, indicating changes in scope.</p>
+ </div>
+</template>
+<style>
+.Main_Legend{
+ &-heading{
+ font-weight: 600;}
+}
+</style>

apps/application-status/package.json

@@ -30,6 +30,7 @@
  "@apollo/client": "^3.8.7",
  "graphql": "^16.8.1",
  "graphql-tag": "^2.12.6",
- "octokit": "^3.1.2"
+ "octokit": "^3.1.2",
+ "sass": "^1.70.0"
  }
 }

apps/application-status/pages/index.vue

@@ -7,61 +7,67 @@
  Sprints by Team
  </button>
  </NuxtLink>
- <ul>
- <li v-for="team in teams" :key="team.id">
- <div>
- <b class="text-2xl">{{ team.title }}</b>
- </div>
- <div>
- <b class="text-2xl">{{ team.sprint.name }}</b>
- </div>
- <div>
- <h2 class="text-xl">
- Total Points
- </h2>
- <pre>{{ team.sprint.totalPoints }}</pre>
- </div>
- <div>
- <h2 class="text-xl">
- Total closed releases
- </h2>
- <pre>{{ team.result.totalReleases }}</pre>
- </div>
- <div>
- <h2 class="text-xl">
- Total Issues
- </h2>
- <pre>{{ team.sprint.issues.totalCount }}</pre>
- </div>
- <div>
- <h2 class="text-xl">
- Total Prod Defects
- </h2>
- <pre>{{ team.result.totalDefects }}</pre>
- </div>
- <div>
- <h2 class="text-xl">
- Scope Change
- </h2>
- <pre>{{ team.sprint.scopeChange.totalCount }}</pre>
- <h2 class="text-xl">
- Scope Change Issues
- </h2>
- <div v-if="team.sprint.scopeChange.issues.length === 0">
- No Scope Changes in this Sprint
+ <div class="legend">
+ <ul>
+ <li v-for="team in teams" :key="team.id">
+ <div>
+ <b class="text-2xl">{{ team.title }}</b>
  </div>
- <ul v-else class="flex flex-row space-x-4">
- <li v-for="issue in team.sprint.scopeChange.issues" :key="issue.id">
- <NuxtLink class="link underline underline-offset-1" :to="issue.htmlUrl">
- {{ issue.number }}
- </NuxtLink>
- </li>
- </ul>
- </div>
- <br>
- </li>
- </ul>
+ <div>
+ <b class="text-2xl">{{ team.sprint.name }}</b>
+ </div>
+ <div>
+ <h2 class="text-xl">
+ Total Points
+ </h2>
+ <pre>{{ team.sprint.totalPoints }}</pre>
+ </div>
+ <div>
+ <h2 class="text-xl">
+ Total closed releases
+ </h2>
+ <pre>{{ team.result.totalReleases }}</pre>
+ </div>
+ <div>
+ <h2 class="text-xl">
+ Total Issues
+ </h2>
+ <pre>{{ team.sprint.issues.totalCount }}</pre>
+ </div>
+ <div>
+ <h2 class="text-xl">
+ Total Prod Defects
+ </h2>
+ <pre>{{ team.result.totalDefects }}</pre>
+ </div>
+ <div>
+ <h2 class="text-xl">
+ Scope Change
+ </h2>
+ <pre>{{ team.sprint.scopeChange.totalCount }}</pre>
+ <h2 class="text-xl">
+ Scope Change Issues
+ </h2>
+ <div v-if="team.sprint.scopeChange.issues.length === 0">
+ No Scope Changes in this Sprint
+ </div>
+ <ul v-else class="flex flex-row space-x-4">
+ <li v-for="issue in team.sprint.scopeChange.issues" :key="issue.id">
+ <NuxtLink class="link underline underline-offset-1" :to="issue.htmlUrl">
+ {{ issue.number }}
+ </NuxtLink>
+ </li>
+ </ul>
+ </div>
+ <br>
+ </li>
+ </ul>
+ <div class="legend-legend">
+ <EachTeamLegend />
+ </div>
+ </div>
  </div>
+
  <!-- <pre class="mx-20">
  <div v-if="issues === null">
  Loading issues
@@ -123,9 +129,30 @@ export default {
  margin-left: 35%;
  margin-right: 35%;
  margin-top: 40px;
+ display: flex;
+ justify-content: space-between;
 }
 
 .link {
  color: #1669BB
 }
+.legend{
+ width: 60rem;
+ display: flex;
+ justify-content: space-between;
+ &-legend{
+ background-color: #94b9de;
+ height: max-content;
+ padding: 2rem;
+ border-radius: 2rem;
+ }
+
+}
+.team-container {
+ display: flex;
+ justify-content: space-between; /* Add this line */
+ align-items: flex-start; /* Add this line if you want the content to align at the top */
+ margin-bottom: 20px; /* Adjust margin as needed */
+}
+
 </style>

apps/application-status/pages/sprints/[team].vue

@@ -129,7 +129,6 @@ export default {
  beforeMount () {
  this.displayData()
  },
-
  methods: {
  async displayData () {
  if (this.boardId === '' && this.keyWord === '') {