[debug] fix real-time dataZoom bug

src/app/main.js

@@ -47,7 +47,9 @@ localforage.config({ name: 'bioprovue' })
 let MqttUrl
 // for developer
 if (process.env.NODE_ENV === 'development') {
-  MqttUrl = 'ws://192.168.5.240:8083'
+  MqttUrl = 'ws://192.168.5.66:8083'
+  // MqttUrl = 'ws://192.168.5.57:8083'
+  // MqttUrl = 'ws://192.168.5.57:8080'
 } else {
   // for user
   MqttUrl = `ws://${location.href.split('/')[2]}:8083`

src/components/analysis/replay/elite/EliteDataReplay.vue

@@ -9,7 +9,7 @@
                 <span slot="header">Control Panel</span>
                 <div slot="body">
                   <div>
-                    <top-control-panel :ref="'top_control_panel'" @refreshChart="setOption" @changeAxis="changeAxis" @changeOverviewDataZoom="changeOverviewDataZoom"/>
+                    <top-control-panel :ref="'top_control_panel'" @refreshChart="setOption" @changeAxis="changeAxis" @changeOverviewDataZoom="changeOverviewDataZoom" @changeFunctional="changeFunctional"/>
                   </div>
                 </div>
               </va-collapse>
@@ -106,6 +106,8 @@ export default {
       zoomTime: 0,
       initDone: false,
       chartAreaClass: ['flex', 'xs12', 'sm12', 'md12', 'xl9', 'pa-0'],
+      xfunctional: 'Linear',
+      yfunctional: 'Linear',
     }
   },
   mqtt: {
@@ -236,7 +238,6 @@ export default {
             this.windowLength = this.endTime - this.startTime
             this.chartOverviewData.dataZoom[0].start = dataZoom.start
             this.chartOverviewData.dataZoom[0].end = dataZoom.end
-            // console.log(this.startTime, this.endTime)
           }
         })
       } else {
@@ -247,7 +248,6 @@ export default {
           this.windowLength = this.endTime - this.startTime
           this.chartOverviewData.dataZoom[0].start = e.start
           this.chartOverviewData.dataZoom[0].end = e.end
-          // console.log(this.startTime, this.endTime)
         }
       }
       this.zoomTime = 0
