fix button bug

package.json

@@ -5,7 +5,7 @@
   "description": "Vue.js admin template",
   "author": "smartapant <smartapant@gmail.com>",
   "scripts": {
-    "serve": "vue-cli-service serve",
+    "serve": "vue-cli-service serve --mode development",
     "build": "vue-cli-service build",
     "lint": "vue-cli-service lint",
     "lint:style": "stylelint --fix src/**/*.{vue,htm,html,css,sss,less,scss}",

src/app/main.js

@@ -44,13 +44,22 @@ import '../registerServiceWorker'
 
 localforage.config({ name: 'bioprovue' })
 
+let MqttUrl
+// for developer
+if (process.env.NODE_ENV === 'development') {
+  MqttUrl = 'ws://192.168.5.57:8083'
+} else {
+  // for user
+  MqttUrl = `ws://${location.href.split('/')[2]}:8083`
+}
+
 if (process.env.VUE_APP_BUILD_VERSION) {
   // eslint-disable-next-line
-  const message = `%c${'Build_information:'}\n %c${'Version'}: %c${VERSION},\n %c${'Timestamp'}: %c${TIMESTAMP},\n %c${'Commit'}: %c${COMMIT}`
+  const message = `%c${'Build_information:'}\n %c${'Version'}: %c${VERSION},\n %c${'Timestamp'}: %c${TIMESTAMP},\n %c${'Commit'}: %c${COMMIT} %c${'Mqtt'}: %c${MqttUrl}`
   // eslint-disable-next-line
   console.info(
     message,
-    'color: blue;', 'color: red;', 'color: blue;', 'color: red;', 'color: blue;', 'color: red;', 'color: blue;',
+    'color: blue;', 'color: red;', 'color: blue;', 'color: red;', 'color: blue;', 'color: red;', 'color: blue;', 'color: red;', 'color: blue;',
   )
 }
 
@@ -61,11 +70,10 @@ Vue.component('chart', ECharts)
 Vue.use(VueWorker)
 Vue.use(VueAxios, axios)
 Vue.use(Toast)
-
 // Vue.use(VueMqtt, 'ws://52.194.17.114:8083')
-Vue.use(VueMqtt, 'ws://' + location.href.split('/')[2] + ':8083')
+// Vue.use(VueMqtt, 'ws://' + location.href.split('/')[2] + ':8083')
 // Vue.use(VueMqtt, 'ws://' + '192.168.151.125' + ':8083')
-// Vue.use(VueMqtt, 'ws://' + '192.168.3.211' + ':8083')
+Vue.use(VueMqtt, MqttUrl)
 
 Vue.prototype.API = api
 Vue.prototype.GLOBAL = global_

src/components/debug/Debug.vue

@@ -0,0 +1,115 @@
+<template>
+  <va-card class="flex xl3 md3 sm12 xs12" title="MQTT">
+    <div class="row ma-1 text-center">
+      <va-button @click="getControllerID">Controller-ID</va-button>
+      <div class="flex-center">
+        {{ controllerID }}
+      </div>
+    </div>
+    <div class="row ma-1 text-start" v-if="controllerID !== ''">
+      <va-button @click="getHardwareInfo">HardwareInfo</va-button>
+      <div class="">
+        {{ responseMessage }}
+      </div>
+    </div>
+  </va-card>
+</template>
+
+<script>
+import api from '@/data/api'
+
+export default {
+  name: 'Developer',
+  components: {
+  },
+  data () {
+    return {
+      controllerID: '',
+      responseMessage: '',
+    }
+  },
+  mqtt: {
+    async '+/get_device_info_all/+' (data, topic) {
+      console.log('get_device_info_all', String.fromCharCode.apply(null, data))
+    },
+    async '+/hardware_device/+' (data, topic) {
+      console.log('hardware_device', String.fromCharCode.apply(null, data))
+    },
+    async '+/hardware_datetime/+' (data, topic) {
+      console.log('hardware_datetime', String.fromCharCode.apply(null, data))
+    },
+    async '+/hardware_info/+' (data, topic) {
+      console.log('hardware_info', String.fromCharCode.apply(null, data))
+      this.responseMessage = String.fromCharCode.apply(null, data)
+    },
+    async '+/broadcast/+' (data, topic) {
+      console.log('broadcast', String.fromCharCode.apply(null, data))
+    },
+  },
+  methods: {
+    mqttPub: function (topic, mes) {
+      this.$mqtt.publish(topic, mes)
+    },
+    mqttSub: function (val) {
+      this.$mqtt.subscribe(val)
+    },
+    mqttUnSub: function (val) {
+      this.$mqtt.unsubscribe(val)
+    },
+    pageMqttSub: function (id) {
+      this.mqttSub(id + '/hardware_datetime/+')
+      this.mqttSub(id + '/hardware_device/+')
+      this.mqttSub(id + '/hardware_info/+')
+      this.mqttSub(id + '/broadcast')
+      this.mqttSub(id + '/get_device_info_all/+')
+    },
+    pageMqttUnSub: function (id) {
+      this.mqttUnSub(id + '/hardware_datetime/+')
+      this.mqttUnSub(id + '/hardware_device/+')
+      this.mqttUnSub(id + '/hardware_info/+')
+      this.mqttUnSub(id + '/broadcast')
+      this.mqttUnSub(id + '/get_device_info_all/+')
+    },
+    getControllerID: async function () {
+      try {
+        const response = await api.controller.getAll()
+        if (response.status === 200) {
+          if (response.data.length > 0) {
+            this.controllerID = response.data[0].mqtt_id
+            this.pageMqttSub(this.controllerID)
+            return true
+          }
+          this.controllerID = 'No Controller Info'
+          return false
+        }
+        this.controllerID = 'Wrong status ' + response.status
+      } catch (e) {
+        console.log(e)
+        this.controllerID = e
+      }
+    },
+    getHardwareDatetime: function () {
+      this.mqttPub(this.controllerID + '_user', JSON.stringify({
+        header: 'hardware_datetime/0',
+        content: String(Date.now()),
+      }))
+    },
+    getHardwareInfo: function () {
+      this.mqttPub(this.controllerID + '_user', JSON.stringify({
+        header: 'hardware_info/0',
+      }))
+    },
+  },
+  async mounted () {
+  },
+  destroyed () {
+    if (this.controllerID !== '') {
+      this.pageMqttUnSub(this.controllerID)
+    }
+  },
+}
+</script>
+
+<style>
+
+</style>

src/components/developer/Developer.vue

@@ -0,0 +1,58 @@
+<template>
+  <va-card class="" title="LED">
+    <div class="row ma-1">
+      <va-button v-for="color in colors" :key="color"  :color="colorMapping[color]" @click="changeLedColor(color)">
+        {{color}}
+      </va-button>
+      <va-button :color="'gray'" @click="testLed()">test</va-button>
+    </div>
+  </va-card>
+</template>
+
+<script>
+import { taskInfo } from '@/data/task/TaskInfo'
+
+export default {
+  name: 'Developer',
+  components: {
+  },
+  data () {
+    return {
+      colors: ['red', 'orange', 'yellow', 'green', 'blue', 'cyan', 'magenta'],
+      colorMapping: {
+        red: 'danger',
+        orange: 'Orange',
+        blue: 'primary',
+        yellow: 'warning',
+        green: 'success',
+        cyan: 'info',
+        magenta: 'violet',
+      },
+    }
+  },
+  methods: {
+    mqttPub: function (topic, mes) {
+      this.$mqtt.publish(topic, mes)
+    },
+    testLed: function () {
+      this.changeLedColor('red')
+      setTimeout(() => { this.changeLedColor('blue') }, 2000)
+      setTimeout(() => { this.changeLedColor('green') }, 4000)
+    },
+    changeLedColor: function (color) {
+      this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
+        header: 'hardware_send/0',
+        command: 'led',
+        state: color,
+      }))
+    },
+  },
+  async mounted () {
+    await taskInfo.updateTaskInfo(this.$route.params.taskID)
+  },
+}
+</script>
+
+<style>
+
+</style>

src/components/file/file-table/FileTable.vue

@@ -82,9 +82,9 @@
     <va-card class="flex sm12 xl12 md12 xs12">
       <template slot="header">
         <div class="flex sm12 xl12 md12 xs12" style="text-align: end;">
-          <!-- <va-button class="" color="success" v-if="selected.length" @click="downloadSelected" target="_blank" small>
+          <va-button class="" color="success" v-if="selected.length" @click="downloadSelected" target="_blank" small>
             DOWNLOAD
-          </va-button> -->
+          </va-button>
           <va-button class="" color="danger" v-if="selected.length" @click="deleteMultiFilesConfirm" target="_blank" small>
             DELETE
           </va-button>
@@ -673,12 +673,12 @@ export default {
       // this.$refs.datatable_ref.refresh()
       // this.$refs.datatable_ref.currentPage = 1
     },
