[update] add the getPanelInfo for tooltips formatter

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.33: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]) {
@@ -346,6 +345,8 @@ export default {
       this.hideChartLoading()
     },
     drawDetailData: async function () {
+      var panelInfo = this.$refs.top_control_panel.getPanelInfo()
+      console.log('panelInfo: ', panelInfo) // TODO: update the formatter for tooltips
       this.showChartLoading('detail')
       const timeDur = this.endTimeCurrent - this.startTimeCurrent
       let _gridNumber = 0
@@ -419,27 +420,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 +565,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"/>
@@ -122,10 +122,10 @@ export default {
   methods: {
     init () {
       this.deviceName = this.metaList[0].device.library_name
-      this.$refs.change_axis_x.init(this.deviceName)
-      this.$refs.change_axis_y.init(this.deviceName)
       this.$refs.change_unit_x.init(this.deviceName)
       this.$refs.change_unit_y.init(this.deviceName)
+      this.$refs.change_axis_x.init(this.deviceName)
+      this.$refs.change_axis_y.init(this.deviceName)
       this.$refs.change_scale_x.init(this.deviceName)
       this.$refs.change_scale_y.init(this.deviceName)
       this.$refs.abs_x.init(this.deviceName)
@@ -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)
     },
@@ -151,6 +154,18 @@ export default {
         this.$refs.change_unit_y.changeUnitByAxis()
       }
     },
+    getPanelInfo () {
+      var panelInfo = {
+        axis_x: this.$refs.change_axis_x.getChannelByAxis(),
+        axis_y: this.$refs.change_axis_y.getChannelByAxis(),
+        scale_x: this.$refs.change_scale_x.getScaleByAxis(),
+        scale_y: this.$refs.change_scale_y.getScaleByAxis(),
+        unit_x: this.$refs.change_unit_x.getUnitByAxis(),
+        unit_y: this.$refs.change_unit_y.getUnitByAxis(),
+      }
+      // console.log('panelInfo: ', panelInfo)
+      return panelInfo
+    },
     clearCycle () {
       this.$refs.change_cycle.clear()
     },

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/ChangeAxis.vue

@@ -200,6 +200,9 @@ export default {
         this.$emit('clearCycle')
       }
     },
+    getChannelByAxis () {
+      return this.channelFormat.description
+    },
   },
   mounted () {
   },

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)
@@ -157,11 +254,19 @@ export default {
         }
       }
     },
