feat: commit、issue图表

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>

frontend/src/pages/user/workspace/Home.vue

@@ -445,7 +445,7 @@
                         {{ $t('TO BE IMPLEMENTED.') }}
                       </div> -->
                       <div class="chart-container">
-                        <v-chart :option="currentChartData" autoresize />
+                        <line-chart :data="getCodeChartData(project.project.code)" />
                       </div>
                     </div>
                   </div>
@@ -493,7 +493,7 @@
                       </button>
                     </div>
                     <div class="chart-container">
-                      <v-chart :option="currentChartData" autoresize />
+                      <line-chart :data="getIssueChartData(project.project.issue)" />
                     </div>
                     <!-- <div class="project-invite-collaborator-containter">
                       <button
@@ -615,16 +615,11 @@ import {
   convertIntoToMilestoneStatus,
   convertIntoToProjectIssueStatus
 } from '@/types/index'
-import { use } from 'echarts/core'
+import LineChart from '@/components/LineChart.vue'
-import { CanvasRenderer } from 'echarts/renderers'
-import { LineChart } from 'echarts/charts'
-import { GridComponent, LegendComponent, TooltipComponent } from 'echarts/components'
-import VChart from 'vue-echarts'
 import EmptyContent from '@/components/EmptyContent.vue'
-use([CanvasRenderer, LineChart, LegendComponent, GridComponent, TooltipComponent])
 export default {
   name: 'Workspace',
-  components: { VChart, EmptyContent },
+  components: { LineChart, EmptyContent },
   props: {},
   mounted() {
     this.loading = true
@@ -642,26 +637,6 @@ export default {
         imageUrl: null,
         index: null
       },
-      currentChartData: {
-        xAxis: {
-          type: 'category',
-          boundaryGap: false,
-          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
-        },
-        yAxis: {
-          type: 'value'
-        },
-        series: [
-          {
-            data: [820, 932, 901, 934, 1290, 1330, 1320],
-            type: 'line',
-            areaStyle: { color: 'rgba(63,73,255,0.1)' },
-            smooth: true,
-            symbol: 'none',
-            connectNulls: true
-          }
-        ]
-      },
       downstream_web_socket: null
     }
   },
@@ -1013,6 +988,62 @@ export default {
         this.websocketOnError,
         this.websocketOnClose
       )
+    },
+    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]));
+        return {
+          xData: sortData.map(data => data[0]),
+          series: [
+            {
+              data: sortData.map(data => data[1]),
+              type: 'line',
+              name: 'commits',
+              areaStyle: { color: 'rgba(63,73,255,0.1)' },
+              smooth: true,
+              symbol: 'none',
+              connectNulls: true
+            }
+          ]
+        }
+      }
+      return {}
+    },
+    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]));
+        return {
+          xData: sortOpenData.map(data => data[0]),
+          series: [
+            {
+              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: sortResolvedData.map(data => data[1]),
+              name: 'resolved',
+              type: 'line',
+              stack: 'issue',
+              areaStyle: { color: 'rgba(63,73,255,0.2)' },
+              smooth: true,
+              symbol: 'none',
+              connectNulls: true
+            }
+          ]
+        }
+      }
+      return {}
     }
   }
 }