-    // downloadSelected: function () {
-    //   for (let i = 0; i < this.selected.length; i++) {
-    //     const meta = this.selected[i]
-    //     this.downloadCsv(meta)
-    //   }
-    // },
+    downloadSelected: function () {
+      for (let i = 0; i < this.selected.length; i++) {
+        const meta = this.selected[i]
+        this.downloadExcel(meta)
+      }
+    },
     async deleteSelected () {
       for (let i = 0; i < this.selected.length; i++) {
         const meta = this.selected[i]

src/components/task/content/TaskContent.vue

@@ -108,6 +108,7 @@ import { mapFields } from 'vuex-map-fields'
 import { mapActions } from 'vuex'
 import taskTypes from '@/store/modules/task/content/types'
 import TaskFormula from './formula/TaskFormula'
+import { v4 as uuid } from 'uuid'
 
 // TODO change chart data tag format
 
@@ -261,12 +262,22 @@ export default {
           this.showShutdownModal = true
           break
         case 'start':
+          // register default chart again
           await this.taskContentChartDefaultChartGenerator({
             _deviceList: this.deviceListNew,
             _itemID: parseInt(mes[1]),
             _chartID: null,
             _type: 'device',
           })
+
+          // remove mapping ID chart series data
+          for (const chart in this.chartData) {
+            this.taskContentChartResetSeriesData({
+              chartID: chart,
+              mappingID: mes[1],
+            })
+          }
+
           device = this.deviceListNew.find((ele) => ele.memory_board === parseInt(mes[1]))
           device.status = 1
           break
@@ -347,12 +358,20 @@ export default {
       )
     },
     refreshData: function () {
-      // TODO don't need to refresh chart with stop status
       for (const chart in this.chartData) {
-        this.taskContentChartRefreshData({
-          chartID: parseInt(chart),
-          deviceList: this.deviceListNew,
-        })
+        // find each chart mappingID with device memory_board
+        const device = this.deviceListNew.find(ele => String(ele.memory_board) === String(this.chartData[chart].mappingID))
+        // device not found continue
+        if (device === undefined) {
+          continue
+        }
+        // device is running refresh chart
+        if (device.status === 1) {
+          this.taskContentChartRefreshData({
+            chartID: chart,
+            deviceList: this.deviceListNew,
+          })
+        }
       }
     },
     refreshDevicesWindow: function () {
@@ -362,25 +381,35 @@ export default {
       }
     },
     addChart: async function (isDefault) {
-      this.taskContentChartAdd({
-        chartID: this.taskContentChartNumber,
-        maxDots: 4000,
+      // create chartID with uuid instead of length of chart list
+      const newChart = await this.taskContentChartAdd({
+        chartID: uuid(),
+        maxDots: 5000,
         gridLength: 1,
       })
+
+      // createby default
+      if (isDefault === true) {
+        newChart.createdBy = 'default'
+      }
+      // createby manaul
+      if (isDefault === false) {
+        newChart.createdBy = 'manual'
+      }
+
       if (this.$refs.chart_ref != null) {
         this.$refs.chart_ref.forEach(ref => {
           ref.refreshMappingSelect()
         })
       }
       this.taskContentChartRefreshPanel()
-      this.taskContentChartNumber++
-
+      // save chart config to web storage
       if (!isDefault) {
         await this.taskContentChartSaveToCache()
       }
       this.pageToast('The chart has been added.')
 
-      return this.taskContentChartNumber - 1
+      return newChart.chartID
     },
     refreshChartSetting: async function () {
       if (this.$refs.chart_ref != null) {
@@ -462,9 +491,11 @@ export default {
       return chart
     },
     addDevice: async function (deviceID, memoryBoardID) {
+      // subscribe datastream when add device
       this.mqttSub(`${taskInfo.getTaskInfo().controllerID}/data_server/device_data_stream/${deviceID}/+`)
+      // add mapping chart
       await this.addMappingChart(deviceID)
-
+      // register default chart
       await this.taskContentChartDefaultChartGenerator({
         _deviceList: this.deviceListNew,
         _itemID: deviceID,
@@ -567,6 +598,7 @@ export default {
       taskTypes.chart.add,
       taskTypes.chart.defaultChartGenerator,
       taskTypes.chart.reset,
+      taskTypes.chart.resetSeriesData,
       taskTypes.chart.refreshData,
       taskTypes.chart.refreshChart,
       taskTypes.chart.refreshPanel,

src/components/task/content/chart/CanvasChart.vue

@@ -4,7 +4,7 @@
       <template slot="header">
         <div class="row flex sm12 xl12 md12 xs12 align--center my-0 py-0">
           <div class="flex sm5 xl5 md5 xs5 px-0 mx-0">
-            <h5 class="mt-0 mb-0"><va-icon name="fa fa-area-chart mr-3" color="primary"/>{{nameCard}}</h5>
+            <h5 class="mt-0 mb-0"><va-icon name="fa fa-area-chart mr-3" color="primary"/>{{ nameCard }}</h5>
           </div>
           <div class="flex sm7 xl7 md7 xs7 pa-0 ma-0" style="text-align: right;">
             <va-button class="pa-0 ma-0 circle-button" small color="dark" @click="remove()">
@@ -14,14 +14,41 @@
               />
             </va-button>
           </div>
+          <!-- <div>
+            <va-button v-if="integralClicked && (mode_name==='Chronoamperometric' || mode_name==='I-T Graph')" color="danger" class="mb-2" @click="clickIntegral" small>
+              To Raw Mode
+            </va-button>
+            <va-button v-if="!integralClicked && (mode_name==='Chronoamperometric' || mode_name==='I-T Graph')" color="primary" class="mb-2" @click="clickIntegral" small>
+              To Integral Mode
+            </va-button>
+            <va-button v-if="xlogClicked && (mode_name==='Linear Sweep Voltammetry' || mode_name==='I-V Curve')" color="danger" class="mb-2" @click="clickXLog" small>
+              To Raw Mode
+            </va-button>
+            <va-button :disabled="disableLog" v-if="!xlogClicked && (mode_name==='Linear Sweep Voltammetry' || mode_name==='I-V Curve')" color="primary" class="mb-2" @click="clickXLog" small>
+              To log Mode (x-axis)
+            </va-button>
+            <va-button v-if="ylogClicked && (mode_name==='Linear Sweep Voltammetry' || mode_name==='I-V Curve')" color="danger" class="mb-2" @click="clickYLog" small>
+              To Raw Mode
+            </va-button>
+            <va-button :disabled="disableLog" v-if="!ylogClicked && (mode_name==='Linear Sweep Voltammetry' || mode_name==='I-V Curve')" color="primary" class="mb-2" @click="clickYLog" small>
+              To log Mode (y-axis)
+            </va-button>
+            <va-button v-if="diffClicked && (mode_name==='Linear Sweep Voltammetry' || mode_name==='I-V Curve')" color="danger" class="mb-2" @click="clickDiff" small>
+              To Raw Mode
+            </va-button>
+            <va-button :disabled="disableDiff" v-if="!diffClicked && (mode_name==='Linear Sweep Voltammetry' || mode_name==='I-V Curve')" color="primary" class="mb-2" @click="clickDiff" small>
+              To Differential Mode
+            </va-button>
+          </div> -->
+          <canvas-chart-real-time-calculation :chartID="chartID" @refreshData="refreshData"/>
         </div>
       </template>
       <va-tabs v-model="tabValue" class="mb-3" style="width: 100%; min-width: 100px;">
         <va-tab>
-          {{'CHART'}}
+          {{ 'CHART' }}
         </va-tab>
         <va-tab>
-          {{'SOURCE'}}
+          {{ 'SOURCE' }}
         </va-tab>
       </va-tabs>
       <div v-if="tabValue == 0" >
@@ -30,10 +57,9 @@
         </div>
       </div>
       <div v-else-if="tabValue == 1" :style="'width: '+ cardwidth + '; height: ' + cardheight + ';'" >
-        <canvas-chart-source :chartID="chartID" />
+        <canvas-chart-source :chartID="chartID" @addSource="addSource()" />
       </div>
       <div v-else :style="'width: '+ cardwidth + '; height: ' + cardheight + ';'" >
-        <!-- <canvas-chart-setting :chartID="chartID"></canvas-chart-setting> -->
       </div>
       <div v-if="this.$refs.chart_ref != null">
         <va-button small class="mb-3" @click="selectAllSeries">
@@ -110,6 +136,10 @@ import { taskInfo } from '../../../../data/task/TaskInfo'
 import { mapFields } from 'vuex-map-fields'
 import { mapActions } from 'vuex'
 import taskTypes from '@/store/modules/task/content/types'
+// import paramTable from '@/data/param-table/index'
+// import { newTooltip } from '@/factories/chart/tooltipFactory'
+// import { getTimeFormatter } from '@/store/modules/task/content/actions/chartAct'
+import CanvasChartRealTimeCalculation from './CanvasChartRealTimeCalculation.vue'
 
 export default {
   name: 'CanvasChart',
@@ -118,10 +148,11 @@ export default {
     CanvasChartSource,
     CanvasChartFilter,
     CanvasChartFilterPopup,
+    CanvasChartRealTimeCalculation,
   },
   props: {
     chartID: {
-      type: Number,
+      type: [Number, String],
       required: true,
     },
     cardclass: {
@@ -146,11 +177,15 @@ export default {
     ...mapFields('taskContent', [
       'chartData',
       'taskContentChartKey',
+      'deviceListNew',
     ]),
   },
   data () {
     return {
+      // info: null,
+      // paramTable: paramTable,
       data: null,
+      // rawData: null,
       tabValue: 0,
       resizeTimer: null,
       mappingSelect: '',
@@ -161,9 +196,264 @@ export default {
       threeAxisIntervalInput: 'auto',
       xIntervalInput: 'auto',
       yIntervalInput: 'auto',
+      // mode_name: '',
+      // xName: '',
+      // yName: '',
+      // obj: null,
+      // integralClicked: false,
+      // xlogClicked: false,
+      // ylogClicked: false,
+      // diffClicked: false,
+      // disableDiff: false,
+      // disableLog: false,
     }
   },
+  // watch rawData is use for detect whether the chartData is changed
+  // watch: {
+  //   rawData: {
+  //     deep: true,
+  //     handler: function () {
+  //       // avoid getting null data
+  //       if (this.rawData.series.length > 0) {
+  //         this.watchHandler()
+  //       }
+  //     },
+  //   },
+  // },
   methods: {
+    // Do arithmetic operations triggered by button(raw, integral, log)
+    // watchHandler: function () {
+    //   // this.data need to be deep copy from rawData, since we don't want to modify the source(chartData[])
+    //   // this.data = Object.assign({}, this.rawData)
+    //   this.data = JSON.parse(JSON.stringify(this.rawData))
+    //   this.addSource()
+    //   var curXData = 0
+    //   var curYData = 0
+    //   var prevXData = 0
+    //   var prevYData = 0
+    //   var timeGap = 0
+    //   var curTime = 0
+    //   var integralResult = 0
+    //   var diffResult = 0
+    //   var index = 0
+    //   var timeIndex = this.getTimeIndex()
+    //   var _data = []
+    //   const dataLength = this.data.series[0].data.length
+    //   const seriesData = this.data.series[0].data
+    //   if (this.integralClicked) {
+    //     for (index = 0; index < dataLength; index++) {
+    //       if (index === 0) {
+    //         // TODO: need to change the series[deviceID]
+    //         // TODO: change the time index(dynamic changing)
+    //         curYData = parseFloat(seriesData[index][1])
+    //         timeGap = seriesData[index + 1][timeIndex] - seriesData[index][timeIndex]
+    //         curTime = seriesData[index][timeIndex]
+    //         _data.push([curTime, 0])
+    //       } else {
+    //         prevYData = parseFloat(seriesData[index - 1][1])
+    //         curYData = parseFloat(seriesData[index][1])
+    //         integralResult += parseFloat((Math.abs(curYData) + Math.abs(prevYData)) * timeGap / 2)
+    //         curTime += timeGap
+    //         _data.push([curTime, integralResult])
+    //       }
+    //     }
+    //   } else if (this.xlogClicked || this.ylogClicked) {
+    //     if (this.xlogClicked && this.ylogClicked) {
+    //       for (index = 0; index < dataLength; index++) {
+    //         if (index === 0) {
+    //           curXData = parseFloat(seriesData[index][0])
+    //           curYData = parseFloat(seriesData[index][1])
+    //           timeGap = seriesData[index + 1][timeIndex] - seriesData[index][timeIndex]
+    //           curTime = seriesData[index][timeIndex]
+    //           if (curXData !== 0 && curYData !== 0) {
+    //             _data.push([Math.log10(Math.abs(curXData)), Math.log10(Math.abs(curYData)), curTime])
+    //           }
+    //         } else {
+    //           curXData = parseFloat(seriesData[index][0])
+    //           curYData = parseFloat(seriesData[index][1])
+    //           curTime += timeGap
+    //           if (curXData !== 0 && curYData !== 0) {
+    //             _data.push([Math.log10(Math.abs(curXData)), Math.log10(Math.abs(curYData)), curTime])
+    //           }
+    //         }
+    //       }
+    //     } else if (this.xlogClicked && !(this.ylogClicked)) {
+    //       for (index = 0; index < dataLength; index++) {
+    //         if (index === 0) {
+    //           curXData = parseFloat(seriesData[index][0])
+    //           curYData = parseFloat(seriesData[index][1])
+    //           timeGap = seriesData[index + 1][timeIndex] - seriesData[index][timeIndex]
+    //           curTime = seriesData[index][timeIndex]
+    //           if (curXData !== 0) {
+    //             _data.push([Math.log10(Math.abs(curXData)), curYData, curTime])
+    //           }
+    //         } else {
+    //           curXData = parseFloat(seriesData[index][0])
+    //           curYData = parseFloat(seriesData[index][1])
+    //           curTime += timeGap
+    //           if (curXData !== 0) {
+    //             _data.push([Math.log10(Math.abs(curXData)), curYData, curTime])
+    //           }
+    //         }
+    //       }
+    //     } else if (!(this.xlogClicked) && this.ylogClicked) {
+    //       for (index = 0; index < dataLength; index++) {
+    //         if (index === 0) {
+    //           curXData = parseFloat(seriesData[index][0])
+    //           curYData = parseFloat(seriesData[index][1])
+    //           timeGap = seriesData[index + 1][timeIndex] - seriesData[index][timeIndex]
+    //           curTime = seriesData[index][timeIndex]
+    //           if (curYData !== 0) {
+    //             _data.push([curXData, Math.log10(Math.abs(curYData)), curTime])
+    //           }
+    //         } else {
+    //           curXData = parseFloat(seriesData[index][0])
+    //           curYData = parseFloat(seriesData[index][1])
+    //           curTime += timeGap
+    //           if (curYData !== 0) {
+    //             _data.push([curXData, Math.log10(Math.abs(curYData)), curTime])
+    //           }
+    //         }
+    //       }
+    //     }
+    //   } else if (this.diffClicked) {
+    //     for (index = 0; index < dataLength; index++) {
+    //       if (index === 0) {
+    //         // TODO: need to change the series[deviceID]
+    //         // TODO: change the time index(dynamic changing)
+    //         curXData = parseFloat(seriesData[index][0])
+    //         curYData = parseFloat(seriesData[index][1])
+    //         timeGap = seriesData[index + 1][timeIndex] - seriesData[index][timeIndex]
+    //         curTime = seriesData[index][timeIndex]
+    //         // _data.push([curTime, 0, curTime])
+    //       } else {
+    //         curXData = parseFloat(seriesData[index][0])
+    //         curYData = parseFloat(seriesData[index][1])
+    //         prevXData = parseFloat(seriesData[index - 1][0])
+    //         prevYData = parseFloat(seriesData[index - 1][1])
+    //         curTime += timeGap
+    //         diffResult = parseFloat((curYData - prevYData) / (curXData - prevXData))
+    //         console.log((curYData - prevYData), (curXData - prevXData), diffResult)
+    //         _data.push([curTime, diffResult, curTime])
+    //       }
+    //     }
+    //   }
+    //   // decide feed in raw data / modified one
+    //   if (this.integralClicked || this.xlogClicked || this.ylogClicked || this.diffClicked) {
+    //     this.data.series[0].data = _data
+    //   }
+    //   this.data.xAxis[0].type = 'value'
+    //   if (this.integralClicked) {
+    //     this.data.tooltip.formatter = newTooltip('Integral').formatter
+    //   } else if (this.xlogClicked || this.ylogClicked) {
+    //     this.data.tooltip.formatter = newTooltip('log').formatter
+    //   } else if (this.diffClicked) {
+    //     this.data.tooltip.formatter = newTooltip('Differential').formatter
+    //   } else {
+    //     this.data.tooltip.formatter = newTooltip('').formatter
+    //   }
+    //   // TODO: modify the redundant code
+    //   if (this.xName === 'TIME') {
+    //     // this.data.xAxis[0].axisLabel.hideOverlap = true
+    //     this.data.xAxis[0].axisLabel.formatter = function (val) {
+    //       return getTimeFormatter(val)
+    //       /* const hour = parseInt(val / 3.6e9)
+    //       const minute = parseInt((val % 3.6e9) / 1000000 / 60)
+    //       const second = parseInt((val % 6e7) / 1000000)
+    //       const millisecond = parseInt((val % 1e6) / 1000)
+    //       let label = ''
+    //       if (hour > 0) {
+    //         label += hour + ' h '
+    //       }
+    //       if (minute > 0) {
+    //         label += minute + ' m '
+    //       }
+    //       if (second > 0) {
+    //         label += second + ' s '
+    //       }
+    //       if (millisecond > 0) {
+    //         label += millisecond + ' ms '
+    //       }
+    //       return label */
+    //     }
+    //   }
+    // },
+    // resetClicked: function () {
+    //   this.integralClicked = false
+    //   this.xlogClicked = false
+    //   this.ylogClicked = false
+    //   this.diffClicked = false
+    //   this.disableDiff = false
+    //   this.disableLog = false
+    // },
+    // clickIntegral: function () {
+    //   this.integralClicked = !(this.integralClicked)
+    //   const device = this.deviceListNew.find(ele => String(ele.memory_board) === String(this.data.mappingID))
+    //   if (device !== undefined) {
+    //     if (device.status === 0) {
+    //       this.watchHandler()
+    //     }
+    //   }
+    // },
+    // clickXLog: function () {
+    //   if (this.xlogClicked) {
+    //     this.xlogClicked = false
+    //     this.disableDiff = false
+    //   } else {
+    //     this.xlogClicked = true
+    //     this.disableDiff = true
+    //   }
+    //   const device = this.deviceListNew.find(ele => String(ele.memory_board) === String(this.data.mappingID))
+    //   if (device !== undefined) {
+    //     if (device.status === 0) {
+    //       this.watchHandler()
+    //     }
+    //   }
+    // },
+    // clickYLog: function () {
+    //   if (this.ylogClicked) {
+    //     this.ylogClicked = false
+    //     this.disableDiff = false
+    //   } else {
+    //     this.ylogClicked = true
+    //     this.disableDiff = true
+    //   }
+    //   const device = this.deviceListNew.find(ele => String(ele.memory_board) === String(this.data.mappingID))
+    //   if (device !== undefined) {
+    //     if (device.status === 0) {
+    //       this.watchHandler()
+    //     }
+    //   }
+    // },
+    // clickDiff: function () {
+    //   this.diffClicked = !(this.diffClicked)
+    //   this.disableLog = !(this.disableLog)
+    //   const device = this.deviceListNew.find(ele => String(ele.memory_board) === String(this.data.mappingID))
+    //   if (device !== undefined) {
+    //     if (device.status === 0) {
+    //       this.watchHandler()
+    //     }
+    //   }
+    // },
+    // addSource () {
+    //   if (this.data.gridSource.length > 0) {
+    //     const xAxisName = this.data.gridSource[0][0].xAxis
+    //     const yAxisName = this.data.gridSource[0][0].yAxis
+    //     this.xName = (xAxisName.split(' ')).pop()
+    //     this.yName = (yAxisName.split(' ')).pop()
+    //     if ((this.xName === 'VOLTAGE' && this.yName === 'CURRENT') || (this.xName === 'CURRENT' && this.yName === 'VOLTAGE')) {
+    //       this.mode_name = 'I-V Curve' // integration
+    //     } else if (this.xName === 'TIME' && this.yName === 'CURRENT') {
+    //       this.mode_name = 'I-T Graph' // differential and log
+    //     }
+    //   }
+    // },
+    // // index 0 is for the mode which x-axis is represent time, 2 is for the other mode(s)
+    // getTimeIndex: function () {
+    //   let xAxisName = this.rawData.gridSource[0][0].xAxis
+    //   xAxisName = (xAxisName.split(' ')).pop()
+    //   return (xAxisName === 'TIME') ? 0 : 2
+    // },
     timeIntervalChange: function (val) {
       if (!isNaN(parseInt(val))) {
         this.chartData[this.chartID].xAxis.forEach(x => {
@@ -203,12 +493,12 @@ export default {
           if (parseInt(y.channel) <= 255) {
             if (this.chartData[this.chartID].chartYUnit === 'uV') {
               y.interval = parseInt(val)
-              //  console.log(y.interval)
             } else {
               y.interval = val * 1000
             }
             const maxList = []
             const minList = []
+            // TODO: follow this way to iterate the deviceID
             y.seriesIndex.forEach(i => {
               maxList.push(Math.max(...this.chartData[this.chartID].series[i].data.map(p => p[1])))
               minList.push(Math.min(...this.chartData[this.chartID].series[i].data.map(p => p[1])))
@@ -275,7 +565,7 @@ export default {
     },
     refreshMappingSelect: async function () {
       this.setMappingSelect(this.chartData[this.chartID].mappingID)
-      if (this.chartData[this.chartID].mappingID !== -1 && this.chartData[this.chartID].mappingID != null) {
+      if (this.chartData[this.chartID].mappingID !== '-1' && this.chartData[this.chartID].mappingID != null) {
         taskInfo.getMappingList().forEach(item => {
           if (item.id === this.chartData[this.chartID].mappingID) {
             this.setChartName(item.name)
@@ -322,6 +612,22 @@ export default {
         type: 'legendInverseSelect',
       })
     },
+    // these function below are using for print out the data (debug)
+    // getAlldata: function () {
+    //   return this.data.series[0].data[(this.data.series[0].data).length - 1]
+    // },
+    // getXdata: function () {
+    //   var value = this.data.series[0].data[(this.data.series[0].data).length - 1][0]
+    //   return this.xName + ': ' + value + ' ' + this.xUnit
+    // },
+    // getYdata: function () {
+    //   var value = this.data.series[0].data[(this.data.series[0].data).length - 1][1]
+    //   return this.yName + ': ' + value + ' ' + this.yUnit
+    // },
+
+    refreshData: function (rawData) {
+      this.data = rawData
+    },
 
     ...mapActions('taskContent', [
       taskTypes.chart.saveToCache,
@@ -329,6 +635,7 @@ export default {
   },
   async mounted () {
     this.data = this.chartData[this.chartID]
+    // this.data = this.chartData[this.chartID]
     this.resizeTimer = setInterval(this.resize, 1000)
     this.nameCard = this.chartData[this.chartID].cardName
     await this.refreshMappingSelect()

src/components/task/content/chart/CanvasChartFilter.vue

@@ -65,7 +65,7 @@ export default {
   name: 'canvas-chart-filter',
   props: {
     chartID: {
-      type: Number,
+      type: [Number, String],
       required: true,
     },
     filterIndex: {

src/components/task/content/chart/CanvasChartFilterPopup.vue

@@ -29,7 +29,7 @@ export default {
   },
   props: {
     chartID: {
-      type: Number,
+      type: [Number, String],
       required: true,
     },
     chartRef: {

src/components/task/content/chart/CanvasChartIndividualFilter.vue

@@ -66,7 +66,7 @@ export default {
   name: 'canvas-chart-filter-individual-filter',
   props: {
     chartID: {
-      type: Number,
+      type: [Number, String],
       required: true,
     },
     seriesIndex: {

src/components/task/content/chart/CanvasChartRealTimeCalculation.vue

@@ -0,0 +1,563 @@
+<template>
+  <div>
+    <va-button v-if="integralClicked && (mode_name==='Chronoamperometric' || mode_name==='I-T Graph')" color="danger" class="mb-2" @click="clickIntegral" small>
+      To Raw Mode
+    </va-button>
+    <va-button v-if="!integralClicked && (mode_name==='Chronoamperometric' || mode_name==='I-T Graph')" color="primary" class="mb-2" @click="clickIntegral" small>
+      To Integral Mode
+    </va-button>
+    <va-button v-if="xlogClicked && (mode_name==='Linear Sweep Voltammetry' || mode_name==='I-V Curve')" color="danger" class="mb-2" @click="clickXLog" small>
+      To Raw Mode
+    </va-button>
+    <va-button :disabled="disableLog" v-if="!xlogClicked && (mode_name==='Linear Sweep Voltammetry' || mode_name==='I-V Curve')" color="primary" class="mb-2" @click="clickXLog" small>
+      To log Mode (x-axis)
+    </va-button>
+    <va-button v-if="ylogClicked && (mode_name==='Linear Sweep Voltammetry' || mode_name==='I-V Curve')" color="danger" class="mb-2" @click="clickYLog" small>
+      To Raw Mode
+    </va-button>
+    <va-button :disabled="disableLog" v-if="!ylogClicked && (mode_name==='Linear Sweep Voltammetry' || mode_name==='I-V Curve')" color="primary" class="mb-2" @click="clickYLog" small>
+      To log Mode (y-axis)
+    </va-button>
+    <va-button v-if="diffClicked && (mode_name==='Linear Sweep Voltammetry' || mode_name==='I-V Curve')" color="danger" class="mb-2" @click="clickDiff" small>
+      To Raw Mode
+    </va-button>
+    <va-button :disabled="disableDiff" v-if="!diffClicked && (mode_name==='Linear Sweep Voltammetry' || mode_name==='I-V Curve')" color="primary" class="mb-2" @click="clickDiff" small>
+      To Differential Mode
+    </va-button>
+  </div>
+</template>
+
+<script>
+// import CanvasChartFilter from './CanvasChartFilter.vue'
+// import CanvasChartFilterPopup from './CanvasChartFilterPopup.vue'
+// import CanvasChartSource from './CanvasChartSource'
+// import { taskInfo } from '../../../../data/task/TaskInfo'
+import { mapFields } from 'vuex-map-fields'
+import { mapActions } from 'vuex'
+import taskTypes from '@/store/modules/task/content/types'
+import paramTable from '@/data/param-table/index'
+import { newTooltip } from '@/factories/chart/tooltipFactory'
+import { getTimeFormatter } from '@/store/modules/task/content/actions/chartAct'
+
+export default {
+  name: 'CanvasChartRealTimeCalculation',
+  components: {
+    // CanvasChartSetting,
+    // CanvasChartSource,
+    // CanvasChartFilter,
+    // CanvasChartFilterPopup,
+  },
+  props: {
+    chartID: {
+      type: [Number, String],
+      required: true,
+    },
+    // cardclass: {
+    //   type: Array,
+    //   default: function () {
+    //     return ['xs12', 'md12', 'xl12', 'sm12']
+    //   },
+    // },
+    // cardheight: {
+    //   type: String,
+    //   default: '400px',
+    // },
+    // cardwidth: {
+    //   type: String,
+    //   default: 'auto',
+    // },
+  },
+  computed: {
+    ...mapFields('', [
+      'developer_mode',
+    ]),
+    ...mapFields('taskContent', [
+      'chartData',
+      'taskContentChartKey',
+      'deviceListNew',
+    ]),
+  },
+  data () {
+    return {
+      info: null,
+      paramTable: paramTable,
+      // data: null,
+      rawData: null,
+      // tabValue: 0,
+      // resizeTimer: null,
+      // mappingSelect: '',
+      // mappingOptions: taskInfo.getMappingList(),
+      // nameCard: '',
+      // initDone: false,
+      // timeIntervalInput: 'auto',
+      // threeAxisIntervalInput: 'auto',
+      // xIntervalInput: 'auto',
+      // yIntervalInput: 'auto',
+      mode_name: '',
+      xName: '',
+      yName: '',
+      obj: null,
+      integralClicked: false,
+      xlogClicked: false,
+      ylogClicked: false,
+      diffClicked: false,
+      disableDiff: false,
+      disableLog: false,
+    }
+  },
+  // watch rawData is use for detect whether the chartData is changed
+  watch: {
+    rawData: {
+      deep: true,
+      handler: function () {
+        // avoid getting null data
+        if (this.rawData.series.length > 0) {
+          this.watchHandler()
+        }
+      },
+    },
+  },
+  methods: {
+    // Do arithmetic operations triggered by button(raw, integral, log)
+    watchHandler: function () {
+      // this.data need to be deep copy from rawData, since we don't want to modify the source(chartData[])
+      // this.data = Object.assign({}, this.rawData)
+      this.data = JSON.parse(JSON.stringify(this.rawData))
+      this.addSource()
+      var curXData = 0
+      var curYData = 0
+      var prevXData = 0
+      var prevYData = 0
+      var timeGap = 0
+      var curTime = 0
+      var integralResult = 0
+      var diffResult = 0
+      var index = 0
+      var timeIndex = this.getTimeIndex()
+      var _data = []
+      const dataLength = this.data.series[0].data.length
+      const seriesData = this.data.series[0].data
+      if (this.integralClicked) {
+        console.log('integral')
+        for (index = 0; index < dataLength; index++) {
+          if (index === 0) {
+            // TODO: need to change the series[deviceID]
+            // TODO: change the time index(dynamic changing)
+            curYData = parseFloat(seriesData[index][1])
+            timeGap = seriesData[index + 1][timeIndex] - seriesData[index][timeIndex]
+            curTime = seriesData[index][timeIndex]
+            _data.push([curTime, 0])
+          } else {
+            prevYData = parseFloat(seriesData[index - 1][1])
+            curYData = parseFloat(seriesData[index][1])
+            integralResult += parseFloat((Math.abs(curYData) + Math.abs(prevYData)) * timeGap / 2)
+            curTime += timeGap
+            _data.push([curTime, integralResult])
+          }
+        }
+      } else if (this.xlogClicked || this.ylogClicked) {
+        if (this.xlogClicked && this.ylogClicked) {
+          for (index = 0; index < dataLength; index++) {
+            if (index === 0) {
+              curXData = parseFloat(seriesData[index][0])
+              curYData = parseFloat(seriesData[index][1])
+              timeGap = seriesData[index + 1][timeIndex] - seriesData[index][timeIndex]
+              curTime = seriesData[index][timeIndex]
+              if (curXData !== 0 && curYData !== 0) {
+                _data.push([Math.log10(Math.abs(curXData)), Math.log10(Math.abs(curYData)), curTime])
+              }
+            } else {
+              curXData = parseFloat(seriesData[index][0])
+              curYData = parseFloat(seriesData[index][1])
+              curTime += timeGap
+              if (curXData !== 0 && curYData !== 0) {
+                _data.push([Math.log10(Math.abs(curXData)), Math.log10(Math.abs(curYData)), curTime])
+              }
+            }
+          }
+        } else if (this.xlogClicked && !(this.ylogClicked)) {
+          for (index = 0; index < dataLength; index++) {
+            if (index === 0) {
+              curXData = parseFloat(seriesData[index][0])
+              curYData = parseFloat(seriesData[index][1])
+              timeGap = seriesData[index + 1][timeIndex] - seriesData[index][timeIndex]
+              curTime = seriesData[index][timeIndex]
+              if (curXData !== 0) {
+                _data.push([Math.log10(Math.abs(curXData)), curYData, curTime])
+              }
+            } else {
+              curXData = parseFloat(seriesData[index][0])
+              curYData = parseFloat(seriesData[index][1])
+              curTime += timeGap
+              if (curXData !== 0) {
+                _data.push([Math.log10(Math.abs(curXData)), curYData, curTime])
+              }
+            }
+          }
+        } else if (!(this.xlogClicked) && this.ylogClicked) {
+          for (index = 0; index < dataLength; index++) {
+            if (index === 0) {
+              curXData = parseFloat(seriesData[index][0])
+              curYData = parseFloat(seriesData[index][1])
+              timeGap = seriesData[index + 1][timeIndex] - seriesData[index][timeIndex]
+              curTime = seriesData[index][timeIndex]
+              if (curYData !== 0) {
+                _data.push([curXData, Math.log10(Math.abs(curYData)), curTime])
+              }
+            } else {
+              curXData = parseFloat(seriesData[index][0])
+              curYData = parseFloat(seriesData[index][1])
+              curTime += timeGap
+              if (curYData !== 0) {
+                _data.push([curXData, Math.log10(Math.abs(curYData)), curTime])
+              }
+            }
+          }
+        }
+      } else if (this.diffClicked) {
+        for (index = 0; index < dataLength; index++) {
+          if (index === 0) {
+            // TODO: need to change the series[deviceID]
+            // TODO: change the time index(dynamic changing)
+            curXData = parseFloat(seriesData[index][0])
+            curYData = parseFloat(seriesData[index][1])
+            timeGap = seriesData[index + 1][timeIndex] - seriesData[index][timeIndex]
+            curTime = seriesData[index][timeIndex]
+            // _data.push([curTime, 0, curTime])
+          } else {
+            curXData = parseFloat(seriesData[index][0])
+            curYData = parseFloat(seriesData[index][1])
+            prevXData = parseFloat(seriesData[index - 1][0])
+            prevYData = parseFloat(seriesData[index - 1][1])
+            curTime += timeGap
+            diffResult = parseFloat((curYData - prevYData) / (curXData - prevXData))
+            console.log((curYData - prevYData), (curXData - prevXData), diffResult)
+            _data.push([curTime, diffResult, curTime])
+          }
+        }
+      }
+      // decide feed in raw data / modified one
+      if (this.integralClicked || this.xlogClicked || this.ylogClicked || this.diffClicked) {
+        // console.log(_data)
+        this.data.series[0].data = _data
+      }
+      this.data.xAxis[0].type = 'value'
+      if (this.integralClicked) {
+        this.data.tooltip.formatter = newTooltip('Integral').formatter
+      } else if (this.xlogClicked || this.ylogClicked) {
+        this.data.tooltip.formatter = newTooltip('log').formatter
+      } else if (this.diffClicked) {
+        this.data.tooltip.formatter = newTooltip('Differential').formatter
+      } else {
+        this.data.tooltip.formatter = newTooltip('').formatter
+      }
+      // TODO: modify the redundant code
+      if (this.xName === 'TIME') {
+        // this.data.xAxis[0].axisLabel.hideOverlap = true
+        this.data.xAxis[0].axisLabel.formatter = function (val) {
+          return getTimeFormatter(val)
+          /* const hour = parseInt(val / 3.6e9)
+          const minute = parseInt((val % 3.6e9) / 1000000 / 60)
+          const second = parseInt((val % 6e7) / 1000000)
+          const millisecond = parseInt((val % 1e6) / 1000)
+          let label = ''
+          if (hour > 0) {
+            label += hour + ' h '
+          }
+          if (minute > 0) {
+            label += minute + ' m '
+          }
+          if (second > 0) {
+            label += second + ' s '
+          }
+          if (millisecond > 0) {
+            label += millisecond + ' ms '
+          }
+          return label */
+        }
+      }
+      this.$emit('refreshData', this.data)
+    },
+    resetClicked: function () {
+      this.integralClicked = false
+      this.xlogClicked = false
+      this.ylogClicked = false
+      this.diffClicked = false
+      this.disableDiff = false
+      this.disableLog = false
+    },
+    clickIntegral: function () {
+      this.integralClicked = !(this.integralClicked)
+      const device = this.deviceListNew.find(ele => String(ele.memory_board) === String(this.data.mappingID))
+      if (device !== undefined) {
+        if (device.status === 0) {
+          this.watchHandler()
+        }
+      }
+    },
+    clickXLog: function () {
+      if (this.xlogClicked) {
+        this.xlogClicked = false
+        if (this.ylogClicked) {
+          this.disableDiff = true
+        } else {
+          this.disableDiff = false
+        }
+      } else {
+        this.xlogClicked = true
+        this.disableDiff = true
+      }
+      const device = this.deviceListNew.find(ele => String(ele.memory_board) === String(this.data.mappingID))
+      if (device !== undefined) {
+        if (device.status === 0) {
+          this.watchHandler()
+        }
+      }
+    },
+    clickYLog: function () {
+      if (this.ylogClicked) {
+        this.ylogClicked = false
+        if (this.xlogClicked) {
+          this.disableDiff = true
+        } else {
+          this.disableDiff = false
+        }
+      } else {
+        this.ylogClicked = true
+        this.disableDiff = true
+      }
+      const device = this.deviceListNew.find(ele => String(ele.memory_board) === String(this.data.mappingID))
+      if (device !== undefined) {
+        if (device.status === 0) {
+          this.watchHandler()
+        }
+      }
+    },
+    clickDiff: function () {
+      this.diffClicked = !(this.diffClicked)
+      this.disableLog = !(this.disableLog)
+      const device = this.deviceListNew.find(ele => String(ele.memory_board) === String(this.data.mappingID))
+      if (device !== undefined) {
+        if (device.status === 0) {
+          this.watchHandler()
+        }
+      }
+    },
+    addSource () {
+      if (this.data.gridSource.length > 0) {
+        const xAxisName = this.data.gridSource[0][0].xAxis
+        const yAxisName = this.data.gridSource[0][0].yAxis
+        this.xName = (xAxisName.split(' ')).pop()
+        this.yName = (yAxisName.split(' ')).pop()
+        if ((this.xName === 'VOLTAGE' && this.yName === 'CURRENT') || (this.xName === 'CURRENT' && this.yName === 'VOLTAGE')) {
+          this.mode_name = 'I-V Curve' // integration
+        } else if (this.xName === 'TIME' && this.yName === 'CURRENT') {
+          this.mode_name = 'I-T Graph' // differential and log
+        }
+      }
+    },
+    // index 0 is for the mode which x-axis is represent time, 2 is for the other mode(s)
+    getTimeIndex: function () {
+      let xAxisName = this.rawData.gridSource[0][0].xAxis
+      xAxisName = (xAxisName.split(' ')).pop()
+      return (xAxisName === 'TIME') ? 0 : 2
+    },
+    // timeIntervalChange: function (val) {
+    //   if (!isNaN(parseInt(val))) {
+    //     this.chartData[this.chartID].xAxis.forEach(x => {
+    //       if (x.type === 'time') {
+    //         x.interval = val * 1000
+    //       }
+    //     })
+    //   } else {
+    //     this.timeIntervalInput = 'auto'
+    //     this.chartData[this.chartID].xAxis.forEach(x => {
+    //       if (x.type === 'time') {
+    //         x.interval = 500 * 1000
+    //       }
+    //     })
+    //   }
+    // },
+    // xIntervalChange: async function (val) {
+    //   if (!isNaN(parseInt(val))) {
+    //     this.chartData[this.chartID].xAxis.forEach(x => {
+    //       if (x.type === 'value') {
+    //         x.interval = val * 1000
+    //       }
+    //     })
+    //   } else {
+    //     this.timeIntervalInput = 'auto'
+    //     this.chartData[this.chartID].xAxis.forEach(x => {
+    //       if (x.type === 'value') {
+    //         x.interval = null
+    //       }
+    //     })
+    //   }
+    //   await this.taskContentChartSaveToCache()
+    // },
+    // yIntervalChange: async function (val) {
+    //   if (!isNaN(parseInt(val))) {
+    //     this.chartData[this.chartID].yAxis.forEach(y => {
+    //       if (parseInt(y.channel) <= 255) {
+    //         if (this.chartData[this.chartID].chartYUnit === 'uV') {
+    //           y.interval = parseInt(val)
+    //         } else {
+    //           y.interval = val * 1000
+    //         }
+    //         const maxList = []
+    //         const minList = []
+    //         // TODO: follow this way to iterate the deviceID
+    //         y.seriesIndex.forEach(i => {
+    //           maxList.push(Math.max(...this.chartData[this.chartID].series[i].data.map(p => p[1])))
+    //           minList.push(Math.min(...this.chartData[this.chartID].series[i].data.map(p => p[1])))
+    //         })
+    //         const max = Math.max(maxList)
+    //         const min = Math.min(minList)
+    //         const center = (max + min) / 2
+    //         y.max = center + (max - min)
+    //         y.min = center - (max - min)
+    //         y.max = (parseInt(y.max / y.interval) + 1) * y.interval
+    //         y.min = (parseInt(y.min / y.interval) - 1) * y.interval
+    //       }
+    //     })
+    //   } else {
+    //     this.timeIntervalInput = 'auto'
+    //     this.chartData[this.chartID].yAxis.forEach(y => {
+    //       if (parseInt(y.channel) <= 255) {
+    //         y.interval = null
+    //         y.max = 'dataMax'
+    //         y.min = 'dataMin'
+    //       }
+    //     })
+    //   }
+    //   await this.taskContentChartSaveToCache()
+    // },
+    // threeAxisIntervalChange: function (val) {
+    //   if (!isNaN(parseInt(val))) {
+    //     this.chartData[this.chartID].yAxis.forEach(y => {
+    //       if (parseInt(y.channel) >= 255) {
+    //         y.interval = val * 1
+    //       }
+    //     })
+    //   } else {
+    //     this.timeIntervalInput = 'auto'
+    //     this.chartData[this.chartID].yAxis.forEach(y => {
+    //       if (parseInt(y.channel) >= 255) {
+    //         y.interval = null
+    //       }
+    //     })
+    //   }
+    // },
+    // init: function () {
+    //   this.mappingSelect = ''
+    //   this.nameCard = 'chart' + this.chartID
+    //   this.$emit('init')
+    // },
+    // remove: function () {
+    //   this.$emit('remove')
+    // },
+    // resetSetting: function () {
+    //   this.mappingSelect = ''
+    //   this.nameCard = 'chart' + this.chartID
+    // },
+    // setMappingSelect: async function (itemID) {
+    //   if (itemID === -1 || itemID == null) {
+    //     return false
+    //   }
+    //   this.mappingOptions.forEach(item => {
+    //     if (item.id === itemID) {
+    //       this.mappingSelect = item
+    //       this.chartData[this.chartID].mappingID = item.id
+    //     }
+    //   })
+    // },
+    // refreshMappingSelect: async function () {
+    //   this.setMappingSelect(this.chartData[this.chartID].mappingID)
+    //   if (this.chartData[this.chartID].mappingID !== '-1' && this.chartData[this.chartID].mappingID != null) {
+    //     taskInfo.getMappingList().forEach(item => {
+    //       if (item.id === this.chartData[this.chartID].mappingID) {
+    //         this.setChartName(item.name)
+    //       }
+    //     })
+    //   }
+    // },
+    // setChartName: function (name) {
+    //   this.chartData[this.chartID].cardName = name
+    //   this.nameCard = name
+    // },
+    // resize: function () {
+    //   if (this.$refs.chart_ref != null) {
+    //     this.$refs.chart_ref.resize()
+    //   }
+    // },
+    // showFilterPopup (params) {
+    //   this.$refs.filter_popup_ref.showPanel(params)
+    // },
+    // setCursor (params) {
+    //   this.$refs.chart_ref.chart._zr.setCursorStyle('copy')
+    // },
+    // legendChange (params) {
+    //   const activeLegendLen = Object.values(params.selected).filter(val => val === true).length
+    //   let index = 0
+    //   for (const [gridIndex, value] of Object.values(params.selected).entries()) { // [TODO] 技術債，目前real time chart一個grid只對應一條series
+    //     if (value === true) {
+    //       this.chartData[this.chartID].grid[gridIndex].height = (85 / activeLegendLen) + '%'
+    //       this.chartData[this.chartID].grid[gridIndex].top = index * (85 / activeLegendLen) + 1 + '%'
+    //       index++
+    //     } else {
+    //       this.chartData[this.chartID].grid[gridIndex].height = '0%'
+    //       this.chartData[this.chartID].grid[gridIndex].top = '0%'
+    //     }
+    //   }
+    // },
+    // selectAllSeries () {
+    //   this.$refs.chart_ref.dispatchAction({
+    //     type: 'legendAllSelect',
+    //   })
+    // },
+    // inverseSelectAllSeries () {
+    //   this.$refs.chart_ref.dispatchAction({
+    //     type: 'legendInverseSelect',
+    //   })
+    // },
+    // these function below are using for print out the data (debug)
+    getAlldata: function () {
+      return this.data.series[0].data[(this.data.series[0].data).length - 1]
+    },
+    getXdata: function () {
+      var value = this.data.series[0].data[(this.data.series[0].data).length - 1][0]
+      return this.xName + ': ' + value + ' ' + this.xUnit
+    },
+    getYdata: function () {
+      var value = this.data.series[0].data[(this.data.series[0].data).length - 1][1]
+      return this.yName + ': ' + value + ' ' + this.yUnit
+    },
+
+    ...mapActions('taskContent', [
+      taskTypes.chart.saveToCache,
+    ]),
+  },
+  async mounted () {
+    this.rawData = this.chartData[this.chartID]
+    console.log('mounted', this.rawData)
+    // this.data = this.chartData[this.chartID]
+    // this.resizeTimer = setInterval(this.resize, 1000)
+    // this.nameCard = this.chartData[this.chartID].cardName
+    // await this.refreshMappingSelect()
+    // this.initDone = true
+    // if (this.$refs.chart_ref != null) {
+    //   // this.$refs.chart_ref.chart._zr.on('click', this.showFilterPopup)
+    //   // this.$refs.chart_ref.chart._zr.on('mousemove', this.setCursor)
+    //   this.$refs.chart_ref.chart.on('legendselectchanged', this.legendChange)
+    //   this.$refs.chart_ref.chart.on('legendselectall', this.legendChange)
+    //   this.$refs.chart_ref.chart.on('legendinverseselect', this.legendChange)
+    // }
+    // this.timeIntervalInput = '500'
+    // this.timeIntervalChange('500')
+  },
+  // destroyed () {
+  //   clearInterval(this.resizeTimer)
+  // },
+}
+
+</script>

src/components/task/content/chart/CanvasChartSetting.vue

@@ -30,7 +30,7 @@ export default {
   name: 'canvas-chart-setting',
   props: {
     chartID: {
-      type: Number,
+      type: [Number, String],
       required: true,
     },
   },

src/components/task/content/chart/CanvasChartSource.vue

@@ -95,7 +95,7 @@ export default {
   name: 'canvas-chart-source',
   props: {
     chartID: {
-      type: Number,
+      type: [Number, String],
       required: true,
     },
   },
@@ -351,6 +351,7 @@ export default {
       this.sourceAddStatus = true
       this.clearSelectOptions()
       await this.taskContentChartSaveToCache()
+      this.$emit('addSource')
     },
     async addGrid () {
       this.taskContentChartUpdateGridList({

src/components/task/content/controller/TaskDeviceListNew.vue

@@ -61,6 +61,7 @@ import { mapActions } from 'vuex'
 import types from '@/store/modules/task/content/types'
 import { taskInfo } from '../../../../data/task/TaskInfo'
 import api from '@/data/api'
+import CanvasChart from '../chart/CanvasChart'
 
 export default {
   name: 'TaskDeviceList',
@@ -120,6 +121,7 @@ export default {
         api.task.update({
           device_config: taskInfo.getTaskInfo().deviceListNew,
         })
+        CanvasChart.methods.resetClicked()
       }
     },
     stop: function (device) {

src/data/api/collection.js

@@ -79,7 +79,6 @@ async function getAll () {
 }
 
 async function getByParentName (collectionType, parent, name) {
-  console.log(collectionType, parent, name)
   const _header = auth.getHeader()
   try {
     return await api.axios.get(`/api/file/collection/get_by_parent_name/${collectionType}/${parent}/${name}`, { headers: _header })

src/data/api/controller.js

@@ -13,7 +13,6 @@ async function create (_data) {
 
 async function getAll () {
   const _header = auth.getHeader()
-  console.log(_header)
   try {
     return await api.axios.get('/api/controller/get/all', { headers: _header })
   } catch (e) {

src/data/api/task.js

@@ -13,7 +13,6 @@ async function create (_data) {
 
 async function getAll () {
   const _header = auth.getHeader()
-  console.log(_header)
   try {
     return await api.axios.get('/api/task/get/all', { headers: _header })
   } catch (e) {

src/data/param-table/EliteZM15/CaliADC.js

@@ -25,7 +25,7 @@ export default {
         h: 60 * 60 * 1e6,
         auto: 1,
       },
-      defaultUnit: 'auto',
+      defaultUnit: 'us',
     },
     0: {
       name: 'I_in',

src/data/param-table/EliteZM15/CaliDAC.js

@@ -25,7 +25,7 @@ export default {
         h: 60 * 60 * 1e6,
         auto: 1,
       },
-      defaultUnit: 'auto',
+      defaultUnit: 'us',
     },
     0: {
       name: 'I_in',

src/data/param-table/EliteZM15/Chronoamperometry.js

@@ -26,7 +26,7 @@ export default {
         h: 60 * 60 * 1e6,
         auto: 1,
       },
-      defaultUnit: 'auto',
+      defaultUnit: 'us',
       downloadUnit: 'ms',
     },
     0: {

src/data/param-table/EliteZM15/Chronopotentiometry.js

@@ -26,7 +26,7 @@ export default {
         h: 60 * 60 * 1e6,
         auto: 1,
       },
-      defaultUnit: 'auto',
+      defaultUnit: 'us',
       downloadUnit: 'ms',
     },
     0: {

src/data/param-table/EliteZM15/ConstantCurrent.js

@@ -26,7 +26,7 @@ export default {
         h: 60 * 60 * 1e6,
         auto: 1,
       },
-      defaultUnit: 'auto',
+      defaultUnit: 'us',
       downloadUnit: 'ms',
     },
     0: {

src/data/param-table/EliteZM15/CycleIV.js

@@ -26,7 +26,7 @@ export default {
         h: 60 * 60 * 1e6,
         auto: 1,
       },
-      defaultUnit: 'auto',
+      defaultUnit: 'us',
       downloadUnit: 'ms',
     },
     0: {

src/data/param-table/EliteZM15/CyclicVoltammetry.js

@@ -26,7 +26,7 @@ export default {
         h: 60 * 60 * 1e6,
         auto: 1,
       },
-      defaultUnit: 'auto',
+      defaultUnit: 'us',
       downloadUnit: 'ms',
     },
     0: {

src/data/param-table/EliteZM15/DPV.js

@@ -31,7 +31,7 @@ export default {
         h: 60 * 60 * 1e6,
         auto: 1,
       },
-      defaultUnit: 'auto',
+      defaultUnit: 'us',
       downloadUnit: 'ms',
     },
     0: {

src/data/param-table/EliteZM15/DevMode.js

@@ -24,7 +24,7 @@ export default {
         h: 60 * 60 * 1e6,
         auto: 1,
       },
-      defaultUnit: 'auto',
+      defaultUnit: 'us',
     },
     0: {
       name: '0',

src/data/param-table/EliteZM15/FunctionGenerator.js

@@ -26,7 +26,7 @@ export default {
         h: 60 * 60 * 1e6,
         auto: 1,
       },
-      defaultUnit: 'auto',
+      defaultUnit: 'us',
       downloadUnit: 'ms',
     },
     0: {

src/data/param-table/EliteZM15/IT.js

@@ -26,7 +26,7 @@ export default {
         h: 60 * 60 * 1e6,
         auto: 1,
       },
-      defaultUnit: 'auto',
+      defaultUnit: 'us',
       downloadUnit: 'ms',
     },
     0: {

src/data/param-table/EliteZM15/IV.js

@@ -26,7 +26,7 @@ export default {
         h: 60 * 60 * 1e6,
         auto: 1,
       },
-      defaultUnit: 'auto',
+      defaultUnit: 'us',
       downloadUnit: 'ms',
     },
     0: {

src/data/param-table/EliteZM15/LinearSweep.js

@@ -26,7 +26,7 @@ export default {
         h: 60 * 60 * 1e6,
         auto: 1,
       },
-      defaultUnit: 'auto',
+      defaultUnit: 'us',
       downloadUnit: 'ms',
     },
     0: {

src/data/param-table/EliteZM15/OCP.js

@@ -26,7 +26,7 @@ export default {
         h: 60 * 60 * 1e6,
         auto: 1,
       },
-      defaultUnit: 'auto',
+      defaultUnit: 'us',
       downloadUnit: 'ms',
     },
     0: {

src/data/param-table/EliteZM15/PulseSensing.js

@@ -42,7 +42,7 @@ export default {
         h: 60 * 60 * 1e6,
         auto: 1,
       },
-      defaultUnit: 'auto',
+      defaultUnit: 'us',
       downloadUnit: 'ms',
     },
     0: {

src/data/param-table/EliteZM15/RT.js

@@ -26,7 +26,7 @@ export default {
         h: 60 * 60 * 1e6,
         auto: 1,
       },
-      defaultUnit: 'auto',
+      defaultUnit: 'us',
       downloadUnit: 'ms',
     },
     0: {
@@ -50,7 +50,7 @@ export default {
       downloadUnit: 'mV',
     },
     2: {
-      name: 'Resister',
+      name: 'Resistor',
       unit: {
         mΩ: 1,
         mohm: 1,

src/data/param-table/EliteZM15/VT.js

@@ -26,7 +26,7 @@ export default {
         h: 60 * 60 * 1e6,
         auto: 1,
       },
-      defaultUnit: 'auto',
+      defaultUnit: 'us',
       downloadUnit: 'ms',
     },
     0: {

src/data/task/DataStreamBuffer.js

@@ -132,3 +132,10 @@ export const dataStreamBuffer = {
   },
 
 }
+/*
+{
+  "chartID" : {
+    "deviceID": {
+      "channel": [[dataset1], ... [dataset5], [datasetlog6]]
+  }
+} */

src/factories/chart/chartFactory.js

@@ -1,6 +1,6 @@
-function newChart (chartID) {
+function newChart (chartID, numOfCharts) {
   return {
-    chartID: parseInt(chartID),
+    chartID: chartID,
     chartType: 'detail',
     chartDevice: 'elite', // elite or neulive
     chartMode: 0,
@@ -8,10 +8,11 @@ function newChart (chartID) {
     chartYUnit: '',
     chartXMode: 'value', // value or time
     chartYMode: 'value', // value or time
-    cardName: 'chart' + String(chartID),
+    cardName: 'chart' + String(numOfCharts),
     cardHeight: '500px',
     cardWidth: 'auto',
-    mappingID: -1,
+    mappingID: '-1',
+    createdBy: '', // manual ror default
     run: false,
     timer: 0,
     legend: {

src/factories/chart/tooltipFactory.js

@@ -23,7 +23,14 @@ function getTime (val) {
   return label
 }
 
-function newTooltip (chartID) {
+// var clicked = false
+// var clickMode = ''
+// export function getClick (clickOrNot, _clickMode) {
+//   clicked = clickOrNot
+//   clickMode = _clickMode
+// }
+
+export function newTooltip (dataMode) {
   return {
     hideDelay: 5000,
     trigger: 'axis',
@@ -61,7 +68,15 @@ function newTooltip (chartID) {
             if (physicalQuantity === 'V') {
               value = parseFloat(param.value[0]).toFixed(3) + ' μV'
             } else if (physicalQuantity === 'I') {
-              value = parseFloat(param.value[0]).toFixed(3) + ' nA'
+              if (dataMode === '') {
+                value = parseFloat(param.value[0]).toFixed(3) + ' nA'
+              } else if (dataMode === 'Integral') {
+                value = parseFloat(param.value[0]).toFixed(3) + ' nC'
+              } else if (dataMode === 'Differential') {
+                value = parseFloat(param.value[0]).toFixed(3) + ' dI/dV'
+              } else {
+                value = parseFloat(param.value[0]).toFixed(3) + ' nA'
+              }
             } else if (physicalQuantity === 'R') {
               value = parseFloat(param.value[0]).toFixed(3) + ' mΩ'
             } else if (physicalQuantity === 'X' || physicalQuantity === 'Y' || physicalQuantity === 'Z' || physicalQuantity === 'M') {
@@ -76,7 +91,15 @@ function newTooltip (chartID) {
             if (physicalQuantity === 'V') {
               value = parseFloat(param.value[1]).toFixed(3) + ' μV'
             } else if (physicalQuantity === 'I') {
-              value = parseFloat(param.value[1]).toFixed(3) + ' nA'
+              if (dataMode === '') {
+                value = parseFloat(param.value[1]).toFixed(3) + ' nA'
+              } else if (dataMode === 'Integral') {
+                value = parseFloat(param.value[1]).toFixed(3) + ' nC'
+              } else if (dataMode === 'Differential') {
+                value = parseFloat(param.value[1]).toFixed(3) + ' dI/dV'
+              } else {
+                value = parseFloat(param.value[1]).toFixed(3) + ' nA'
+              }
             } else if (physicalQuantity === 'R') {
               value = parseFloat(param.value[1]).toFixed(3) + ' mΩ'
             } else if (physicalQuantity === 'X' || physicalQuantity === 'Y' || physicalQuantity === 'Z' || physicalQuantity === 'M') {
@@ -92,7 +115,15 @@ function newTooltip (chartID) {
             if (param.seriesName.split('_')[0][param.seriesName.split('_')[0].length - 1] === 'V') {
               value1 = parseFloat(param.value[0]).toFixed(3) + ' μV'
             } else if (param.seriesName.split('_')[0][param.seriesName.split('_')[0].length - 1] === 'I') {
-              value1 = parseFloat(param.value[0]).toFixed(3) + ' nA'
+              if (dataMode === '') {
+                value1 = parseFloat(param.value[0]).toFixed(3) + ' nA'
+              } else if (dataMode === 'Integral') {
+                value1 = parseFloat(param.value[0]).toFixed(3) + ' nC'
+              } else if (dataMode === 'Differential') {
+                value1 = parseFloat(param.value[0]).toFixed(3) + ' dI/dV'
+              } else {
+                value1 = parseFloat(param.value[0]).toFixed(3) + ' nA'
+              }
             } else if (param.seriesName.split('_')[0][param.seriesName.split('_')[0].length - 1] === 'R') {
               value1 = parseFloat(param.value[0]).toFixed(3) + ' mΩ'
             } else {
@@ -102,7 +133,15 @@ function newTooltip (chartID) {
             if (param.seriesName.split('_')[1][param.seriesName.split('_')[1].length - 1] === 'V') {
               value2 = parseFloat(param.value[1]).toFixed(3) + ' μV'
             } else if (param.seriesName.split('_')[1][param.seriesName.split('_')[1].length - 1] === 'I') {
-              value2 = parseFloat(param.value[1]).toFixed(3) + ' nA'
+              if (dataMode === '') {
+                value2 = parseFloat(param.value[1]).toFixed(3) + ' nA'
+              } else if (dataMode === 'Integral') {
+                value2 = parseFloat(param.value[1]).toFixed(3) + ' nC'
+              } else if (dataMode === 'Differential') {
+                value2 = parseFloat(param.value[1]).toFixed(3) + ' dI/dV'
+              } else {
+                value2 = parseFloat(param.value[1]).toFixed(3) + ' nA'
+              }
             } else if (param.seriesName.split('_')[1][param.seriesName.split('_')[1].length - 1] === 'R') {
               value2 = parseFloat(param.value[1]).toFixed(3) + ' mΩ'
             } else {
@@ -121,5 +160,3 @@ function newTooltip (chartID) {
     },
   }
 }
-
-export default newTooltip

src/router/index.js

@@ -148,6 +148,16 @@ export default new Router({
           path: 'project',
           component: () => import('../components/project/Project.vue'),
         },
+        {
+          name: 'developer',
+          path: 'developer',
+          component: () => import('../components/developer/Developer.vue'),
+        },
+        {
+          name: 'debug',
+          path: 'debug',
+          component: () => import('../components/debug/Debug.vue'),
+        },
         {
           name: 'statistics',
           path: 'statistics',

src/store/modules/analysis/replay/actions/chartAct.js

@@ -1,6 +1,6 @@
 import newSeries from '@/factories/chart/seriesFactory'
 import newChart from '@/factories/chart/chartFactory'
-import newTooltip from '@/factories/chart/tooltipFactory'
+import { newTooltip } from '@/factories/chart/tooltipFactory'
 import newDataZoom from '@/factories/chart/dataZoomFactory'
 import types from '@/store/modules/analysis/replay/types'
 

src/store/modules/analysis/spike/actions/chartAct.js

@@ -1,6 +1,6 @@
 import newSeries from '@/factories/chart/seriesFactory'
 import newChart from '@/factories/chart/chartFactory'
-import newTooltip from '@/factories/chart/tooltipFactory'
+import { newTooltip } from '@/factories/chart/tooltipFactory'
 import newDataZoom from '@/factories/chart/dataZoomFactory'
 import types from '@/store/modules/analysis/spike/types'
 

src/store/modules/task/content/actions/chartAct.js

@@ -1,7 +1,7 @@
 import types from '@/store/modules/task/content/types'
 import newDataZoom from '@/factories/chart/dataZoomFactory'
 import newChart from '@/factories/chart/chartFactory'
-import newTooltip from '@/factories/chart/tooltipFactory'
+import { newTooltip } from '@/factories/chart/tooltipFactory'
 import newSeries from '@/factories/chart/seriesFactory'
 import { dataStreamBuffer } from '@/data/task/DataStreamBuffer'
 import { taskInfo } from '@/data/task/TaskInfo'
@@ -16,31 +16,29 @@ const chartActs = {
   /**
    * init chartData from cache (cache will only record non-default chart)
    *
-   */
+  **/
   [typePath.initCustomizedFromCache]: async ({ state, getters, commit, dispatch }, payload) => {
     const cacheData = await localforage.getItem('chart_data')
     if (cacheData !== null) {
+      // use ID to create new chart by cache
       for (const _chart of Object.values(cacheData)) {
-        if (_chart.mappingID === -1) { // not default chart
-          const newChartID = state.taskContentChartNumber
-          dispatch(typePath.add, {
-            chartID: newChartID,
-            maxDots: _chart.maxDots,
-            gridLength: _chart.grid.length,
-          })
-          for (let gridIndex = 0; gridIndex < _chart.grid.length; gridIndex++) {
-            if (gridIndex in _chart.gridSource) {
-              dispatch(typePath.registerFromCache, {
-                chartID: newChartID,
-                gridIndex: gridIndex,
-                gridSource: _chart.gridSource[gridIndex],
-              })
-            }
+        dispatch(typePath.add, {
+          chartID: _chart.chartID,
+          maxDots: _chart.maxDots,
+          gridLength: _chart.grid.length,
+        })
+        for (let gridIndex = 0; gridIndex < _chart.grid.length; gridIndex++) {
+          if (gridIndex in _chart.gridSource) {
+            dispatch(typePath.registerFromCache, {
+              chartID: _chart.chartID,
+              gridIndex: gridIndex,
+              gridSource: _chart.gridSource[gridIndex],
+            })
           }
-          state.taskContentChartNumber++
-          dispatch(typePath.refreshPanel)
         }
+        state.chartData[_chart.chartID].createdBy = 'manual'
       }
+      dispatch(typePath.refreshPanel)
     }
   },
   /**
@@ -50,19 +48,16 @@ const chartActs = {
   [typePath.saveToCache]: async ({ state, getters, commit, dispatch }, payload) => {
     const _chartData = {}
     for (const [_id, _chart] of Object.entries(state.chartData)) {
-      if (_chart.mappingID === -1) { // not default chart
+      // manual chart clear series data
+      if (_chart.createdBy === 'manual') {
         _chartData[_id] = JSON.parse(JSON.stringify(_chart))
-        if (_chartData[_id].series.data != null) {
-          _chartData[_id].series.data.length = 0
-        }
-        _chartData[_id].series.length = 0
+        _chartData[_id].series.map((ele) => { ele.data.length = 0 })
       }
     }
     await localforage.setItem('chart_data', _chartData)
   },
-  /**
+  /*
    * add chartID to chartData
-   *
    * @param {String} chartID
    * @param {Number} maxDots
    * @param {Number} gridLength
@@ -70,8 +65,8 @@ const chartActs = {
    */
   [typePath.add]: ({ state, getters, commit, dispatch }, payload) => {
     const { chartID, maxDots, gridLength } = payload
-    if (state.chartData[parseInt(chartID)] == null) {
-      state.chartData[parseInt(chartID)] = newChart(chartID)
+    if (state.chartData[chartID] == null) {
+      state.chartData[chartID] = newChart(chartID, Object.keys(state.chartData).length)
       state.chartData[chartID].maxDots = maxDots
       state.chartData[chartID].tooltip = newTooltip()
       dispatch(typePath.updateGridList, { chartID: chartID, length: gridLength })
@@ -80,6 +75,7 @@ const chartActs = {
       return state.chartData[chartID]
     }
   },
+
   /**
    * register source channel setting from cache
    *
@@ -234,28 +230,10 @@ const chartActs = {
     state.chartData[chartID].yAxis[_yAxisIndex].seriesIndex.push(_seriesIndex)
 
     // set xAxis format
+    // TODO: need to get the time unit for the CanvasChart
     if (sourceList[0].name === 'Time') {
       state.chartData[chartID].xAxis[_xAxisIndex].axisLabel.formatter = function (val) {
-        const hour = parseInt(val / 3.6e9)
-        const minute = parseInt((val % 3.6e9) / 1000000 / 60)
-        const second = parseInt((val % 6e7) / 1000000)
-        const millisecond = parseInt((val % 1e6) / 1000)
-        let label = ''
-        if (hour > 0) {
-          label += hour + ' h '
-        }
-        if (minute > 0) {
-          label += minute + ' m '
-        }
-        if (second > 0) {
-          label += second + ' s '
-        }
-        if (millisecond > 0) {
-          label += millisecond + ' ms '
-        }
-
-        // const label = parseInt(parseInt(val / 1000000) / 60) + ' m ' + parseInt((val % 60000000) / 1000000) + ' s'
-        return label
+        return getTimeFormatter(val)
       }
       state.chartData[chartID].xAxis[_xAxisIndex].interval = 500 * 1000
     } else if (sourceList[0].name === 'Elite') {
@@ -362,7 +340,6 @@ const chartActs = {
             return parseFloat(val / 1000).toFixed(2) + 'uA'
           }
           state.chartData[chartID].chartYUnit = 'uA' // nA * 1000
-          console.log(state.chartData[chartID])
           break
         case 2:
           state.chartData[chartID].yAxis[_yAxisIndex].axisLabel.formatter = function (val) {
@@ -515,7 +492,14 @@ const chartActs = {
     if (!state.chartData[chartID].gridSource[gridIndex].some(el => el.name === _gridSeries.name)) {
       state.chartData[chartID].gridSource[gridIndex].push(_gridSeries)
     }
-    // console.log(state.chartData[chartID])
+
+    // assign mappingID with device ID
+    if (deviceIDX >= 0) {
+      state.chartData[chartID].mappingID = deviceIDX
+    }
+    if (deviceIDY >= 0) {
+      state.chartData[chartID].mappingID = deviceIDY
+    }
     return state.chartData[chartID]
   },
   /**
@@ -537,7 +521,7 @@ const chartActs = {
    * @param {String} chartID
    */
   [typePath.refreshData]: ({ state, getters, commit, dispatch }, payload) => {
-    const { chartID, deviceList } = payload
+    const { chartID } = payload
     if (state.chartData[chartID] == null) {
       return false
     }
@@ -710,24 +694,12 @@ const chartActs = {
           // series data list shift by time
           if (series.data.length > 0) {
             if (series.xAxisSource[0] === -1) {
-              if (deviceList.find(ele => ele.memory_board === series.yAxisSource[0]).library_name.includes('Elite')) {
-                if (series.data.length > state.chartData[chartID].maxDots) {
-                  series.data.splice(0, series.data.length - state.chartData[chartID].maxDots)
-                }
-              } else {
-                if (series.data[series.data.length - 1][0] - series.data[0][0] > 3000000) {
-                  series.data.splice(0, popData.length)
-                }
+              if (series.data.length > state.chartData[chartID].maxDots) {
+                series.data.splice(0, series.data.length - state.chartData[chartID].maxDots)
               }
             } else if (series.yAxisSource[0] === -1) {
-              if (deviceList.find(ele => ele.memory_board === series.xAxisSource[0]).library_name.includes('Elite')) {
-                if (series.data.length > state.chartData[chartID].maxDots) {
-                  series.data.splice(0, series.data.length - state.chartData[chartID].maxDots)
-                }
-              } else {
-                if (series.data[series.data.length - 1][1] - series.data[0][1] > 3000000) {
-                  series.data.splice(0, popData.length)
-                }
+              if (series.data.length > state.chartData[chartID].maxDots) {
+                series.data.splice(0, series.data.length - state.chartData[chartID].maxDots)
               }
             }
           }
@@ -1002,7 +974,7 @@ const chartActs = {
         mappingID: state.chartData[_chartID].mappingID,
         cardName: state.chartData[_chartID].cardName,
       })
-      state.chartData[_chartID].mappingID = parseInt(item.id)
+      state.chartData[_chartID].mappingID = item.id
       switch (_type) {
         case 'device':
           _chartRegisterDevice(_chartID, item)
@@ -1016,21 +988,23 @@ const chartActs = {
       let isSetting = false
 
       for (const chartID in state.chartData) {
-        if (parseInt(state.chartData[chartID].mappingID) === parseInt(item.id)) {
-          isSetting = true
-          dispatch(typePath.reset, {
-            chartID: chartID,
-            mappingID: state.chartData[chartID].mappingID,
-            cardName: state.chartData[chartID].cardName,
-          })
-          state.chartData[chartID].mappingID = parseInt(item.id)
-          switch (_type) {
-            case 'device':
-              _chartRegisterDevice(chartID, item)
-              break
-            case 'formula':
-              _chartRegisterFormula(chartID, item)
-              break
+        if (state.chartData[chartID].mappingID === item.id) {
+          if (state.chartData[chartID].createdBy === 'default') {
+            isSetting = true
+            dispatch(typePath.reset, {
+              chartID: chartID,
+              mappingID: state.chartData[chartID].mappingID,
+              cardName: state.chartData[chartID].cardName,
+            })
+            state.chartData[chartID].mappingID = item.id
+            switch (_type) {
+              case 'device':
+                _chartRegisterDevice(chartID, item)
+                break
+              case 'formula':
+                _chartRegisterFormula(chartID, item)
+                break
+            }
           }
         }
       }
@@ -1053,12 +1027,13 @@ const chartActs = {
     state.chartData[chartID].legend.data.length = 0
     state.chartData[chartID].xAxis.length = 0
     state.chartData[chartID].yAxis.length = 0
+    state.chartData[chartID].gridSource.length = 0
     if (state.chartData[chartID].series.data != null) {
       state.chartData[chartID].series.data.length = 0
     }
     state.chartData[chartID].series.length = 0
     if (mappingID == null) {
-      state.chartData[chartID].mappingID = -1
+      state.chartData[chartID].mappingID = '-1'
     }
     if (cardName == null) {
       state.chartData[chartID].cardName = 'chart' + String(chartID)
@@ -1066,6 +1041,22 @@ const chartActs = {
     state.chartData[chartID].dataZoom = null
     dispatch(typePath.updateGridList, { chartID: chartID, length: 1 })
   },
+
+  /**
+   * reset chart option
+   *
+   * @param {String} chartID
+   * @param {String} mappingID
+   * @param {String} cardName
+   */
+  [typePath.resetSeriesData]: ({ state, getters, commit, dispatch }, payload) => {
+    const { chartID, mappingID } = payload
+    if (String(mappingID) === String(state.chartData[chartID].mappingID)) {
+      for (const i in state.chartData[chartID].series) {
+        state.chartData[chartID].series[i].data.length = 0
+      }
+    }
+  },
   /**
   * refresh (key++) EChart
   *
@@ -1318,3 +1309,24 @@ function getLegendName (sourceList, formulaID) {
   }
   return legendName
 }
+
+export function getTimeFormatter (val) {
+  const hour = parseInt(val / 3.6e9)
+  const minute = parseInt((val % 3.6e9) / 1000000 / 60)
+  const second = parseInt((val % 6e7) / 1000000)
+  const millisecond = parseInt((val % 1e6) / 1000)
+  let label = ''
+  if (hour > 0) {
+    label += hour + ' h '
+  }
+  if (minute > 0) {
+    label += minute + ' m '
+  }
+  if (second > 0) {
+    label += second + ' s '
+  }
+  if (millisecond > 0) {
+    label += millisecond + ' ms '
+  }
+  return label
+}

src/store/modules/task/content/types.js

@@ -9,6 +9,7 @@ const types = {
     updateGridList: 'taskContentChartUpdateGridList',
     defaultChartGenerator: 'taskContentChartDefaultChartGenerator',
     reset: 'taskContentChartReset',
+    resetSeriesData: 'taskContentChartResetSeriesData',
     refreshData: 'taskContentChartRefreshData',
     refreshChart: 'taskContentChartRefreshChart',
     refreshPanel: 'taskContentChartRefreshPanel',

vue.config.js

@@ -54,6 +54,9 @@ module.exports = {
         TIMESTAMP: JSON.stringify(timeStamp),
         COMMIT: JSON.stringify(getLastCommitHash()),
       }),
+      new webpack.EnvironmentPlugin({
+        VUE_APP_BUILD_VERSION: '1.0.0',
+      }),
     ],
   },
   css: {