+    getScaleByAxis () {
+      return this.scaleFormat.description
+    },
     ...mapActions('replay', [types.chart.setAxisDisplay]),
     ...mapMutations('replay', [types.chart.updateSeries]),
     ...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 +274,8 @@ export default {
       metaID: 0,
       metaInfo: null,
       scaleFormat: { id: 0, description: 'Linear' },
-      scaleOptions: [
+      scaleOptions: [],
+      scaleXOptions: [
         {
           id: 0,
           description: 'Linear',
@@ -179,6 +285,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/ChangeUnit.vue

@@ -236,6 +236,13 @@ export default {
       }
       this.changeUnit()
     },
+    getUnitByAxis () {
+      // console.log('valueFormat: ', this.valueFormat.unit)
+      if (this.valueFormat.unit === undefined) {
+        return 'auto'
+      }
+      return this.valueFormat.unit
+    },
     // call vuex to mutate chart label formatter by unit and axis
     ...mapMutations('replay', [types.chart.updateAxisLabel]),
   },

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

@@ -40,7 +40,7 @@
               To Differential Mode
             </va-button>
           </div> -->
-          <canvas-chart-real-time-calculation :chartID="chartID" @refreshData="refreshData"/>
+          <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;">
@@ -54,7 +54,7 @@
       <div v-if="tabValue == 0" >
         <div v-if="chartData[chartID].legend.data.length != 0">
           <canvas-chart-real-time-display
-            :chartID="chartID"
+            :chartID="chartID" ref="CanvasChartRealTimeDisplay"
           />
           <!-- chart -->
           <chart :key="taskContentChartKey" :ref="'chart_ref'" :style="'width: '+ cardwidth + '; height: ' + cardheight + ';'" :options="data" :auto-resize="true"></chart>
@@ -188,10 +188,7 @@ export default {
   },
   data () {
     return {
-      // info: null,
-      // paramTable: paramTable,
       data: null,
-      // rawData: null,
       tabValue: 0,
       resizeTimer: null,
       mappingSelect: '',
@@ -202,264 +199,9 @@ export default {
       threeAxisIntervalInput: 'auto',
       xIntervalInput: 'auto',
       yIntervalInput: 'auto',
-      // mode_name: '',
-      // xName: '',
-      // yName: '',
-      // obj: null,
-      // integralClicked: false,
-      // xlogClicked: false,
-      // ylogClicked: false,
-      // diffClicked: false,
-      // disableDiff: false,
-      // disableLog: false,
     }
   },
-  // watch rawData is use for detect whether the chartData is changed
-  // watch: {
-  //   rawData: {
-  //     deep: true,
-  //     handler: function () {
-  //       // avoid getting null data
-  //       if (this.rawData.series.length > 0) {
-  //         this.watchHandler()
-  //       }
-  //     },
-  //   },
-  // },
   methods: {
-    // Do arithmetic operations triggered by button(raw, integral, log)
-    // watchHandler: function () {
-    //   // this.data need to be deep copy from rawData, since we don't want to modify the source(chartData[])
-    //   // this.data = Object.assign({}, this.rawData)
-    //   this.data = JSON.parse(JSON.stringify(this.rawData))
-    //   this.addSource()
-    //   var curXData = 0
-    //   var curYData = 0
-    //   var prevXData = 0
-    //   var prevYData = 0
-    //   var timeGap = 0
-    //   var curTime = 0
-    //   var integralResult = 0
-    //   var diffResult = 0
-    //   var index = 0
-    //   var timeIndex = this.getTimeIndex()
-    //   var _data = []
-    //   const dataLength = this.data.series[0].data.length
-    //   const seriesData = this.data.series[0].data
-    //   if (this.integralClicked) {
-    //     for (index = 0; index < dataLength; index++) {
-    //       if (index === 0) {
-    //         // TODO: need to change the series[deviceID]
-    //         // TODO: change the time index(dynamic changing)
-    //         curYData = parseFloat(seriesData[index][1])
-    //         timeGap = seriesData[index + 1][timeIndex] - seriesData[index][timeIndex]
-    //         curTime = seriesData[index][timeIndex]
-    //         _data.push([curTime, 0])
-    //       } else {
-    //         prevYData = parseFloat(seriesData[index - 1][1])
-    //         curYData = parseFloat(seriesData[index][1])
-    //         integralResult += parseFloat((Math.abs(curYData) + Math.abs(prevYData)) * timeGap / 2)
-    //         curTime += timeGap
-    //         _data.push([curTime, integralResult])
-    //       }
-    //     }
-    //   } else if (this.xlogClicked || this.ylogClicked) {
-    //     if (this.xlogClicked && this.ylogClicked) {
-    //       for (index = 0; index < dataLength; index++) {
-    //         if (index === 0) {
-    //           curXData = parseFloat(seriesData[index][0])
-    //           curYData = parseFloat(seriesData[index][1])
-    //           timeGap = seriesData[index + 1][timeIndex] - seriesData[index][timeIndex]
-    //           curTime = seriesData[index][timeIndex]
-    //           if (curXData !== 0 && curYData !== 0) {
-    //             _data.push([Math.log10(Math.abs(curXData)), Math.log10(Math.abs(curYData)), curTime])
-    //           }
-    //         } else {
-    //           curXData = parseFloat(seriesData[index][0])
-    //           curYData = parseFloat(seriesData[index][1])
-    //           curTime += timeGap
-    //           if (curXData !== 0 && curYData !== 0) {
-    //             _data.push([Math.log10(Math.abs(curXData)), Math.log10(Math.abs(curYData)), curTime])
-    //           }
-    //         }
-    //       }
-    //     } else if (this.xlogClicked && !(this.ylogClicked)) {
-    //       for (index = 0; index < dataLength; index++) {
-    //         if (index === 0) {
-    //           curXData = parseFloat(seriesData[index][0])
-    //           curYData = parseFloat(seriesData[index][1])
-    //           timeGap = seriesData[index + 1][timeIndex] - seriesData[index][timeIndex]
-    //           curTime = seriesData[index][timeIndex]
-    //           if (curXData !== 0) {
-    //             _data.push([Math.log10(Math.abs(curXData)), curYData, curTime])
-    //           }
-    //         } else {
-    //           curXData = parseFloat(seriesData[index][0])
-    //           curYData = parseFloat(seriesData[index][1])
-    //           curTime += timeGap
-    //           if (curXData !== 0) {
-    //             _data.push([Math.log10(Math.abs(curXData)), curYData, curTime])
-    //           }
-    //         }
-    //       }
-    //     } else if (!(this.xlogClicked) && this.ylogClicked) {
-    //       for (index = 0; index < dataLength; index++) {
-    //         if (index === 0) {
-    //           curXData = parseFloat(seriesData[index][0])
-    //           curYData = parseFloat(seriesData[index][1])
-    //           timeGap = seriesData[index + 1][timeIndex] - seriesData[index][timeIndex]
-    //           curTime = seriesData[index][timeIndex]
-    //           if (curYData !== 0) {
-    //             _data.push([curXData, Math.log10(Math.abs(curYData)), curTime])
-    //           }
-    //         } else {
-    //           curXData = parseFloat(seriesData[index][0])
-    //           curYData = parseFloat(seriesData[index][1])
-    //           curTime += timeGap
-    //           if (curYData !== 0) {
-    //             _data.push([curXData, Math.log10(Math.abs(curYData)), curTime])
-    //           }
-    //         }
-    //       }
-    //     }
-    //   } else if (this.diffClicked) {
-    //     for (index = 0; index < dataLength; index++) {
-    //       if (index === 0) {
-    //         // TODO: need to change the series[deviceID]
-    //         // TODO: change the time index(dynamic changing)
-    //         curXData = parseFloat(seriesData[index][0])
-    //         curYData = parseFloat(seriesData[index][1])
-    //         timeGap = seriesData[index + 1][timeIndex] - seriesData[index][timeIndex]
-    //         curTime = seriesData[index][timeIndex]
-    //         // _data.push([curTime, 0, curTime])
-    //       } else {
-    //         curXData = parseFloat(seriesData[index][0])
-    //         curYData = parseFloat(seriesData[index][1])
-    //         prevXData = parseFloat(seriesData[index - 1][0])
-    //         prevYData = parseFloat(seriesData[index - 1][1])
-    //         curTime += timeGap
-    //         diffResult = parseFloat((curYData - prevYData) / (curXData - prevXData))
-    //         console.log((curYData - prevYData), (curXData - prevXData), diffResult)
-    //         _data.push([curTime, diffResult, curTime])
-    //       }
-    //     }
-    //   }
-    //   // decide feed in raw data / modified one
-    //   if (this.integralClicked || this.xlogClicked || this.ylogClicked || this.diffClicked) {
-    //     this.data.series[0].data = _data
-    //   }
-    //   this.data.xAxis[0].type = 'value'
-    //   if (this.integralClicked) {
-    //     this.data.tooltip.formatter = newTooltip('Integral').formatter
-    //   } else if (this.xlogClicked || this.ylogClicked) {
-    //     this.data.tooltip.formatter = newTooltip('log').formatter
-    //   } else if (this.diffClicked) {
-    //     this.data.tooltip.formatter = newTooltip('Differential').formatter
-    //   } else {
-    //     this.data.tooltip.formatter = newTooltip('').formatter
-    //   }
-    //   // TODO: modify the redundant code
-    //   if (this.xName === 'TIME') {
-    //     // this.data.xAxis[0].axisLabel.hideOverlap = true
-    //     this.data.xAxis[0].axisLabel.formatter = function (val) {
-    //       return getTimeFormatter(val)
-    //       /* const hour = parseInt(val / 3.6e9)
-    //       const minute = parseInt((val % 3.6e9) / 1000000 / 60)
-    //       const second = parseInt((val % 6e7) / 1000000)
-    //       const millisecond = parseInt((val % 1e6) / 1000)
-    //       let label = ''
-    //       if (hour > 0) {
-    //         label += hour + ' h '
-    //       }
-    //       if (minute > 0) {
-    //         label += minute + ' m '
-    //       }
-    //       if (second > 0) {
-    //         label += second + ' s '
-    //       }
-    //       if (millisecond > 0) {
-    //         label += millisecond + ' ms '
-    //       }
-    //       return label */
-    //     }
-    //   }
-    // },
-    // resetClicked: function () {
-    //   this.integralClicked = false
-    //   this.xlogClicked = false
-    //   this.ylogClicked = false
-    //   this.diffClicked = false
-    //   this.disableDiff = false
-    //   this.disableLog = false
-    // },
-    // clickIntegral: function () {
-    //   this.integralClicked = !(this.integralClicked)
-    //   const device = this.deviceListNew.find(ele => String(ele.memory_board) === String(this.data.mappingID))
-    //   if (device !== undefined) {
-    //     if (device.status === 0) {
-    //       this.watchHandler()
-    //     }
-    //   }
-    // },
-    // clickXLog: function () {
-    //   if (this.xlogClicked) {
-    //     this.xlogClicked = false
-    //     this.disableDiff = false
-    //   } else {
-    //     this.xlogClicked = true
-    //     this.disableDiff = true
-    //   }
-    //   const device = this.deviceListNew.find(ele => String(ele.memory_board) === String(this.data.mappingID))
-    //   if (device !== undefined) {
-    //     if (device.status === 0) {
-    //       this.watchHandler()
-    //     }
-    //   }
-    // },
-    // clickYLog: function () {
-    //   if (this.ylogClicked) {
-    //     this.ylogClicked = false
-    //     this.disableDiff = false
-    //   } else {
-    //     this.ylogClicked = true
-    //     this.disableDiff = true
-    //   }
-    //   const device = this.deviceListNew.find(ele => String(ele.memory_board) === String(this.data.mappingID))
-    //   if (device !== undefined) {
-    //     if (device.status === 0) {
-    //       this.watchHandler()
-    //     }
-    //   }
-    // },
-    // clickDiff: function () {
-    //   this.diffClicked = !(this.diffClicked)
-    //   this.disableLog = !(this.disableLog)
-    //   const device = this.deviceListNew.find(ele => String(ele.memory_board) === String(this.data.mappingID))
-    //   if (device !== undefined) {
-    //     if (device.status === 0) {
-    //       this.watchHandler()
-    //     }
-    //   }
-    // },
-    // addSource () {
-    //   if (this.data.gridSource.length > 0) {
-    //     const xAxisName = this.data.gridSource[0][0].xAxis
-    //     const yAxisName = this.data.gridSource[0][0].yAxis
-    //     this.xName = (xAxisName.split(' ')).pop()
-    //     this.yName = (yAxisName.split(' ')).pop()
-    //     if ((this.xName === 'VOLTAGE' && this.yName === 'CURRENT') || (this.xName === 'CURRENT' && this.yName === 'VOLTAGE')) {
-    //       this.mode_name = 'I-V Curve' // integration
-    //     } else if (this.xName === 'TIME' && this.yName === 'CURRENT') {
-    //       this.mode_name = 'I-T Graph' // differential and log
-    //     }
-    //   }
-    // },
-    // // index 0 is for the mode which x-axis is represent time, 2 is for the other mode(s)
-    // getTimeIndex: function () {
-    //   let xAxisName = this.rawData.gridSource[0][0].xAxis
-    //   xAxisName = (xAxisName.split(' ')).pop()
-    //   return (xAxisName === 'TIME') ? 0 : 2
-    // },
     timeIntervalChange: function (val) {
       if (!isNaN(parseInt(val))) {
         this.chartData[this.chartID].xAxis.forEach(x => {
@@ -618,26 +360,17 @@ export default {
         type: 'legendInverseSelect',
       })
     },
-    // these function below are using for print out the data (debug)
-    // getAlldata: function () {
-    //   return this.data.series[0].data[(this.data.series[0].data).length - 1]
-    // },
-    // getXdata: function () {
-    //   var value = this.data.series[0].data[(this.data.series[0].data).length - 1][0]
-    //   return this.xName + ': ' + value + ' ' + this.xUnit
-    // },
-    // getYdata: function () {
-    //   var value = this.data.series[0].data[(this.data.series[0].data).length - 1][1]
-    //   return this.yName + ': ' + value + ' ' + this.yUnit
-    // },
-
     refreshData: function (rawData) {
       this.data = rawData
+      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]

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

@@ -1,9 +1,9 @@
 <template>
   <div>
-    <va-button v-if="integralClicked && (mode_name==='Chronoamperometric' || mode_name==='I-T Graph')" color="danger" class="mb-2" @click="clickIntegral" small>
+    <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 v-if="!integralClicked && (mode_name==='Chronoamperometric' || mode_name==='I-T Graph')" color="primary" class="mb-2" @click="clickIntegral" small>
+    <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>
@@ -36,36 +36,18 @@ 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 newTooltip from '@/factories/chart/tooltipFactory'
 import { getTimeFormatter } from '@/store/modules/task/content/actions/chartAct'
 
 export default {
   name: 'CanvasChartRealTimeCalculation',
   components: {
-    // CanvasChartSetting,
-    // CanvasChartSource,
-    // CanvasChartFilter,
-    // CanvasChartFilterPopup,
   },
   props: {
     chartID: {
       type: [Number, String],
       required: true,
     },
-    // cardclass: {
-    //   type: Array,
-    //   default: function () {
-    //     return ['xs12', 'md12', 'xl12', 'sm12']
-    //   },
-    // },
-    // cardheight: {
-    //   type: String,
-    //   default: '400px',
-    // },
-    // cardwidth: {
-    //   type: String,
-    //   default: 'auto',
-    // },
   },
   computed: {
     ...mapFields('', [
@@ -81,18 +63,7 @@ export default {
     return {
       info: null,
       paramTable: paramTable,
-      // data: null,
       rawData: null,
-      // tabValue: 0,
-      // resizeTimer: null,
-      // mappingSelect: '',
-      // mappingOptions: taskInfo.getMappingList(),
-      // nameCard: '',
-      // initDone: false,
-      // timeIntervalInput: 'auto',
-      // threeAxisIntervalInput: 'auto',
-      // xIntervalInput: 'auto',
-      // yIntervalInput: 'auto',
       mode_name: '',
       xName: '',
       yName: '',
@@ -103,6 +74,7 @@ export default {
       diffClicked: false,
       disableDiff: false,
       disableLog: false,
+      disableInt: false,
     }
   },
   // watch rawData is use for detect whether the chartData is changed
@@ -128,7 +100,8 @@ export default {
       var curYData = 0
       var prevXData = 0
       var prevYData = 0
-      var timeGap = 0
+      var deltaX = 0
+      var deltaTime = 0
       var curTime = 0
       var integralResult = 0
       var diffResult = 0
@@ -139,19 +112,33 @@ export default {
       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])
-            timeGap = seriesData[index + 1][timeIndex] - seriesData[index][timeIndex]
+            // deltaX = seriesData[index + 1][timeIndex] - seriesData[index][timeIndex]
+            curXData = parseFloat(seriesData[index][0])
             curTime = seriesData[index][timeIndex]
-            _data.push([curTime, 0])
+            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])
-            integralResult += parseFloat((Math.abs(curYData) + Math.abs(prevYData)) * timeGap / 2)
-            curTime += timeGap
-            _data.push([curTime, integralResult])
+            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) {
@@ -160,7 +147,7 @@ export default {
             if (index === 0) {
               curXData = parseFloat(seriesData[index][0])
               curYData = parseFloat(seriesData[index][1])
-              timeGap = seriesData[index + 1][timeIndex] - seriesData[index][timeIndex]
+              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])
@@ -168,7 +155,7 @@ export default {
             } else {
               curXData = parseFloat(seriesData[index][0])
               curYData = parseFloat(seriesData[index][1])
-              curTime += timeGap
+              curTime += deltaX
               if (curXData !== 0 && curYData !== 0) {
                 _data.push([Math.log10(Math.abs(curXData)), Math.log10(Math.abs(curYData)), curTime])
               }
@@ -179,7 +166,7 @@ export default {
             if (index === 0) {
               curXData = parseFloat(seriesData[index][0])
               curYData = parseFloat(seriesData[index][1])
-              timeGap = seriesData[index + 1][timeIndex] - seriesData[index][timeIndex]
+              deltaX = seriesData[index + 1][timeIndex] - seriesData[index][timeIndex]
               curTime = seriesData[index][timeIndex]
               if (curXData !== 0) {
                 _data.push([Math.log10(Math.abs(curXData)), curYData, curTime])
@@ -187,7 +174,7 @@ export default {
             } else {
               curXData = parseFloat(seriesData[index][0])
               curYData = parseFloat(seriesData[index][1])
-              curTime += timeGap
+              curTime += deltaX
               if (curXData !== 0) {
                 _data.push([Math.log10(Math.abs(curXData)), curYData, curTime])
               }
@@ -198,7 +185,7 @@ export default {
             if (index === 0) {
               curXData = parseFloat(seriesData[index][0])
               curYData = parseFloat(seriesData[index][1])
-              timeGap = seriesData[index + 1][timeIndex] - seriesData[index][timeIndex]
+              deltaX = seriesData[index + 1][timeIndex] - seriesData[index][timeIndex]
               curTime = seriesData[index][timeIndex]
               if (curYData !== 0) {
                 _data.push([curXData, Math.log10(Math.abs(curYData)), curTime])
@@ -206,7 +193,7 @@ export default {
             } else {
               curXData = parseFloat(seriesData[index][0])
               curYData = parseFloat(seriesData[index][1])
-              curTime += timeGap
+              curTime += deltaX
               if (curYData !== 0) {
                 _data.push([curXData, Math.log10(Math.abs(curYData)), curTime])
               }
@@ -220,7 +207,7 @@ export default {
             // 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]
+            deltaX = seriesData[index + 1][timeIndex] - seriesData[index][timeIndex]
             curTime = seriesData[index][timeIndex]
             // _data.push([curTime, 0, curTime])
           } else {
@@ -228,65 +215,47 @@ export default {
             curYData = parseFloat(seriesData[index][1])
             prevXData = parseFloat(seriesData[index - 1][0])
             prevYData = parseFloat(seriesData[index - 1][1])
-            curTime += timeGap
+            curTime += deltaX
             diffResult = parseFloat((curYData - prevYData) / (curXData - prevXData))
-            // console.log((curYData - prevYData), (curXData - prevXData), diffResult)
-            _data.push([curTime, diffResult, curTime])
+            _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
+        console.log(this.data.series[0].data[this.data.series[0].data.length - 1])
       }
       this.data.xAxis[0].type = 'value'
       if (this.integralClicked) {
-        this.data.tooltip.formatter = newTooltip('Integral').formatter
+        this.$emit('switchModeButton', 'Integral')
       } else if (this.xlogClicked || this.ylogClicked) {
-        this.data.tooltip.formatter = newTooltip('log').formatter
+        this.$emit('switchModeButton', 'log')
       } else if (this.diffClicked) {
-        this.data.tooltip.formatter = newTooltip('Differential').formatter
+        this.$emit('switchModeButton', 'Differential')
       } else {
-        this.data.tooltip.formatter = newTooltip('').formatter
+        this.$emit('switchModeButton', '')
       }
       // TODO: modify the redundant code
       if (this.xName === 'TIME') {
-        // this.data.xAxis[0].axisLabel.hideOverlap = true
         this.data.xAxis[0].axisLabel.formatter = function (val) {
           return getTimeFormatter(val)
-          /* const hour = parseInt(val / 3.6e9)
-          const minute = parseInt((val % 3.6e9) / 1000000 / 60)
-          const second = parseInt((val % 6e7) / 1000000)
-          const millisecond = parseInt((val % 1e6) / 1000)
-          let label = ''
-          if (hour > 0) {
-            label += hour + ' h '
-          }
-          if (minute > 0) {
-            label += minute + ' m '
-          }
-          if (second > 0) {
-            label += second + ' s '
-          }
-          if (millisecond > 0) {
-            label += millisecond + ' ms '
-          }
-          return label */
         }
       }
       this.$emit('refreshData', this.data)
     },
-    resetClicked: function () {
-      this.integralClicked = false
-      this.xlogClicked = false
-      this.ylogClicked = false
-      this.diffClicked = false
-      this.disableDiff = false
-      this.disableLog = false
-    },
+    // 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) {
@@ -299,12 +268,15 @@ export default {
         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) {
@@ -318,12 +290,15 @@ export default {
         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) {
@@ -335,6 +310,7 @@ export default {
     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) {
@@ -361,164 +337,6 @@ export default {
       xAxisName = (xAxisName.split(' ')).pop()
       return (xAxisName === 'TIME') ? 0 : 2
     },
-    // timeIntervalChange: function (val) {
-    //   if (!isNaN(parseInt(val))) {
-    //     this.chartData[this.chartID].xAxis.forEach(x => {
-    //       if (x.type === 'time') {
-    //         x.interval = val * 1000
-    //       }
-    //     })
-    //   } else {
-    //     this.timeIntervalInput = 'auto'
-    //     this.chartData[this.chartID].xAxis.forEach(x => {
-    //       if (x.type === 'time') {
-    //         x.interval = 500 * 1000
-    //       }
-    //     })
-    //   }
-    // },
-    // xIntervalChange: async function (val) {
-    //   if (!isNaN(parseInt(val))) {
-    //     this.chartData[this.chartID].xAxis.forEach(x => {
-    //       if (x.type === 'value') {
-    //         x.interval = val * 1000
-    //       }
-    //     })
-    //   } else {
-    //     this.timeIntervalInput = 'auto'
-    //     this.chartData[this.chartID].xAxis.forEach(x => {
-    //       if (x.type === 'value') {
-    //         x.interval = null
-    //       }
-    //     })
-    //   }
-    //   await this.taskContentChartSaveToCache()
-    // },
-    // yIntervalChange: async function (val) {
-    //   if (!isNaN(parseInt(val))) {
-    //     this.chartData[this.chartID].yAxis.forEach(y => {
-    //       if (parseInt(y.channel) <= 255) {
-    //         if (this.chartData[this.chartID].chartYUnit === 'uV') {
-    //           y.interval = parseInt(val)
-    //         } else {
-    //           y.interval = val * 1000
-    //         }
-    //         const maxList = []
-    //         const minList = []
-    //         // TODO: follow this way to iterate the deviceID
-    //         y.seriesIndex.forEach(i => {
-    //           maxList.push(Math.max(...this.chartData[this.chartID].series[i].data.map(p => p[1])))
-    //           minList.push(Math.min(...this.chartData[this.chartID].series[i].data.map(p => p[1])))
-    //         })
-    //         const max = Math.max(maxList)
-    //         const min = Math.min(minList)
-    //         const center = (max + min) / 2
-    //         y.max = center + (max - min)
-    //         y.min = center - (max - min)
-    //         y.max = (parseInt(y.max / y.interval) + 1) * y.interval
-    //         y.min = (parseInt(y.min / y.interval) - 1) * y.interval
-    //       }
-    //     })
-    //   } else {
-    //     this.timeIntervalInput = 'auto'
-    //     this.chartData[this.chartID].yAxis.forEach(y => {
-    //       if (parseInt(y.channel) <= 255) {
-    //         y.interval = null
-    //         y.max = 'dataMax'
-    //         y.min = 'dataMin'
-    //       }
-    //     })
-    //   }
-    //   await this.taskContentChartSaveToCache()
-    // },
-    // threeAxisIntervalChange: function (val) {
-    //   if (!isNaN(parseInt(val))) {
-    //     this.chartData[this.chartID].yAxis.forEach(y => {
-    //       if (parseInt(y.channel) >= 255) {
-    //         y.interval = val * 1
-    //       }
-    //     })
-    //   } else {
-    //     this.timeIntervalInput = 'auto'
-    //     this.chartData[this.chartID].yAxis.forEach(y => {
-    //       if (parseInt(y.channel) >= 255) {
-    //         y.interval = null
-    //       }
-    //     })
-    //   }
-    // },
-    // init: function () {
-    //   this.mappingSelect = ''
-    //   this.nameCard = 'chart' + this.chartID
-    //   this.$emit('init')
-    // },
-    // remove: function () {
-    //   this.$emit('remove')
-    // },
-    // resetSetting: function () {
-    //   this.mappingSelect = ''
-    //   this.nameCard = 'chart' + this.chartID
-    // },
-    // setMappingSelect: async function (itemID) {
-    //   if (itemID === -1 || itemID == null) {
-    //     return false
-    //   }
-    //   this.mappingOptions.forEach(item => {
-    //     if (item.id === itemID) {
-    //       this.mappingSelect = item
-    //       this.chartData[this.chartID].mappingID = item.id
-    //     }
-    //   })
-    // },
-    // refreshMappingSelect: async function () {
-    //   this.setMappingSelect(this.chartData[this.chartID].mappingID)
-    //   if (this.chartData[this.chartID].mappingID !== '-1' && this.chartData[this.chartID].mappingID != null) {
-    //     taskInfo.getMappingList().forEach(item => {
-    //       if (item.id === this.chartData[this.chartID].mappingID) {
-    //         this.setChartName(item.name)
-    //       }
-    //     })
-    //   }
-    // },
-    // setChartName: function (name) {
-    //   this.chartData[this.chartID].cardName = name
-    //   this.nameCard = name
-    // },
-    // resize: function () {
-    //   if (this.$refs.chart_ref != null) {
-    //     this.$refs.chart_ref.resize()
-    //   }
-    // },
-    // showFilterPopup (params) {
-    //   this.$refs.filter_popup_ref.showPanel(params)
-    // },
-    // setCursor (params) {
-    //   this.$refs.chart_ref.chart._zr.setCursorStyle('copy')
-    // },
-    // legendChange (params) {
-    //   const activeLegendLen = Object.values(params.selected).filter(val => val === true).length
-    //   let index = 0
-    //   for (const [gridIndex, value] of Object.values(params.selected).entries()) { // [TODO] 技術債，目前real time chart一個grid只對應一條series
-    //     if (value === true) {
-    //       this.chartData[this.chartID].grid[gridIndex].height = (85 / activeLegendLen) + '%'
-    //       this.chartData[this.chartID].grid[gridIndex].top = index * (85 / activeLegendLen) + 1 + '%'
-    //       index++
-    //     } else {
-    //       this.chartData[this.chartID].grid[gridIndex].height = '0%'
-    //       this.chartData[this.chartID].grid[gridIndex].top = '0%'
-    //     }
-    //   }
-    // },
-    // selectAllSeries () {
-    //   this.$refs.chart_ref.dispatchAction({
-    //     type: 'legendAllSelect',
-    //   })
-    // },
-    // inverseSelectAllSeries () {
-    //   this.$refs.chart_ref.dispatchAction({
-    //     type: 'legendInverseSelect',
-    //   })
-    // },
     // these function below are using for print out the data (debug)
     getAlldata: function () {
       return this.data.series[0].data[(this.data.series[0].data).length - 1]
@@ -538,24 +356,7 @@ export default {
   },
   async mounted () {
     this.rawData = 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()
-    // this.initDone = true
-    // if (this.$refs.chart_ref != null) {
-    //   // this.$refs.chart_ref.chart._zr.on('click', this.showFilterPopup)
-    //   // this.$refs.chart_ref.chart._zr.on('mousemove', this.setCursor)
-    //   this.$refs.chart_ref.chart.on('legendselectchanged', this.legendChange)
-    //   this.$refs.chart_ref.chart.on('legendselectall', this.legendChange)
-    //   this.$refs.chart_ref.chart.on('legendinverseselect', this.legendChange)
-    // }
-    // this.timeIntervalInput = '500'
-    // this.timeIntervalChange('500')
   },
-  // destroyed () {
-  //   clearInterval(this.resizeTimer)
-  // },
 }
 
 </script>

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

@@ -70,6 +70,7 @@ export default {
       data: null,
       configTable: configTable,
       realTime: [[]],
+      functional: '',
     }
   },
   methods: {
@@ -94,7 +95,7 @@ export default {
       }
     },
     // change the axis unit of charts
-    updateUnit: function () {
+    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) {
@@ -111,7 +112,7 @@ export default {
               return parseFloat(val / _yScale).toFixed(2) + _yUnit
             }
             // update tooltip
-            this.data.tooltip.formatter = newTooltip(this.realTime).formatter
+            this.data.tooltip.formatter = newTooltip(this.realTime, functional).formatter
           }
         }
       }
@@ -195,9 +196,17 @@ export default {
         }
       }
     },
+    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: {
@@ -209,7 +218,14 @@ export default {
     },
     realTime: {
       handler: function () {
-        this.updateUnit()
+        this.updateUnit(this.functional)
+      },
+      deep: true,
+    },
+    canvasChartData: {
+      handler: function () {
+        this.data = this.canvasChartData
+        console.log('HIHI', this.data)
       },
       deep: true,
     },

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

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

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

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