From 852304181023315b4e5c7d17230cbcc77508c44b Mon Sep 17 00:00:00 2001
From: Jet Li <jetli@freeleaps.com>
Date: Wed, 11 Sep 2024 20:56:20 -0700
Subject: [PATCH] More changes on axios

---
 frontend/src/components/LineChart.vue      | 58 ++++++++++++++++++
 frontend/src/pages/user/workspace/Home.vue | 71 ++++++++--------------
 frontend/src/utils/backend/axios.js        |  1 -
 start_frontend.sh                          |  0
 4 files changed, 82 insertions(+), 48 deletions(-)
 create mode 100644 frontend/src/components/LineChart.vue
 mode change 100644 => 100755 start_frontend.sh

diff --git a/frontend/src/components/LineChart.vue b/frontend/src/components/LineChart.vue
new file mode 100644
index 0000000..b7a3daf
--- /dev/null
+++ b/frontend/src/components/LineChart.vue
@@ -0,0 +1,58 @@
+<template>
+  <v-chart ref="lineChart" :option="option" autoresize />
+</template>
+
+<script>
+import { use } from 'echarts/core'
+import { CanvasRenderer } from 'echarts/renderers'
+import { LineChart } from 'echarts/charts'
+import { GridComponent, LegendComponent, TooltipComponent } from 'echarts/components'
+import VChart from 'vue-echarts'
+use([CanvasRenderer, LineChart, LegendComponent, GridComponent, TooltipComponent])
+
+export default {
+  name: 'LineChart',
+  props: {
+    data: { type: Object, default: () => {} }
+  },
+  components: {
+    VChart,
+  },
+  computed: {
+    option() {
+      const option = {
+        tooltip: {
+          trigger: 'axis'
+        },
+        legend: {
+          data: this.data.series.map(ser => ser.name) || []
+        },
+        xAxis: {
+          type: 'category',
+          boundaryGap: false,
+          data: this.data.xData || [],
+          axisLabel: {
+            showMaxLabel: true,
+            showMinLabel: true
+          }
+        },
+        yAxis: {
+          type: 'value',
+          minInterval: 1
+        },
+        series: this.data.series || []
+      }
+      return option
+    }
+  },
+  beforeUnmount() {
+    // 手动销毁实例
+    if (this.$refs.lineChart && this.$refs.lineChart.dispose) {
+      this.$refs.lineChart.dispose();
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+</style>
\ No newline at end of file
diff --git a/frontend/src/pages/user/workspace/Home.vue b/frontend/src/pages/user/workspace/Home.vue
index 70e2acf..be36cd7 100644
--- a/frontend/src/pages/user/workspace/Home.vue
+++ b/frontend/src/pages/user/workspace/Home.vue
@@ -445,7 +445,7 @@
                         {{ $t('TO BE IMPLEMENTED.') }}
                       </div> -->
                       <div class="chart-container">
-                        <custom-chart :customOption="getCodeChartOption(project.project.code)" />
+                        <line-chart :data="getCodeChartData(project.project.code)" />
                       </div>
                     </div>
                   </div>
@@ -493,7 +493,7 @@
                       </button>
                     </div>
                     <div class="chart-container">
-                      <custom-chart :customOption="getIssueChartOption(project.project.issue)" />
+                      <line-chart :data="getIssueChartData(project.project.issue)" />
                     </div>
                     <!-- <div class="project-invite-collaborator-containter">
                       <button
@@ -615,11 +615,11 @@ import {
   convertIntoToMilestoneStatus,
   convertIntoToProjectIssueStatus
 } from '@/types/index'
-import CustomChart from '@/components/CustomChart.vue'
+import LineChart from '@/components/LineChart.vue'
 import EmptyContent from '@/components/EmptyContent.vue'
 export default {
   name: 'Workspace',
-  components: { CustomChart, EmptyContent },
+  components: { LineChart, EmptyContent },
   props: {},
   mounted() {
     this.loading = true
@@ -989,27 +989,20 @@ export default {
         this.websocketOnClose
       )
     },
-    getCodeChartOption(code) {
+    getCodeChartData(code) {
       const { weekly_commits } = code
       if (weekly_commits) {
         // 把数据按日期排序
-        const sortData = Object.entries(weekly_commits).sort((a, b) => new Date(a[0]) - new Date(b[0]))
-        const xData = sortData.map(data => data[0])
+        const sortData = Object.entries(weekly_commits).sort((a, b) => new Date(a[0]) - new Date(b[0]));
         return {
-          xAxis: {
-            data: xData
-          },
-          yAxis: {
-            minInterval: 1
-          },
+          xData: sortData.map(data => data[0]),
           series: [
             {
               data: sortData.map(data => data[1]),
               type: 'line',
-              name: this.$t('Commits'),
-              lineStyle: {
-                color: 'rgb(23,72,248)'
-              },
+              name: 'commits',
+              areaStyle: { color: 'rgba(63,73,255,0.1)' },
+              smooth: true,
               symbol: 'none',
               connectNulls: true
             }
@@ -1018,48 +1011,32 @@ export default {
       }
       return {}
     },
-    getIssueChartOption(issue) {
+    getIssueChartData(issue) {
       const { weekly_open_issues, weekly_resolved_issues } = issue
       if (weekly_open_issues && weekly_resolved_issues) {
         // 把数据按日期排序
-        const sortOpenData = Object.entries(weekly_open_issues).sort((a, b) => new Date(a[0]) - new Date(b[0]))
-        const sortResolvedData = Object.entries(weekly_resolved_issues).sort((a, b) => new Date(a[0]) - new Date(b[0]))
-        const openSerData = sortOpenData.map(data => data[1])
-        const resolvedSerData = sortResolvedData.map(data => data[1])
-        const unresolvedSerData = openSerData.map((data, index) => data - resolvedSerData[index]).reduce((acc, cur, index) => {
-          acc.push(index === 0 ? cur : cur + acc[index - 1]);
-          return acc
-        }, [])
-        const xData = sortOpenData.map(data => data[0])
+        const sortOpenData = Object.entries(weekly_open_issues).sort((a, b) => new Date(a[0]) - new Date(b[0]));
+        const sortResolvedData = Object.entries(weekly_resolved_issues).sort((a, b) => new Date(a[0]) - new Date(b[0]));
         return {
-          xAxis: {
-            data: xData
-          },
-          yAxis: {
-            minInterval: 1
-          },
+          xData: sortOpenData.map(data => data[0]),
           series: [
             {
-              data: openSerData,
-              name: this.$t('open'),
+              data: sortOpenData.map(data => data[1]),
+              name: 'open',
               type: 'line',
+              stack: 'issue',
+              areaStyle: { color: 'rgba(63,73,255,0.1)' },
+              smooth: true,
               symbol: 'none',
               connectNulls: true
             },
             {
-              data: resolvedSerData,
-              name: this.$t('resolved'),
+              data: sortResolvedData.map(data => data[1]),
+              name: 'resolved',
               type: 'line',
-              symbol: 'none',
-              connectNulls: true
-            },
-            {
-              data: unresolvedSerData,
-              name: this.$t('unresolved'),
-              type: 'line',
-              lineStyle: {
-                type: 'dashed'
-              },
+              stack: 'issue',
+              areaStyle: { color: 'rgba(63,73,255,0.2)' },
+              smooth: true,
               symbol: 'none',
               connectNulls: true
             }
diff --git a/frontend/src/utils/backend/axios.js b/frontend/src/utils/backend/axios.js
index 65482f2..8af0d9d 100644
--- a/frontend/src/utils/backend/axios.js
+++ b/frontend/src/utils/backend/axios.js
@@ -15,7 +15,6 @@ function isTokenExpired(token) {
 
   try {
     const decodedToken = jwtDecode(token)
-    console.log('this is decoded token', decodedToken)
     const now = Math.floor(Date.now() / 1000)
     // Buffer as 5 minu = 300 seconds
     return decodedToken.exp - 300 < now
diff --git a/start_frontend.sh b/start_frontend.sh
old mode 100644
new mode 100755