[update] add setting button to the row of Task

[debug]  fix the conflict between display tool and funtional tool

See merge request wisetop/controller/wisetopvue!1

package.json

@@ -20,12 +20,12 @@
     "ammap3": "^3.21.14",
     "approximate-number": "^2.0.0",
     "asva-executors": "^0.1.22",
-    "axios": "^0.21.1",
+    "axios": "^0.21.4",
     "babel-polyfill": "^6.26.0",
-    "chart.js": "^2.9.3",
+    "chart.js": "^2.9.4",
     "core-js": "3",
     "detect-browser": "^4.8.0",
-    "echarts": "^4.9.0",
+    "echarts": "^5.3.3",
     "element-resize-detector": "^1.1.15",
     "epic-spinners": "^1.1.0",
     "extend": "3.0.2",
@@ -37,6 +37,7 @@
     "leaflet-map": "^0.2.1",
     "localforage": "^1.10.0",
     "lodash": "^4.17.21",
+    "mathjs": "^11.0.1",
     "medium-editor": "^5.23.3",
     "normalize.css": "^8.0.1",
     "nprogress": "^0.2.0",
@@ -53,7 +54,7 @@
     "vue-clipboard2": "^0.3.1",
     "vue-color": "^2.7.0",
     "vue-ctk-date-time-picker": "^2.5.0",
-    "vue-echarts": "^5.0.0-beta.0",
+    "vue-echarts": "^6.2.3",
     "vue-epic-bus": "^0.1.2",
     "vue-final-modal": "^2.4.1",
     "vue-gtm": "^2.2.0",
@@ -77,6 +78,7 @@
     "@vue/cli-plugin-pwa": "^4.0.5",
     "@vue/cli-plugin-unit-jest": "^4.0.5",
     "@vue/cli-service": "^4.0.5",
+    "@vue/composition-api": "^1.7.0",
     "@vue/eslint-config-standard": "^5.0.0",
     "@vue/test-utils": "^1.0.0-beta.29",
     "autoprefixer": "^9.7.2",

src/app/main.js

@@ -14,16 +14,7 @@ import YmapPlugin from 'vue-yandex-maps'
 import VueClipboard from 'vue-clipboard2'
 
 import ECharts from 'vue-echarts'
-import 'echarts/lib/chart/line'
-import 'echarts/lib/component/dataZoom'
-import 'echarts/lib/component/tooltip'
-import 'echarts/lib/component/legend'
-import 'echarts/lib/component/legend/ScrollableLegendModel.js'
-import 'echarts/lib/component/legend/ScrollableLegendView.js'
-import 'echarts/lib/component/legend/scrollableLegendAction.js'
-import 'echarts/lib/component/axisPointer'
-import 'echarts/lib/component/grid'
-import 'echarts/lib/component/markArea'
+import { use } from 'echarts/core'
 
 import VueMqtt from 'vue-mqtt'
 import global_ from '../data/global/global'
@@ -42,12 +33,49 @@ import localforage from 'localforage'
 import '../metrics'
 import '../registerServiceWorker'
 
