Add process chart

package.json

@@ -64,7 +64,9 @@
     "@fortawesome/vue-fontawesome": "^2.0.2",
     "axios": "0.17.1",
     "codemirror": "^5.61.0",
+    "echarts": "^5.1.2",
     "element-ui": "2.3.4",
+    "highcharts-vue": "^1.4.0",
     "js-cookie": "^2.2.0",
     "normalize.css": "7.0.0",
     "nprogress": "0.2.0",

src/renderer/i18n/en_US.js

@@ -37,7 +37,8 @@ export default {
     hash: 'Hase',
     threshold: 'Threshold',
     auto: 'Auto',
-    refresh: 'Refresh'
+    refresh: 'Refresh',
+    count: 'Count'
   },
   prompt: {
     component: {

src/renderer/i18n/zh_CN.js

@@ -37,7 +37,8 @@ export default {
     hash: 'Hase值',
     threshold: '阈值',
     auto: '自动',
-    refresh: '刷新'
+    refresh: '刷新',
+    count: '总数'
   },
   prompt: {
     component: {

src/renderer/main.js

@@ -34,6 +34,9 @@ Vue.component('font-awesome-icon', FontAwesomeIcon)
 // Support i18n
 import { i18n } from './i18n'
 
+import HighchartsVue from 'highcharts-vue'
+Vue.use(HighchartsVue)
+
 if (!process.env.IS_WEB) Vue.use(require('vue-electron'))
 
 Vue.use(ElementUI, { locale })

src/renderer/utils/ArrayUtils.js

@@ -0,0 +1,25 @@
+import { getLength } from '@/utils/Utils'
+
+/**
+ * Build new array
+ * @param {*} array source array
+ * @param {*} max max length
+ * @param {*} deleteLogic delete logic true=start, false=end
+ * @param {*} data push data
+ */
+export function buildArray(array, max, deleteLogic, data) {
+  const newArray = array
+  if (array instanceof Array) {
+    if (getLength(array) > max) {
+      if (deleteLogic) {
+        newArray.shift()
+      } else {
+        newArray.pop()
+      }
+      newArray.push(data)
+    } else {
+      newArray.push(data)
+    }
+  }
+  return newArray
+}

src/renderer/views/monitor/processor/index.vue

@@ -22,6 +22,7 @@
         </el-form-item>
       </el-form>
     </el-row>
+    <highcharts :options="chartOptions"></highcharts>
     <el-table v-if="getLengthGtZore(tableDatas)" :data="tableDatas" style="width: 100%">
       <el-table-column prop="time" :label="this.$t('common.time')"></el-table-column>
       <el-table-column prop="rows" :label="this.$t('common.rows')"></el-table-column>
@@ -40,6 +41,7 @@
 import DataSourceSelect from '@/views/components/data/datasource/DataSourceSelect'
 import { getDataSources } from '@/services/DataSource'
 import { getProcesses } from '@/services/Monitor'
+import { buildArray } from '@/utils/ArrayUtils'
 
 export default {
   components: {
@@ -55,7 +57,20 @@ export default {
         threshold: 2,
         auto: false
       },
-      disabled: true
+      disabled: true,
+      dataCount: [],
+      chartOptions: {
+        title: {
+          text: this.$t('common.processor') + this.$t('common.count')
+        },
+        credits: {
+          enabled: false
+        },
+        series: [{
+          name: this.$t('common.count'),
+          data: []
+        }]
+      }
     }
   },
   created() {
@@ -77,6 +92,7 @@ export default {
         this.tableDatas = response.columns
       }
       this.disabled = false
+      this.chartOptions.series[0].data = buildArray(this.dataCount, 20, true, this.tableDatas.length)
     },
     handlerAuto() {
       if (this.form.auto) {
@@ -93,6 +109,9 @@ export default {
     if (this.timer) {
       clearInterval(this.timer)
     }
+  },
+  watch: {
+    chartOptions: {}
   }
 }
 </script>