@@ -313,7 +313,6 @@ export default {
         if (this.axisXDataType.description === 'Time') {
           scale = await this.computeResampleScale(metaInfo, metaInfo.time_duration)
         }
-        console.log('overview scale:', scale)
         // download data
         const getAllData = async function (_this) {
           for (const ch in _this.dataInfo[meta]) {
@@ -419,27 +418,113 @@ export default {
           }
         }
         // download and push into chart
+        // due to the (endIndex - startIndex) may more than 1, need to record variables outside the loop
+        var integralResult = 0
+        var curXData = 0
+        var curYData = 0
+        var prevXData = 0
+        var prevYData = 0
         for (let i = startIndex; i <= endIndex; i++) {
           const data = await this.getData(parseInt(scale), this.sampleMethod, dataListY[i].id, channelY, metaInfo)
           let dataX
           if (this.axisXDataType.description !== 'Time') {
             dataX = await this.getData(parseInt(scale), this.sampleMethod, dataListX[i].id, channelX, metaInfo)
           }
+          var deltaX = 0
+          var diffResult = 0
+          var logZero = false
+          var lastXinThisTable
           for (let j = 0, len = data.length; j < len; j++) {
             // check which channel and push processed data (i.e. merge two channel data, now data is (time, value) format)
             if (parseInt(data[j][0]) >= _startTime && parseInt(data[j][0]) <= _endTime) {
               const processedData = data[j]
+              logZero = false
+              // cases without time
               if (dataX !== undefined) {
                 processedData[0] = dataX[j][1]
+                // add time on the chart
+                // TODO: not sure the time is right or not?
+                processedData[2] = parseFloat(dataX[j][0])
               }
-              if (this.displayType.x === 'log' || this.absToggleStatus.x === true) {
+              // below is the original version for the log
+              /* if (this.displayType.x === 'log' || this.absToggleStatus.x === true) {
                 processedData[0] = Math.abs(processedData[0])
               }
               if (this.displayType.y === 'log' || this.absToggleStatus.y === true) {
                 processedData[1] = Math.abs(processedData[1])
+              } */
+              if (this.xfunctional === 'Log') {
+                // avoid log10(0) cases
+                if (Math.abs(processedData[0]) === 0) logZero = true
+                processedData[0] = Math.log10(Math.abs(processedData[0]))
               }
-
-              this.chartDetailData.series[_gridNumber].data.push(processedData)
+              if (this.yfunctional === 'Log') {
+                if (Math.abs(processedData[1]) === 0) logZero = true
+                processedData[1] = Math.log10(Math.abs(processedData[1]))
+              } else if (this.yfunctional === 'Integral') {
+                if (j === 0) {
+                  // TODO: need to change the series[deviceID]
+                  // TODO: change the time index(dynamic changing)
+                  curYData = parseFloat(processedData[1])
+                  // integral only when I-T & C-A, so writen as [0] directly
+                  prevYData = parseFloat(data[j][1])
+                  // initial integral as 0
+                  if (i === 0) processedData[1] = 0
+                  else {
+                    if (dataX !== undefined) {
+                      // e.g. I-V: deltaX is V
+                      deltaX = parseFloat(dataX[j][1]) - lastXinThisTable
+                    } else {
+                      // e.g. I-T: deltaX is T
+                      deltaX = parseFloat(data[j][0]) - lastXinThisTable
+                    }
+                    integralResult += parseFloat((Math.abs(curYData) + Math.abs(prevYData)) * Math.abs(deltaX) / 2)
+                    processedData[1] = integralResult
+                  }
+                } else {
+                  curYData = parseFloat(data[j][1])
+                  if (dataX !== undefined) {
+                    // e.g. I-V: deltaX is V
+                    deltaX = parseFloat(dataX[j][1]) - parseFloat(dataX[j - 1][1])
+                    lastXinThisTable = parseFloat(dataX[j][1])
+                  } else {
+                    // e.g. I-T: deltaX is T
+                    deltaX = parseFloat(data[j][0]) - parseFloat(data[j - 1][0])
+                    lastXinThisTable = parseFloat(data[j][0])
+                  }
+                  integralResult += parseFloat((Math.abs(curYData) + Math.abs(prevYData)) * Math.abs(deltaX) / 2)
+                  // assign here is due to the fetch the modify value
+                  prevYData = curYData
+                  processedData[1] = integralResult
+                }
+              } else if (this.yfunctional === 'Differential') {
+                if (j === 0) {
+                  // TODO: need to change the series[deviceID]
+                  // TODO: change the time index(dynamic changing)
+                  curXData = parseFloat(processedData[0])
+                  curYData = parseFloat(processedData[1])
+                  deltaX = parseFloat(dataX[j + 1][0]) - parseFloat(dataX[j][0])
+                  if (i === 0) logZero = true
+                  // due to the limitation of the getData table, the number of page may > 1
+                  else {
+                    diffResult = parseFloat((curYData - prevYData) / (curXData - prevXData))
+                    processedData[0] = curXData
+                    processedData[1] = diffResult
+                  }
+                  prevXData = parseFloat(processedData[0])
+                  prevYData = parseFloat(processedData[1])
+                } else {
+                  curXData = parseFloat(processedData[0])
+                  curYData = parseFloat(processedData[1])
+                  diffResult = parseFloat((curYData - prevYData) / (curXData - prevXData))
+                  prevXData = curXData
+                  prevYData = curYData
+                  processedData[0] = curXData
+                  processedData[1] = diffResult
+                }
+              }
+              // avoid pushing the infinity data into the chart
+              if (!logZero) this.chartDetailData.series[_gridNumber].data.push(processedData)
             }
           }
         }
@@ -478,6 +563,13 @@ export default {
         }
       }
     },
+    changeFunctional (axis, functional) {
+      if (axis === 'x') {
+        this.xfunctional = functional
+      } else {
+        this.yfunctional = functional
+      }
+    },
     changeAxis (gridIndex) {
       if (this.initDone) {
         const libName = this.metaList[gridIndex].device.library_name

src/components/analysis/replay/elite/TopControlPanel.vue

@@ -15,7 +15,7 @@
 
       <div class="flex-container mb-2">
         <div class="flex sm2 xl2 md2 xs2 px-0 py-0">
-          <p class="display-6"> X-axis <p/>
+          <p class="display-6"> X-axis </p>
         </div>
         <div class="flex sm5 xl5 md5 xs5 pl-1 pr-0 py-0">
           <change-axis :ref="'change_axis_x'" axis="x" @changeAxis="changeAxis" @changeUnit="changeUnit" @clearCycle="clearCycle"/>
@@ -27,7 +27,7 @@
       <div class="flex-container mb-2">
         <div class="flex sm2 xl2 md2 xs2 px-0 py-0" />
         <div class="flex sm5 xl5 md5 xs5 pl-1 pr-0 py-0">
-          <change-scale :ref="'change_scale_x'" axis="x" @refreshChart="refreshChart" @clearCycle="clearCycle" @changeAxis="changeAxis"/>
+          <change-scale :ref="'change_scale_x'" axis="x" @refreshChart="refreshChart" @clearCycle="clearCycle" @changeAxis="changeAxis" @changeFunctional="changeFunctional"/>
         </div>
         <div class="flex sm5 xl5 md5 xs5 px-0 py-0">
           <abs-toggle :ref="'abs_x'" axis="x" @changeAxis="changeAxis"/>
@@ -36,7 +36,7 @@
 
       <div class="flex-container mb-2">
         <div class="flex sm2 xl2 md2 xs2 px-0 py-0">
-          <p class="display-6"> Y-axis <p/>
+          <p class="display-6"> Y-axis </p>
         </div>
         <div class="flex sm5 xl5 md5 xs5 pl-1 pr-0 py-0">
           <change-axis :ref="'change_axis_y'" axis="y" @changeAxis="changeAxis" @changeUnit="changeUnit" @clearCycle="clearCycle"/>
@@ -48,7 +48,7 @@
       <div class="flex-container mb-2">
         <div class="flex sm2 xl2 md2 xs2 px-0 py-0" />
         <div class="flex sm5 xl5 md5 xs5 pl-1 pr-0 py-0">
-          <change-scale :ref="'change_scale_y'" axis="y" @refreshChart="refreshChart" @clearCycle="clearCycle" @changeAxis="changeAxis"/>
+          <change-scale :ref="'change_scale_y'" axis="y" @refreshChart="refreshChart" @clearCycle="clearCycle" @changeAxis="changeAxis" @changeFunctional="changeFunctional"/>
         </div>
         <div class="flex sm5 xl5 md5 xs5 px-0 py-0">
           <abs-toggle :ref="'abs_y'" axis="y" @changeAxis="changeAxis"/>
@@ -141,6 +141,9 @@ export default {
     refreshChart (options) {
       this.$emit('refreshChart', options)
     },
+    changeFunctional (axis, functional) {
+      this.$emit('changeFunctional', axis, functional)
+    },
     changeAxis (gridIndex) {
       this.$emit('changeAxis', gridIndex)
     },

src/components/analysis/replay/toolbox/CanvasChartReplayCalculation.vue

@@ -0,0 +1,332 @@
+<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 { mapFields } from 'vuex-map-fields'
+import { mapActions } from 'vuex'
+import taskTypes from '@/store/modules/task/content/types'
+import paramTable from '@/data/config-table/index'
+import { getTimeFormatter } from '@/store/modules/task/content/actions/chartAct'
+
+export default {
+  name: 'CanvasChartReplayCalculation',
+  components: {
+  },
+  props: {
+    chartID: {
+      type: [Number, String],
+      required: true,
+    },
+  },
+  computed: {
+    ...mapFields('', [
+      'developer_mode',
+    ]),
+    ...mapFields('taskContent', [
+      'chartData',
+      'taskContentChartKey',
+      'deviceListNew',
+    ]),
+  },
+  data () {
+    return {
+      info: null,
+      paramTable: paramTable,
+      rawData: null,
+      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))
+            _data.push([curXData, 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.$emit('switchModeButton', 'Integral')
+      } else if (this.xlogClicked || this.ylogClicked) {
+        this.$emit('switchModeButton', 'log')
+      } else if (this.diffClicked) {
+        this.$emit('switchModeButton', 'Differential')
+      } else {
+        this.$emit('switchModeButton', '')
+      }
+      // TODO: modify the redundant code
+      if (this.xName === 'TIME') {
+        this.data.xAxis[0].axisLabel.formatter = function (val) {
+          return getTimeFormatter(val)
+        }
+      }
+      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
+    },
+    // 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]
+  },
+}
+
+</script>

src/components/analysis/replay/toolbox/ChangeScale.vue

@@ -1,3 +1,4 @@
+<!-- eslint-disable prefer-const -->
 <template>
   <div>
     <va-select
@@ -92,26 +93,111 @@ export default {
       }
     },
     async calculateScaleHelper (gridIndex, ch) {
-      let seriesData
-      if (this.scaleFormat.description === 'Log') {
-        seriesData = JSON.parse(JSON.stringify(this.chartData[this.chartID].series[gridIndex].data))
-        for (let i = 0; i < seriesData.length; i++) {
-          if (this.axis === 'x') {
-            seriesData[i][0] = Math.abs(seriesData[i][0])
-          } else if (this.axis === 'y') {
-            seriesData[i][1] = Math.abs(seriesData[i][1])
+      // console.log('desc', this.scaleFormat.description)
+      /* var _dataDiff = []
+      var _dataIntegral = []
+      var _dataLog = []
+      // this.$emit('changeAxis', this.metaIndex)
+      // this.$emit('clearCycle')
+      if (this.scaleFormat.description === 'Differential') {
+        // await this.reDrawChart()
+        // eslint-disable-next-line prefer-const
+        let seriesData = JSON.parse(JSON.stringify(this.chartData[this.chartID].series[gridIndex].data))
+        // console.log('diff')
+        var curXData = 0
+        var curYData = 0
+        var prevXData = 0
+        var prevYData = 0
+        var timeGap = 0
+        var curTime = 0
+        _dataDiff = []
+        var diffResult = 0
+        for (let index = 0; index < seriesData.length; 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]
+            // _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))
+            _dataDiff.push([curXData, diffResult])
           }
         }
         this.updateSeriesChart({
           chartID: this.chartID,
           seriesIndex: gridIndex,
-          data: seriesData,
+          data: _dataDiff,
         })
+      } else if (this.scaleFormat.description === 'Integral') {
+        // await this.reDrawChart()
+        // eslint-disable-next-line prefer-const
+        let seriesData = JSON.parse(JSON.stringify(this.chartData[this.chartID].series[gridIndex].data))
+        var curYDataIntegral = 0
+        var prevYDataIntegral = 0
+        var timeGapIntegral = 0
+        var curTimeIntegral = 0
+        var integralResult = 0
+        _dataIntegral = []
+        for (let index = 0; index < seriesData.length; index++) {
+          if (index === 0) {
+            curYDataIntegral = parseFloat(seriesData[index][1])
+            timeGapIntegral = seriesData[index + 1][0] - seriesData[index][0]
+            curTimeIntegral = seriesData[index][0]
+            _dataIntegral.push([curTime, 0])
+          } else {
+            prevYDataIntegral = parseFloat(seriesData[index - 1][1])
+            curYDataIntegral = parseFloat(seriesData[index][1])
+            integralResult += parseFloat((Math.abs(curYDataIntegral) + Math.abs(prevYDataIntegral)) * timeGapIntegral / 2)
+            curTimeIntegral += timeGapIntegral
+            _dataIntegral.push([curTimeIntegral, integralResult])
+          }
+        }
+        this.updateSeriesChart({
+          chartID: this.chartID,
+          seriesIndex: gridIndex,
+          data: _dataIntegral,
+        })
+      } else if (this.scaleFormat.description === 'Log') {
+        await this.reDrawChart()
+        setTimeout(() => {
+          // eslint-disable-next-line prefer-const
+          let seriesData = JSON.parse(JSON.stringify(this.chartData[this.chartID].series[gridIndex].data))
+          _dataLog = seriesData
+          for (let i = 0; i < seriesData.length; i++) {
+            if (this.axis === 'x') {
+              seriesData[i][0] = parseFloat(seriesData[i][0])
+              if (seriesData[i][0] !== 0) {
+                // seriesData[i][0] = Math.log10(Math.abs(seriesData[i][0]))
+                _dataLog[i][0] = Math.log10(Math.abs(seriesData[i][0]))
+              }
+            } else if (this.axis === 'y') {
+              seriesData[i][1] = parseFloat(seriesData[i][1])
+              if (seriesData[i][1] !== 0) {
+                // seriesData[i][1] = Math.log10(Math.abs(seriesData[i][1]))
+                _dataLog[i][1] = Math.log10(Math.abs(seriesData[i][1]))
+              }
+            }
+          }
+          this.updateSeriesChart({
+            chartID: this.chartID,
+            seriesIndex: gridIndex,
+            data: _dataLog,
+          })
+          console.log('done')
+        }, 2000)
+        // eslint-disable-next-line prefer-const
       } else if (this.scaleFormat.description === 'Linear') {
-        // console.log(this.recInfo)
         if (this.deviceName.startsWith('Neulive')) {
+          console.log('inside neulive')
           // [Region] get the subfile index
-          seriesData = []
+          // eslint-disable-next-line prefer-const
+          let seriesData = []
           const dataYList = this.recInfo[this.metaID][ch][this.currentScale]
           let startIndex = 0
           let endIndex = 0
@@ -140,12 +226,23 @@ export default {
             }
           }
         } else if (this.deviceName === 'EliteZM15' || this.deviceName === 'EliteEIS') {
-          this.$emit('changeAxis', this.metaIndex)
-          this.$emit('clearCycle')
+          console.log('inside Elite')
+          // this.$emit('changeAxis', this.metaIndex)
+          // this.$emit('clearCycle')
+          this.reDrawChart()
         }
-      }
+      } */
+      // console.log('inside changeScale: ', this.scaleFormat.description)
+      this.reDrawChart()
       this.setAxisDisplayChart({ type: this.displayType[this.axis], axis: this.axis, chartID: this.chartID, gridIndex: gridIndex })
     },
+    reDrawChart: function () {
+      // console.log('die here')
+      this.$emit('changeFunctional', this.axis, this.scaleFormat.description)
+      // console.log('reDrawChart: ', this.axis, this.scaleFormat.description)
+      this.$emit('changeAxis', this.metaIndex)
+      this.$emit('clearCycle')
+    },
     getData: async function (scale, sampleMethod, id, channel, meta) {
       if (scale === 1) {
         return await download.rawByIDChannels(id, channel, meta)
@@ -162,6 +259,11 @@ export default {
     ...mapGetters('replay', [types.rec.getCycleDict]),
   },
   mounted () {
+    if (this.axis === 'x') {
+      this.scaleOptions = this.scaleXOptions
+    } else if (this.axis === 'y') {
+      this.scaleOptions = this.scaleYOptions
+    }
   },
   data () {
     return {
@@ -169,7 +271,8 @@ export default {
       metaID: 0,
       metaInfo: null,
       scaleFormat: { id: 0, description: 'Linear' },
-      scaleOptions: [
+      scaleOptions: [],
+      scaleXOptions: [
         {
           id: 0,
           description: 'Linear',
@@ -179,6 +282,24 @@ export default {
           description: 'Log',
         },
       ],
+      scaleYOptions: [
+        {
+          id: 0,
+          description: 'Linear',
+        },
+        {
+          id: 1,
+          description: 'Log',
+        },
+        {
+          id: 2,
+          description: 'Integral',
+        },
+        {
+          id: 3,
+          description: 'Differential',
+        },
+      ],
     }
   },
   destroyed () {

src/components/analysis/replay/toolbox/ShowParameter.vue

@@ -8,7 +8,7 @@
 
 <script>
 import { mapFields } from 'vuex-map-fields'
-import paramTable from '@/data/param-table/index.js'
+import paramTable from '@/data/config-table/index.js'
 
 export default {
   name: 'show-parameter',
@@ -380,17 +380,19 @@ export default {
         }
       } else if (this.deviceName === 'EliteZM15' || this.deviceName === 'EliteEIS') {
         const mode = this.mode = params.MODE
-        const modeName = paramTable[this.deviceName].MODE[mode].name
-        const showParams = paramTable[this.deviceName].MODE[mode].showParameter
+        const config = paramTable.getConfig(this.deviceName)
+        const modeConfig = paramTable.getModeConfig(this.deviceName, mode)
+        const modeName = modeConfig.name
+        const showParams = modeConfig.showParameter
         this.showDict.MODE = modeName
         if (modeName === 'Pulse Sensing') {
           const duplicateParam = ['V_initial', 't_pulse', 'CURR_REC']
           for (let i = 0; i < 4; i++) {
             const key = 'segment_order'
-            const order = paramTable[this.deviceName][key].outputReadabilityData(params[key], 1, i)
+            const order = config[key].outputReadabilityData(params[key], 1, i)
             if (parseInt(order) >= 0) { // if === -1, 代表沒有使用這個block
               for (const key of duplicateParam) {
-                this.fillShowDict(key, paramTable[this.deviceName][key].outputReadabilityData(params[key], 1, i), i)
+                this.fillShowDict(key, config[key].outputReadabilityData(params[key], 1, i), i)
               }
             }
           }
@@ -409,16 +411,17 @@ export default {
       this.dump()
     },
     fillShowDict (key, value, index = -1) {
-      const expVal = paramTable[this.deviceName][key].defaultUnit
-        ? paramTable[this.deviceName][key].outputReadabilityData(value, paramTable[this.deviceName][key].unit[paramTable[this.deviceName][key].defaultUnit])
-        : paramTable[this.deviceName][key].outputReadabilityData(value)
-      let name = typeof (paramTable[this.deviceName][key].showName) === 'function'
-        ? paramTable[this.deviceName][key].showName(this.mode)
-        : paramTable[this.deviceName][key].showName
+      const config = paramTable.getConfig(this.deviceName)
+      const expVal = config[key].defaultUnit
+        ? config[key].outputReadabilityData(value, config[key].unit[config[key].defaultUnit])
+        : config[key].outputReadabilityData(value)
+      let name = typeof (config[key].showName) === 'function'
+        ? config[key].showName(this.mode)
+        : config[key].showName
       if (index >= 0) {
         name += ` ${index + 1}`
       }
-      const unit = paramTable[this.deviceName][key].defaultUnit
+      const unit = config[key].defaultUnit
       this.showDict[name] = unit !== undefined ? expVal.toString() + unit : expVal.toString()
     },
     dump () {

src/components/download/Download.vue

@@ -22,7 +22,7 @@ import { mapFields } from 'vuex-map-fields'
 import newDownload from '@/factories/file/downloadFactory'
 import newChannel from '@/factories/file/channelFactory'
 import { taskInfo } from '@/data/task/TaskInfo'
-import paramTable from '@/data/param-table/index'
+import configTable from '@/data/config-table/index'
 
 export default {
   name: 'Download',
@@ -108,7 +108,7 @@ export default {
       }
       if (meta !== undefined) {
         this.metaInfo = meta
-        const channelParamObj = paramTable[meta.device.library_name].MODE[meta.parameter_set.MODE].channels
+        const channelParamObj = configTable.getModeConfig(meta.device.library_name, meta.parameter_set.MODE).channels
         const channelArray = allChannel === 'all' ? JSON.parse(this.metaInfo.channels) : Object.keys(channelParamObj).filter(ele => ele !== 'time')
         const channelList = []
 

src/components/download/DownloadOffline.vue

@@ -26,7 +26,7 @@ import newDownload from '@/factories/file/downloadFactory'
 import newChannel from '@/factories/file/channelFactory'
 import progressModal from '@/components/common/progressBarByValueModal/progressModal.vue'
 import { taskInfo } from '@/data/task/TaskInfo'
-import paramTable from '@/data/param-table/index'
+import configTable from '@/data/config-table/index'
 
 export default {
   name: 'DownloadOffline',
@@ -113,7 +113,7 @@ export default {
       }
       if (meta !== undefined) {
         this.metaInfo = meta
-        const channelParamObj = paramTable[meta.device.library_name].MODE[meta.parameter_set.MODE].channels
+        const channelParamObj = configTable.getModeConfig(meta.device.library_name, meta.parameter_set.MODE).channels
         const channelArray = allChannel === 'all' ? JSON.parse(this.metaInfo.channels) : Object.keys(channelParamObj).filter(ele => ele !== 'time')
         const channelList = []
 

src/components/project/task/config/ProjectTaskConfigParameter.vue

@@ -6,29 +6,51 @@
       </div>
     </div>
     <div>
-      <elite-parameter-window></elite-parameter-window>
+      <device-parameter-recording
+        :ref="'device_parameter_ref'"
+        :parameter="parameter"
+        :library="'EliteEDC1.5'"
+        @setParameter="setParameter"
+        @setParameterWithDebounce="setParameterWithDebounce"
+      />
     </div>
   </div>
 </template>
 <script>
-import { mapFields } from 'vuex-map-fields'
 import newCondition from '@/factories/project/conditionFactory'
-import EliteParameterWindow from '@/components/project/task/config/parameter/EliteParameterWindow'
+import { mapActions, mapGetters } from 'vuex'
+import { mapFields } from 'vuex-map-fields'
+import types from '@/store/modules/project/types'
+import DeviceParameterRecording from '@/components/task/content/parameter/DeviceParameterRecording.vue'
+import _ from 'lodash'
+import configTable from '@/data/config-table/index'
 
 export default {
   name: 'project-task-config-parameter',
   components: {
-    EliteParameterWindow,
+    DeviceParameterRecording,
   },
   computed: {
+    ...mapGetters('project', [
+      types.task.getSelect,
+      types.task.getParameterSet,
+      types.project.getDevice,
+      types.project.getSelect,
+    ]),
     ...mapFields('project', [
-      'taskSelect',
+      'taskViewPanel',
+      'taskSelectKey',
+      'deviceSelectKey',
     ]),
   },
   data () {
     return {
+      parameter: {},
       conditionList: newCondition(),
       deviceSelected: null,
+      parameterUUID: '',
+      device: null,
+      config: null,
     }
   },
   methods: {
@@ -38,8 +60,54 @@ export default {
     selectCondition: function (condition) {
       condition.select = !condition.select
     },
+    setParameter: function (name, value) {
+      this.parameter = Object.assign({}, this.parameter)
+
+      if (this.parameterUUID === '') {
+        this.parameterUUID = this.GLOBAL.getUUID()
+      }
+      this.setParameterSetTask({
+        parameterSet: {
+          [name]: value,
+          target: this.deviceSelectKey,
+        },
+        parameterKey: this.parameterUUID,
+      })
+    },
+    setParameterWithDebounce: _.debounce(function (name, value) {
+      this.setParameter(name, value)
+    }, 100),
+    resetParameter: function (mode) {
+      // get Device
+      this.device = this.getDeviceProject(this.deviceSelectKey)
+      // get Config
+      this.config = configTable.getConfig(this.device.library.value)
+      // create default parameter
+      const defaultValue = {}
+      for (const key in this.config) {
+        if (this.config[key].defaultValue !== undefined) {
+          defaultValue[key] = this.config[key].defaultValue
+        }
+      }
+      const parameterSet = this.getParameterSetTask(this.taskSelectKey, this.deviceSelectKey)
+      this.parameter = { ...defaultValue }
+      if (parameterSet) {
+        this.parameterUUID = Object.keys(parameterSet)[0]
+        const param = Object.values(parameterSet)[0]
+        const modeOption = this.$refs.device_parameter_ref.workingModeOptions.find(ele => ele.id === param.MODE)
+        this.$refs.device_parameter_ref.workingModeSelectChange(modeOption)
+        this.parameter = Object.assign(this.parameter, Object.values(parameterSet)[0])
+      }
+    },
+    ...mapActions('project',
+      [
+        types.task.setParameterSet,
+      ],
+    ),
   },
   mounted () {
+    // init parameter
+    this.resetParameter()
   },
 }
 </script>

src/components/project/view/menu/components/DeviceModal.vue

@@ -84,6 +84,7 @@ export default {
 
     ...mapFields('project', [
       'deviceConnectList',
+      'projectLibrary',
     ]),
   },
   data () {
@@ -157,6 +158,9 @@ export default {
       } else {
         await this.setDeviceProject({ device: this.device, index: deviceIndex })
       }
+      if (this.device.library !== undefined) {
+        this.projectLibrary = this.device.library.value
+      }
 
       this.hide()
       this.resetSetting()
@@ -173,6 +177,7 @@ export default {
       this.optionDeviceConnect = this.deviceConnectList
       if (device) {
         this.device = device
+        this.projectLibrary = this.device.library.value
       }
     },
 

src/components/project/view/menu/components/ProjectDevice.vue

@@ -12,6 +12,7 @@
 </template>
 
 <script>
+import { mapFields } from 'vuex-map-fields'
 import { mapActions, mapGetters } from 'vuex'
 import types from '@/store/modules/project/types'
 
@@ -23,6 +24,10 @@ export default {
     ...mapGetters('project', [
       types.project.getSelect,
     ]),
+
+    ...mapFields('project', [
+      'projectLibrary',
+    ]),
   },
   data () {
     return {
@@ -42,6 +47,11 @@ export default {
     ),
   },
   mounted () {
+    for (const device in this.getSelectProject.device) {
+      if (this.projectLibrary === null) {
+        this.projectLibrary = this.getSelectProject.device[device].library.value
+      }
+    }
   },
 }
 </script>

src/components/project/view/table/ProjectTable.vue

@@ -92,7 +92,7 @@
                   <div class="flex">
                     <div v-for="(parameterSet, parameterSetKey) in getParameterSetTask(taskIndex, deviceUUID)" :key="parameterSetKey">
                       <div v-for="(parameter, parameterKey) in parameterSet" :key="parameterKey">
-                        <span v-if="parameterKey !== 'target'">{{ parameterTable[parameterKey].alias }}: {{ parameterTable[parameterKey].transFormula(parameter) }} {{ parameterTable[parameterKey].unit[0] }}</span>
+                        <span v-if="parameterKey !== 'target'"> {{ parameterName(parameterKey) }} : {{ parameterValue(parameterKey, parameter) }} </span>
                       </div>
                     </div>
                   </div>
@@ -122,8 +122,8 @@
 import { mapFields } from 'vuex-map-fields'
 import { mapActions, mapGetters } from 'vuex'
 import types from '@/store/modules/project/types'
-import newEliteZm15Parameter from '@/factories/project/eliteZM15ParmameterFactory'
 import { FulfillingBouncingCircleSpinner } from 'epic-spinners'
+import configTable from '@/data/config-table/index'
 
 export default {
   name: 'project-table',
@@ -131,6 +131,10 @@ export default {
     FulfillingBouncingCircleSpinner,
   },
   computed: {
+    config () {
+      return configTable.getConfig(this.projectLibrary)
+    },
+
     ...mapGetters('project', [
       types.project.getSelect,
       types.project.getDevice,
@@ -144,6 +148,7 @@ export default {
       'taskSelectKey',
       'deviceSelectKey',
       'lockMode',
+      'projectLibrary',
     ]),
   },
   data () {
@@ -152,7 +157,6 @@ export default {
         name: -1,
         checked: [],
       },
-      parameterTable: newEliteZm15Parameter(),
     }
   },
   methods: {
@@ -186,6 +190,28 @@ export default {
         }
       }
     },
+    parameterName (name) {
+      if (name === 'MODE') {
+        return 'Mode'
+      }
+      if (typeof this.config[name].showName === 'function') {
+        return this.config[name].showName()
+      }
+      return this.config[name].showName
+    },
+    parameterValue (name, value) {
+      if (name === 'MODE') {
+        return this.config.MODE[value].name
+      }
+      if (this.config[name].type === 'number') {
+        const scale = this.config[name].unit[this.config[name].defaultUnit]
+        return `${this.config[name].outputReadabilityData(value, scale)} ${this.config[name].defaultUnit}`
+      } else if (this.config[name].type === 'array') {
+        return `${this.config[name].outputReadabilityData(value)}`
+      } else if (this.config[name].type === 'none') {
+        return ''
+      }
+    },
     ...mapActions('project', [
       types.task.delete,
     ]),

src/components/task/content/TaskContent.vue

@@ -208,7 +208,6 @@ export default {
       const topicSplit = topic.split('/')
       const deviceID = parseInt(topicSplit[3])
       const channel = parseInt(topicSplit[4])
-
       dataStreamBuffer.into(String.fromCharCode.apply(null, data), deviceID, (channel + 1))
     },
     '+/device_save_path/+' (data, topic) {
@@ -431,7 +430,7 @@ export default {
       this.selectChartID = chartID
       this.showRemoveChartModal = true
     },
-    removeChart: async function (chartID) {
+    removeChart: async function (chartID, saveCache = true) {
       if (chartID == null) {
         chartID = this.selectChartID
       }
@@ -458,8 +457,9 @@ export default {
           })
         }
       }
-
-      await this.taskContentChartSaveToCache()
+      if (saveCache === true) {
+        await this.taskContentChartSaveToCache()
+      }
       this.pageToast('The chart has been removed.')
     },
     showDeviceSettingClick: function () {
@@ -621,7 +621,7 @@ export default {
   destroyed () {
     taskInfo.destroyed(this.deviceList)
     for (const chart in this.chartData) {
-      this.removeChart(chart)
+      this.removeChart(chart, false)
     }
     clearInterval(this.dataRefreshTimer)
     this.pageMqttUnSub(taskInfo.getTaskInfo().controllerID)

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,26 +14,56 @@
               />
             </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" @switchModeButton="switchModeButton"/>
         </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" >
         <div v-if="chartData[chartID].legend.data.length != 0">
-          <chart :key="taskContentChartKey" :ref="'chart_ref'" :style="'width: '+ cardwidth + '; height: ' + cardheight + ';'" :options="data" :auto-resize="true"></chart>
+          <canvas-chart-real-time-display
+            :chartID="chartID" ref="CanvasChartRealTimeDisplay"
+          />
+          <!-- chart -->
+          <chart :key="taskContentChartKey" :ref="'chart_ref'" :style="'width: '+ cardwidth + '; height: ' + cardheight + ';'" :options="data" @dataZoom="updateZoom" :auto-resize="true" @></chart>
         </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">
@@ -108,8 +138,13 @@ import CanvasChartFilterPopup from './CanvasChartFilterPopup.vue'
 import CanvasChartSource from './CanvasChartSource'
 import { taskInfo } from '../../../../data/task/TaskInfo'
 import { mapFields } from 'vuex-map-fields'
+import CanvasChartRealTimeDisplay from '@/components/task/content/chart/CanvasChartRealTimeDisplay'
 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,6 +153,8 @@ export default {
     CanvasChartSource,
     CanvasChartFilter,
     CanvasChartFilterPopup,
+    CanvasChartRealTimeDisplay,
+    CanvasChartRealTimeCalculation,
   },
   props: {
     chartID: {
@@ -146,6 +183,7 @@ export default {
     ...mapFields('taskContent', [
       'chartData',
       'taskContentChartKey',
+      'deviceListNew',
     ]),
   },
   data () {
@@ -161,9 +199,16 @@ export default {
       threeAxisIntervalInput: 'auto',
       xIntervalInput: 'auto',
       yIntervalInput: 'auto',
+      dataZoomStart: 0,
+      dataZoomEnd: 100,
     }
   },
   methods: {
+    updateZoom: function (e) {
+      // console.log(e.batch)
+      this.dataZoomStart = e.batch[0].start
+      this.dataZoomEnd = e.batch[0].end
+    },
     timeIntervalChange: function (val) {
       if (!isNaN(parseInt(val))) {
         this.chartData[this.chartID].xAxis.forEach(x => {
@@ -203,12 +248,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])))
@@ -322,13 +367,24 @@ export default {
         type: 'legendInverseSelect',
       })
     },
-
+    refreshData: function (rawData) {
+      this.data = rawData
+      // save the start & end of previous dataZoom setting to avoid reset dataZoom
+      this.data.dataZoom[0].start = this.dataZoomStart
+      this.data.dataZoom[0].end = this.dataZoomEnd
+      this.$refs.CanvasChartRealTimeDisplay.updateData(this.data)
+    },
     ...mapActions('taskContent', [
       taskTypes.chart.saveToCache,
     ]),
+    switchModeButton: function (dataMode) {
+      // console.log('switchModeBtn')
+      this.$refs.CanvasChartRealTimeDisplay.switchFunctional(String(dataMode))
+    },
   },
   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/CanvasChartRealTimeCalculation.vue

@@ -0,0 +1,363 @@
+<template>
+  <div>
+    <va-button v-if="integralClicked && (mode_name==='Chronoamperometric' || mode_name==='I-T Graph' || mode_name==='I-V Curve')" color="danger" class="mb-2" @click="clickIntegral" small>
+      To Raw Mode
+    </va-button>
+    <va-button :disabled="disableInt" v-if="!integralClicked && (mode_name==='Chronoamperometric' || mode_name==='I-T Graph' || mode_name==='I-V Curve')" 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/config-table/index'
+// import newTooltip from '@/factories/chart/tooltipFactory'
+import { getTimeFormatter } from '@/store/modules/task/content/actions/chartAct'
+
+export default {
+  name: 'CanvasChartRealTimeCalculation',
+  components: {
+  },
+  props: {
+    chartID: {
+      type: [Number, String],
+      required: true,
+    },
+  },
+  computed: {
+    ...mapFields('', [
+      'developer_mode',
+    ]),
+    ...mapFields('taskContent', [
+      'chartData',
+      'taskContentChartKey',
+      'deviceListNew',
+    ]),
+  },
+  data () {
+    return {
+      info: null,
+      paramTable: paramTable,
+      rawData: null,
+      mode_name: '',
+      xName: '',
+      yName: '',
+      obj: null,
+      integralClicked: false,
+      xlogClicked: false,
+      ylogClicked: false,
+      diffClicked: false,
+      disableDiff: false,
+      disableLog: false,
+      disableInt: 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 deltaX = 0
+      var deltaTime = 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++) {
+          // console.log('x: ', seriesData[index][0])
+          // console.log('y: ', seriesData[index][1])
+          if (index === 0) {
+            // TODO: need to change the series[deviceID]
+            // TODO: change the time index(dynamic changing)
+            curYData = parseFloat(seriesData[index][1])
+            // deltaX = seriesData[index + 1][timeIndex] - seriesData[index][timeIndex]
+            curXData = parseFloat(seriesData[index][0])
+            curTime = seriesData[index][timeIndex]
+            if (this.mode_name === 'I-T Graph') {
+              _data.push([curTime, 0])
+            } else {
+              _data.push([curXData, 0, 0])
+            }
+          } else {
+            prevYData = parseFloat(seriesData[index - 1][1])
+            curYData = parseFloat(seriesData[index][1])
+            curXData = parseFloat(seriesData[index][0])
+            deltaX = seriesData[index][0] - seriesData[index - 1][0]
+            deltaTime = seriesData[index][timeIndex] - seriesData[index - 1][timeIndex]
+            integralResult += parseFloat((Math.abs(curYData) + Math.abs(prevYData)) * Math.abs(deltaX) / 2)
+            curTime += deltaTime
+            if (this.mode_name === 'I-T Graph') {
+              _data.push([curTime, integralResult])
+            } else {
+              _data.push([curXData, integralResult, curTime])
+            }
+          }
+        }
+      } 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])
+              deltaX = 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 += deltaX
+              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])
+              deltaX = 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 += deltaX
+              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])
+              deltaX = 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 += deltaX
+              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])
+            deltaX = 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 += deltaX
+            diffResult = parseFloat((curYData - prevYData) / (curXData - prevXData))
+            _data.push([curXData, diffResult, curTime])
+          }
+        }
+      }
+      // console.log(this.data.dataZoom[1])
+      // decide feed in raw data / modified one
+      if (this.integralClicked || this.xlogClicked || this.ylogClicked || this.diffClicked) {
+        this.data.series[0].data = _data
+        // console.log(this.data.series[0].data[this.data.series[0].data.length - 1])
+      }
+      this.data.xAxis[0].type = 'value'
+      if (this.integralClicked) {
+        this.$emit('switchModeButton', 'Integral')
+      } else if (this.xlogClicked || this.ylogClicked) {
+        this.$emit('switchModeButton', 'log')
+      } else if (this.diffClicked) {
+        this.$emit('switchModeButton', 'Differential')
+      } else {
+        this.$emit('switchModeButton', '')
+      }
+      // TODO: modify the redundant code
+      if (this.xName === 'TIME') {
+        this.data.xAxis[0].axisLabel.formatter = function (val) {
+          return getTimeFormatter(val)
+        }
+      }
+      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)
+      this.disableDiff = !(this.disableDiff)
+      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()
+        }
+      }
+    },
+    clickXLog: function () {
+      if (this.xlogClicked) {
+        this.xlogClicked = false
+        if (this.ylogClicked) {
+          this.disableDiff = true
+          this.disableInt = true
+        } else {
+          this.disableDiff = false
+          this.disableInt = false
+        }
+      } else {
+        this.xlogClicked = true
+        this.disableDiff = true
+        this.disableInt = 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
+          this.disableInt = true
+        } else {
+          this.disableDiff = false
+          this.disableInt = false
+        }
+      } else {
+        this.ylogClicked = true
+        this.disableDiff = true
+        this.disableInt = 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)
+      this.disableInt = !(this.disableInt)
+      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
+    },
+    // 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]
+  },
+}
+
+</script>

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

@@ -0,0 +1,234 @@
+<template>
+  <div>
+    <div v-for="(chart, chartIndex) in realTime" :key="'c'+chartIndex">
+      <div v-for="(grid, gridIndex) in chart" :key="'s'+gridIndex" class="row ma-0 pa-0">
+        <div class="col flex xs0 sm0 lg0 md0 xl0 xxl1"/>
+        <div class="col flex xs2 sm2 lg2 md2 xl2 xxl1" pa-0 ma-0>
+          <p color="primary" style="text-align: right;">{{ grid.name }}</p>
+        </div>
+        <!-- value (y-axis) -->
+        <div class="col flex sm2 xl2 md2 xs2">
+          <va-input
+            label="y-value"
+            disable="disable"
+            v-model="grid.yValue"
+          />
+        </div>
+        <!-- unit (y-axis) -->
+        <div class="col flex sm2 xl2 md2 xs2">
+          <va-select
+            label="y-unit"
+            v-model="grid.yUnit"
+            :options="grid.yUnitOption"
+            noClear
+          />
+        </div>
+        <div class="col flex sm1 xl1 md1 xs1"></div>
+        <!-- value (x-axis) -->
+        <div class="col flex sm2 xl2 md2 xs2">
+          <va-input
+            label="x-value"
+            disable="disable"
+            v-model="grid.xValue"
+          />
+        </div>
+        <!-- unit (x-axis) -->
+        <div class="col flex sm2 xl2 md2 xs2">
+          <va-select
+            label="x-unit"
+            v-model="grid.xUnit"
+            :options="grid.xUnitOption"
+            noClear
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapFields } from 'vuex-map-fields'
+import configTable from '@/data/config-table/index.js'
+import newTooltip from '@/factories/chart/tooltipFactory'
+
+export default {
+  name: 'CanvasChartRealTimeDisplay',
+  props: {
+    chartID: {
+      type: [Number, String],
+      required: true,
+    },
+  },
+  computed: {
+    ...mapFields('taskContent', [
+      'chartData',
+      'deviceListNew',
+    ]),
+  },
+  data () {
+    return {
+      data: null,
+      configTable: configTable,
+      realTime: [[]],
+      functional: '',
+    }
+  },
+  methods: {
+    // record the latest data as the real time value
+    updateValue: function () {
+      if ((this.realTime.length === 0)) {
+        return
+      }
+      for (let gridIndex = 0; gridIndex < this.realTime.length; gridIndex++) {
+        for (let channelIndex = 0; channelIndex < this.realTime[gridIndex].length; channelIndex++) {
+          // miss the source of data -> try to find the source
+          if (this.realTime[gridIndex][channelIndex].seriesSource === -1) {
+            this.realTime[gridIndex][channelIndex].seriesSource = this.data.series.findIndex((ele) => ele.name === this.realTime[gridIndex][channelIndex].name)
+          }
+
+          // the device is active now --> update the real time value
+          if (this.data.series[this.realTime[gridIndex][channelIndex].seriesSource] !== undefined && this.data.series[this.realTime[gridIndex][channelIndex].seriesSource].data !== undefined && this.data.series[this.realTime[gridIndex][channelIndex].seriesSource].data.length > 0) {
+            this.realTime[gridIndex][channelIndex].xValue = this.data.series[this.realTime[gridIndex][channelIndex].seriesSource].data.at(-1)[0] / this.realTime[gridIndex][channelIndex].xValueScale[this.realTime[gridIndex][channelIndex].xUnit]
+            this.realTime[gridIndex][channelIndex].yValue = this.data.series[this.realTime[gridIndex][channelIndex].seriesSource].data.at(-1)[1] / this.realTime[gridIndex][channelIndex].yValueScale[this.realTime[gridIndex][channelIndex].yUnit]
+          }
+        }
+      }
+    },
+    // change the axis unit of charts
+    updateUnit: function (functional) {
+      for (let gridIndex = 0; gridIndex < this.realTime.length; gridIndex++) {
+        for (let channelIndex = 0; channelIndex < this.realTime[gridIndex].length; channelIndex++) {
+          if (channelIndex === 0) {
+            const _xUnit = this.realTime[gridIndex][channelIndex].xUnit
+            const _yUnit = this.realTime[gridIndex][channelIndex].yUnit
+            const _xScale = this.realTime[gridIndex][channelIndex].xValueScale[this.realTime[gridIndex][channelIndex].xUnit]
+            const _yScale = this.realTime[gridIndex][channelIndex].yValueScale[this.realTime[gridIndex][channelIndex].yUnit]
+
+            this.data.xAxis[gridIndex].axisLabel.formatter = function (val) {
+              return parseFloat(val / _xScale).toFixed(2) + _xUnit
+            }
+
+            this.data.yAxis[gridIndex].axisLabel.formatter = function (val) {
+              return parseFloat(val / _yScale).toFixed(2) + _yUnit
+            }
+            // update tooltip
+            this.data.tooltip.formatter = newTooltip(this.realTime, functional).formatter
+          }
+        }
+      }
+    },
+    // for user to choose wanted unit
+    setUnit: function (gridIndex, channelIndex) {
+      // find coressponding device for current chart
+      const device = this.deviceListNew.find(chart => {
+        return chart.memory_board === parseInt(this.chartData[this.chartID].mappingID)
+      })
+      if (!device) {
+        return
+      }
+
+      // construct realTime object, i.e., record the coressponding value and unit
+      // the formate imitates the data.gridSource
+      const modeTable = this.configTable.getModeConfig(device.library_name, device.configuration.MODE)
+      const _realTime = JSON.parse(JSON.stringify(this.realTime))
+      const _newChannel = {}
+      let xAxis = null
+      let yAxis = null
+
+      // find the the data of each axis coming from which channel
+      if (this.data.series.length > 0) {
+        _newChannel.name = this.data.gridSource[gridIndex][channelIndex].name
+        _newChannel.seriesSource = this.data.series.findIndex((ele) => ele.name === _newChannel.name)
+        xAxis = this.data.series[_newChannel.seriesSource].xAxisSource[1] - 1
+        yAxis = this.data.series[_newChannel.seriesSource].yAxisSource[1] - 1
+        xAxis = (xAxis === -2) ? 'time' : xAxis
+        yAxis = (yAxis === -2) ? 'time' : yAxis
+      }
+
+      // check if xAxis unit has been defined in modeTable
+      if (Object.prototype.hasOwnProperty.call(modeTable.channels, xAxis)) {
+        _newChannel.xUnit = modeTable.channels[xAxis].defaultUnit
+        _newChannel.xValueScale = modeTable.channels[xAxis].unit
+        _newChannel.xUnitOption = Object.keys(modeTable.channels[xAxis].unit)
+      } else {
+        _newChannel.xUnit = 'unvalid'
+        _newChannel.xValueScale = { unvalid: NaN }
+        _newChannel.xUnitOption = ['']
+      }
+      // check if yAxis unit has been defined in modeTable
+      if (Object.prototype.hasOwnProperty.call(modeTable.channels, yAxis)) {
+        _newChannel.yUnit = modeTable.channels[yAxis].defaultUnit
+        _newChannel.yValueScale = modeTable.channels[yAxis].unit
+        _newChannel.yUnitOption = Object.keys(modeTable.channels[yAxis].unit)
+      } else {
+        _newChannel.yUnit = 'unvalid'
+        _newChannel.yValueScale = { unvalid: NaN }
+        _newChannel.yUnitOption = ['']
+      }
+
+      // set real time value = 0 as default
+      _newChannel.xValue = 0
+      _newChannel.yValue = 0
+
+      // padding
+      while (gridIndex >= _realTime.length) {
+        _realTime.push([])
+      }
+      while (channelIndex >= _realTime[gridIndex].length) {
+        _realTime[gridIndex].push({})
+      }
+
+      // merge the additional part into original part
+      _realTime[gridIndex][channelIndex] = _newChannel
+      this.realTime = _realTime
+    },
+    // for each lines on the charts should have its own real time display
+    matchChart: function () {
+      for (let gridIndex = 0; gridIndex < this.data.gridSource.length; gridIndex++) {
+        if (this.data.gridSource[gridIndex] !== undefined) {
+          for (let channelIndex = 0; channelIndex < this.data.gridSource[gridIndex].length; channelIndex++) {
+            if (gridIndex >= this.realTime.length) {
+              this.setUnit(gridIndex, channelIndex)
+            } else if (channelIndex >= this.realTime[gridIndex].length) {
+              this.setUnit(gridIndex, channelIndex)
+            }
+          }
+        }
+      }
+    },
+    switchFunctional: function (newFunctional) {
+      this.functional = newFunctional
+      // console.log('functional: ', this.functional)
+    },
+    updateData: function (canvasChartData) {
+      this.data = canvasChartData
+    },
+  },
+  mounted () {
+    this.data = this.chartData[this.chartID]
+    // this.data = this.canvasChartData
+  },
+  watch: {
+    data: {
+      handler: function () {
+        this.updateValue()
+        this.matchChart()
+      },
+      deep: true,
+    },
+    realTime: {
+      handler: function () {
+        this.updateUnit(this.functional)
+      },
+      deep: true,
+    },
+    canvasChartData: {
+      handler: function () {
+        this.data = this.canvasChartData
+        console.log('HIHI', this.data)
+      },
+      deep: true,
+    },
+  },
+}
+</script>

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

@@ -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

@@ -44,8 +44,8 @@
           <div>
             <file-control-window :ref="'fcwindow_ref'" :device="device" class="pl-0 pr-0" />
           </div>
-          <div v-if="device.library_name.includes('Elite')">
-            <elite-parameter-window :ref="'epwindow_ref'" :device="device" class="pl-0 pr-0" />
+          <div>
+            <device-parameter-window :ref="'epwindow_ref'" :device="device" class="pl-0 pr-0" />
           </div>
         </div>
       </va-collapse>
@@ -54,18 +54,21 @@
 </template>
 
 <script>
-import EliteParameterWindow from '../parameter/EliteParameterWindow'
+import DeviceParameterWindow from '../parameter/DeviceParameterWindow'
+// import EliteParameterWindow from '../parameter/EliteParameterWindow'
 // import NeuliveParameterWindow from '../parameter/NeuliveParameterWindow'
 import FileControlWindow from '../meta/FileControlWindow'
 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',
   components: {
-    EliteParameterWindow,
+    DeviceParameterWindow,
+    // EliteParameterWindow,
     // NeuliveParameterWindow,
     FileControlWindow,
   },
@@ -120,6 +123,7 @@ export default {
         api.task.update({
           device_config: taskInfo.getTaskInfo().deviceListNew,
         })
+        // CanvasChart.methods.resetClicked()
       }
     },
     stop: function (device) {

src/components/task/content/parameter/DeviceParameterRecording.vue

@@ -36,7 +36,7 @@
           :withHeader="true"
           :parameterName="name"
           :inputValue="parameter[name]"
-          :disable="name === 'CTRL_HIGH_Z_15' && device.status === 0"
+          :disable="name === 'CTRL_HIGH_Z_15' && device && device.status === 0"
           v-bind="parameterTable[name]"
           @parameterChange="parameterChange"
           @getParameter="getParameter"
@@ -71,7 +71,7 @@
           v-for="name in parameterArrayInMode"
           :key="name"
           :label="`${typeof parameterTable[name].showName === 'function'
-            ? parameterTable[name].showName(parameter.MODE)
+            ? parameterTable[name].showName(modeSelection)
             : parameterTable[name].showName} ${parameterValue(name)}`"
           style="font-size: 20px;"
         >
@@ -80,7 +80,7 @@
               :is="parameterTable[name].componentType"
               :parameterName="name"
               :inputValue="parameter[name]"
-              :disable="name === 'CTRL_HIGH_Z_15' && device.status === 0"
+              :disable="name === 'CTRL_HIGH_Z_15' && device && device.status === 0"
               v-bind="parameterTable[name]"
               @parameterChange="parameterChange"
               @getParameter="getParameter"
@@ -126,7 +126,7 @@ import DevMode from '../parameter/itemNew/DevMode'
 import EliteParameterRecordingElitePulseSensing from '../parameter/itemNew/PulseSensingNew/EliteParameterRecordingElitePulseSensing'
 import { VueFinalModal } from 'vue-final-modal'
 import { mapFields } from 'vuex-map-fields'
-import parameterTable from '@/data/param-table/index.js'
+import configTable from '@/data/config-table/index'
 
 export default {
   name: 'EliteParameterRecordingElitezm15',
@@ -148,7 +148,9 @@ export default {
     },
     library: {
       type: String,
-      required: true,
+    },
+    serialNumber: {
+      type: String,
     },
     device: {
       type: Object,
@@ -156,9 +158,30 @@ export default {
     },
   },
   computed: {
+    parameterTable () {
+      if (this.library !== undefined) {
+        const config = configTable.getConfig(this.library)
+        if (config !== undefined) {
+          return config
+        }
+      }
+      if (this.serialNumber !== undefined) {
+        const config = configTable.getConfig(this.serialNumber)
+        if (config !== undefined) {
+          return config
+        }
+      }
+      return null
+    },
     parameterArrayInMode () {
       return this.workingModeSelect && this.parameterTable.MODE[this.workingModeSelect.id].parameter
     },
+    modeSelection () {
+      if (this.parameter.MODE) {
+        return this.parameter.MODE
+      }
+      return this.workingModeSelect.id
+    },
     getImageUrl () {
       if (this.workingModeSelect === null) {
         return 'IV-Wire'
@@ -184,7 +207,6 @@ export default {
   },
   data () {
     return {
-      parameterTable: parameterTable[this.library],
       showModal: false,
       workingModeSelect: null,
       workingModeOptions: [],
@@ -197,11 +219,12 @@ export default {
       this.$mqtt.publish(topic, mes)
     },
     parameterValue (name) {
+      const value = this.parameter[name]
       if (this.parameterTable[name].type === 'number') {
         const scale = this.parameterTable[name].unit[this.parameterTable[name].defaultUnit]
-        return ` ( ${this.parameterTable[name].outputReadabilityData(this.parameter[name], scale)} ${this.parameterTable[name].defaultUnit} )`
+        return ` ( ${this.parameterTable[name].outputReadabilityData(value, scale)} ${this.parameterTable[name].defaultUnit} )`
       } else if (this.parameterTable[name].type === 'array') {
-        return ` ( ${this.parameterTable[name].outputReadabilityData(this.parameter[name])} )`
+        return ` ( ${this.parameterTable[name].outputReadabilityData(value)} )`
       } else if (this.parameterTable[name].type === 'none') {
         return ''
       }
@@ -243,9 +266,8 @@ export default {
     //   ? this.workingModeOptions = this.workingModeDevOptions
     //   : this.workingModeOptions = this.workingModeNoDevOptions
     this.workingModeOptions = this.parameterTable.MODE_OPTIONS
-
     // init mode
-    this.workingModeSelect = this.workingModeOptions.find(ele => ele.id === this.parameter.MODE)
+    this.workingModeSelect = (this.parameter.MODE !== undefined) ? this.workingModeOptions.find(ele => ele.id === this.parameter.MODE) : this.workingModeOptions[0]
   },
   watch: {
   },

src/components/task/content/parameter/DeviceParameterWindow.vue

@@ -0,0 +1,78 @@
+<template>
+  <div v-if="device">
+    <device-parameter-recording
+      :parameter="device.configuration"
+      :library="device.library_name"
+      :serialNumber="device.serial_number"
+      :device="device"
+      @sendInstruction="sendInstruction"
+      @getParameter="getParameter"
+      @setParameter="setParameter"
+      @setParameterWithDebounce="setParameterWithDebounce"
+    />
+  </div>
+</template>
+
+<script>
+
+import DeviceParameterRecording from './DeviceParameterRecording'
+import { taskInfo } from '../../../../data/task/TaskInfo'
+import _ from 'lodash'
+
+export default {
+  name: 'EliteParameterWindow',
+  components: {
+    DeviceParameterRecording,
+  },
+  props: {
+    device: {
+      type: Object,
+    },
+  },
+  data () {
+    return {
+    }
+  },
+  mqtt: {
+  },
+  methods: {
+    mqttPublish: function (topic, mes) {
+      this.$mqtt.publish(topic, mes)
+    },
+    sendInstruction: function (instruction) {
+      this.mqttPublish(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
+        header: 'device_instruction/0',
+        device: this.device.mac_address,
+        instruction: instruction,
+      }))
+    },
+    getParameter: function (parameterName) {
+      this.mqttPublish(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
+        header: 'device_parameter_value/0',
+        device: this.device.mac_address,
+        parameter: parameterName,
+      }))
+    },
+    setParameter: function (parameterName, parameterValue) {
+      this.mqttPublish(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
+        header: 'device_parameter/0',
+        device: this.device.mac_address,
+        parameter: parameterName,
+        content: parameterValue,
+      }))
+    },
+    setParameterWithDebounce: _.debounce(function (parameterName, parameterValue) {
+      this.mqttPublish(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
+        header: 'device_parameter/0',
+        device: this.device.mac_address,
+        parameter: parameterName,
+        content: parameterValue,
+      }))
+    }, 100),
+  },
+  mounted () {
+  },
+  watch: {
+  },
+}
+</script>

src/components/task/content/parameter/EliteParameterRecordingElitezm15.vue

@@ -120,7 +120,7 @@ import DevMode from '../parameter/itemNew/DevMode'
 import EliteParameterRecordingElitePulseSensing from '../parameter/itemNew/PulseSensingNew/EliteParameterRecordingElitePulseSensing'
 import { VueFinalModal } from 'vue-final-modal'
 import { mapFields } from 'vuex-map-fields'
-import parameterTable from '@/data/param-table/index.js'
+import parameterTable from '@/data/config-table/index.js'
 
 export default {
   name: 'EliteParameterRecordingElitezm15',

src/data/config-table/EliteEDC/CaliADC.js

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

src/data/config-table/EliteEDC/CaliDAC.js

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

src/data/config-table/EliteEDC/Chronoamperometry.js

@@ -22,11 +22,10 @@ export default {
         us: 1,
         ms: 1e3,
         s: 1e6,
-        m: 60 * 1e6,
-        h: 60 * 60 * 1e6,
-        auto: 1,
+        minute: 60 * 1e6,
+        hour: 60 * 60 * 1e6,
       },
-      defaultUnit: 'auto',
+      defaultUnit: 'ms',
       downloadUnit: 'ms',
     },
     0: {
@@ -36,7 +35,7 @@ export default {
         uA: 1e3,
         mA: 1e6,
       },
-      defaultUnit: 'uA',
+      defaultUnit: 'mA',
       downloadUnit: 'mA',
     },
     1: {

src/data/config-table/EliteEDC/Chronopotentiometry.js

@@ -22,11 +22,10 @@ export default {
         us: 1,
         ms: 1e3,
         s: 1e6,
-        m: 60 * 1e6,
-        h: 60 * 60 * 1e6,
-        auto: 1,
+        minute: 60 * 1e6,
+        hour: 60 * 60 * 1e6,
       },
-      defaultUnit: 'auto',
+      defaultUnit: 'ms',
       downloadUnit: 'ms',
     },
     0: {
@@ -36,7 +35,7 @@ export default {
         uA: 1e3,
         mA: 1e6,
       },
-      defaultUnit: 'uA',
+      defaultUnit: 'mA',
       downloadUnit: 'mA',
     },
     1: {

src/data/config-table/EliteEDC/ConstantCurrent.js

@@ -22,11 +22,10 @@ export default {
         us: 1,
         ms: 1e3,
         s: 1e6,
-        m: 60 * 1e6,
-        h: 60 * 60 * 1e6,
-        auto: 1,
+        minute: 60 * 1e6,
+        hour: 60 * 60 * 1e6,
       },
-      defaultUnit: 'auto',
+      defaultUnit: 'ms',
       downloadUnit: 'ms',
     },
     0: {
@@ -36,7 +35,7 @@ export default {
         uA: 1e3,
         mA: 1e6,
       },
-      defaultUnit: 'uA',
+      defaultUnit: 'mA',
       downloadUnit: 'mA',
     },
     1: {

src/data/config-table/EliteEDC/CycleIV.js

@@ -22,11 +22,10 @@ export default {
         us: 1,
         ms: 1e3,
         s: 1e6,
-        m: 60 * 1e6,
-        h: 60 * 60 * 1e6,
-        auto: 1,
+        minute: 60 * 1e6,
+        hour: 60 * 60 * 1e6,
       },
-      defaultUnit: 'auto',
+      defaultUnit: 'ms',
       downloadUnit: 'ms',
     },
     0: {
@@ -36,7 +35,7 @@ export default {
         uA: 1e3,
         mA: 1e6,
       },
-      defaultUnit: 'uA',
+      defaultUnit: 'mA',
       downloadUnit: 'mA',
     },
     1: {

src/data/config-table/EliteEDC/CyclicVoltammetry.js

@@ -24,9 +24,8 @@ export default {
         s: 1e6,
         m: 60 * 1e6,
         h: 60 * 60 * 1e6,
-        auto: 1,
       },
-      defaultUnit: 'auto',
+      defaultUnit: 'ms',
       downloadUnit: 'ms',
     },
     0: {
@@ -36,7 +35,7 @@ export default {
         uA: 1e3,
         mA: 1e6,
       },
-      defaultUnit: 'uA',
+      defaultUnit: 'mA',
       downloadUnit: 'mA',
     },
     1: {

src/data/config-table/EliteEDC/DPV.js

@@ -27,11 +27,10 @@ export default {
         us: 1,
         ms: 1e3,
         s: 1e6,
-        m: 60 * 1e6,
-        h: 60 * 60 * 1e6,
-        auto: 1,
+        minute: 60 * 1e6,
+        hour: 60 * 60 * 1e6,
       },
-      defaultUnit: 'auto',
+      defaultUnit: 'ms',
       downloadUnit: 'ms',
     },
     0: {
@@ -41,7 +40,7 @@ export default {
         uA: 1e3,
         mA: 1e6,
       },
-      defaultUnit: 'uA',
+      defaultUnit: 'mA',
       downloadUnit: 'mA',
     },
     1: {

src/data/config-table/EliteEDC/FunctionGenerator.js

@@ -22,11 +22,10 @@ export default {
         us: 1,
         ms: 1e3,
         s: 1e6,
-        m: 60 * 1e6,
-        h: 60 * 60 * 1e6,
-        auto: 1,
+        minute: 60 * 1e6,
+        hour: 60 * 60 * 1e6,
       },
-      defaultUnit: 'auto',
+      defaultUnit: 'ms',
       downloadUnit: 'ms',
     },
     0: {
@@ -36,7 +35,7 @@ export default {
         uA: 1e3,
         mA: 1e6,
       },
-      defaultUnit: 'uA',
+      defaultUnit: 'mA',
       downloadUnit: 'mA',
     },
     1: {

src/data/config-table/EliteEDC/IT.js

@@ -22,11 +22,10 @@ export default {
         us: 1,
         ms: 1e3,
         s: 1e6,
-        m: 60 * 1e6,
-        h: 60 * 60 * 1e6,
-        auto: 1,
+        minute: 60 * 1e6,
+        hour: 60 * 60 * 1e6,
       },
-      defaultUnit: 'auto',
+      defaultUnit: 'ms',
       downloadUnit: 'ms',
     },
     0: {
@@ -36,7 +35,7 @@ export default {
         uA: 1e3,
         mA: 1e6,
       },
-      defaultUnit: 'uA',
+      defaultUnit: 'mA',
       downloadUnit: 'mA',
     },
     1: {

src/data/config-table/EliteEDC/IV.js

@@ -22,11 +22,10 @@ export default {
         us: 1,
         ms: 1e3,
         s: 1e6,
-        m: 60 * 1e6,
-        h: 60 * 60 * 1e6,
-        auto: 1,
+        minute: 60 * 1e6,
+        hour: 60 * 60 * 1e6,
       },
-      defaultUnit: 'auto',
+      defaultUnit: 'ms',
       downloadUnit: 'ms',
     },
     0: {
@@ -36,7 +35,7 @@ export default {
         uA: 1e3,
         mA: 1e6,
       },
-      defaultUnit: 'uA',
+      defaultUnit: 'mA',
       downloadUnit: 'mA',
     },
     1: {

src/data/config-table/EliteEDC/LinearSweep.js

@@ -22,11 +22,10 @@ export default {
         us: 1,
         ms: 1e3,
         s: 1e6,
-        m: 60 * 1e6,
-        h: 60 * 60 * 1e6,
-        auto: 1,
+        minute: 60 * 1e6,
+        hour: 60 * 60 * 1e6,
       },
-      defaultUnit: 'auto',
+      defaultUnit: 'ms',
       downloadUnit: 'ms',
     },
     0: {
@@ -36,7 +35,7 @@ export default {
         uA: 1e3,
         mA: 1e6,
       },
-      defaultUnit: 'uA',
+      defaultUnit: 'mA',
       downloadUnit: 'mA',
     },
     1: {

src/data/config-table/EliteEDC/OCP.js

@@ -22,11 +22,10 @@ export default {
         us: 1,
         ms: 1e3,
         s: 1e6,
-        m: 60 * 1e6,
-        h: 60 * 60 * 1e6,
-        auto: 1,
+        minute: 60 * 1e6,
+        hour: 60 * 60 * 1e6,
       },
-      defaultUnit: 'auto',
+      defaultUnit: 'ms',
       downloadUnit: 'ms',
     },
     0: {
@@ -36,7 +35,7 @@ export default {
         uA: 1e3,
         mA: 1e6,
       },
-      defaultUnit: 'uA',
+      defaultUnit: 'mA',
       downloadUnit: 'mA',
     },
     1: {

src/data/config-table/EliteEDC/PulseSensing.js

@@ -38,11 +38,10 @@ export default {
         us: 1,
         ms: 1e3,
         s: 1e6,
-        m: 60 * 1e6,
-        h: 60 * 60 * 1e6,
-        auto: 1,
+        minute: 60 * 1e6,
+        hour: 60 * 60 * 1e6,
       },
-      defaultUnit: 'auto',
+      defaultUnit: 'ms',
       downloadUnit: 'ms',
     },
     0: {
@@ -52,7 +51,7 @@ export default {
         uA: 1e3,
         mA: 1e6,
       },
-      defaultUnit: 'uA',
+      defaultUnit: 'mA',
       downloadUnit: 'mA',
     },
     1: {
@@ -62,7 +61,7 @@ export default {
         uA: 1e3,
         mA: 1e6,
       },
-      defaultUnit: 'uA',
+      defaultUnit: 'mA',
       downloadUnit: 'mA',
     },
   },

src/data/config-table/EliteEDC/RT.js

@@ -22,11 +22,10 @@ export default {
         us: 1,
         ms: 1e3,
         s: 1e6,
-        m: 60 * 1e6,
-        h: 60 * 60 * 1e6,
-        auto: 1,
+        minute: 60 * 1e6,
+        hour: 60 * 60 * 1e6,
       },
-      defaultUnit: 'auto',
+      defaultUnit: 'ms',
       downloadUnit: 'ms',
     },
     0: {
@@ -36,7 +35,7 @@ export default {
         uA: 1e3,
         mA: 1e6,
       },
-      defaultUnit: 'uA',
+      defaultUnit: 'mA',
       downloadUnit: 'mA',
     },
     1: {
@@ -50,7 +49,7 @@ export default {
       downloadUnit: 'mV',
     },
     2: {
-      name: 'Resister',
+      name: 'Resistor',
       unit: {
         mΩ: 1,
         mohm: 1,

src/data/config-table/EliteEDC/VT.js

@@ -22,11 +22,10 @@ export default {
         us: 1,
         ms: 1e3,
         s: 1e6,
-        m: 60 * 1e6,
-        h: 60 * 60 * 1e6,
-        auto: 1,
+        minute: 60 * 1e6,
+        hour: 60 * 60 * 1e6,
       },
-      defaultUnit: 'auto',
+      defaultUnit: 'ms',
       downloadUnit: 'ms',
     },
     0: {
@@ -36,7 +35,7 @@ export default {
         uA: 1e3,
         mA: 1e6,
       },
-      defaultUnit: 'uA',
+      defaultUnit: 'mA',
       downloadUnit: 'mA',
     },
     1: {

src/data/config-table/EliteEIS/DevMode.js

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

src/data/config-table/index.js

@@ -0,0 +1,135 @@
+import EliteEDC from './EliteEDC/index'
+import EliteEIS from './EliteEIS/index'
+
+// object saving library name mapping table
+const libraryNameMappingTable = {
+  EliteZM15: EliteEDC,
+  'EliteEDC1.4': null,
+  'EliteEDC1.5': EliteEDC,
+  'EliteEDC1.5re': EliteEDC,
+  'EliteEDC1.5r2': EliteEDC,
+  'BAT1.0': null,
+  'EIS1.0': EliteEIS,
+  'EIS1.1': EliteEIS,
+  'EIS1.1_MINI': EliteEIS,
+  'TRIG0.1': null,
+  'MEGAFLY0.1': null,
+}
+
+// object saving serial number mapping table
+const serialNumberMappingTable = {
+  0: {
+    2: {
+      1: {
+        5: null, // EDC1.4
+        6: EliteEDC, // EDC1.5
+        7: EliteEDC, // EDC1.5re
+        8: EliteEDC, // EDC1.5r2
+      },
+    },
+    3: {
+      1: {
+        0: null, // BAT1.0
+      },
+    },
+    4: {
+      0: EliteEIS, // EIS1.0
+      1: EliteEIS, // EIS1.1
+      2: EliteEIS, // EIS1.1_MINI
+    },
+    5: {
+      1: {
+        0: null, // TRIG0.1
+      },
+    },
+    6: {
+      1: {
+        0: null, // MEAGFLY0.1
+      },
+    },
+  },
+}
+
+/**
+   * return config table by libray or serial number (type)
+   * @param {String | Object} type
+   * @returns {Object} : config
+   */
+function getConfig (type) {
+  // library name
+  if (typeof type === 'string') {
+    return libraryNameMappingTable[type]
+  }
+  // serial number
+  if (typeof type === 'object') {
+    return serialNumberMappingTable[type[0]][type[1]][type[2]][type[3]]
+  }
+}
+
+/**
+   * return mode config table by type and mode
+   * @param {String | Object} type
+   * @param {Number}  mode
+   * @returns {Object} : mode-config
+   */
+function getModeConfig (type, mode) {
+  return getConfig(type).MODE[mode]
+}
+
+/**
+   * return parameter config table by type and parameter name
+   * @param {String | Object} type
+   * @param {String}  parameterName
+   * @returns {Object} : parameter-config
+   */
+function getParameterConfig (deviceType, parameterName) {
+  return getConfig(deviceType)[parameterName]
+}
+
+/**
+   * return channel config table by type and mode
+   * @param {String | Object} type
+   * @param {String}  mode
+   * @param {String | Number}  channel
+   * @returns {Object} : channel-config
+   */
+function getChannelConfig (type, mode, channel) {
+  if (channel === undefined) {
+    return getModeConfig(type, mode).channels
+  }
+  return getModeConfig(type, mode).channels[channel]
+}
+
+/**
+   * return chart config table by type and mode and chartType
+   * @param {String | Object} type
+   * @param {String}  mode
+   * @param {String}  chartType
+   * @returns {Object} : chart-config
+   */
+function getChartConfig (type, mode, chartType = 'default') {
+  return getModeConfig(type, mode).charts[chartType]
+}
+
+/**
+   * return mode's parameter list
+   * @param {String | Object} type
+   * @param {String}  mode
+   * @returns {Object} : parameter list
+   */
+function getModeParameter (type, mode) {
+  return getModeConfig(type, mode).parameter
+}
+
+const configTable = {
+  getConfig,
+  getModeConfig,
+  getChannelConfig,
+  getParameterConfig,
+  getChartConfig,
+  getModeParameter,
+  EliteEDC,
+  EliteEIS,
+}
+
+export default configTable

src/data/param-table/index.js

@@ -1,9 +0,0 @@
-import EliteZM15 from './EliteZM15/index'
-import EliteEIS from './EliteEIS/index'
-
-const paramTable = {
-  EliteZM15,
-  EliteEIS,
-}
-
-export default paramTable

src/data/task/DataStreamBuffer.js

@@ -58,7 +58,7 @@ export const dataStreamBuffer = {
 
   into: (currentDataByChannel, currentDeviceID, currentChannel) => {
     // currentData = [ timeStart, d1, d2..... , timeEnd ]
-    // const currentData = JSON.parse(currentDataByChannel).binary.split(' ')
+    // const currentData = JSON.parse(currentDataByChannel).binary.split(' '))
     const currentData = currentDataByChannel.split(' ')
     // console.log(currentData)
     const timeStart = parseInt(currentData[0])
@@ -109,7 +109,7 @@ export const dataStreamBuffer = {
   // pop the first batch data from datastream buffer
   pop: (chartID, deviceID, channel) => {
     if (_dataStreamBuffer[chartID] != null && _dataStreamBuffer[chartID][deviceID] != null &&
-        _dataStreamBuffer[chartID][deviceID][channel] != null && _dataStreamBuffer[chartID][deviceID][channel].length > 0) {
+      _dataStreamBuffer[chartID][deviceID][channel] != null && _dataStreamBuffer[chartID][deviceID][channel].length > 0) {
       return _dataStreamBuffer[chartID][deviceID][channel].shift()
     }
     return []
@@ -132,3 +132,10 @@ export const dataStreamBuffer = {
   },
 
 }
+/*
+{
+  "chartID" : {
+    "deviceID": {
+      "channel": [[dataset1], ... [dataset5], [datasetlog6]]
+  }
+} */

src/factories/chart/dataZoomFactory.js

@@ -13,6 +13,8 @@ function newDataZoom () {
     showDataShadow: false,
     showDetail: false,
     xAxisIndex: [],
+    start: 0,
+    end: 100,
   }, {
     type: 'inside',
     xAxisIndex: [],

src/factories/chart/replayTooltipFactory.js

@@ -0,0 +1,125 @@
+function getTime (val) {
+  let label = ''
+  const hour = Math.floor(val / 3.6e9)
+  const minute = Math.floor((val % 3.6e9) / 1000000 / 60)
+  const second = Math.floor((val % 6e7) / 1000000)
+  const millisecond = Math.floor((val % 1e6) / 1000)
+  const microsecond = Math.floor(val % 1e6) - 1000 * millisecond
+  if (hour > 0) {
+    label += hour + ' h '
+  }
+  if (minute > 0) {
+    label += minute + ' m '
+  }
+  if (second > 0) {
+    label += second + ' s '
+  }
+  if (millisecond > 0) {
+    label += millisecond + ' ms '
+  }
+  if (microsecond > 0 && hour === 0 && minute === 0 && second === 0) {
+    label += microsecond + ' µs '
+  }
+  return label
+}
+
+function newTooltip (chartID) {
+  return {
+    hideDelay: 5000,
+    trigger: 'axis',
+    backgroundColor: '#fff',
+    borderColor: 'rgba(0, 0, 200, 0.2)',
+    borderWidth: 1,
+    borderRadius: 0,
+    padding: 10,
+    // axisPointer: {
+    //   type: 'cross',
+    //   animation: false,
+    //   label: {
+    //     backgroundColor: '#505765',
+    //   },
+    // },
+    formatter: function (params) {
+      if (params.length) {
+        if (params[0].seriesName.split('_')[0] === 'T' && params[0].seriesName.split('_')[1] !== 'T') {
+          params.unshift({ seriesName: 'Time', value: [null, getTime(parseFloat(params[0].value[0]))], color: '#5193f2' })
+        } else if (params[0].seriesName.split('_')[0] !== 'T' && params[0].seriesName.split('_')[1] === 'T') {
+          params.unshift({ seriesName: 'Time', value: [null, getTime(parseFloat(params[0].value[1]))], color: '#5193f2' })
+        } else {
+          params.unshift({ seriesName: 'Time', value: [null, getTime(parseFloat(params[0].value[2]))], color: '#5193f2' })
+        }
+        let tip = ''
+        for (var i = 0; i < params.length; i++) {
+          const param = params[i]
+          const style = 'color: ' + param.color
+          let value
+          // console.log(param.value)
+          if (param.seriesName === 'Time') {
+            value = param.value[1]
+          } else if (param.seriesName.split('_')[1] === 'T' && param.seriesName.split('_')[0] !== 'T') {
+            const physicalQuantity = param.seriesName.split('_')[0][param.seriesName.split('_')[0].length - 1]
+            if (physicalQuantity === 'V') {
+              value = parseFloat(param.value[0]).toFixed(3) + ' μV'
+            } else if (physicalQuantity === 'I') {
+              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') {
+              value = (parseFloat(param.value[0]) / 100).toFixed(3) + ' (g)'
+            } else if (!isNaN(physicalQuantity)) {
+              value = (parseFloat(param.value[0]) / 1000).toFixed(3) + ' (mV)'
+            } else {
+              value = parseFloat(param.value[0]).toFixed(3)
+            }
+          } else if (param.seriesName.split('_')[1] !== 'T' && param.seriesName.split('_')[0] === 'T') {
+            const physicalQuantity = param.seriesName.split('_')[1][param.seriesName.split('_')[1].length - 1]
+            if (physicalQuantity === 'V') {
+              value = parseFloat(param.value[1]).toFixed(3) + ' μV'
+            } else if (physicalQuantity === 'I') {
+              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') {
+              value = (parseFloat(param.value[1]) / 100).toFixed(3) + ' (g)'
+            } else if (!isNaN(physicalQuantity)) {
+              value = (parseFloat(param.value[1]) / 1000).toFixed(3) + ' (mV)'
+            } else {
+              value = parseFloat(param.value[1]).toFixed(3)
+            }
+          } else {
+            let value1
+            let value2
+            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'
+            } else if (param.seriesName.split('_')[0][param.seriesName.split('_')[0].length - 1] === 'R') {
+              value1 = parseFloat(param.value[0]).toFixed(3) + ' mΩ'
+            } else {
+              value1 = parseFloat(param.value[0]).toFixed(3)
+            }
+
+            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'
+            } else if (param.seriesName.split('_')[1][param.seriesName.split('_')[1].length - 1] === 'R') {
+              value2 = parseFloat(param.value[1]).toFixed(3) + ' mΩ'
+            } else {
+              value2 = parseFloat(param.value[1]).toFixed(3)
+            }
+
+            value = value1 + ', ' + value2
+          }
+          tip += '<span style="' + style + '">' +
+                            param.seriesName +
+                            '：</span><span style="' +
+                            style + '">' + value + '</span><br>'
+        }
+        return tip
+      }
+    },
+  }
+}
+
+export default newTooltip

src/factories/chart/tooltipFactory.js

@@ -23,7 +23,25 @@ function getTime (val) {
   return label
 }
 
-function newTooltip (chartID) {
+function getPhysicsQunatity (name, dataMode) {
+  // console.log('getPhysicsQunatity', name, dataMode)
+  const label = []
+  name = name.split('_')
+  for (let i = 0; i < name.length; i++) {
+    if (name[i].includes('T')) {
+      label.push('Time')
+    } else if (name[i].includes('V')) {
+      label.push('Voltage')
+    } else if (name[i].includes('I')) {
+      label.push('Current')
+    } else if (name[i].includes('R')) {
+      label.push('Impedance')
+    }
+  }
+  return label
+}
+
+function newTooltip (realTime, dataMode) {
   return {
     hideDelay: 5000,
     trigger: 'axis',
@@ -32,92 +50,48 @@ function newTooltip (chartID) {
     borderWidth: 1,
     borderRadius: 0,
     padding: 10,
-    // axisPointer: {
-    //   type: 'cross',
-    //   animation: false,
-    //   label: {
-    //     backgroundColor: '#505765',
-    //   },
-    // },
+
     formatter: function (params) {
-      if (params.length) {
-        if (params[0].seriesName.split('_')[0] === 'T' && params[0].seriesName.split('_')[1] !== 'T') {
-          params.unshift({ seriesName: 'Time', value: [null, getTime(parseFloat(params[0].value[0]))], color: '#5193f2' })
-        } else if (params[0].seriesName.split('_')[0] !== 'T' && params[0].seriesName.split('_')[1] === 'T') {
-          params.unshift({ seriesName: 'Time', value: [null, getTime(parseFloat(params[0].value[1]))], color: '#5193f2' })
-        } else {
-          params.unshift({ seriesName: 'Time', value: [null, getTime(parseFloat(params[0].value[2]))], color: '#5193f2' })
-        }
-        let tip = ''
-        for (var i = 0; i < params.length; i++) {
-          const param = params[i]
-          const style = 'color: ' + param.color
-          let value
-          // console.log(param.value)
-          if (param.seriesName === 'Time') {
-            value = param.value[1]
-          } else if (param.seriesName.split('_')[1] === 'T' && param.seriesName.split('_')[0] !== 'T') {
-            const physicalQuantity = param.seriesName.split('_')[0][param.seriesName.split('_')[0].length - 1]
-            if (physicalQuantity === 'V') {
-              value = parseFloat(param.value[0]).toFixed(3) + ' μV'
-            } else if (physicalQuantity === 'I') {
-              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') {
-              value = (parseFloat(param.value[0]) / 100).toFixed(3) + ' (g)'
-            } else if (!isNaN(physicalQuantity)) {
-              value = (parseFloat(param.value[0]) / 1000).toFixed(3) + ' (mV)'
-            } else {
-              value = parseFloat(param.value[0]).toFixed(3)
-            }
-          } else if (param.seriesName.split('_')[1] !== 'T' && param.seriesName.split('_')[0] === 'T') {
-            const physicalQuantity = param.seriesName.split('_')[1][param.seriesName.split('_')[1].length - 1]
-            if (physicalQuantity === 'V') {
-              value = parseFloat(param.value[1]).toFixed(3) + ' μV'
-            } else if (physicalQuantity === 'I') {
-              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') {
-              value = (parseFloat(param.value[1]) / 100).toFixed(3) + ' (g)'
-            } else if (!isNaN(physicalQuantity)) {
-              value = (parseFloat(param.value[1]) / 1000).toFixed(3) + ' (mV)'
-            } else {
-              value = parseFloat(param.value[1]).toFixed(3)
-            }
-          } else {
-            let value1
-            let value2
-            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'
-            } else if (param.seriesName.split('_')[0][param.seriesName.split('_')[0].length - 1] === 'R') {
-              value1 = parseFloat(param.value[0]).toFixed(3) + ' mΩ'
-            } else {
-              value1 = parseFloat(param.value[0]).toFixed(3)
-            }
-
-            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'
-            } else if (param.seriesName.split('_')[1][param.seriesName.split('_')[1].length - 1] === 'R') {
-              value2 = parseFloat(param.value[1]).toFixed(3) + ' mΩ'
-            } else {
-              value2 = parseFloat(param.value[1]).toFixed(3)
-            }
-
-            value = value1 + ', ' + value2
-          }
-          tip += '<span style="' + style + '">' +
-                            param.seriesName +
-                            '：</span><span style="' +
-                            style + '">' + value + '</span><br>'
-        }
-        return tip
+      // params is empty
+      if (!params.length && realTime.length) return params
+      // params is unempty
+      let tip = ''
+      let param // find coressonding parameter to the channel
+      let unitTable // unit is store in this object
+      let physicsQunatity // type is store here
+      let style // color
+      let value // value on cursor
+      const timeIndex = params[0].seriesName.split('_').findIndex(title => title === 'T')
+      // (Default) Time
+      if (timeIndex === -1) {
+        value = getTime(parseFloat(params[0].value[2]))
+      } else {
+        value = getTime(parseFloat(params[0].value[timeIndex]))
       }
+      tip += '<span style="color: #5193f2">' + 'Time: ' + value + '</span><br>'
+      // (Manual) Voltage, Current, Impedance
+      for (let gridIndex = 0; gridIndex < realTime.length; gridIndex++) {
+        for (let channelIndex = 0; channelIndex < realTime[gridIndex].length; channelIndex++) {
+          param = params.find(x => x.seriesName === realTime[gridIndex][channelIndex].name)
+          if (param === undefined) continue
+
+          unitTable = realTime[gridIndex][channelIndex]
+          style = 'color: ' + param.color
+          physicsQunatity = getPhysicsQunatity(param.seriesName, dataMode)
+
+          tip += '<span style="' + style + '">' + param.seriesName + ':<ul  style = "list-style-type: disc; list-style-position: inside">'
+          if (physicsQunatity[0] !== 'Time') {
+            value = parseFloat(param.value[0] / unitTable.xValueScale[unitTable.xUnit]).toFixed(3) + unitTable.xUnit
+            tip += '<li>' + physicsQunatity[0] + ' = ' + value + '</li>'
+          }
+          if (physicsQunatity[1] !== 'Time') {
+            value = parseFloat(param.value[1] / unitTable.yValueScale[unitTable.yUnit]).toFixed(3) + unitTable.yUnit
+            tip += '<li>' + physicsQunatity[1] + ' = ' + value + '</li>'
+          }
+          tip += '</ul></span>'
+        }
+      }
+      return tip
     },
   }
 }

src/sass/icons/icons.scss

@@ -9,3 +9,4 @@ $ionicons-font-path: "~ionicons/dist/fonts";
 $fa-font-path: "~font-awesome/fonts";
 
 @import "../../../node_modules/font-awesome/scss/font-awesome";
+@import url(https://fonts.googleapis.com/icon?family=Material+Icons);

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/replayTooltipFactory'
 import newDataZoom from '@/factories/chart/dataZoomFactory'
 import types from '@/store/modules/analysis/replay/types'
 
@@ -283,15 +283,16 @@ const actions = {
     const axis = payload.axis
     const chartID = payload.chartID
     const gridIndex = payload.gridIndex
-    if (type === 'log') {
-      if (axis === 'x') {
-        state.chartData[chartID].xAxis[gridIndex].type = type
-        state.chartData[chartID].xAxis[gridIndex].minorSplitLine.show = true
-      } else if (axis === 'y') {
-        state.chartData[chartID].yAxis[gridIndex].type = type
-        state.chartData[chartID].yAxis[gridIndex].minorSplitLine.show = true
-      }
-    } else if (type === 'value') {
+    // if (type === 'log') {
+    //   if (axis === 'x') {
+    //     state.chartData[chartID].xAxis[gridIndex].type = type
+    //     state.chartData[chartID].xAxis[gridIndex].minorSplitLine.show = true
+    //   } else if (axis === 'y') {
+    //     state.chartData[chartID].yAxis[gridIndex].type = type
+    //     state.chartData[chartID].yAxis[gridIndex].minorSplitLine.show = true
+    //   }
+    // } else
+    if (type === 'value') {
       if (axis === 'x') {
         state.chartData[chartID].xAxis[gridIndex].type = type
         state.chartData[chartID].xAxis[gridIndex].minorSplitLine.show = false

src/store/modules/download/actions/exportAct.js

@@ -1,6 +1,6 @@
 import types from '@/store/modules/download/types'
 import golbalMethods from '@/data/global/global'
-import paramTable from '@/data/param-table/index'
+import configTable from '@/data/config-table/index'
 import api from '@/data/api'
 
 const typePath = types.export
@@ -49,7 +49,7 @@ const exportActs = {
       metaPath[metaPath.length - 1].split('.')[0],
     ]
 
-    const paramObj = paramTable[libraryName]
+    const paramObj = configTable.getConfig(libraryName)
     const modeObj = paramObj.MODE[meta.parameter_set.MODE]
 
     const param = modeObj.headerParameter(meta.parameter_set)
@@ -120,7 +120,7 @@ const exportActs = {
   [typePath.getTitle]: function ({ state, getters, commit, dispatch }, payload) {
     const meta = state.metaInfo
     const { library_name: libraryName } = meta.device
-    const modeObj = paramTable[libraryName].MODE[meta.parameter_set.MODE]
+    const modeObj = configTable.getModeConfig(libraryName, meta.parameter_set.MODE)
     const downloadInfo = state.downloadInfo
     const titleArray = []
     const channelString = ''

src/store/modules/project/actions/projectAct.js

@@ -66,6 +66,8 @@ const projectActs = {
  */
   [typePath.select]: async ({ state, getters, commit }, payload) => {
     state.projectSelectIndex = payload.index
+    // initial default device library
+    state.projectLibrary = state.projectList[payload.index].device[0]?.library.value
   },
 
   /**

src/store/modules/project/state.js

@@ -1,8 +1,5 @@
 function newState () {
   return {
-    projectAll: {},
-    projectSelectKey: '',
-
     projectList: [],
     projectSelectIndex: -1,
 
@@ -17,6 +14,8 @@ function newState () {
     projectManagerPanel: {
       show: true,
     },
+    // library
+    projectLibrary: null,
 
     taskViewPanel: {
       show: false,

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

@@ -16,7 +16,7 @@ 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) {
@@ -56,9 +56,8 @@ const chartActs = {
     }
     await localforage.setItem('chart_data', _chartData)
   },
-  /**
+  /*
    * add chartID to chartData
-   *
    * @param {String} chartID
    * @param {Number} maxDots
    * @param {Number} gridLength
@@ -231,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') {
@@ -1328,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
+}