+// import ECharts modules manually to reduce bundle size
+import {
+  CanvasRenderer,
+} from 'echarts/renderers'
+import {
+  LineChart,
+  PieChart,
+  BarChart,
+} from 'echarts/charts'
+import {
+  GridComponent,
+  TooltipComponent,
+  LegendComponent,
+  TitleComponent,
+  DataZoomComponent,
+  BrushComponent,
+  ToolboxComponent,
+} from 'echarts/components'
+
+use([
+  CanvasRenderer,
+  LineChart,
+  BarChart,
+  PieChart,
+  GridComponent,
+  TooltipComponent,
+  ToolboxComponent,
+  LegendComponent,
+  TitleComponent,
+  DataZoomComponent,
+  BrushComponent,
+])
+
 localforage.config({ name: 'bioprovue' })
 
 let MqttUrl
 // for developer
 if (process.env.NODE_ENV === 'development') {
-  MqttUrl = 'ws://192.168.5.57:8083'
+  MqttUrl = 'ws://192.168.5.66:8083'
+  // MqttUrl = 'ws://192.168.5.42:8083'
+  // MqttUrl = 'ws://192.168.5.240:8080'
+  // 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,8 +9,11 @@
                 <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" @setBrushBoundary="setBrushBoundary"/>
                   </div>
+                  <!-- <div>
+                    {{ this.specificIntegral }}
+                  </div> -->
                 </div>
               </va-collapse>
             </va-accordion>
@@ -21,8 +24,9 @@
       <div :class="chartAreaClass">
         <div class="row" >
           <div class="flex sm12 xl12 md12 xs12">
+            <!-- <chart :style="'width: auto; height: 88vhvh;'" :option="options"></chart> -->
             <elite-replay-overview-chart v-show="showOverviewChart" :ref="'chart_overview'" class="mb-1" :cardheight="'7vh'" :data="chartOverviewData" @dataZoomEvent="dataZoomEvent($event)"/>
-            <elite-replay-chart :ref="'chart_detail'" :cardheight="'88vh'" :chartheight="detailchartheight" :data="chartDetailData" />
+            <elite-replay-chart :ref="'chart_detail'" :cardheight="'88vh'" :chartheight="detailchartheight" :data="chartDetailData" @updateIntegralBoundary="updateIntegralBoundary" />
             <change-channel-value-min-max :ref="'set_min_max'"/>
           </div>
         </div>
@@ -106,6 +110,30 @@ export default {
       zoomTime: 0,
       initDone: false,
       chartAreaClass: ['flex', 'xs12', 'sm12', 'md12', 'xl9', 'pa-0'],
+      xfunctional: 'Linear',
+      yfunctional: 'Linear',
+      options: {
+        xAxis: {
+          type: 'category',
+          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+        },
+        yAxis: {
+          type: 'value',
+        },
+        series: [
+          {
+            data: [120, 200, 150, 80, 70, 110, 130],
+            type: 'bar',
+            showBackground: true,
+            backgroundStyle: {
+              color: 'rgba(180, 180, 180, 0.2)',
+            },
+          },
+        ],
+        brush: {
+        },
+      },
+      specificIntegral: 0,
     }
   },
   mqtt: {
@@ -118,10 +146,10 @@ export default {
       this.$refs.chart_detail.turnOffAxisEventHandler(eventName, handler, attr)
     },
     showMinMaxPanel (params) {
-      this.$refs.set_min_max.showPanel(params)
+      return this.$refs.set_min_max.showPanel(params)
     },
     setOption (options) {
-      this.$refs.chart_detail.mergeOptions(options)
+      this.$refs.chart_detail.setOptions(options)
     },
     showChartLoading: function (chart) {
       const loadStyle = {
@@ -172,7 +200,7 @@ export default {
         const yType = setting[2] // Elite or Time
         const xValue = setting[1] // 1: I, 2: V, 3: R
         const yValue = setting[3] // 1: I, 2: V, 3: R
-        console.log(setting)
+        // console.log(setting)
         this.registerChart({
           chartAllData: this.chartData,
           chartID: this.chartDetailData.chartID,
@@ -236,7 +264,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 +274,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
@@ -255,7 +281,7 @@ export default {
     changeOverviewDataZoom () {
       this.chartOverviewData.dataZoom[0].start = this.startTime * 100 / this.maxTime
       this.chartOverviewData.dataZoom[0].end = this.endTime * 100 / this.maxTime
-      this.$refs.chart_overview.mergeOptions(this.chartOverviewData)
+      this.$refs.chart_overview.setOptions(this.chartOverviewData)
     },
     async computeResampleScale (meta, duration) {
       const sampleRate = meta.parameter_set.SAMPLE_RATE / 10
@@ -313,7 +339,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 +371,16 @@ export default {
       this.hideChartLoading()
     },
     drawDetailData: async function () {
+      var panelInfo = this.$refs.top_control_panel.getPanelInfo()
+      // brush setting write at here, due to mounted won't show the brush
+      this.chartDetailData.brush = {
+        toolbox: ['rect', 'clear'],
+        // toolbox: ['rect', 'polygon', 'lineX', 'lineY', 'keep', 'clear'],
+        xAxisIndex: 0,
+        // throttleType: 'debounce',
+        // throttleDelay: 5,
+      }
+      console.log('panelInfo: ', panelInfo) // TODO: update the formatter for tooltips
       this.showChartLoading('detail')
       const timeDur = this.endTimeCurrent - this.startTimeCurrent
       let _gridNumber = 0
@@ -368,7 +403,7 @@ export default {
           this.updateChartSamplingChart({ chartID: this.chartDetailData.chartID, seriesIndex: _gridNumber, method: 'lttb' })
         }
 
-        if (metaInfo.device.library_name === 'EliteEIS' && metaInfo.parameter_set.MODE === 0) {
+        if (metaInfo.device.library_name.includes('EIS') && metaInfo.parameter_set.MODE === 0) {
           this.chartDetailData.series[this.chartDetailData.series.length - 1].showSymbol = true
           this.chartDetailData.series[this.chartDetailData.series.length - 1].showAllSymbol = true
           this.chartDetailData.series[this.chartDetailData.series.length - 1].symbolSize = 6
@@ -419,27 +454,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)
             }
           }
         }
@@ -458,12 +579,12 @@ export default {
         this.showOverviewChart = false
         this.detailchartheight = '88vh'
         // this.$refs.chart_detail.updateChartHeight()
-        this.turnOnAxisEventHandler('click', 'xAxis.axisLabel', this.showMinMaxPanel, { axis: 'x' })
+        this.turnOnAxisEventHandler('click', 'xAxis', this.showMinMaxPanel, { axis: 'x' })
       } else {
         this.showOverviewChart = true
         this.detailchartheight = '80vh'
         this.turnOffAxisEventHandler('click', this.showMinMaxPanel, { axis: 'x' })
-        this.turnOnAxisEventHandler('click', 'yAxis.axisLabel', this.showMinMaxPanel, { axis: 'y' })
+        this.turnOnAxisEventHandler('click', 'yAxis', this.showMinMaxPanel, { axis: 'y' })
       }
 
       this.hideChartLoading()
@@ -478,6 +599,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
@@ -486,9 +614,9 @@ export default {
         if (this.axisXDataType.description === 'Time') {
           xType = 'Time'
         } else {
-          if (libName === 'EliteZM15') {
+          if (libName === 'EliteZM15' || libName.includes('Elite_EDC')) {
             xType = 'Elite'
-          } else if (libName === 'EliteEIS') {
+          } else if (libName.includes('EIS')) {
             xType = 'EliteEIS'
           }
           xValue = this.axisXDataType.id + 1
@@ -500,7 +628,7 @@ export default {
           deviceNameX: xType,
           deviceIDX: this.metaList[gridIndex].name,
           channelX: xValue,
-          deviceNameY: libName === 'EliteEIS' ? 'EliteEIS' : 'Elite',
+          deviceNameY: libName.includes('EIS') ? 'EliteEIS' : 'Elite',
           deviceIDY: '',
           channelY: this.axisYDataType.id + 1,
         })
@@ -510,6 +638,54 @@ export default {
       }
       this.drawDetailData() // reDraw
     },
+    updateIntegralBoundary (boundary) {
+      var rawData = JSON.parse(JSON.stringify(this.chartDetailData.series[0].data))
+      var deltaX
+      var averageY
+      var area
+      var prevIndex
+      this.specificIntegral = 0
+
+      for (let index = 0, len = rawData.length; index < len; index++) {
+        prevIndex = index - 1
+        if (index === 0) {
+          if (rawData[len - 1][0] >= boundary.x_start && rawData[len - 1][0] <= boundary.x_end &&
+              rawData[index][0] >= boundary.x_start && rawData[index][0] <= boundary.x_end) {
+            prevIndex = len - 1
+          } else continue
+        }
+        if (rawData[prevIndex][0] >= boundary.x_start && rawData[prevIndex][0] <= boundary.x_end &&
+            rawData[index][0] >= boundary.x_start && rawData[index][0] <= boundary.x_end) {
+          deltaX = Number(rawData[index][0]) - Number(rawData[prevIndex][0])
+          if (rawData[index][1] > boundary.y_end) rawData[index][1] = boundary.y_end
+          else if (rawData[index][1] < boundary.y_start) {
+            continue
+          }
+          averageY = (Number(rawData[index][1]) + Number(rawData[prevIndex][1])) / 2 - boundary.y_start
+          area = deltaX * averageY
+          if (!isNaN(area)) {
+            this.specificIntegral += area
+          }
+        }
+      }
+      // this.specificIntegral = (this.specificIntegral * 1e-15).toFixed(4) + 'W'
+      this.$refs.top_control_panel.$refs.specific_integral.getSpecificIntegral(this.specificIntegral, boundary)
+    },
+    setBrushBoundary (boundary) {
+      this.$refs.chart_detail.$refs.chart_ref.chart.dispatchAction({
+        type: 'brush',
+        areas: [
+          {
+            xAxisIndex: 0,
+            brushType: 'rect',
+            coordRange: [
+              [boundary.x_start, boundary.x_end],
+              [boundary.y_start, boundary.y_end],
+            ],
+          },
+        ],
+      })
+    },
     ...mapActions('replay', [types.chart.init, types.chart.register, types.chart.clear, types.chart.updateGridList, types.chart.updateDataZoom, types.chart.setAxisDisplay]),
     ...mapActions('replay', [types.meta.init]),
     ...mapActions('replay', [types.rec.init, types.rec.intoData, types.rec.initDisplaySetting, types.rec.updateDisplaySetting]),
@@ -527,19 +703,19 @@ export default {
     this.metaList = this.getAllMeta()
     await this.initRec({ api: api })
     this.dataInfo = this.getAllRec()
-    console.log(this.metaList)
-    console.log(this.dataInfo)
+    // console.log(this.metaList)
+    // console.log(this.dataInfo)
     await this.register()
     this.setOverviewDataZoomStartAndEndChart()
     this.$refs.top_control_panel.init() // will call changeAxis() here
     this.$refs.set_min_max.init()
-    this.turnOnAxisEventHandler('click', 'yAxis.axisLabel', this.showMinMaxPanel, { axis: 'y' })
+    this.turnOnAxisEventHandler('click', 'yAxis', this.showMinMaxPanel, { axis: 'y' })
     this.updateAxisSplitNumberChart({ chartID: this.chartDetailData.chartID, axis: 'x' })
     this.updateAxisSplitNumberChart({ chartID: this.chartDetailData.chartID, axis: 'y' })
     this.dataZoomTimer = setInterval(this.checkDataZoom, 1000)
     this.initDone = true
-    console.log(this.chartOverviewData)
-    console.log(this.chartDetailData)
+    // console.log(this.chartOverviewData)
+    // console.log(this.chartDetailData)
   },
   beforeDestroy () {
     this.$refs.chart_overview.clear()

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

@@ -1,7 +1,14 @@
 <template>
   <div class="flex" :class="cardclass">
     <va-card :style="'height: ' + cardheight + ';'">
-      <chart :ref="'chart_ref'" :style="'width: '+ cardwidth + '; height: ' + chartheight + ';'" :options="data" @dataZoom="updateZoom" :auto-resize="true"></chart>
+      <chart
+        :ref="'chart_ref'"
+        :style="'width: '+ cardwidth + '; height: ' + chartheight + ';'"
+        :option="data"
+        :auto-resize="true"
+        :loading="loading"
+        @dataZoom="updateZoom"
+      ></chart>
     </va-card>
   </div>
 </template>
@@ -44,6 +51,7 @@ export default {
   },
   data () {
     return {
+      loading: false,
     }
   },
   computed: {
@@ -59,8 +67,8 @@ export default {
     updateZoom: function (e) {
       this.$emit('dataZoomEvent', e)
     },
-    mergeOptions (options) {
-      this.$refs.chart_ref.mergeOptions(options)
+    setOptions (options) {
+      this.$refs.chart_ref.setOption(options)
     },
     turnOnAxisEventHandler (eventName, query, handler, attr) {
       const chartID = 1
@@ -70,7 +78,7 @@ export default {
         status: 'on',
       })
       // doc: https://echarts.apache.org/zh/api.html#echartsInstance.on
-      this.$refs.chart_ref.chart._zr.on(eventName, query, handler)
+      this.$refs.chart_ref.chart.on(eventName, query, handler)
     },
     turnOffAxisEventHandler (eventName, handler, attr) {
       const chartID = 1
@@ -80,22 +88,42 @@ export default {
         status: 'off',
       })
       // doc: https://echarts.apache.org/zh/api.html#echartsInstance.off
-      this.$refs.chart_ref.chart._zr.off(eventName, handler)
+      this.$refs.chart_ref.chart.off(eventName, handler)
     },
     showLoading (options) {
-      this.$refs.chart_ref.showLoading(options)
+      this.loading = true
     },
     hideLoading () {
-      this.$refs.chart_ref.hideLoading()
+      this.loading = false
     },
     clear () {
       this.$refs.chart_ref.clear()
     },
-
+    updateBoundary (boundary) {
+      this.$emit('updateIntegralBoundary', boundary)
+    },
     ...mapMutations('replay', [types.chart.updateAxisEventHandler]),
   },
   async mounted () {
     this.resizeTimer = setInterval(this.resize, 1000)
+    // brush set at here won't work
+    /* this.data.brush = {
+      toolbox: ['rect', 'polygon', 'lineX', 'lineY', 'keep', 'clear'],
+      xAxisIndex: 0,
+      throttleType: 'debounce',
+      throttleDelay: 5,
+    } */
+    this.$refs.chart_ref.chart.on('brushSelected', (params) => {
+      if (params.batch[0].areas.length !== 0) {
+        var boundary = {
+          x_start: Number(params.batch[0].areas[0].coordRange[0][0].toFixed(4)),
+          x_end: Number(params.batch[0].areas[0].coordRange[0][1].toFixed(4)),
+          y_start: Number(params.batch[0].areas[0].coordRange[1][0].toFixed(4)),
+          y_end: Number(params.batch[0].areas[0].coordRange[1][1].toFixed(4)),
+        }
+        this.updateBoundary(boundary)
+      }
+    })
   },
   destroyed () {
     clearInterval(this.resizeTimer)

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

@@ -1,7 +1,15 @@
 <template>
   <div class="flex" :class="cardclass">
     <va-card :style="'height: 8vh;'">
-      <chart :ref="'chart_ref'" :style="'width: '+ cardwidth + '; height: ' + cardheight + ';'" :options="data" @dataZoom="updateZoom" :auto-resize="true"></chart>
+      <chart
+        :ref="'chart_ref'"
+        :style="'width: '+ cardwidth + '; height: ' + cardheight + ';'"
+        :option="data"
+        :auto-resize="true"
+        :loading="loading"
+        @dataZoom="updateZoom"
+      >
+      </chart>
     </va-card>
   </div>
 </template>
@@ -38,6 +46,7 @@ export default {
   },
   data () {
     return {
+      loading: false,
     }
   },
   computed: {
@@ -53,14 +62,14 @@ export default {
     updateZoom: function (e) {
       this.$emit('dataZoomEvent', e)
     },
-    mergeOptions (options) {
-      this.$refs.chart_ref.mergeOptions(options)
+    setOptions (options) {
+      this.$refs.chart_ref.setOption(options)
     },
     showLoading (options) {
-      this.$refs.chart_ref.showLoading(options)
+      this.loading = true
     },
     hideLoading () {
-      this.$refs.chart_ref.hideLoading()
+      this.loading = false
     },
     clear () {
       this.$refs.chart_ref.clear()

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,13 +48,22 @@
       <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"/>
         </div>
       </div>
-
+      <!-- <va-button @click="switchCollapse"></va-button>
+      <va-collapse class="mb-2" :isOpenDefault="false" v-model="innerCollapse">
+        <span slot="header">Specific Integral</span>
+        <div slot="body">
+          <div>
+            <specific-integral :ref="'specific_integral'" @setBrushBoundary="setBrushBoundary" />
+          </div>
+        </div>
+      </va-collapse> -->
+      <specific-integral :ref="'specific_integral'" @setBrushBoundary="setBrushBoundary" />
       <div class="flex-container mb-2">
         <div class="flex sm10 xl10 md10 xs10 px-0 py-0">
           <change-window-start-and-size :ref="'change_window_start_and_size'" @changeOverviewDataZoom="changeOverviewDataZoom"/>
@@ -77,6 +86,7 @@ import ChangeUnit from '@/components/analysis/replay/toolbox/ChangeUnit.vue'
 import ChangeScale from '@/components/analysis/replay/toolbox/ChangeScale.vue'
 import ChangeCycle from '@/components/analysis/replay/toolbox/ChangeCycle.vue'
 import AbsToggle from '@/components/analysis/replay/toolbox/AbsToggle.vue'
+import SpecificIntegral from '@/components/analysis/replay/toolbox/SpecificIntegral.vue'
 import DownloadFile from '@/components/analysis/replay/toolbox/DownloadFile.vue'
 import DeleteFile from '@/components/analysis/replay/toolbox/DeleteFile.vue'
 import EditFileName from '@/components/analysis/replay/toolbox/EditFileName.vue'
@@ -94,6 +104,7 @@ export default {
     ChangeScale,
     ChangeCycle,
     AbsToggle,
+    SpecificIntegral,
     DownloadFile,
     DeleteFile,
     EditFileName,
@@ -115,6 +126,7 @@ export default {
     return {
       deviceName: '',
       showCycle: false,
+      innerCollapse: false,
     }
   },
   mqtt: {
@@ -122,10 +134,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 +153,9 @@ export default {
     refreshChart (options) {
       this.$emit('refreshChart', options)
     },
+    changeFunctional (axis, functional) {
+      this.$emit('changeFunctional', axis, functional)
+    },
     changeAxis (gridIndex) {
       this.$emit('changeAxis', gridIndex)
     },
@@ -151,9 +166,28 @@ 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()
     },
+    setBrushBoundary (boundary) {
+      this.$emit('setBrushBoundary', boundary)
+    },
+    /* switchCollapse () {
+      this.innerCollapse = this.innerCollapse ? false : true
+      console.log(this.innerCollapse)
+    }, */
   },
   mounted () {
   },

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

@@ -70,7 +70,7 @@ export default {
     },
     performABS () {
       this.absToggleStatus[this.axis] = !this.absToggleStatus[this.axis]
-      if (this.deviceName === 'EliteZM15' || this.deviceName === 'EliteEIS') {
+      if (this.deviceName === 'EliteZM15' || this.deviceName.includes('Elite_EDC') || this.deviceName.includes('EIS')) {
         this.calculateHelper(this.metaIndex) // [TODO] elite tmp use metaIndex for grid index
       }
       this.clickTime++
@@ -93,7 +93,7 @@ export default {
           data: seriesData,
         })
       } else {
-        if (this.deviceName === 'EliteZM15' || this.deviceName === 'EliteEIS') {
+        if (this.deviceName === 'EliteZM15' || this.deviceName.includes('Elite_EDC') || this.deviceName.includes('EIS')) {
           this.$emit('changeAxis', this.metaIndex) // [TODO] elite tmp use metaIndex for grid index
         }
       }

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

@@ -84,7 +84,7 @@ export default {
         } else if (this.axis === 'y') {
           this.axisYDataType = this.channelOptions[1]
         }
-      } else if (this.deviceName === 'EliteZM15') {
+      } else if (this.deviceName === 'EliteZM15' || this.deviceName.includes('Elite_EDC')) {
         // use state meta to decide which default unit need to be used (like check I-V mode...)
         const setting = this.GLOBAL.getDefaultChartTypeByMode(this.metaList[this.metaIndex].parameter_set.MODE, this.deviceName)
         const xType = setting[0]
@@ -130,7 +130,7 @@ export default {
           }
           this.channelFormat = this.axisYDataType
         }
-      } else if (this.deviceName === 'EliteEIS') {
+      } else if (this.deviceName.includes('EIS')) {
         const setting = this.GLOBAL.getDefaultChartTypeByMode(this.metaList[this.metaIndex].parameter_set.MODE, this.deviceName)
         const xType = setting[0]
         const xValue = setting[1]
@@ -141,7 +141,7 @@ export default {
         if (this.axis === 'x') {
           settingType = xType
           settingValue = xValue
-          if (settingType === 'EliteEIS') {
+          if (settingType.includes('EIS')) {
             this.axisXDataType = this.eisChannelOptions.find(element => element.id === parseInt(settingValue) - 1)
           } else if (settingType === 'Elite') {
             // 1: I, 2: V, 3: R
@@ -159,7 +159,7 @@ export default {
         } else if (this.axis === 'y') {
           settingType = yType
           settingValue = yValue
-          if (settingType === 'EliteEIS') {
+          if (settingType.includes('EIS')) {
             this.axisYDataType = this.eisChannelOptions.find(element => element.id === parseInt(settingValue) - 1)
           } else if (settingType === 'Elite') {
             // 1: I, 2: V, 3: R
@@ -184,7 +184,7 @@ export default {
       if (this.deviceName.startsWith('Neulive')) {
         // for elite now, cuz neulive now only have v-t graph, for future neulive replay need to adjust'
         // console.log('(Last updated: 2021/06/19)')
-      } else if (this.deviceName === 'EliteZM15' || this.deviceName === 'EliteEIS') {
+      } else if (this.deviceName === 'EliteZM15' || this.deviceName.includes('Elite_EDC') || this.deviceName.includes('EIS')) {
         if (this.axis === 'x') {
           this.axisXDataType = this.channelFormat
         } else if (this.axis === 'y') {
@@ -200,6 +200,9 @@ export default {
         this.$emit('clearCycle')
       }
     },
+    getChannelByAxis () {
+      return this.channelFormat.description
+    },
   },
   mounted () {
   },

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

@@ -64,13 +64,13 @@ export default {
       }
     },
     showPanel (params) {
-      if (params.target !== undefined) {
-        if (params.target.eventData.componentType === 'xAxis' && params.target.eventData.targetType === 'axisLabel') {
-          this.gridIndex = params.target.eventData.xAxisIndex
+      if (params.targetType !== undefined) {
+        if (params.componentType === 'xAxis' && params.targetType === 'axisLabel') {
+          this.gridIndex = params.xAxisIndex
           this.axis = 'x'
           this.position = 'bottom'
-        } else if (params.target.eventData.componentType === 'yAxis' && params.target.eventData.targetType === 'axisLabel') {
-          this.gridIndex = params.target.eventData.yAxisIndex
+        } else if (params.componentType === 'yAxis' && params.targetType === 'axisLabel') {
+          this.gridIndex = params.yAxisIndex
           this.axis = 'y'
           this.position = 'left'
         }

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

@@ -1,3 +1,4 @@
+<!-- eslint-disable prefer-const -->
 <template>
   <div>
     <va-select
@@ -87,31 +88,116 @@ export default {
             this.calculateScaleHelper(gridIndex, ch)
           }
         }
-      } else if (this.deviceName === 'EliteZM15' || this.deviceName === 'EliteEIS') {
+      } else if (this.deviceName === 'EliteZM15' || this.deviceName.includes('Elite_EDC') || this.deviceName.includes('EIS')) {
         this.calculateScaleHelper(this.metaIndex, -1) // [TODO] elite tmp use metaIndex for grid index
       }
     },
     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

@@ -65,9 +65,9 @@ export default {
             return item.unit === 'uV'
           })
         }
-      } else if (this.deviceName === 'EliteZM15') {
+      } else if (this.deviceName === 'EliteZM15' || this.deviceName.includes('Elite_EDC')) {
         return this.valueFormatOptions[this.dataType][0]
-      } else if (this.deviceName === 'EliteEIS') {
+      } else if (this.deviceName.includes('EIS')) {
         return this.eisValueFormatOptions[this.dataType][0]
       }
     },
@@ -80,7 +80,7 @@ export default {
         } else if (this.axis === 'y') {
           this.dataType = 'voltage'
         }
-      } else if (this.deviceName === 'EliteZM15') {
+      } else if (this.deviceName === 'EliteZM15' || this.deviceName.includes('Elite_EDC')) {
         // use state meta to decide which default unit need to be used (like check I-V mode...)
         const setting = this.GLOBAL.getDefaultChartTypeByMode(this.metaList[this.metaIndex].parameter_set.MODE, this.deviceName)
         const xType = setting[0]
@@ -111,7 +111,7 @@ export default {
         } else if (settingType === 'Time') {
           this.dataType = 'time'
         }
-      } else if (this.deviceName === 'EliteEIS') {
+      } else if (this.deviceName.includes('EIS')) {
         const setting = this.GLOBAL.getDefaultChartTypeByMode(this.metaList[this.metaIndex].parameter_set.MODE, this.deviceName)
         const xType = setting[0]
         const xValue = setting[1]
@@ -127,7 +127,7 @@ export default {
           settingValue = yValue
         }
 
-        if (settingType === 'EliteEIS') {
+        if (settingType.includes('EIS')) {
           if (settingValue === 3) {
             this.dataType = 'frequency'
           } else if (settingValue === 5 || settingValue === 6 || settingValue === 7) {
@@ -179,7 +179,7 @@ export default {
             channel: parseInt(key),
           })
         }
-      } else if (this.deviceName === 'EliteZM15' || this.deviceName === 'EliteEIS') {
+      } else if (this.deviceName === 'EliteZM15' || this.deviceName.includes('Elite_EDC') || this.deviceName.includes('EIS')) {
         this.updateAxisLabelChart({
           chartID: chartID,
           axis: this.axis,
@@ -229,13 +229,20 @@ export default {
           this.dataType = 'default'
         }
       }
-      if (this.deviceName === 'EliteZM15') {
+      if (this.deviceName === 'EliteZM15' || this.deviceName.includes('Elite_EDC')) {
         this.valueFormat = this.valueFormatOptions[this.dataType][0]
-      } else if (this.deviceName === 'EliteEIS') {
+      } else if (this.deviceName.includes('EIS')) {
         this.valueFormat = this.eisValueFormatOptions[this.dataType][0]
       }
       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/analysis/replay/toolbox/ShowParameter.vue

@@ -378,7 +378,7 @@ export default {
           this.content += '    Frequency: ' + String(1000 / period) + ' Hz' + '<br/>' // 1000 is cuz 1s = 1000ms
           this.content += '    Period: ' + String(period) + ' ms' + '<br/>'
         }
-      } else if (this.deviceName === 'EliteZM15' || this.deviceName === 'EliteEIS') {
+      } else if (this.deviceName === 'EliteZM15' || this.deviceName.includes('Elite_EDC') || this.deviceName.includes('EIS')) {
         const mode = this.mode = params.MODE
         const config = paramTable.getConfig(this.deviceName)
         const modeConfig = paramTable.getModeConfig(this.deviceName, mode)

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

@@ -0,0 +1,171 @@
+<template>
+  <div>
+    <div class="flex-container mb-2">
+      <va-input
+        v-model="this.specificIntegral"
+        :label="$t('Specific Integral')"
+      />
+      <div class="flex sm5 xl5 md5 xs5 px-0 py-0">
+        <va-button
+          v-if="!keyBoundary"
+          v-model="this.keyBoundary"
+          @click="switchBoundary()"
+          class="round-button px-1 py-1"
+        >
+          Draw
+        </va-button>
+        <va-button
+          v-if="keyBoundary"
+          v-model="this.keyBoundary"
+          @click="switchBoundary()"
+          class="round-button px-1 py-1"
+        >
+          Input
+        </va-button>
+      </div>
+    </div>
+
+    <div v-if="!keyBoundary">
+      <div class="flex-container mb-2">
+        <div class="flex sm2 xl2 md2 xs2 px-0 py-0" />
+        <va-input
+          v-model="this.boundary.x_start"
+          :label="$t('X Start')"
+        />
+        <va-input
+          v-model="this.boundary.x_end"
+          :label="$t('X End')"
+        />
+      </div>
+      <div class="flex-container mb-2">
+        <div class="flex sm2 xl2 md2 xs2 px-0 py-0" />
+        <va-input
+          v-model="this.boundary.y_start"
+          :label="$t('Y Start')"
+        />
+        <va-input
+          v-model="this.boundary.y_end"
+          :label="$t('Y End')"
+        />
+      </div>
+      <div class="flex-container mb-2">
+        <div class="flex sm2 xl2 md2 xs2 px-0 py-0" />
+        <va-button class="mb-2" @click="setBrushBoundary" small>
+          Set Integral Boundary
+        </va-button>
+      </div>
+    </div>
+
+    <div v-if="keyBoundary">
+      <div class="flex-container mb-2">
+        <div class="flex sm2 xl2 md2 xs2 px-0 py-0" />
+        <va-input
+          @keyup.enter="setBrushBoundary()"
+          @blur="setBrushBoundary()"
+          v-model="boundaryXstart"
+          :label="$t('X Start')"
+        />
+        <va-input
+          @keyup.enter="setBrushBoundary()"
+          @blur="setBrushBoundary()"
+          v-model="boundaryXend"
+          :label="$t('X End')"
+        />
+      </div>
+      <div class="flex-container mb-2">
+        <div class="flex sm2 xl2 md2 xs2 px-0 py-0" />
+        <va-input
+          @keyup.enter="setBrushBoundary()"
+          @blur="setBrushBoundary()"
+          v-model="boundaryYstart"
+          :label="$t('Y Start')"
+        />
+        <va-input
+          @keyup.enter="setBrushBoundary()"
+          @blur="setBrushBoundary()"
+          v-model="boundaryYend"
+          :label="$t('Y End')"
+        />
+      </div>
+      <div class="flex-container mb-2">
+        <div class="flex sm2 xl2 md2 xs2 px-0 py-0" />
+        <va-button class="mb-2" @click="setBrushBoundary" small>
+          Set Integral Boundary
+        </va-button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'SpecificIntegral',
+  components: {
+  },
+  computed: {
+    displayType () {
+      return {
+        x: this.axisXLabelScale.description === 'Log' ? 'log' : 'value',
+        y: this.axisYLabelScale.description === 'Log' ? 'log' : 'value',
+      }
+    },
+  },
+  props: {
+  },
+  created () {
+  },
+  data () {
+    return {
+      specificIntegral: 0,
+      boundary: {},
+      boundaryXstart: 0,
+      boundaryXend: 0,
+      boundaryYstart: 0,
+      boundaryYend: 0,
+      keyBoundary: false,
+    }
+  },
+  mqtt: {
+  },
+  methods: {
+    getSpecificIntegral (specificIntegral, boundary) {
+      this.specificIntegral = specificIntegral
+      this.specificIntegral = (this.specificIntegral * 1e-12).toFixed(4) + 'mW'
+      // this.specificIntegral = (this.specificIntegral * 1e-15).toFixed(4) + 'W'
+      if (!this.keyBoundary) {
+        this.boundary = boundary
+      }
+    },
+    switchBoundary () {
+      this.keyBoundary = !this.keyBoundary
+      // if (this.boundary !== {})
+      this.boundaryXstart = this.boundary.x_start
+      this.boundaryXend = this.boundary.x_end
+      this.boundaryYstart = this.boundary.y_start
+      this.boundaryYend = this.boundary.y_end
+    },
+    setBrushBoundary () {
+      var boundary = {
+        x_start: Number(this.boundaryXstart),
+        x_end: Number(this.boundaryXend),
+        y_start: Number(this.boundaryYstart),
+        y_end: Number(this.boundaryYend),
+      }
+      this.$emit('setBrushBoundary', boundary)
+    },
+  },
+  async mounted () {
+  },
+  destroyed () {
+  },
+  watch: {
+  },
+}
+</script>
+
+<style lang="scss">
+  /* .round-button {
+    border-radius: 12px;
+  } */
+</style>

src/components/dashboard/test.vue

@@ -0,0 +1,60 @@
+<template>
+  <div>
+    <p>aaa</p>
+    <chart class="chart" :option="option" />
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      option: {
+        title: {
+          text: 'Traffic Sources',
+          left: 'center',
+        },
+        tooltip: {
+          trigger: 'item',
+          formatter: '{a} <br/>{b} : {c} ({d}%)',
+        },
+        legend: {
+          orient: 'vertical',
+          left: 'left',
+          data: ['Direct', 'Email', 'Ad Networks', 'Video Ads', 'Search Engines'],
+        },
+        series: [
+          {
+            name: 'Traffic Sources',
+            type: 'pie',
+            radius: '55%',
+            center: ['50%', '60%'],
+            data: [
+              { value: 335, name: 'Direct' },
+              { value: 310, name: 'Email' },
+              { value: 234, name: 'Ad Networks' },
+              { value: 135, name: 'Video Ads' },
+              { value: 1548, name: 'Search Engines' },
+            ],
+            emphasis: {
+              itemStyle: {
+                shadowBlur: 10,
+                shadowOffsetX: 0,
+                shadowColor: 'rgba(0, 0, 0, 0.5)',
+              },
+            },
+          },
+        ],
+        brush: {
+        },
+      },
+    }
+  },
+}
+</script>
+
+<style>
+.chart {
+  height: 100vh;
+}
+</style>

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

@@ -9,7 +9,7 @@
       <device-parameter-recording
         :ref="'device_parameter_ref'"
         :parameter="parameter"
-        :library="'EliteEDC1.5'"
+        :library="'Elite_EDC_1.5'"
         @setParameter="setParameter"
         @setParameterWithDebounce="setParameterWithDebounce"
       />

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

@@ -36,13 +36,13 @@
                 {{ task.name }}
               </td>
               <td align="center">
-                <va-button :flat="true" @click="openConfig(1, taskIndex)" small>Device</va-button>
+                <va-button :flat="true" @click="openConfig(1, taskIndex)" small>Add device</va-button>
               </td>
               <td align="center">
                 <va-button :flat="true" @click="openConfig(3, taskIndex)" small>Add event</va-button>
               </td>
               <td align="center">
-                <va-button :flat="true" @click="openConfig(4, taskIndex)" small>ParameterSet</va-button>
+                <va-button :flat="true" @click="openConfig(4, taskIndex)" small>Add parameter</va-button>
               </td>
               <td align="center">
                 <va-icon class="fa fa-close" @click.native="() => deleteTask({ index: taskIndex})"></va-icon>
@@ -71,28 +71,50 @@
                   {{ task.name }}
                 </div>
               </td>
-              <td align="center" @click="openConfig(1, taskIndex, deviceUUID)">
-                <div >
-                  <span>{{ getDeviceProject(deviceUUID) && getDeviceProject(deviceUUID).name }}</span>
+              <!-- device -->
+              <td align="center">
+                <div>
+                  <va-button :flat="true" @click="openConfig(1, taskIndex, deviceUUID)">
+                    <span>{{ getDeviceProject(deviceUUID) && getDeviceProject(deviceUUID).name }}</span>
+                  </va-button>
                 </div>
               </td>
-              <td align="center" @click="openConfig(3, taskIndex, deviceUUID)">
-                <div class="flex">
+              <!-- device end -->
+              <!-- action -->
+              <td align="center">
+                <div v-if="Object.keys(task.action).length === 0">
+                  <va-button :flat="true" @click="openConfig(3, taskIndex, deviceUUID)">
+                    Add event
+                  </va-button>
+                </div>
+                <div v-else class="flex">
                   <div v-for="(action, actionKey) in task.action" :key="actionKey">
                     <div v-if="action.target === deviceUUID">
                       <div v-for="conditionKey in action.condition" :key="conditionKey">
-                        {{ action.type }} {{ task.condition[conditionKey].type }} {{ task.condition[conditionKey].value }}
+                        <va-button :flat="true" @click="openConfig(3, taskIndex, deviceUUID)">
+                          {{ action.type }} {{ task.condition[conditionKey].type }} {{ task.condition[conditionKey].value }}
+                        </va-button>
                       </div>
                     </div>
                   </div>
                 </div>
               </td>
-              <td align="center" @click="openConfig(4, taskIndex, deviceUUID)">
-                <div class="flex d-flex">
+              <!-- action end -->
+              <td align="center">
+                <div v-if="Object.keys(task.parameter_set).length === 0">
+                  <va-button :flat="true" @click="openConfig(4, taskIndex, deviceUUID)">
+                    Add parameter
+                  </va-button>
+                </div>
+                <div v-else class="flex d-flex">
                   <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'"> {{ parameterName(parameterKey) }} : {{ parameterValue(parameterKey, parameter) }} </span>
+                        <span v-if="parameterKey !== 'target'">
+                          <va-button :flat="true" @click="openConfig(4, taskIndex, deviceUUID)">
+                            {{ parameterName(parameterKey) }} : {{ parameterValue(parameterKey, parameter) }}
+                          </va-button>
+                        </span>
                       </div>
                     </div>
                   </div>

src/components/task/content/TaskContent.vue

@@ -159,7 +159,7 @@ export default {
       if (this.$refs.devices_ref != null) {
         await this.$refs.devices_ref.loadingDone()
       }
-      await this.taskContentChartInitCustomizedFromCache()
+      await this.taskContentChartInitCustomizedFromCache({ controllerID: taskInfo.getTaskInfo().controllerID })
       this.getParmDone = true
     },
     async '+/get_device_info/+' (data, topic) {
@@ -200,7 +200,7 @@ export default {
       await taskInfo.deviceInfo(String.fromCharCode.apply(null, data), this.deviceList)
       if (this.$refs.devices_ref != null) {
         await this.$refs.devices_ref.loadingDone()
-        await this.taskContentChartInitCustomizedFromCache()
+        await this.taskContentChartInitCustomizedFromCache({ controllerID: taskInfo.getTaskInfo().controllerID })
       }
     },
     // listen datastream [ topic: controllerID/data_server/device_data_stream/deviceID/channel ]
@@ -365,7 +365,7 @@ export default {
           continue
         }
         // device is running refresh chart
-        if (device.status === 1) {
+        if (device.status === 1 && this.chartData[chart].captured !== true) {
           this.taskContentChartRefreshData({
             chartID: chart,
             deviceList: this.deviceListNew,
@@ -404,7 +404,7 @@ export default {
       this.taskContentChartRefreshPanel()
       // save chart config to web storage
       if (!isDefault) {
-        await this.taskContentChartSaveToCache()
+        await this.taskContentChartSaveToCache({ controllerID: taskInfo.getTaskInfo().controllerID })
       }
       this.pageToast('The chart has been added.')
 
@@ -458,7 +458,7 @@ export default {
         }
       }
       if (saveCache === true) {
-        await this.taskContentChartSaveToCache()
+        await this.taskContentChartSaveToCache({ controllerID: taskInfo.getTaskInfo().controllerID })
       }
       this.pageToast('The chart has been removed.')
     },
@@ -616,7 +616,7 @@ export default {
     this.pageMqttSub(taskInfo.getTaskInfo().controllerID)
     await this.pageInit()
 
-    this.dataRefreshTimer = setInterval(this.refreshData, 100)
+    this.dataRefreshTimer = setInterval(this.refreshData, 1000)
   },
   destroyed () {
     taskInfo.destroyed(this.deviceList)

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

@@ -14,33 +14,14 @@
               />
             </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
+          <div class="flex xl10">
+            <canvas-chart-real-time-calculation :chartID="chartID" @refreshData="refreshData" @switchModeButton="switchModeButton" @getClicked="getClicked" ref="'cal_ref'" />
+          </div>
+          <div class="flex xl2">
+            <va-button :disabled="calClicked" color="#f5aa3b" @click="captureChart" small>
+              CAPTURE
             </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>
         </div>
       </template>
       <va-tabs v-model="tabValue" class="mb-3" style="width: 100%; min-width: 100px;">
@@ -57,7 +38,7 @@
             :chartID="chartID" ref="CanvasChartRealTimeDisplay"
           />
           <!-- chart -->
-          <chart :key="taskContentChartKey" :ref="'chart_ref'" :style="'width: '+ cardwidth + '; height: ' + cardheight + ';'" :options="data" :auto-resize="true"></chart>
+          <chart :key="taskContentChartKey" :ref="'chart_ref'" :style="'width: '+ cardwidth + '; height: ' + cardheight + ';'" :option="data" @dataZoom="updateZoom" :auto-resize="true"></chart>
         </div>
       </div>
       <div v-else-if="tabValue == 1" :style="'width: '+ cardwidth + '; height: ' + cardheight + ';'" >
@@ -141,9 +122,6 @@ 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 {
@@ -184,11 +162,13 @@ export default {
       'chartData',
       'taskContentChartKey',
       'deviceListNew',
+      'taskContentChartPanelKey',
     ]),
   },
   data () {
     return {
       data: null,
+      rawData: null,
       tabValue: 0,
       resizeTimer: null,
       mappingSelect: '',
@@ -199,9 +179,35 @@ export default {
       threeAxisIntervalInput: 'auto',
       xIntervalInput: 'auto',
       yIntervalInput: 'auto',
+      dataZoomStart: 0,
+      dataZoomEnd: 100,
+      captured: false,
+      calClicked: false,
     }
   },
   methods: {
+    getClicked: function (clicked) {
+      this.calClicked = clicked
+    },
+    captureChart: function () {
+      const newData = Object.assign({}, this.data)
+      this.chartData[String(newData.chartID) + '-1'] = newData
+      this.chartData[String(newData.chartID) + '-1'].captured = true
+      this.chartData[String(newData.chartID) + '-1'].cardName = this.chartData[String(newData.chartID) + '-1'].cardName + ' - captured'
+      this.chartData[String(newData.chartID) + '-1'].chartID = String(newData.chartID) + '-1'
+      this.taskContentChartPanelKey++
+      // console.log(this.chartData[String(newData.chartID) + '-1'])
+    },
+    updateZoom: function (e) {
+      // console.log(e)
+      if (e.batch !== undefined && e.dataZoomId !== '\u0000series\u00002\u00000') {
+        this.dataZoomStart = e.batch[0].start
+        this.dataZoomEnd = e.batch[0].end
+      } else if (e.dataZoomId !== '\u0000series\u00002\u00000') {
+        this.dataZoomStart = e.start
+        this.dataZoomEnd = e.end
+      }
+    },
     timeIntervalChange: function (val) {
       if (!isNaN(parseInt(val))) {
         this.chartData[this.chartID].xAxis.forEach(x => {
@@ -233,7 +239,7 @@ export default {
           }
         })
       }
-      await this.taskContentChartSaveToCache()
+      await this.taskContentChartSaveToCache({ controllerID: taskInfo.getTaskInfo().controllerID })
     },
     yIntervalChange: async function (val) {
       if (!isNaN(parseInt(val))) {
@@ -251,26 +257,26 @@ export default {
               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
+            // 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'
+            // y.interval = null
+            // y.max = 'dataMax'
+            // y.min = 'dataMin'
           }
         })
       }
-      await this.taskContentChartSaveToCache()
+      await this.taskContentChartSaveToCache({ controllerID: taskInfo.getTaskInfo().controllerID })
     },
     threeAxisIntervalChange: function (val) {
       if (!isNaN(parseInt(val))) {
@@ -316,6 +322,7 @@ export default {
       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) {
+            // console.log('item.name: ', item.name)
             this.setChartName(item.name)
           }
         })
@@ -360,8 +367,15 @@ export default {
         type: 'legendInverseSelect',
       })
     },
-    refreshData: function (rawData) {
-      this.data = rawData
+    refreshData: function (chartData, rawData) {
+      this.data = chartData
+      this.rawData = 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.data.dataZoom[1].start = this.data.dataZoom[0].start
+      this.data.dataZoom[1].end = this.data.dataZoom[0].end
+      // console.log(this.data.dataZoom)
       this.$refs.CanvasChartRealTimeDisplay.matchData(this.data)
     },
     switchModeButton: function (dataMode, gridIndex, channelIndex) {
@@ -375,6 +389,8 @@ export default {
   async mounted () {
     this.data = this.chartData[this.chartID]
     // this.data = this.chartData[this.chartID]
+    // this.data.xAxis[0].boundaryGap = [0, '5%']
+    // this.data.yAxis[0].boundaryGap = ['10%', '10%']
     this.resizeTimer = setInterval(this.resize, 1000)
     this.nameCard = this.chartData[this.chartID].cardName
     await this.refreshMappingSelect()

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

@@ -1,29 +1,41 @@
 <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 class="row xs12 sm12 lg10 xl10 pa-2">
+      <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>
+    <div class="row xs12 sm12 lg6 xl6 pa-2" v-if="diffClicked">
+      <div>
+        <span>Window-size: </span>
+        <input class="mx-2" size="5" v-model="sgFilterArgument.windowSize" @blur="watchHandler"/>
+      </div>
+      <div>
+        <span>Polynomial: </span>
+        <input class="mx-2" size="5" v-model="sgFilterArgument.polynomial" @blur="watchHandler"/>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -38,6 +50,7 @@ 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'
+import sgFilter from '@/data/SGFilter'
 
 export default {
   name: 'CanvasChartRealTimeCalculation',
@@ -74,6 +87,11 @@ export default {
       diffClicked: false,
       disableDiff: false,
       disableLog: false,
+      disableInt: false,
+      sgFilterArgument: {
+        windowSize: 5,
+        polynomial: 3,
+      },
     }
   },
   // watch rawData is use for detect whether the chartData is changed
@@ -97,12 +115,13 @@ export default {
       this.addSource()
       var curXData = 0
       var curYData = 0
-      var prevXData = 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
+      // var diffResult = 0
       var index = 0
       var timeIndex = this.getTimeIndex()
       var _data = []
@@ -110,19 +129,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) {
@@ -131,7 +164,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])
@@ -139,7 +172,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])
               }
@@ -150,7 +183,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])
@@ -158,7 +191,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])
               }
@@ -169,7 +202,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])
@@ -177,7 +210,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])
               }
@@ -185,32 +218,74 @@ export default {
           }
         }
       } else if (this.diffClicked) {
+        const dataX = []
+        const dataY = []
+        const time = []
         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([curTime, diffResult, curTime])
-          }
+          dataX.push(seriesData[index][0])
+          dataY.push(seriesData[index][1])
+          time.push(seriesData[index][2])
         }
+        // console.log('dataX', dataX)
+        // console.log('dataY', dataY)
+        // console.log('time', time)
+        const filteredData = sgFilter(dataY, this.sgFilterArgument.windowSize, this.sgFilterArgument.polynomial)
+        // console.log('filterdData', filteredData)
+
+        for (index = 0; index < dataLength; index++) {
+          _data.push([dataX[index], filteredData[index], time[index]])
+        }
+
+        // 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
+      const dataRaw = this.data.series[0].data
       if (this.integralClicked || this.xlogClicked || this.ylogClicked || this.diffClicked) {
-        // console.log(_data)
         this.data.series[0].data = _data
+        this.$emit('getClicked', true)
+        // console.log(this.data.series[0].data[this.data.series[0].data.length - 1])
+      } else {
+        this.$emit('getClicked', false)
       }
       this.data.xAxis[0].type = 'value'
+      if (this.xName !== 'TIME') {
+        // console.log('not time')
+        this.data.xAxis[0].max = (value) => {
+          if (value.max < 0) {
+            return value.max - 0.1 * value.max
+          }
+          if (value.max + 0.1 * value.max > 5e6) {
+            return 5e6
+          }
+          return value.max + 0.1 * value.max
+        }
+
+        this.data.yAxis[0].max = (value) => {
+          if (value.max < 0) {
+            return value.max - 0.1 * value.max
+          }
+          return value.max + 0.1 * value.max
+        }
+      }
       if (this.integralClicked) {
         this.$emit('switchModeButton', 'integral', 0, 0)
       } else if (this.diffClicked) {
@@ -224,21 +299,17 @@ export default {
           return getTimeFormatter(val)
         }
       }
-      this.$emit('refreshData', this.data)
+      // this.data.yAxis[0].boundaryGap = [String(this.yBottomBoundary) + '%', '10%']
+      // console.log(this.data.yAxis[0].boundaryGap)
+      this.$emit('refreshData', this.data, dataRaw)
     },
-    // 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) {
+        if (device.status === 0 || device.status === 1) {
           this.watchHandler()
         }
       }
@@ -248,16 +319,19 @@ 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) {
-        if (device.status === 0) {
+        if (device.status === 0 || device.status === 1) {
           this.watchHandler()
         }
       }
@@ -267,16 +341,19 @@ 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) {
-        if (device.status === 0) {
+        if (device.status === 0 || device.status === 1) {
           this.watchHandler()
         }
       }
@@ -284,9 +361,10 @@ 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) {
+        if (device.status === 0 || device.status === 1) {
           this.watchHandler()
         }
       }
@@ -329,6 +407,14 @@ export default {
   },
   async mounted () {
     this.rawData = this.chartData[this.chartID]
+    // console.log('x', this.rawData.xAxis.length)
+    // if (this.mode_name === 'I-V Curve') {
+    //   this.rawData.xAxis[0].boundaryGap = [0, '5%']
+    //   this.rawData.yAxis[0].boundaryGap = [0, '10%']
+    // } else {
+    //   this.rawData.xAxis[0].boundaryGap = [0, '5%']
+    //   this.rawData.yAxis[0].boundaryGap = ['10%', '10%']
+    // }
   },
 }
 

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

@@ -183,7 +183,7 @@ export default {
         this.channelSelectDisableX = false
       } else if (deviceInfo.library_name.includes('Elite')) {
         let channelSet
-        if (deviceInfo.library_name === 'EliteEIS' && deviceInfo.configuration.MODE === 0) {
+        if (deviceInfo.library_name.includes('EIS') && deviceInfo.configuration.MODE === 0) {
           channelSet = ['Zimag_Raw', 'Zreal_Raw', 'Frequency', 'Cycle', 'Zimag', 'Zreal', 'Impedance', 'Phase', 'Current', 'Level gain']
         } else {
           channelSet = deviceInfo.configuration.CHANNEL_LABEL
@@ -251,7 +251,7 @@ export default {
         this.channelSelectDisableY = false
       } else if (deviceInfo.library_name.indexOf('Elite') >= 0) {
         let channelSet
-        if (deviceInfo.library_name === 'EliteEIS' && deviceInfo.configuration.MODE === 0) {
+        if (deviceInfo.library_name.includes('EIS') && deviceInfo.configuration.MODE === 0) {
           channelSet = ['Zimag_Raw', 'Zreal_Raw', 'Frequency', 'Cycle', 'Zimag', 'Zreal', 'Impedance', 'Phase', 'Current', 'Level gain']
         } else {
           channelSet = deviceInfo.configuration.CHANNEL_LABEL
@@ -310,7 +310,7 @@ export default {
       if (this.deviceSelectX.name.indexOf('Neulive') >= 0) {
         deviceNameX = 'Neulive'
       } else if (this.deviceSelectX.name.indexOf('Elite') >= 0) {
-        if (deviceXInfo.library_name === 'EliteEIS') {
+        if (deviceXInfo.library_name.includes('EIS')) {
           deviceNameX = 'EliteEIS'
         } else {
           deviceNameX = 'Elite'
@@ -321,7 +321,7 @@ export default {
       if (this.deviceSelectY.name.indexOf('Neulive') >= 0) {
         deviceNameY = 'Neulive'
       } else if (this.deviceSelectY.name.indexOf('Elite') >= 0) {
-        if (deviceYInfo.library_name === 'EliteEIS') {
+        if (deviceYInfo.library_name.includes('EIS')) {
           deviceNameY = 'EliteEIS'
         } else {
           deviceNameY = 'Elite'
@@ -350,7 +350,7 @@ export default {
       }
       this.sourceAddStatus = true
       this.clearSelectOptions()
-      await this.taskContentChartSaveToCache()
+      await this.taskContentChartSaveToCache({ controllerID: taskInfo.getTaskInfo().controllerID })
       this.$emit('addSource')
     },
     async addGrid () {
@@ -359,7 +359,7 @@ export default {
         length: this.chartData[this.chartID].grid.length + 1,
       })
       this.updateGridOptions()
-      await this.taskContentChartSaveToCache()
+      await this.taskContentChartSaveToCache({ controllerID: taskInfo.getTaskInfo().controllerID })
     },
     checkSourceAddStatus () {
       if (this.sourceList.indexOf([this.deviceSelectX.name, this.deviceSelectX.id, this.channelSelectX.id].toString()) >= 0) {

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

@@ -41,11 +41,13 @@
           </va-item>
         </span>
         <div slot="body">
-          <div>
-            <file-control-window :ref="'fcwindow_ref'" :device="device" class="pl-0 pr-0" />
-          </div>
-          <div>
-            <device-parameter-window :ref="'epwindow_ref'" :device="device" class="pl-0 pr-0" />
+          <div class="mt-0 mb-0" style="height: 60vh; overflow-y: scroll; overflow-x: hidden;" :key="'detail' + device.id">
+            <div>
+              <file-control-window :ref="`fcwindow_ref_${device.memory_board}`" :device="device" class="pl-0 pr-0" />
+            </div>
+            <div>
+              <device-parameter-window :device="device" class="pl-0 pr-0" />
+            </div>
           </div>
         </div>
       </va-collapse>
@@ -93,7 +95,7 @@ export default {
     },
     start: async function (device) {
       if (device.status === 0) {
-        await this.setArchiveSettings()
+        await this.setArchiveSettings(device.memory_board)
 
         const isDPVMode = device.configuration.MODE === 15
         if (isDPVMode) {
@@ -130,8 +132,8 @@ export default {
       this.$emit('stop', device)
       this.pageToast('The device ' + device.name + ' has been stopped.')
     },
-    setArchiveSettings: async function () {
-      await this.$refs.fcwindow_ref[0].setArchiveSettings()
+    setArchiveSettings: async function (deviceID) {
+      await this.$refs[`fcwindow_ref_${deviceID}`][0].setArchiveSettings()
     },
     refresh: function () {
     },

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

@@ -93,7 +93,7 @@
     <!-- guide picture button -->
     <div>
       <vue-final-modal
-        v-if="library.includes('ZM15')"
+        v-if="library.includes('Elite_EDC')"
         v-model="showModal"
         classes="modal-container"
         content-class="modal-content"
@@ -150,7 +150,7 @@ export default {
       type: String,
     },
     serialNumber: {
-      type: String,
+      type: [String, Array],
     },
     device: {
       type: Object,

src/data/SGFilter.js

@@ -0,0 +1,128 @@
+import { matrix, inv, multiply, transpose, row, range } from 'mathjs'
+
+// eslint-disable-next-line no-unused-vars
+function sgFilter (data, windowSize, k) {
+  // self
+  const arr = []
+  const m = parseInt((windowSize - 1) / 2)
+  console.log('m', m)
+  for (const i of range(0, windowSize)) {
+    console.log('windowSize', i)
+    const a = []
+    for (const j of range(0, k)) {
+      console.log('k', j)
+      const yVal = Math.pow(-m + i.value, j.value)
+      a.push(yVal)
+    }
+    arr.push(a)
+  }
+
+  console.log(arr)
+  const X = matrix(arr)
+  console.log(X, transpose(X), multiply(transpose(X), X))
+  const B = multiply(multiply(X, inv(multiply(transpose(X), X))), transpose(X))
+  // B = X * (X.T * X).I * X.T
+  console.log('B', B)
+  const a = row(B, m)._data[0]
+  console.log(a)
+  // a = a.reshape(windowSize)
+  // for (const )
+  const start = []
+  const end = []
+  const list = []
+
+  for (const i of range(0, m)) {
+    console.log('i', i)
+    start.push(data[0])
+    end.push(data[data.length - 1])
+  }
+  console.log('start, end', start, end)
+  const _data = [...start, ...data, ...end]
+
+  console.log('m,', m, _data.length)
+  for (const i of range(m, _data.length - m)) {
+    const arra = []
+    for (const j of range(-m, m + 1)) {
+      arra.push(_data[i.value + j.value])
+    }
+    console.log('arr', arra)
+
+    let sum = 0
+    console.log('aaa', arra, a)
+    for (const index in arra) {
+      console.log('index', index)
+
+      sum += (arra[index] * a[index])
+    }
+
+    // const b = np.sum(np.array(arra) * a)
+
+    list.push(sum)
+  }
+  return list
+
+  // data = np.insert(data, 0, [data[0] for i in range(m)])
+  // data = np.append(data, [data[-1] for i in range(m)])
+  // list = []
+  // for i in range(m, data.shape[0] - m){
+  //     arra = []
+  //     for j in range(-m, m+1)
+  //         arra.append(data[i +j])
+  //     b = np.sum(np.array(arra) * a)
+
+  //     list.append(b)
+  // }
+  // return list
+}
+
+function sgFilterGetDifferential (data, windowSize, polynomial) {
+  // self
+  const arr = []
+  const m = parseInt((windowSize - 1) / 2)
+
+  //  create polynomial matrix
+  for (const i of range(0, windowSize)) {
+    const a = []
+    for (const j of range(0, polynomial)) {
+      const yVal = Math.pow(-m + i.value, j.value)
+      a.push(yVal)
+    }
+    arr.push(a)
+  }
+
+  const X = matrix(arr)
+  // B = (X.T * X).I * X.T
+  const B = multiply(inv(multiply(transpose(X), X)), transpose(X))
+  // use index 1 row in matrix
+  const rowOneInB = row(B, 1)._data[0]
+
+  const start = []
+  const end = []
+  const list = []
+
+  // eslint-disable-next-line no-unused-vars
+  for (const _ of range(0, m)) {
+    start.push(data[0])
+    end.push(data[data.length - 1])
+  }
+  const _data = [...start, ...data, ...end]
+
+  // m ... data_length - m - 1
+  for (const i of range(m, _data.length - m)) {
+    const arra = []
+    // -m ... 0 ... m
+    for (const j of range(-m, m + 1)) {
+      arra.push(_data[i.value + j.value])
+    }
+
+    let sum = 0
+    for (const index in arra) {
+      sum += (arra[index] * rowOneInB[index])
+    }
+
+    list.push(sum)
+  }
+  return list
+}
+
+export default sgFilterGetDifferential

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

@@ -1,8 +1,8 @@
 export default {
-  name: 'Chronoamperometric',
+  name: 'Chronoamperometry',
   parameter: ['VOLT_VSCAN', 'SAMPLE_RATE', 'ADC_LEVEL_I_15', 'ADC_LEVEL_V_IN_15', 'CTRL_HIGH_Z_15', 'TIME_DURATION'], // 這個mode用到的參數
-  showParameter: ['ADC_LEVEL_I_15', 'ADC_LEVEL_V_IN_15', 'CTRL_HIGH_Z_15', 'VOLT_VSCAN', 'SAMPLE_RATE'], // 有要秀給user看的參數
-  headerParameter: () => ['VOLT_VSCAN', 'SAMPLE_RATE', 'ADC_LEVEL_I_15', 'ADC_LEVEL_V_IN_15'], // 有要秀給user看的參數
+  showParameter: ['ADC_LEVEL_I_15', 'ADC_LEVEL_V_IN_15', 'CTRL_HIGH_Z_15', 'VOLT_VSCAN', 'SAMPLE_RATE', 'TIME_DURATION'], // 有要秀給user看的參數
+  headerParameter: () => ['VOLT_VSCAN', 'SAMPLE_RATE', 'ADC_LEVEL_I_15', 'ADC_LEVEL_V_IN_15', 'TIME_DURATION'], // 有要秀給user看的參數
   valScales: {
     linear: {
       func: (val) => {

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

@@ -1,8 +1,8 @@
 export default {
   name: 'Chronopotentiometry',
   parameter: ['Charge', 'Const_Current_value', 'SAMPLE_RATE', 'VOLTSTOP_MAX', 'VOLTSTOP_MIN', 'CC_CP_SPEED', 'ADC_LEVEL_I_15', 'ADC_LEVEL_V_IN_15', 'TIME_DURATION'], // 這個mode用到的參數
-  showParameter: ['ADC_LEVEL_I_15', 'ADC_LEVEL_V_IN_15', 'CTRL_HIGH_Z_15', 'SAMPLE_RATE', 'Charge', 'Const_Current_value', 'VOLTSTOP_MAX', 'VOLTSTOP_MIN'], // 有要秀給user看的參數
-  headerParameter: () => ['Charge', 'Const_Current_value', 'SAMPLE_RATE', 'VOLTSTOP_MAX', 'VOLTSTOP_MIN', 'CC_CP_SPEED', 'ADC_LEVEL_I_15', 'ADC_LEVEL_V_IN_15'], // 有要秀給user看的參數
+  showParameter: ['ADC_LEVEL_I_15', 'ADC_LEVEL_V_IN_15', 'CTRL_HIGH_Z_15', 'SAMPLE_RATE', 'Charge', 'Const_Current_value', 'VOLTSTOP_MAX', 'VOLTSTOP_MIN', 'TIME_DURATION'], // 有要秀給user看的參數
+  headerParameter: () => ['Charge', 'Const_Current_value', 'SAMPLE_RATE', 'VOLTSTOP_MAX', 'VOLTSTOP_MIN', 'CC_CP_SPEED', 'ADC_LEVEL_I_15', 'ADC_LEVEL_V_IN_15', 'TIME_DURATION'], // 有要秀給user看的參數
   valScales: {
     linear: {
       func: (val) => {
@@ -56,6 +56,7 @@ export default {
         V: 1e6,
       },
       defaultUnit: 'mV',
+      downloadUnit: 'mV',
     },
   },
   charts: {

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

@@ -1,8 +1,8 @@
 export default {
   name: 'Constant Current',
   parameter: ['Charge', 'Const_Current_value', 'SAMPLE_RATE', 'VOLTSTOP_MAX', 'VOLTSTOP_MIN', 'CC_CP_SPEED', 'ADC_LEVEL_I_15', 'ADC_LEVEL_V_IN_15', 'TIME_DURATION'], // 這個mode用到的參數
-  showParameter: ['ADC_LEVEL_I_15', 'ADC_LEVEL_V_IN_15', 'CTRL_HIGH_Z_15', 'SAMPLE_RATE', 'Charge', 'Const_Current_value', 'VOLTSTOP_MAX', 'VOLTSTOP_MIN'], // 有要秀給user看的參數
-  headerParameter: () => ['Charge', 'Const_Current_value', 'SAMPLE_RATE', 'VOLTSTOP_MAX', 'VOLTSTOP_MIN', 'CC_CP_SPEED', 'ADC_LEVEL_I_15', 'ADC_LEVEL_V_IN_15'], // 有要秀給user看的參數
+  showParameter: ['ADC_LEVEL_I_15', 'ADC_LEVEL_V_IN_15', 'CTRL_HIGH_Z_15', 'SAMPLE_RATE', 'Charge', 'Const_Current_value', 'VOLTSTOP_MAX', 'VOLTSTOP_MIN', 'TIME_DURATION'], // 有要秀給user看的參數
+  headerParameter: () => ['Charge', 'Const_Current_value', 'SAMPLE_RATE', 'VOLTSTOP_MAX', 'VOLTSTOP_MIN', 'CC_CP_SPEED', 'ADC_LEVEL_I_15', 'ADC_LEVEL_V_IN_15', 'TIME_DURATION'], // 有要秀給user看的參數
   valScales: {
     linear: {
       func: (val) => {

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

@@ -1,8 +1,8 @@
 export default {
   name: 'Function Generator',
   parameter: ['DAC_VOLT', 'SAMPLE_RATE', 'ADC_LEVEL_I_15', 'ADC_LEVEL_V_IN_15', 'CTRL_HIGH_Z_15', 'TIME_DURATION'], // 這個mode用到的參數
-  showParameter: ['ADC_LEVEL_I_15', 'ADC_LEVEL_V_IN_15', 'CTRL_HIGH_Z_15', 'DAC_VOLT', 'SAMPLE_RATE'], // 有要秀給user看的參數
-  headerParameter: () => ['DAC_VOLT', 'SAMPLE_RATE', 'ADC_LEVEL_I_15', 'ADC_LEVEL_V_IN_15'], // export header的參數
+  showParameter: ['ADC_LEVEL_I_15', 'ADC_LEVEL_V_IN_15', 'CTRL_HIGH_Z_15', 'DAC_VOLT', 'SAMPLE_RATE', 'TIME_DURATION'], // 有要秀給user看的參數
+  headerParameter: () => ['DAC_VOLT', 'SAMPLE_RATE', 'ADC_LEVEL_I_15', 'ADC_LEVEL_V_IN_15', 'TIME_DURATION'], // export header的參數
   valScales: {
     linear: {
       func: (val) => {

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

@@ -1,8 +1,8 @@
 export default {
   name: 'I-T Graph',
   parameter: ['DAC_VOLT', 'SAMPLE_RATE', 'ADC_LEVEL_I_15', 'ADC_LEVEL_V_IN_15', 'CTRL_HIGH_Z_15', 'TIME_DURATION'], // 這個mode用到的參數
-  showParameter: ['ADC_LEVEL_I_15', 'ADC_LEVEL_V_IN_15', 'CTRL_HIGH_Z_15', 'DAC_VOLT', 'SAMPLE_RATE'], // 有要秀給user看的參數
-  headerParameter: () => ['DAC_VOLT', 'SAMPLE_RATE', 'ADC_LEVEL_I_15', 'ADC_LEVEL_V_IN_15'], // export header的參數
+  showParameter: ['ADC_LEVEL_I_15', 'ADC_LEVEL_V_IN_15', 'CTRL_HIGH_Z_15', 'DAC_VOLT', 'SAMPLE_RATE', 'TIME_DURATION'], // 有要秀給user看的參數
+  headerParameter: () => ['DAC_VOLT', 'SAMPLE_RATE', 'ADC_LEVEL_I_15', 'ADC_LEVEL_V_IN_15', 'TIME_DURATION'], // export header的參數
   valScales: {
     linear: {
       func: (val) => {

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

@@ -1,8 +1,8 @@
 export default {
   name: 'Open Circuit Potential',
   parameter: ['SAMPLE_RATE', 'ADC_LEVEL_I_15', 'ADC_LEVEL_V_IN_15', 'TIME_DURATION'], // 這個mode用到的參數
-  showParameter: ['ADC_LEVEL_I_15', 'ADC_LEVEL_V_IN_15', 'SAMPLE_RATE'], // 有要秀給user看的參數
-  headerParameter: () => ['SAMPLE_RATE', 'ADC_LEVEL_I_15', 'ADC_LEVEL_V_IN_15'], // export header的參數
+  showParameter: ['ADC_LEVEL_I_15', 'ADC_LEVEL_V_IN_15', 'SAMPLE_RATE', 'TIME_DURATION'], // 有要秀給user看的參數
+  headerParameter: () => ['SAMPLE_RATE', 'ADC_LEVEL_I_15', 'ADC_LEVEL_V_IN_15', 'TIME_DURATION'], // export header的參數
   valScales: {
     linear: {
       func: (val) => {

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

@@ -1,8 +1,8 @@
 export default {
   name: 'R-T Graph',
   parameter: ['DAC_VOLT', 'SAMPLE_RATE', 'CTRL_HIGH_Z_15', 'TIME_DURATION'], // 這個mode用到的參數
-  showParameter: ['CTRL_HIGH_Z_15', 'DAC_VOLT', 'SAMPLE_RATE'], // 有要秀給user看的參數
-  headerParameter: () => ['DAC_VOLT', 'SAMPLE_RATE', 'ADC_LEVEL_I_15', 'ADC_LEVEL_V_IN_15'], // export header的參數
+  showParameter: ['CTRL_HIGH_Z_15', 'DAC_VOLT', 'SAMPLE_RATE', 'TIME_DURATION'], // 有要秀給user看的參數
+  headerParameter: () => ['DAC_VOLT', 'SAMPLE_RATE', 'ADC_LEVEL_I_15', 'ADC_LEVEL_V_IN_15', 'TIME_DURATION'], // export header的參數
   valScales: {
     linear: {
       func: (val) => {

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

@@ -1,8 +1,8 @@
 export default {
   name: 'V-T Graph',
   parameter: ['SAMPLE_RATE', 'ADC_LEVEL_I_15', 'ADC_LEVEL_V_IN_15', 'CTRL_HIGH_Z_15', 'TIME_DURATION'], // 這個mode用到的參數
-  showParameter: ['ADC_LEVEL_I_15', 'ADC_LEVEL_V_IN_15', 'CTRL_HIGH_Z_15', 'SAMPLE_RATE'], // 有要秀給user看的參數
-  headerParameter: () => ['SAMPLE_RATE', 'ADC_LEVEL_I_15', 'ADC_LEVEL_V_IN_15'], // export header的參數
+  showParameter: ['ADC_LEVEL_I_15', 'ADC_LEVEL_V_IN_15', 'CTRL_HIGH_Z_15', 'SAMPLE_RATE', 'TIME_DURATION'], // 有要秀給user看的參數
+  headerParameter: () => ['SAMPLE_RATE', 'ADC_LEVEL_I_15', 'ADC_LEVEL_V_IN_15', 'TIME_DURATION'], // export header的參數
   valScales: {
     linear: {
       func: (val) => {

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

@@ -218,7 +218,7 @@ const EliteZM15 = {
     componentType: 'input-range',
     range: Object.freeze({ min: 1, max: 1000 }),
     defaultValue: 1000,
-    defaultUnit: 'V',
+    defaultUnit: 'mV',
     downloadUnit: 'mV',
     unit: {
       mV: 1,
@@ -305,18 +305,18 @@ const EliteZM15 = {
     showName: 'Charge',
     componentType: 'input-button-toggle',
     options: [
-      { value: 0, label: 'Charge' },
-      { value: 1, label: 'Discharge' },
+      { value: 1, label: 'Charge' },
+      { value: 0, label: 'Discharge' },
     ],
     range: ['Charge', 'Discharge'],
     defaultValue: 1,
     outputRawData: (val) => {
-      const chargeArr = ['Charge', 'Discharge']
+      const chargeArr = ['DisCharge', 'Charge']
       return chargeArr.indexOf(val.toString())
     },
     outputReadabilityData: (val) => {
-      const chargeArr = ['Charge', 'Discharge']
-      return chargeArr[(parseInt(val) + 1) % 2]
+      const chargeArr = ['DisCharge', 'Charge']
+      return chargeArr[parseInt(val)]
     },
   },
   Const_Current_value: {
@@ -947,7 +947,7 @@ const EliteZM15 = {
     },
     {
       id: 9,
-      description: 'Chronoamperometric',
+      description: 'Chronoamperometry',
       img_src: 'CG-Wire',
       highz: 1,
     },

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

@@ -0,0 +1,97 @@
+export default {
+  name: 'Chronoamperometry',
+  parameter: ['VOLT_VSCAN', 'SAMPLE_RATE', 'ADC_LEVEL_I_15', 'ADC_LEVEL_V_IN_15', 'CTRL_HIGH_Z_15', 'TIME_DURATION'], // 這個mode用到的參數
+  showParameter: ['ADC_LEVEL_I_15', 'ADC_LEVEL_V_IN_15', 'CTRL_HIGH_Z_15', 'VOLT_VSCAN', 'SAMPLE_RATE', 'TIME_DURATION'], // 有要秀給user看的參數
+  headerParameter: () => ['VOLT_VSCAN', 'SAMPLE_RATE', 'ADC_LEVEL_I_15', 'ADC_LEVEL_V_IN_15', 'TIME_DURATION'], // 有要秀給user看的參數
+  valScales: {
+    linear: {
+      func: (val) => {
+        return val
+      },
+    },
+    log: {
+      func: (val) => {
+        return Math.log10(Math.abs(val))
+      },
+    },
+  },
+  channels: {
+    time: {
+      name: 'Time',
+      unit: {
+        us: 1,
+        ms: 1e3,
+        s: 1e6,
+        minute: 60 * 1e6,
+        hour: 60 * 60 * 1e6,
+      },
+      defaultUnit: 'ms',
+      downloadUnit: 'ms',
+    },
+    0: {
+      name: 'I_in',
+      unit: {
+        nA: 1,
+        uA: 1e3,
+        mA: 1e6,
+      },
+      defaultUnit: 'mA',
+      downloadUnit: 'mA',
+    },
+    1: {
+      name: 'Potential',
+      unit: {
+        uV: 1,
+        mV: 1e3,
+        V: 1e6,
+      },
+      defaultUnit: 'mV',
+      downloadUnit: 'mV',
+    },
+    2: {
+      name: 'V_out',
+      unit: {
+        uV: 1,
+        mV: 1e3,
+        V: 1e6,
+      },
+      defaultUnit: 'mV',
+      downloadUnit: 'mV',
+    },
+  },
+  charts: {
+    default: [
+      {
+        name: 'Chronoamperometric',
+        description: '',
+        subplot: [
+          {
+            x1: {
+              type: 'time',
+              valScale: 'linear',
+              min: 'dataMin',
+              max: 'dataMax',
+            },
+            y1: {
+              type: 'value',
+              valScale: 'linear',
+              min: 'dataMin',
+              max: 'dataMax',
+            },
+            data: [
+              {
+                legend: 'chrono',
+                x1: {
+                  channel: 'time',
+                },
+                y1: {
+                  channel: 0,
+                },
+              },
+            ],
+          },
+        ],
+      },
+    ],
+  },
+}

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

@@ -1,6 +1,7 @@
 import PotentiostaticEIS from './PotentiostaticEIS'
 import CyclicVoltammetry from './CyclicVoltammetry'
 import DevMode from './DevMode'
+import Chronoamperometry from './Chronoamperometry'
 
 const EliteEIS = {
   ADC_VALUE_I: {
@@ -361,13 +362,18 @@ const EliteEIS = {
     },
     {
       id: 2,
+      description: 'Chronoamperometry',
+    },
+    {
+      id: 3,
       description: 'Dev Tools',
     },
   ],
   MODE: {
     0: PotentiostaticEIS,
     1: CyclicVoltammetry,
-    2: DevMode,
+    2: Chronoamperometry,
+    3: DevMode,
   },
 }
 

src/data/config-table/index.js

@@ -4,16 +4,16 @@ 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,
+  'Elite_EDC_1.4': null,
+  'Elite_EDC_1.5': EliteEDC,
+  'Elite_EDC_1.5re': EliteEDC,
+  'Elite_EDC_1.5r2': EliteEDC,
+  'Elite_BAT_1.0': EliteEDC,
+  'Elite_EIS_1.0': EliteEIS,
+  'Elite_EIS_1.1': EliteEIS,
+  'Elite_EIS_MINI_1.0': EliteEIS,
+  'Elite_TRIG_0.1': null,
+  'Elite_MEGAFLY_0.1': null,
 }
 
 // object saving serial number mapping table
@@ -29,13 +29,15 @@ const serialNumberMappingTable = {
     },
     3: {
       1: {
-        0: null, // BAT1.0
+        0: EliteEDC, // BAT1.0
       },
     },
     4: {
-      0: EliteEIS, // EIS1.0
-      1: EliteEIS, // EIS1.1
-      2: EliteEIS, // EIS1.1_MINI
+      1: {
+        0: EliteEIS, // EIS1.0
+        1: EliteEIS, // EIS1.1
+        2: EliteEIS, // EIS1.1mini
+      },
     },
     5: {
       1: {

src/data/global/global.js

@@ -24,7 +24,7 @@ const hasCycleMode = (mode, lib) => {
 }
 
 const getDefaultChartTypeByMode = (mode, lib) => {
-  if (lib === 'EliteZM15') {
+  if (lib === 'EliteZM15' || lib.includes('Elite_EDC')) {
     const settings = {}
     settings[0] = ['Elite', 2, 'Elite', 1]
     settings[1] = ['Elite', 2, 'Elite', 1]
@@ -43,7 +43,7 @@ const getDefaultChartTypeByMode = (mode, lib) => {
     settings[15] = ['Elite', 2, 'Elite', 1]
     settings[16] = ['Time', 2, 'Elite', 2]
     return settings[mode]
-  } else if (lib === 'EliteEIS') {
+  } else if (lib.includes('EIS') || lib.includes('Elite_EIS')) {
     const settings = {}
     settings[0] = ['EliteEIS', 6, 'EliteEIS', 5]
     settings[1] = ['Elite', 2, 'Elite', 1]

src/factories/chart/chartFactory.js

@@ -36,6 +36,10 @@ function newChart (chartID, numOfCharts) {
     dataZoom: null,
     series: [],
     cycle: 0,
+    // brush: {
+    //   /* toolbox: ['rect', 'polygon', 'lineX', 'lineY', 'keep', 'clear'],
+    //   xAxisIndex: 0, */
+    // },
   }
 }
 

src/factories/chart/dataZoomFactory.js

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

src/router/index.js

@@ -91,6 +91,11 @@ export default new Router({
       path: '/admin/:mode?',
       component: AppLayout,
       children: [
+        {
+          name: 'test',
+          path: 'test',
+          component: () => import('../components/dashboard/test.vue'),
+        },
         {
           name: 'dashboard',
           path: 'dashboard',

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

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

@@ -18,7 +18,8 @@ const chartActs = {
    *
   **/
   [typePath.initCustomizedFromCache]: async ({ state, getters, commit, dispatch }, payload) => {
-    const cacheData = await localforage.getItem('chart_data')
+    const { controllerID } = payload
+    const cacheData = await localforage.getItem('chart_data_' + controllerID)
     if (cacheData !== null) {
       // use ID to create new chart by cache
       for (const _chart of Object.values(cacheData)) {
@@ -46,6 +47,7 @@ const chartActs = {
    *
    */
   [typePath.saveToCache]: async ({ state, getters, commit, dispatch }, payload) => {
+    const { controllerID } = payload
     const _chartData = {}
     for (const [_id, _chart] of Object.entries(state.chartData)) {
       // manual chart clear series data
@@ -54,7 +56,7 @@ const chartActs = {
         _chartData[_id].series.map((ele) => { ele.data.length = 0 })
       }
     }
-    await localforage.setItem('chart_data', _chartData)
+    await localforage.setItem('chart_data_' + controllerID, _chartData)
   },
   /*
    * add chartID to chartData
@@ -229,6 +231,10 @@ const chartActs = {
     state.chartData[chartID].xAxis[_xAxisIndex].seriesIndex.push(_seriesIndex)
     state.chartData[chartID].yAxis[_yAxisIndex].seriesIndex.push(_seriesIndex)
 
+    // state.chartData[chartID].xAxis[_xAxisIndex].boundaryGap = [0, '5%']
+    // state.chartData[chartID].yAxis[_yAxisIndex].boundaryGap = [0, '10%']
+
+    // console.log(state.chartData[chartID])
     // set xAxis format
     // TODO: need to get the time unit for the CanvasChart
     if (sourceList[0].name === 'Time') {
@@ -260,7 +266,7 @@ const chartActs = {
         default:
           break
       }
-    } else if (sourceList[0].name === 'EliteEIS') {
+    } else if (sourceList[0].name.includes('EIS')) {
       switch (sourceList[0].channel) {
         case 3:
           state.chartData[chartID].xAxis[_xAxisIndex].axisLabel.formatter = function (val) {
@@ -356,7 +362,7 @@ const chartActs = {
         default:
           break
       }
-    } else if (sourceList[1].name === 'EliteEIS') {
+    } else if (sourceList[1].name.includes('EIS')) {
       switch (sourceList[1].channel) {
         case 3:
           state.chartData[chartID].yAxis[_yAxisIndex].axisLabel.formatter = function (val) {