Merge pull request #96 from agileseason/48-age-of-issues-chart

Age of issues chart (part I)
agileseason · Feb 12, 2022 · cc80e55 · cc80e55
2 parents 7da5a2d + e3d4797
commit cc80e55
Show file tree

Hide file tree

Showing 9 changed files with 269 additions and 115 deletions.
diff --git a/package.json b/package.json
@@ -12,6 +12,7 @@
     "@sentry/vue": "^6.12.0",
     "@uppy/aws-s3": "^1.8.0",
     "@uppy/core": "^1.20.0",
+    "apexcharts": "^3.33.1",
     "browser-cookies": "^1.2.0",
     "core-js": "^3.6.5",
     "delay": "^5.0.0",
@@ -26,6 +27,7 @@
     "vue": "^3.0.1",
     "vue-global-events": "^2.1.0",
     "vue-router": "^4.0.0-0",
+    "vue3-apexcharts": "^1.4.1",
     "vuex": "^4.0.0-beta.4",
     "vuex-pathify": "^1.4.1",
     "webfontloader": "^1.6.28"

diff --git a/src/api.js b/src/api.js
@@ -7,6 +7,39 @@ const DOMAIN_API = {
 
 const ENDPOINT = DOMAIN_API + '/graphql';
 
+// id, number are important here, check if need update/remove these fields.
+const ISSUE_UPDATABLE_FRAGMENT = `
+  id
+  number
+  title
+  body
+  labels { name color }
+  assignees { login url avatarUrl }
+  color
+  isBody
+  isClosed
+  isArchived
+  totalSubtasks
+  doneSubtasks
+`;
+const ISSUE_FRAGMENT = `
+  ${ISSUE_UPDATABLE_FRAGMENT}
+  position
+  url
+  repositoryName
+  repositoryFullName
+  createdAt
+  createdAgo
+  author { login url avatarUrl }
+  columnId
+  commentsCount
+  ageDays
+  pullRequests {
+    id number isClosed isMerged url repositoryName
+    assignees { login avatarUrl }
+  }
+`;
+
 export default {
   // ---------------------------------
   // User
@@ -162,25 +195,7 @@ export default {
           columns {
             id name position isAutoAssign isAutoClose
             issues {
-              id
-              number
-              title
-              position
-              url
-              repositoryName
-              repositoryFullName
-              labels { name color }
-              assignees { login avatarUrl }
-              isClosed
-              isBody
-              commentsCount
-              color
-              totalSubtasks
-              doneSubtasks
-              pullRequests {
-                id number isClosed isMerged url repositoryName
-                assignees { login avatarUrl }
-              }
+              ${ISSUE_FRAGMENT}
             }
           }
           repositories {
@@ -207,24 +222,7 @@ export default {
           columns {
             id name position
             issues {
-              id
-              number
-              title
-              position
-              url
-              repositoryName
-              labels { name color }
-              assignees { login avatarUrl }
-              isClosed
-              isBody
-              commentsCount
-              color
-              totalSubtasks
-              doneSubtasks
-              pullRequests {
-                id number isClosed isMerged url repositoryName
-                assignees { login avatarUrl }
-              }
+              ${ISSUE_FRAGMENT}
             }
           }
         }
@@ -458,25 +456,7 @@ export default {
       mutation($boardId:Int!, $id:Int!) {
         action:syncIssue(input: { boardId: $boardId, id: $id }) {
           issue {
-            id
-            number
-            title
-            body
-            position
-            url
-            repositoryName
-            repositoryFullName
-            columnId
-            isClosed
-            isArchived
-            createdAt
-            createdAgo
-            labels { name color }
-            author { login url avatarUrl }
-            assignees { login url avatarUrl }
-            color
-            totalSubtasks
-            doneSubtasks
+            ${ISSUE_FRAGMENT}
           }
           errors
         }
@@ -534,31 +514,7 @@ export default {
           color: $color
         }) {
           issue {
-            id
-            number
-            title
-            body
-            position
-            url
-            repositoryName
-            repositoryFullName
-            isClosed
-            isArchived
-            createdAt
-            createdAgo
-            labels { name color }
-            assignees { login url avatarUrl }
-            author { login url avatarUrl }
-            columnId
-            isBody
-            commentsCount
-            color
-            totalSubtasks
-            doneSubtasks
-            pullRequests {
-              id number isClosed isMerged url repositoryName
-              assignees { login avatarUrl }
-            }
+            ${ISSUE_FRAGMENT}
           }
           errors
         }
@@ -586,16 +542,7 @@ export default {
           color: $color
         }) {
           issue {
-            id
-            number
-            title
-            labels { name color }
-            assignees { login url avatarUrl }
-            color
-            isClosed
-            isArchived
-            totalSubtasks
-            doneSubtasks
+            ${ISSUE_UPDATABLE_FRAGMENT}
           }
           errors
         }
@@ -620,14 +567,7 @@ export default {
           isArchived: $isArchived
         }) {
           issue {
-            id
-            number
-            title
-            labels { name color }
-            assignees { login url avatarUrl }
-            color
-            isClosed
-            isArchived
+            ${ISSUE_UPDATABLE_FRAGMENT}
           }
           errors
         }

diff --git a/src/assets/icons/menu/graph.svg b/src/assets/icons/menu/graph.svg
diff --git a/src/components/menu/top.vue b/src/components/menu/top.vue
@@ -45,8 +45,9 @@
       </div>
     </div>
     <div class='right'>
+      <router-link v-if='isBoardReady' class='icon charts' :to='boardIssuesAgeChartUrl' />
+      <router-link v-if='isBoardReady' class='icon notes' :to='boardNotesUrl' />
       <router-link v-if='isShowSettings' class='icon settings' :to='boardSettingsUrl' />
-      <router-link v-if='isShowNotes' class='icon notes' :to='boardNotesUrl' />
     </div>
   </div>
 </template>
@@ -80,11 +81,12 @@ export default {
     boardId() { return parseInt(this.$route.params.id) || 0; },
     boardSettingsUrl() { return `/boards/${this.boardId}/settings`; },
     boardNotesUrl() { return `/boards/${this.boardId}/notes`; },
-    isShowSettings() {
-      return this.boardId > 0 && this.isBoardLoaded && this.isBoardOwner;
-    },
-    isShowNotes() {
+    boardIssuesAgeChartUrl() { return `/boards/${this.boardId}/charts/age`; },
+    isBoardReady() {
       return this.boardId > 0 && this.isBoardLoaded;
+    },
+    isShowSettings() {
+      return this.isBoardReady && this.isBoardOwner;
     }
   },
   async created() {
@@ -276,4 +278,7 @@ export default {
 
     &.notes
       background-image: url('../../assets/icons/menu/note.svg')
+
+    &.charts
+      background-image: url('../../assets/icons/menu/graph.svg')
 </style>
diff --git a/src/components/tabs/tabs.vue b/src/components/tabs/tabs.vue
@@ -32,7 +32,7 @@ export default {
 
 <style scoped lang='sass'>
 .tabs
-  margin-top: 30px
+  padding-top: 16px
 
   .tab
     color: #3F51B5

diff --git a/src/router/index.js b/src/router/index.js
@@ -10,7 +10,6 @@ import Home from '../views/home';
 import Invite from '../views/invite';
 import Issue from '../views/issue';
 import IssueNew from '../views/issue_new';
-import Notes from '../views/notes';
 import OAuth from '../views/oauth';
 import Settings from '../views/settings';
 import SharedBoard from '../views/shared_board';
@@ -57,7 +56,11 @@ const routes = [
       }, {
         path: 'notes',
         name: 'notes',
-        component: Notes
+        component: () => import('../views/notes.vue')
+      }, {
+        path: 'charts/age',
+        name: 'issues_age_chart',
+        component: () => import('../views/charts/issues_age.vue')
       }
     ],
     beforeEnter: requireAuth
@@ -86,14 +89,6 @@ const routes = [
     name: 'oauth',
     component: OAuth
   }
-  // {
-  //   path: '/about',
-  //   name: 'About',
-  //   // route level code-splitting
-  //   // this generates a separate chunk (about.[hash].js) for this route
-  //   // which is lazy-loaded when the route is visited.
-  //   component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
-  // }
 ];
 
 const router = createRouter({

diff --git a/src/views/board.vue b/src/views/board.vue
@@ -44,6 +44,20 @@
       </transition>
     </router-view>
   </div>
+
+  <!-- charts -->
+  <div
+    class='modal-overlay'
+    v-if='isLoaded'
+    v-show='isChartOpen'
+    @click.self='backToBoard'
+  >
+    <router-view v-slot='{ Component }'>
+      <transition name='slide' :duration='200'>
+        <component :is='Component' />
+      </transition>
+    </router-view>
+  </div>
 </template>
 
 <script>
@@ -90,6 +104,9 @@ export default {
     },
     isModalRight() {
       return this.issueModalStyle === 'right';
+    },
+    isChartOpen() {
+      return this.$route.name === 'issues_age_chart';
     }
   },
   async created() {