v0.0.8 History trender

Author: sheepzh

README.md

@@ -22,6 +22,20 @@
  npm run build:prod
 ```
 
+## DEBUG
+
++ 在控制台下可以开启日志
+
+```JavaScript
+window.timer.openLog()
+```
+
++ 关闭日志
+
+```JavaScript
+window.timer.closeLog()
+```
+
 ## 下载地址
 
 [Firefox](https://addons.mozilla.org/zh-CN/firefox/addon/make-zero/) [Chrome](https://chrome.google.com/webstore/detail/make-zero-%E6%96%87%E5%AD%97%E5%8A%A0%E5%AF%86%E5%99%A8/ihpcojcdiclghnggnlkcinbmfpomefcc?hl=zh-CN) [Edge](https://microsoftedge.microsoft.com/addons/detail/make-zero-decenc-your-/gkjmpdoddilgcfoeokeajfecogaaocol)

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "timer",
-  "version": "0.0.7",
+  "version": "0.0.8",
   "description": "Web timer",
   "main": "index.js",
   "scripts": {

package.json

@@ -3,7 +3,7 @@
     <div class="filter-container">
       <el-input class="filter-item"
                 v-model="host"
-                :placeholder="$t('record.hostPlaceholder')"
+                :placeholder="$t('report.hostPlaceholder')"
                 clearable
                 @keyup.enter.native="queryData">
       </el-input>
@@ -13,17 +13,17 @@
                         format="yyyy/MM/dd"
                         range-separator="-"
                         :picker-options="pickerOptions"
-                        :start-placeholder="$t('record.startDate')"
-                        :end-placeholder="$t('record.endDate')">
+                        :start-placeholder="$t('report.startDate')"
+                        :end-placeholder="$t('report.endDate')">
         </el-date-picker>
       </span>
-      <a class="filter-name">{{ $t('record.mergeDate') }}</a>
+      <a class="filter-name">{{ $t('report.mergeDate') }}</a>
       <el-switch class="filter-item"
                  v-model="mergeDate" />
-      <a class="filter-name">{{ $t('record.mergeDomain') }}</a>
+      <a class="filter-name">{{ $t('report.mergeDomain') }}</a>
       <el-switch class="filter-item"
                  v-model="mergeDomain" />
-      <a class="filter-name">{{ $t('record.displayBySecond') }}</a>
+      <a class="filter-name">{{ $t('report.displayBySecond') }}</a>
       <el-switch class="filter-item"
                  v-model="displayBySecond" />
       <el-dropdown class="export-dropdown"
@@ -138,6 +138,7 @@ import whitelistService from '../../../service/whitelist-service'
 import { FAVICON } from '../../../util/constant'
 import { formatPeriodCommon, formatTime } from '../../../util/time'
 import { exportCsv, exportJson } from '../../../util/file'
+import { MILL_PER_DAY } from '../../../util/time'
 const ELEMENT_SORT_2_DB = {
   descending: QueryParam.DESC,
   ascending: QueryParam.ASC
@@ -147,13 +148,12 @@ export default {
   name: 'Dashboard',
   data () {
     const daysAgo = (start, end) => {
-      const timePerDay = 3600 * 1000 * 24
       const current = new Date().getTime()
-      return [current - start * timePerDay, current - end * timePerDay]
+      return [current - start * MILL_PER_DAY, current - end * MILL_PER_DAY]
     }
     const datePickerShortcut = (msg, agoOfStart, agoOfEnd) => {
       return {
-        text: this.$t(`record.${msg}`),
+        text: this.$t(`report.${msg}`),
         onClick: picker => picker.$emit('pick', daysAgo(agoOfStart || 0, agoOfEnd || 0))
       }
     }
@@ -326,7 +326,7 @@ export default {
       }
     },
     exportFileName () {
-      let baseName = this.$t('record.exportFileName')
+      let baseName = this.$t('report.exportFileName')
       if (this.dateRange && this.dateRange.length === 2) {
         const start = this.dateRange[0]
         const end = this.dateRange[1]
@@ -336,9 +336,9 @@ export default {
           baseName += '_' + formatTime(start, '{y}{m}{d}') + '_' + formatTime(end, '{y}{m}{d}')
         }
       }
-      this.mergeDate && (baseName += '_' + this.$t('record.mergeDate'))
-      this.mergeDomain && (baseName += '_' + this.$t('record.mergeDomain'))
-      this.displayBySecond && (baseName += '_' + this.$t('record.displayBySecond'))
+      this.mergeDate && (baseName += '_' + this.$t('report.mergeDate'))
+      this.mergeDomain && (baseName += '_' + this.$t('report.mergeDomain'))
+      this.displayBySecond && (baseName += '_' + this.$t('report.displayBySecond'))
       return baseName
     }
   }

src/app/components/Record/index.vue src/app/components/Report/index.vuesrc/app/components/Record/index.vue renamed to src/app/components/Report/index.vue

@@ -0,0 +1,177 @@
+<template>
+  <el-card style="margin-top:25px;">
+    <div style="width:100%;height:600px;"
+         ref="chart" />
+  </el-card>
+</template>
+<script>
+import { init } from 'echarts'
+import timerDatabase, { QueryParam, Row } from '../../../../database/timer-database'
+import { formatPeriodCommon, formatTime, MILL_PER_DAY } from '../../../../util/time'
+
+// Get the timestamp of one timestamp of date
+const timestampOf = d => d.getTime ? d.getTime() : d
+
+const mill2Second = mill => Math.floor((mill || 0) / 1000)
+
+
+export default {
+  name: 'DomainTrender',
+  props: {
+    domain: {
+      type: String
+    },
+    dateRange: {
+      type: Array
+    },
+    field: {
+      type: 'focus' | 'total' | 'time'
+    }
+  },
+  data () {
+    const formatTimeOfEchart = ({ seriesName, name, value }) => `${seriesName}<br/>${name}&ensp;-&ensp;${formatPeriodCommon(value * 1000)}`
+
+    return {
+      rows: [],
+      chart: undefined,
+      option: {
+        backgroundColor: 'rgba(0,0,0,0)',
+        grid: { top: '100' },
+        title: {
+          text: this.$t('trender.history.title'),
+          subtext: '',
+          left: 'center',
+          align: ''
+        },
+        tooltip: {
+          trigger: 'item'
+        },
+        toolbox: {
+          feature: {
+            saveAsImage: {}
+          }
+        },
+        xAxis: {
+          type: 'category',
+          data: []
+        },
+        yAxis: [
+          { name: this.$t('trender.history.timeUnit'), type: 'value' },
+          { name: this.$t('trender.history.numberUnit'), type: 'value' }
+        ],
+        legend: {
+          left: 'left',
+          data: [this.$t('item.total'), this.$t('item.focus'), this.$t('item.time')]
+        },
+        series: [
+          // run time
+          {
+            name: this.$t('item.total'),
+            data: [],
+            yAxisIndex: 0,
+            type: 'line',
+            smooth: true,
+            tooltip: { formatter: formatTimeOfEchart }
+          },
+          {
+            name: this.$t('item.focus'),
+            data: [],
+            yAxisIndex: 0,
+            type: 'line',
+            smooth: true,
+            tooltip: { formatter: formatTimeOfEchart }
+          },
+          {
+            name: this.$t('item.time'),
+            data: [],
+            yAxisIndex: 1,
+            type: 'line',
+            smooth: true,
+            tooltip: {
+              formatter: ({ seriesName, name, value }) => `${seriesName}<br/>${name}&emsp;-&emsp;${value}`
+            }
+          }
+        ]
+      }
+    }
+  },
+  mounted () {
+    this.chart = init(this.$refs.chart)
+    this.updateXAxis()
+    this.renderChart()
+  },
+  methods: {
+    queryData () {
+      if (this.domain === '') {
+        // Do nothing
+        return
+      }
+      timerDatabase.select(rows => {
+        const dateInfoMap = {}
+        rows.forEach(row => dateInfoMap[row.date] = row)
+        const allXAxis = this.getAxias('{y}{m}{d}')
+
+        const focusData = []
+        const totalData = []
+        const timeData = []
+
+        allXAxis.forEach(date => {
+          const row = dateInfoMap[date] || new Row()
+          focusData.push(mill2Second(row.focus))
+          totalData.push(mill2Second(row.total))
+          timeData.push(row.time || 0)
+        })
+
+        this.option.title.subtext = this.domain
+        this.option.series[0].data = totalData
+        this.option.series[1].data = focusData
+        this.option.series[2].data = timeData
+        this.renderChart()
+      }, this.queryParam)
+    },
+    renderChart () {
+      this.chart && this.chart.setOption(this.option)
+    },
+    /**
+     * Get the x-axis of date 
+     */
+    getAxias (format) {
+      const xAxisData = []
+      const startTime = timestampOf(this.dateRange[0])
+      const endTime = timestampOf(this.dateRange[1])
+      for (let time = startTime; time <= endTime; time += MILL_PER_DAY) {
+        xAxisData.push(formatTime(time, format))
+      }
+      return xAxisData
+    },
+    /**
+     * Update the x-axis
+     */
+    updateXAxis () {
+      if (!this.dateRange || this.dateRange.length !== 2) {
+        this.option.xAxis.data = []
+      }
+      this.option.xAxis.data = this.getAxias('{m}/{d}')
+    }
+  },
+  computed: {
+    queryParam () {
+      return {
+        host: this.domain,
+        fullHost: true,
+        sort: 'date',
+        sortOrder: QueryParam.ASC
+      }
+    }
+  },
+  watch: {
+    domain () {
+      this.queryData()
+    },
+    dateRange () {
+      this.updateXAxis()
+      this.queryData()
+    }
+  }
+}
+</script>

src/app/components/Trender/components/DomainTrender.vue

@@ -1,9 +1,10 @@
 <template>
   <div class="content-container">
     <div class="filter-container">
-      <el-select placeholder="ceshi"
+      <el-select :placeholder="$t('trender.hostPlaceholder')"
+                 class="filter-item"
                  v-model="trenderDomain"
-                 multiple
+                 clearable
                  filterable
                  remote
                  :remote-method="queryDomainHandler"
@@ -13,18 +14,56 @@
                    :label="option"
                    :value="option" />
       </el-select>
+      <span class="filter-item">
+        <el-date-picker v-model="dateRange"
+                        type="daterange"
+                        format="yyyy/MM/dd"
+                        range-separator="-"
+                        :picker-options="pickerOptions"
+                        :start-placeholder="$t('trender.startDate')"
+                        :end-placeholder="$t('trender.endDate')"
+                        unlink-panels>
+        </el-date-picker>
+      </span>
+      <domain-trender :date-range="dateRange"
+                      :domain="trenderDomain"
+                      :field="trenderField" />
     </div>
   </div>
 </template>
 <script>
 import timerService from '../../../service/timer-service'
+import DomainTrender from './components/DomainTrender'
+import { MILL_PER_DAY } from '../../../util/time'
 export default {
   name: 'Trender',
+  components: { DomainTrender },
   data () {
+    const daysAgo = (start, end) => {
+      const current = new Date().getTime()
+      return [current - start * MILL_PER_DAY, current - end * MILL_PER_DAY]
+    }
+    const datePickerShortcut = (msg, agoOfStart, agoOfEnd) => {
+      return {
+        text: this.$t(`trender.${msg}`),
+        onClick: picker => picker.$emit('pick', daysAgo(agoOfStart || 0, (agoOfEnd || 0) + 1))
+      }
+    }
     return {
       trenderDomain: '',
       trenderSearching: false,
-      trenderDomainOptions: []
+      trenderDomainOptions: [],
+      trenderField: 'focus',
+      dateRange: daysAgo(15, 1),
+      pickerOptions: {
+        disabledDate: date => date.getTime() > new Date().getTime() - MILL_PER_DAY,
+        shortcuts: [
+          datePickerShortcut('latestWeek', 7),
+          datePickerShortcut('latest15Days', 15),
+          datePickerShortcut('latest30Days', 30),
+          datePickerShortcut('latest90Days', 90)
+        ]
+      }
     }
   },
   methods: {

src/app/components/Trender/index.vue

@@ -2,7 +2,7 @@ import Vue from 'vue'
 import {
     Alert, Aside,
     Button,
-    Container,
+    Card, Container,
     DatePicker, Dropdown, DropdownMenu, DropdownItem,
     Icon, Input,
     Main, Menu, MenuItem, Message, MessageBox,
@@ -21,6 +21,8 @@ import 'element-ui/lib/theme-chalk/aside.css'
 Vue.use(Button)
 import 'element-ui/lib/theme-chalk/button.css'
 
+Vue.use(Card)
+import 'element-ui/lib/theme-chalk/card.css'
 Vue.use(Container)
 import 'element-ui/lib/theme-chalk/container.css'