[update] add show datastream buffer in dev mode

[update] add debug button (show data)
[update] rename developer mode & bind key
2022-08-11 00:59:14 +08:00 · 2022-08-11 00:51:58 +08:00 · 2022-08-10 23:56:38 +08:00 · 2022-08-10 22:21:18 +08:00 · 2022-08-10 22:20:54 +08:00 · 2022-08-10 22:13:53 +08:00
78 changed files with 3573 additions and 1100 deletions
@@ -2351,6 +2351,12 @@
        }
      }
    },
+    "@vue/composition-api": {
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/@vue/composition-api/-/composition-api-1.7.0.tgz",
+      "integrity": "sha512-hxOgLYR+wjuPX9bkP2pAPlqUs98XxBoa9DSLyp1z6+YR92wC42PZcZKs4d+VRtcv4udOv041Kss+F6ap5nj8YA==",
+      "dev": true
+    },
    "@vue/eslint-config-standard": {
      "version": "5.1.2",
      "resolved": "https://registry.npmjs.org/@vue/eslint-config-standard/-/eslint-config-standard-5.1.2.tgz",
@@ -4754,6 +4760,11 @@
      "integrity": "sha1-3dgA2gxmEnOTzKWVDqloo6rxJTs=",
      "dev": true
    },
+    "complex.js": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/complex.js/-/complex.js-2.1.1.tgz",
+      "integrity": "sha512-8njCHOTtFFLtegk6zQo0kkVX1rngygb/KQI6z1qZxlFI3scluC+LVTCFbrkWjBv4vvLlbQ9t88IPMC6k95VTTg=="
+    },
    "component-emitter": {
      "version": "1.3.0",
      "resolved": "https://registry.npmjs.org/component-emitter/-/component-emitter-1.3.0.tgz",
@@ -5684,6 +5695,11 @@
        "map-obj": "^1.0.0"
      }
    },
+    "decimal.js": {
+      "version": "10.3.1",
+      "resolved": "https://registry.npmjs.org/decimal.js/-/decimal.js-10.3.1.tgz",
+      "integrity": "sha512-V0pfhfr8suzyPGOx3nmq4aHqabehUZn6Ch9kyFpV79TGDTWFmHqUqXdabR7QHqxzrYolF4+tVmJhUG4OURg5dQ=="
+    },
    "decode-uri-component": {
      "version": "0.2.0",
      "resolved": "https://registry.npmjs.org/decode-uri-component/-/decode-uri-component-0.2.0.tgz",
@@ -6199,11 +6215,19 @@
      }
    },
    "echarts": {
-      "version": "4.9.0",
-      "resolved": "https://registry.npmjs.org/echarts/-/echarts-4.9.0.tgz",
-      "integrity": "sha512-+ugizgtJ+KmsJyyDPxaw2Br5FqzuBnyOWwcxPKO6y0gc5caYcfnEUIlNStx02necw8jmKmTafmpHhGo4XDtEIA==",
+      "version": "5.3.3",
+      "resolved": "https://registry.npmjs.org/echarts/-/echarts-5.3.3.tgz",
+      "integrity": "sha512-BRw2serInRwO5SIwRviZ6Xgm5Lb7irgz+sLiFMmy/HOaf4SQ+7oYqxKzRHAKp4xHQ05AuHw1xvoQWJjDQq/FGw==",
      "requires": {
-        "zrender": "4.3.2"
+        "tslib": "2.3.0",
+        "zrender": "5.3.2"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "2.3.0",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
+          "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
+        }
      }
    },
    "editorconfig": {
@@ -6485,6 +6509,11 @@
      "integrity": "sha1-Aljq5NPQwJdN4cFpGI7wBR0dGYg=",
      "dev": true
    },
+    "escape-latex": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/escape-latex/-/escape-latex-1.2.0.tgz",
+      "integrity": "sha512-nV5aVWW1K0wEiUIEdZ4erkGGH8mDxGyxSeqPzRNtWP7ataw+/olFObw7hujFWlVjNsaDFw5VZ5NzVSIqRgfTiw=="
+    },
    "escape-string-regexp": {
      "version": "1.0.5",
      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
@@ -7747,6 +7776,11 @@
      "integrity": "sha1-mMI9qxF1ZXuMBXPozszZGw/xjIQ=",
      "dev": true
    },
+    "fraction.js": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.2.0.tgz",
+      "integrity": "sha512-MhLuK+2gUcnZe8ZHlaaINnQLl0xRIGRfcGk2yl8xoQAfHrSsL3rYu6FCmBdkdbhc9EPlwyGHewaRsvwRMJtAlA=="
+    },
    "fragment-cache": {
      "version": "0.2.1",
      "resolved": "https://registry.npmjs.org/fragment-cache/-/fragment-cache-0.2.1.tgz",
@@ -9399,6 +9433,11 @@
        "html-escaper": "^2.0.0"
      }
    },
+    "javascript-natural-sort": {
+      "version": "0.7.1",
+      "resolved": "https://registry.npmjs.org/javascript-natural-sort/-/javascript-natural-sort-0.7.1.tgz",
+      "integrity": "sha512-nO6jcEfZWQXDhOiBtG2KvKyEptz7RVbpGP4vTD2hLBdmNQSsCiicO2Ioinv6UI4y9ukqnBpy+XZ9H6uLNgJTlw=="
+    },
    "javascript-stringify": {
      "version": "2.0.1",
      "resolved": "https://registry.npmjs.org/javascript-stringify/-/javascript-stringify-2.0.1.tgz",
@@ -11225,6 +11264,32 @@
      "resolved": "https://registry.npmjs.org/material-colors/-/material-colors-1.2.6.tgz",
      "integrity": "sha512-6qE4B9deFBIa9YSpOc9O0Sgc43zTeVYbgDT5veRKSlB2+ZuHNoVVxA1L/ckMUayV9Ay9y7Z/SZCLcGteW9i7bg=="
    },
+    "mathjs": {
+      "version": "11.0.1",
+      "resolved": "https://registry.npmjs.org/mathjs/-/mathjs-11.0.1.tgz",
+      "integrity": "sha512-Kgm+GcTxwD68zupr7BPK0yrlWpTh2q8sMH6VcBcQe5+JCBqcwOrBxBF11WPah7hVv0NCLDnJnFTiXtik1Phasg==",
+      "requires": {
+        "@babel/runtime": "^7.18.9",
+        "complex.js": "^2.1.1",
+        "decimal.js": "^10.3.1",
+        "escape-latex": "^1.2.0",
+        "fraction.js": "^4.2.0",
+        "javascript-natural-sort": "^0.7.1",
+        "seedrandom": "^3.0.5",
+        "tiny-emitter": "^2.1.0",
+        "typed-function": "^3.0.0"
+      },
+      "dependencies": {
+        "@babel/runtime": {
+          "version": "7.18.9",
+          "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.18.9.tgz",
+          "integrity": "sha512-lkqXDcvlFT5rvEjiu6+QYO+1GXrEHRo2LOtS7E4GtX5ESIZOgepqsZBVIj6Pv+a6zqsya9VCgiK1KAK4BvJDAw==",
+          "requires": {
+            "regenerator-runtime": "^0.13.4"
+          }
+        }
+      }
+    },
    "mathml-tag-names": {
      "version": "2.1.3",
      "resolved": "https://registry.npmjs.org/mathml-tag-names/-/mathml-tag-names-2.1.3.tgz",
@@ -14185,9 +14250,9 @@
      "dev": true
    },
    "resize-detector": {
-      "version": "0.1.10",
-      "resolved": "https://registry.npmjs.org/resize-detector/-/resize-detector-0.1.10.tgz",
-      "integrity": "sha512-iLcXC8A6Fb0DfA+TRiywrK/0A22bFqkhntjMJMEzXDA4XkcEkfwpNbv7W8iewUiD0xYIaeiXOfiEehTqGKsUFw=="
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/resize-detector/-/resize-detector-0.3.0.tgz",
+      "integrity": "sha512-R/tCuvuOHQ8o2boRP6vgx8hXCCy87H1eY9V5imBYeVNyNVpuL9ciReSccLj2gDcax9+2weXy3bc8Vv+NRXeEvQ=="
    },
    "resolve": {
      "version": "1.17.0",
@@ -14475,6 +14540,11 @@
        }
      }
    },
+    "seedrandom": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/seedrandom/-/seedrandom-3.0.5.tgz",
+      "integrity": "sha512-8OwmbklUNzwezjGInmZ+2clQmExQPvomqjL7LFqOYqtmuxRgQYqOD3mHaU+MvZn5FLUeVxVfQjwLZW/n/JFuqg=="
+    },
    "select": {
      "version": "1.1.2",
      "resolved": "https://registry.npmjs.org/select/-/select-1.1.2.tgz",
@@ -16544,6 +16614,11 @@
        "mime-types": "~2.1.24"
      }
    },
+    "typed-function": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/typed-function/-/typed-function-3.0.0.tgz",
+      "integrity": "sha512-mKJKkt2xYxJUuMD7jyfgUxfn5KCsCxkEKBVjep5yYellJJ5aEDO2QUAmIGdvcZmfQnIrplkzELIaG+5b1475qg=="
+    },
    "typedarray": {
      "version": "0.0.6",
      "resolved": "https://registry.npmjs.org/typedarray/-/typedarray-0.0.6.tgz",
@@ -17101,14 +17176,18 @@
        "vue": "^2.6.9"
      }
    },
+    "vue-demi": {
+      "version": "0.13.5",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.13.5.tgz",
+      "integrity": "sha512-tO3K2bML3AwiHmVHeKCq6HLef2st4zBXIV5aEkoJl6HZ+gJWxWv2O8wLH8qrA3SX3lDoTDHNghLX1xZg83MXvw=="
+    },
    "vue-echarts": {
-      "version": "5.0.0-beta.0",
-      "resolved": "https://registry.npmjs.org/vue-echarts/-/vue-echarts-5.0.0-beta.0.tgz",
-      "integrity": "sha512-QZFKGXDAYFQo+F20REpzcdLx79nsl4kOorJRpN+08aYq4YiIlmtWss1Lxadm7Fo+NYyWm8nnT+h4xHv3uqWIDQ==",
+      "version": "6.2.3",
+      "resolved": "https://registry.npmjs.org/vue-echarts/-/vue-echarts-6.2.3.tgz",
+      "integrity": "sha512-xHzUvgsgk/asJTcNa8iVVwoovZU3iEUHvmBa3bzbiP3Y6OMxM1YXsoWOKVmVVaUusGs4ob4pSwjwNy2FemAz9w==",
      "requires": {
-        "core-js": "^3.4.4",
-        "lodash": "^4.17.15",
-        "resize-detector": "^0.1.10"
+        "resize-detector": "^0.3.0",
+        "vue-demi": "^0.13.2"
      }
    },
    "vue-epic-bus": {
@@ -18563,9 +18642,19 @@
      }
    },
    "zrender": {
-      "version": "4.3.2",
-      "resolved": "https://registry.npmjs.org/zrender/-/zrender-4.3.2.tgz",
-      "integrity": "sha512-bIusJLS8c4DkIcdiK+s13HiQ/zjQQVgpNohtd8d94Y2DnJqgM1yjh/jpDb8DoL6hd7r8Awagw8e3qK/oLaWr3g=="
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/zrender/-/zrender-5.3.2.tgz",
+      "integrity": "sha512-8IiYdfwHj2rx0UeIGZGGU4WEVSDEdeVCaIg/fomejg1Xu6OifAL1GVzIPHg2D+MyUkbNgPWji90t0a8IDk+39w==",
+      "requires": {
+        "tslib": "2.3.0"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "2.3.0",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
+          "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
+        }
+      }
    }
  }
 }
@@ -25,7 +25,7 @@
    "chart.js": "^2.9.3",
    "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",
@@ -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.240:8083'
+  MqttUrl = 'ws://192.168.5.37: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`
@@ -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()
@@ -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)
@@ -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()
@@ -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 () {
  },
@@ -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
        }
      }
@@ -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('', [
+      'developerMode',
+    ]),
+    ...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>
@@ -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 () {
  },
@@ -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'
        }
@@ -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 () {
@@ -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]),
  },
@@ -8,7 +8,7 @@

 <script>
 import { mapFields } from 'vuex-map-fields'
-import paramTable from '@/data/param-table/index.js'
+import paramTable from '@/data/config-table/index.js'

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

 export default {
  name: 'Download',
@@ -108,7 +108,7 @@ export default {
      }
      if (meta !== undefined) {
        this.metaInfo = meta
-        const channelParamObj = paramTable[meta.device.library_name].MODE[meta.parameter_set.MODE].channels
+        const channelParamObj = configTable.getModeConfig(meta.device.library_name, meta.parameter_set.MODE).channels
        const channelArray = allChannel === 'all' ? JSON.parse(this.metaInfo.channels) : Object.keys(channelParamObj).filter(ele => ele !== 'time')
        const channelList = []

@@ -26,7 +26,7 @@ import newDownload from '@/factories/file/downloadFactory'
 import newChannel from '@/factories/file/channelFactory'
 import progressModal from '@/components/common/progressBarByValueModal/progressModal.vue'
 import { taskInfo } from '@/data/task/TaskInfo'
-import paramTable from '@/data/param-table/index'
+import configTable from '@/data/config-table/index'

 export default {
  name: 'DownloadOffline',
@@ -113,7 +113,7 @@ export default {
      }
      if (meta !== undefined) {
        this.metaInfo = meta
-        const channelParamObj = paramTable[meta.device.library_name].MODE[meta.parameter_set.MODE].channels
+        const channelParamObj = configTable.getModeConfig(meta.device.library_name, meta.parameter_set.MODE).channels
        const channelArray = allChannel === 'all' ? JSON.parse(this.metaInfo.channels) : Object.keys(channelParamObj).filter(ele => ele !== 'time')
        const channelList = []

@@ -6,29 +6,51 @@
      </div>
    </div>
    <div>
-      <elite-parameter-window></elite-parameter-window>
+      <device-parameter-recording
+        :ref="'device_parameter_ref'"
+        :parameter="parameter"
+        :library="'Elite_EDC_1.5'"
+        @setParameter="setParameter"
+        @setParameterWithDebounce="setParameterWithDebounce"
+      />
    </div>
  </div>
 </template>
 <script>
-import { mapFields } from 'vuex-map-fields'
 import newCondition from '@/factories/project/conditionFactory'
-import EliteParameterWindow from '@/components/project/task/config/parameter/EliteParameterWindow'
+import { mapActions, mapGetters } from 'vuex'
+import { mapFields } from 'vuex-map-fields'
+import types from '@/store/modules/project/types'
+import DeviceParameterRecording from '@/components/task/content/parameter/DeviceParameterRecording.vue'
+import _ from 'lodash'
+import configTable from '@/data/config-table/index'

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

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

      this.hide()
      this.resetSetting()
@@ -173,6 +177,7 @@ export default {
      this.optionDeviceConnect = this.deviceConnectList
      if (device) {
        this.device = device
+        this.projectLibrary = this.device.library.value
      }
    },

@@ -12,6 +12,7 @@
 </template>

 <script>
+import { mapFields } from 'vuex-map-fields'
 import { mapActions, mapGetters } from 'vuex'
 import types from '@/store/modules/project/types'

@@ -23,6 +24,10 @@ export default {
    ...mapGetters('project', [
      types.project.getSelect,
    ]),
+
+    ...mapFields('project', [
+      'projectLibrary',
+    ]),
  },
  data () {
    return {
@@ -42,6 +47,11 @@ export default {
    ),
  },
  mounted () {
+    for (const device in this.getSelectProject.device) {
+      if (this.projectLibrary === null) {
+        this.projectLibrary = this.getSelectProject.device[device].library.value
+      }
+    }
  },
 }
 </script>
@@ -92,7 +92,7 @@
                  <div class="flex">
                    <div v-for="(parameterSet, parameterSetKey) in getParameterSetTask(taskIndex, deviceUUID)" :key="parameterSetKey">
                      <div v-for="(parameter, parameterKey) in parameterSet" :key="parameterKey">
-                        <span v-if="parameterKey !== 'target'">{{ parameterTable[parameterKey].alias }}: {{ parameterTable[parameterKey].transFormula(parameter) }} {{ parameterTable[parameterKey].unit[0] }}</span>
+                        <span v-if="parameterKey !== 'target'"> {{ parameterName(parameterKey) }} : {{ parameterValue(parameterKey, parameter) }} </span>
                      </div>
                    </div>
                  </div>
@@ -122,8 +122,8 @@
 import { mapFields } from 'vuex-map-fields'
 import { mapActions, mapGetters } from 'vuex'
 import types from '@/store/modules/project/types'
-import newEliteZm15Parameter from '@/factories/project/eliteZM15ParmameterFactory'
 import { FulfillingBouncingCircleSpinner } from 'epic-spinners'
+import configTable from '@/data/config-table/index'

 export default {
  name: 'project-table',
@@ -131,6 +131,10 @@ export default {
    FulfillingBouncingCircleSpinner,
  },
  computed: {
+    config () {
+      return configTable.getConfig(this.projectLibrary)
+    },
+
    ...mapGetters('project', [
      types.project.getSelect,
      types.project.getDevice,
@@ -144,6 +148,7 @@ export default {
      'taskSelectKey',
      'deviceSelectKey',
      'lockMode',
+      'projectLibrary',
    ]),
  },
  data () {
@@ -152,7 +157,6 @@ export default {
        name: -1,
        checked: [],
      },
-      parameterTable: newEliteZm15Parameter(),
    }
  },
  methods: {
@@ -186,6 +190,28 @@ export default {
        }
      }
    },
+    parameterName (name) {
+      if (name === 'MODE') {
+        return 'Mode'
+      }
+      if (typeof this.config[name].showName === 'function') {
+        return this.config[name].showName()
+      }
+      return this.config[name].showName
+    },
+    parameterValue (name, value) {
+      if (name === 'MODE') {
+        return this.config.MODE[value].name
+      }
+      if (this.config[name].type === 'number') {
+        const scale = this.config[name].unit[this.config[name].defaultUnit]
+        return `${this.config[name].outputReadabilityData(value, scale)} ${this.config[name].defaultUnit}`
+      } else if (this.config[name].type === 'array') {
+        return `${this.config[name].outputReadabilityData(value)}`
+      } else if (this.config[name].type === 'none') {
+        return ''
+      }
+    },
    ...mapActions('project', [
      types.task.delete,
    ]),
@@ -1,6 +1,5 @@
 <template>
  <div class="task-content">
-
    <va-modal
      v-model="showShutdownModal"
      size="small"
@@ -29,7 +28,7 @@
          <div class="flex sm12 xl12 md12 xs12">
            <task-devices-new :ref="'devices_ref'" @add="addDevice($event)" @remove="removeDevice($event)" @refreshSetting="refreshChartSetting($event)" class="pa-0" />
          </div>
-          <div class="flex sm12 xl12 md12 xs12" v-if="developer_mode">
+          <div class="flex sm12 xl12 md12 xs12" v-if="developerMode">
            <task-formula :ref="'formula_ref'" @add="addFormula($event)" @remove="removeFormula($event)" class="pa-0" />
          </div>
        </div>
@@ -108,6 +107,7 @@ import { mapFields } from 'vuex-map-fields'
 import { mapActions } from 'vuex'
 import taskTypes from '@/store/modules/task/content/types'
 import TaskFormula from './formula/TaskFormula'
+import { v4 as uuid } from 'uuid'

 // TODO change chart data tag format

@@ -128,7 +128,7 @@ export default {
      'deviceListNew',
    ]),
    ...mapFields('', [
-      'developer_mode',
+      'developerMode',
    ]),
  },
  data () {
@@ -158,7 +158,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) {
@@ -199,7 +199,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 ]
@@ -207,7 +207,6 @@ export default {
      const topicSplit = topic.split('/')
      const deviceID = parseInt(topicSplit[3])
      const channel = parseInt(topicSplit[4])
-
      dataStreamBuffer.into(String.fromCharCode.apply(null, data), deviceID, (channel + 1))
    },
    '+/device_save_path/+' (data, topic) {
@@ -261,12 +260,22 @@ export default {
          this.showShutdownModal = true
          break
        case 'start':
+          // register default chart again
          await this.taskContentChartDefaultChartGenerator({
            _deviceList: this.deviceListNew,
            _itemID: parseInt(mes[1]),
            _chartID: null,
            _type: 'device',
          })
+
+          // remove mapping ID chart series data
+          for (const chart in this.chartData) {
+            this.taskContentChartResetSeriesData({
+              chartID: chart,
+              mappingID: mes[1],
+            })
+          }
+
          device = this.deviceListNew.find((ele) => ele.memory_board === parseInt(mes[1]))
          device.status = 1
          break
@@ -347,12 +356,20 @@ export default {
      )
    },
    refreshData: function () {
-      // TODO don't need to refresh chart with stop status
      for (const chart in this.chartData) {
-        this.taskContentChartRefreshData({
-          chartID: parseInt(chart),
-          deviceList: this.deviceListNew,
-        })
+        // find each chart mappingID with device memory_board
+        const device = this.deviceListNew.find(ele => String(ele.memory_board) === String(this.chartData[chart].mappingID))
+        // device not found continue
+        if (device === undefined) {
+          continue
+        }
+        // device is running refresh chart
+        if (device.status === 1 && this.chartData[chart].captured !== true) {
+          this.taskContentChartRefreshData({
+            chartID: chart,
+            deviceList: this.deviceListNew,
+          })
+        }
      }
    },
    refreshDevicesWindow: function () {
@@ -362,25 +379,35 @@ export default {
      }
    },
    addChart: async function (isDefault) {
-      this.taskContentChartAdd({
-        chartID: this.taskContentChartNumber,
-        maxDots: 4000,
+      // create chartID with uuid instead of length of chart list
+      const newChart = await this.taskContentChartAdd({
+        chartID: uuid(),
+        maxDots: 5000,
        gridLength: 1,
      })
+
+      // createby default
+      if (isDefault === true) {
+        newChart.createdBy = 'default'
+      }
+      // createby manaul
+      if (isDefault === false) {
+        newChart.createdBy = 'manual'
+      }
+
      if (this.$refs.chart_ref != null) {
        this.$refs.chart_ref.forEach(ref => {
          ref.refreshMappingSelect()
        })
      }
      this.taskContentChartRefreshPanel()
-      this.taskContentChartNumber++
-
+      // save chart config to web storage
      if (!isDefault) {
-        await this.taskContentChartSaveToCache()
+        await this.taskContentChartSaveToCache({ controllerID: taskInfo.getTaskInfo().controllerID })
      }
      this.pageToast('The chart has been added.')

-      return this.taskContentChartNumber - 1
+      return newChart.chartID
    },
    refreshChartSetting: async function () {
      if (this.$refs.chart_ref != null) {
@@ -402,7 +429,7 @@ export default {
      this.selectChartID = chartID
      this.showRemoveChartModal = true
    },
-    removeChart: async function (chartID) {
+    removeChart: async function (chartID, saveCache = true) {
      if (chartID == null) {
        chartID = this.selectChartID
      }
@@ -429,8 +456,9 @@ export default {
          })
        }
      }
-
-      await this.taskContentChartSaveToCache()
+      if (saveCache === true) {
+        await this.taskContentChartSaveToCache({ controllerID: taskInfo.getTaskInfo().controllerID })
+      }
      this.pageToast('The chart has been removed.')
    },
    showDeviceSettingClick: function () {
@@ -462,9 +490,11 @@ export default {
      return chart
    },
    addDevice: async function (deviceID, memoryBoardID) {
+      // subscribe datastream when add device
      this.mqttSub(`${taskInfo.getTaskInfo().controllerID}/data_server/device_data_stream/${deviceID}/+`)
+      // add mapping chart
      await this.addMappingChart(deviceID)
-
+      // register default chart
      await this.taskContentChartDefaultChartGenerator({
        _deviceList: this.deviceListNew,
        _itemID: deviceID,
@@ -560,6 +590,9 @@ export default {
        path: '/',
      })
    },
+    switchMode: function () {
+      this.developerMode = !this.developerMode
+    },

    ...mapActions('taskContent', [
      taskTypes.chart.initCustomizedFromCache,
@@ -567,6 +600,7 @@ export default {
      taskTypes.chart.add,
      taskTypes.chart.defaultChartGenerator,
      taskTypes.chart.reset,
+      taskTypes.chart.resetSeriesData,
      taskTypes.chart.refreshData,
      taskTypes.chart.refreshChart,
      taskTypes.chart.refreshPanel,
@@ -577,19 +611,31 @@ export default {
  async mounted () {
    const devMode = this.$route.params.mode
    if (devMode === 'dev') {
-      this.developer_mode = true
+      this.developerMode = true
    }

    await taskInfo.updateTaskInfo(this.$route.params.taskID)
    this.pageMqttSub(taskInfo.getTaskInfo().controllerID)
    await this.pageInit()

-    this.dataRefreshTimer = setInterval(this.refreshData, 100)
+    this.dataRefreshTimer = setInterval(this.refreshData, 1000)
+
+    var switchModeHander = function (switchMode, e) {
+      if (e.shiftKey && e.metaKey && e.keyCode === 83) {
+        switchMode()
+      }
+      if (e.shiftKey && e.ctrlKey && e.keyCode === 83) {
+        switchMode()
+      }
+    }
+
+    // eslint-disable-next-line no-undef
+    window.addEventListener('keydown', switchModeHander.bind(_, this.switchMode))
  },
  destroyed () {
    taskInfo.destroyed(this.deviceList)
    for (const chart in this.chartData) {
-      this.removeChart(chart)
+      this.removeChart(chart, false)
    }
    clearInterval(this.dataRefreshTimer)
    this.pageMqttUnSub(taskInfo.getTaskInfo().controllerID)
@@ -4,7 +4,7 @@
      <template slot="header">
        <div class="row flex sm12 xl12 md12 xs12 align--center my-0 py-0">
          <div class="flex sm5 xl5 md5 xs5 px-0 mx-0">
-            <h5 class="mt-0 mb-0"><va-icon name="fa fa-area-chart mr-3" color="primary"/>{{nameCard}}</h5>
+            <h5 class="mt-0 mb-0"><va-icon name="fa fa-area-chart mr-3" color="primary"/>{{ nameCard }}</h5>
          </div>
          <div class="flex sm7 xl7 md7 xs7 pa-0 ma-0" style="text-align: right;">
            <va-button class="pa-0 ma-0 circle-button" small color="dark" @click="remove()">
@@ -14,36 +14,54 @@
              />
            </va-button>
          </div>
+          <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>
+          </div>
        </div>
      </template>
      <va-tabs v-model="tabValue" class="mb-3" style="width: 100%; min-width: 100px;">
        <va-tab>
-          {{'CHART'}}
+          {{ 'CHART' }}
        </va-tab>
        <va-tab>
-          {{'SOURCE'}}
+          {{ 'SOURCE' }}
        </va-tab>
      </va-tabs>
      <div v-if="tabValue == 0" >
        <div v-if="chartData[chartID].legend.data.length != 0">
-          <chart :key="taskContentChartKey" :ref="'chart_ref'" :style="'width: '+ cardwidth + '; height: ' + cardheight + ';'" :options="data" :auto-resize="true"></chart>
+          <canvas-chart-real-time-display
+            :chartID="chartID" ref="CanvasChartRealTimeDisplay"
+          />
+          <div class="flex" v-if="developerMode">
+            <div v-for="(data, device) in dataStreamBuffer.getByChartID(chartID)" :key="device">
+              <div v-for="(i, channel) in data" :key="channel">
+                {{ device }} {{ channel }} {{ i.length }} first data: {{ (i[0] !== undefined) && i[0][0] }} last data: {{ (i[i.length-1] !== undefined) && i[i.length-1][i[i.length-1].length-1]}}
+              </div>
+            </div>
+          </div>
+          <!-- 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 + ';'" >
-        <canvas-chart-source :chartID="chartID" />
+        <canvas-chart-source :chartID="chartID" @addSource="addSource()" />
      </div>
      <div v-else :style="'width: '+ cardwidth + '; height: ' + cardheight + ';'" >
-        <!-- <canvas-chart-setting :chartID="chartID"></canvas-chart-setting> -->
      </div>
-      <div v-if="this.$refs.chart_ref != null">
+      <!-- <div v-if="this.$refs.chart_ref != null">
        <va-button small class="mb-3" @click="selectAllSeries">
          SELECT ALL
        </va-button>
        <va-button small class="mb-3" @click="inverseSelectAllSeries">
          INVERSE SELECT
        </va-button>
-      </div>
-      <div class="row flex align--left ma-0 pa-0">
+      </div> -->
+      <div class="row flex align--left ma-0 pa-0 mt-2">
        <va-input
          v-if="chartData[chartID].chartXMode === 'time'"
          class="mx-1"
@@ -92,7 +110,7 @@
          </p>
        </va-input>
      </div>
-      <div class="row flex ma-0 pa-0" v-if="developer_mode === true">
+      <div class="row flex ma-0 pa-0" v-if="developerMode === true">
        <canvas-chart-filter :chartID="chartID" :filterIndex="0" />
        <canvas-chart-filter :chartID="chartID" :filterIndex="1" />
        <canvas-chart-filter :chartID="chartID" :filterIndex="2" />
@@ -108,8 +126,11 @@ import CanvasChartFilterPopup from './CanvasChartFilterPopup.vue'
 import CanvasChartSource from './CanvasChartSource'
 import { taskInfo } from '../../../../data/task/TaskInfo'
 import { mapFields } from 'vuex-map-fields'
+import CanvasChartRealTimeDisplay from '@/components/task/content/chart/CanvasChartRealTimeDisplay'
 import { mapActions } from 'vuex'
 import taskTypes from '@/store/modules/task/content/types'
+import CanvasChartRealTimeCalculation from './CanvasChartRealTimeCalculation.vue'
+import { dataStreamBuffer } from '@/data/task/DataStreamBuffer'

 export default {
  name: 'CanvasChart',
@@ -118,10 +139,12 @@ export default {
    CanvasChartSource,
    CanvasChartFilter,
    CanvasChartFilterPopup,
+    CanvasChartRealTimeDisplay,
+    CanvasChartRealTimeCalculation,
  },
  props: {
    chartID: {
-      type: Number,
+      type: [Number, String],
      required: true,
    },
    cardclass: {
@@ -141,16 +164,19 @@ export default {
  },
  computed: {
    ...mapFields('', [
-      'developer_mode',
+      'developerMode',
    ]),
    ...mapFields('taskContent', [
      'chartData',
      'taskContentChartKey',
+      'deviceListNew',
+      'taskContentChartPanelKey',
    ]),
  },
  data () {
    return {
      data: null,
+      rawData: null,
      tabValue: 0,
      resizeTimer: null,
      mappingSelect: '',
@@ -161,9 +187,30 @@ export default {
      threeAxisIntervalInput: 'auto',
      xIntervalInput: 'auto',
      yIntervalInput: 'auto',
+      dataZoomStart: 0,
+      dataZoomEnd: 100,
+      captured: false,
+      calClicked: false,
+      dataStreamBuffer: dataStreamBuffer,
    }
  },
  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) {
+      this.dataZoomStart = e.batch[0].start
+      this.dataZoomEnd = e.batch[0].end
+    },
    timeIntervalChange: function (val) {
      if (!isNaN(parseInt(val))) {
        this.chartData[this.chartID].xAxis.forEach(x => {
@@ -175,7 +222,7 @@ export default {
        this.timeIntervalInput = 'auto'
        this.chartData[this.chartID].xAxis.forEach(x => {
          if (x.type === 'time') {
-            x.interval = 500 * 1000
+            x.interval = null
          }
        })
      }
@@ -195,7 +242,7 @@ export default {
          }
        })
      }
-      await this.taskContentChartSaveToCache()
+      await this.taskContentChartSaveToCache({ controllerID: taskInfo.getTaskInfo().controllerID })
    },
    yIntervalChange: async function (val) {
      if (!isNaN(parseInt(val))) {
@@ -203,36 +250,36 @@ export default {
          if (parseInt(y.channel) <= 255) {
            if (this.chartData[this.chartID].chartYUnit === 'uV') {
              y.interval = parseInt(val)
-              //  console.log(y.interval)
            } else {
              y.interval = val * 1000
            }
            const maxList = []
            const minList = []
+            // TODO: follow this way to iterate the deviceID
            y.seriesIndex.forEach(i => {
              maxList.push(Math.max(...this.chartData[this.chartID].series[i].data.map(p => p[1])))
              minList.push(Math.min(...this.chartData[this.chartID].series[i].data.map(p => p[1])))
            })
-            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))) {
@@ -275,9 +322,10 @@ export default {
    },
    refreshMappingSelect: async function () {
      this.setMappingSelect(this.chartData[this.chartID].mappingID)
-      if (this.chartData[this.chartID].mappingID !== -1 && this.chartData[this.chartID].mappingID != null) {
+      if (this.chartData[this.chartID].mappingID !== '-1' && this.chartData[this.chartID].mappingID != null) {
        taskInfo.getMappingList().forEach(item => {
          if (item.id === this.chartData[this.chartID].mappingID) {
+            // console.log('item.name: ', item.name)
            this.setChartName(item.name)
          }
        })
@@ -322,13 +370,27 @@ export default {
        type: 'legendInverseSelect',
      })
    },
-
+    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.$refs.CanvasChartRealTimeDisplay.matchData(this.data)
+    },
+    switchModeButton: function (dataMode, gridIndex, channelIndex) {
+      // console.log('switchModeBtn')
+      this.$refs.CanvasChartRealTimeDisplay.matchFunctional(String(dataMode), gridIndex, channelIndex)
+    },
    ...mapActions('taskContent', [
      taskTypes.chart.saveToCache,
    ]),
  },
  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()
@@ -65,7 +65,7 @@ export default {
  name: 'canvas-chart-filter',
  props: {
    chartID: {
-      type: Number,
+      type: [Number, String],
      required: true,
    },
    filterIndex: {
@@ -29,7 +29,7 @@ export default {
  },
  props: {
    chartID: {
-      type: Number,
+      type: [Number, String],
      required: true,
    },
    chartRef: {
@@ -66,7 +66,7 @@ export default {
  name: 'canvas-chart-filter-individual-filter',
  props: {
    chartID: {
-      type: Number,
+      type: [Number, String],
      required: true,
    },
    seriesIndex: {
@@ -0,0 +1,421 @@
+<template>
+  <div>
+    <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>
+
+<script>
+// import CanvasChartFilter from './CanvasChartFilter.vue'
+// import CanvasChartFilterPopup from './CanvasChartFilterPopup.vue'
+// import CanvasChartSource from './CanvasChartSource'
+// import { taskInfo } from '../../../../data/task/TaskInfo'
+import { mapFields } from 'vuex-map-fields'
+import { mapActions } from 'vuex'
+import taskTypes from '@/store/modules/task/content/types'
+import paramTable from '@/data/config-table/index'
+// import newTooltip from '@/factories/chart/tooltipFactory'
+import { getTimeFormatter } from '@/store/modules/task/content/actions/chartAct'
+import sgFilter from '@/data/SGFilter'
+
+export default {
+  name: 'CanvasChartRealTimeCalculation',
+  components: {
+  },
+  props: {
+    chartID: {
+      type: [Number, String],
+      required: true,
+    },
+  },
+  computed: {
+    ...mapFields('', [
+      'developerMode',
+    ]),
+    ...mapFields('taskContent', [
+      'chartData',
+      'taskContentChartKey',
+      'deviceListNew',
+    ]),
+  },
+  data () {
+    return {
+      info: null,
+      paramTable: paramTable,
+      rawData: null,
+      mode_name: '',
+      xName: '',
+      yName: '',
+      obj: null,
+      integralClicked: false,
+      xlogClicked: false,
+      ylogClicked: false,
+      diffClicked: false,
+      disableDiff: false,
+      disableLog: false,
+      disableInt: false,
+      sgFilterArgument: {
+        windowSize: 5,
+        polynomial: 3,
+      },
+    }
+  },
+  // watch rawData is use for detect whether the chartData is changed
+  watch: {
+    rawData: {
+      deep: true,
+      handler: function () {
+        // avoid getting null data
+        if (this.rawData.series.length > 0) {
+          this.watchHandler()
+        }
+      },
+    },
+  },
+  methods: {
+    // Do arithmetic operations triggered by button(raw, integral, log)
+    watchHandler: function () {
+      // this.data need to be deep copy from rawData, since we don't want to modify the source(chartData[])
+      // this.data = Object.assign({}, this.rawData)
+      this.data = JSON.parse(JSON.stringify(this.rawData))
+      this.addSource()
+      var curXData = 0
+      var curYData = 0
+      // var prevXData = 0
+      var prevYData = 0
+      var deltaX = 0
+      var deltaTime = 0
+      var curTime = 0
+      var integralResult = 0
+      // var diffResult = 0
+      var index = 0
+      var timeIndex = this.getTimeIndex()
+      var _data = []
+      const dataLength = this.data.series[0].data.length
+      const seriesData = this.data.series[0].data
+      if (this.integralClicked) {
+        for (index = 0; index < dataLength; index++) {
+          // console.log('x: ', seriesData[index][0])
+          // console.log('y: ', seriesData[index][1])
+          if (index === 0) {
+            // TODO: need to change the series[deviceID]
+            // TODO: change the time index(dynamic changing)
+            curYData = parseFloat(seriesData[index][1])
+            // deltaX = seriesData[index + 1][timeIndex] - seriesData[index][timeIndex]
+            curXData = parseFloat(seriesData[index][0])
+            curTime = seriesData[index][timeIndex]
+            if (this.mode_name === 'I-T Graph') {
+              _data.push([curTime, 0])
+            } else {
+              _data.push([curXData, 0, 0])
+            }
+          } else {
+            prevYData = parseFloat(seriesData[index - 1][1])
+            curYData = parseFloat(seriesData[index][1])
+            curXData = parseFloat(seriesData[index][0])
+            deltaX = seriesData[index][0] - seriesData[index - 1][0]
+            deltaTime = seriesData[index][timeIndex] - seriesData[index - 1][timeIndex]
+            integralResult += parseFloat((Math.abs(curYData) + Math.abs(prevYData)) * Math.abs(deltaX) / 2)
+            curTime += deltaTime
+            if (this.mode_name === 'I-T Graph') {
+              _data.push([curTime, integralResult])
+            } else {
+              _data.push([curXData, integralResult, curTime])
+            }
+          }
+        }
+      } else if (this.xlogClicked || this.ylogClicked) {
+        if (this.xlogClicked && this.ylogClicked) {
+          for (index = 0; index < dataLength; index++) {
+            if (index === 0) {
+              curXData = parseFloat(seriesData[index][0])
+              curYData = parseFloat(seriesData[index][1])
+              deltaX = seriesData[index + 1][timeIndex] - seriesData[index][timeIndex]
+              curTime = seriesData[index][timeIndex]
+              if (curXData !== 0 && curYData !== 0) {
+                _data.push([Math.log10(Math.abs(curXData)), Math.log10(Math.abs(curYData)), curTime])
+              }
+            } else {
+              curXData = parseFloat(seriesData[index][0])
+              curYData = parseFloat(seriesData[index][1])
+              curTime += deltaX
+              if (curXData !== 0 && curYData !== 0) {
+                _data.push([Math.log10(Math.abs(curXData)), Math.log10(Math.abs(curYData)), curTime])
+              }
+            }
+          }
+        } else if (this.xlogClicked && !(this.ylogClicked)) {
+          for (index = 0; index < dataLength; index++) {
+            if (index === 0) {
+              curXData = parseFloat(seriesData[index][0])
+              curYData = parseFloat(seriesData[index][1])
+              deltaX = seriesData[index + 1][timeIndex] - seriesData[index][timeIndex]
+              curTime = seriesData[index][timeIndex]
+              if (curXData !== 0) {
+                _data.push([Math.log10(Math.abs(curXData)), curYData, curTime])
+              }
+            } else {
+              curXData = parseFloat(seriesData[index][0])
+              curYData = parseFloat(seriesData[index][1])
+              curTime += deltaX
+              if (curXData !== 0) {
+                _data.push([Math.log10(Math.abs(curXData)), curYData, curTime])
+              }
+            }
+          }
+        } else if (!(this.xlogClicked) && this.ylogClicked) {
+          for (index = 0; index < dataLength; index++) {
+            if (index === 0) {
+              curXData = parseFloat(seriesData[index][0])
+              curYData = parseFloat(seriesData[index][1])
+              deltaX = seriesData[index + 1][timeIndex] - seriesData[index][timeIndex]
+              curTime = seriesData[index][timeIndex]
+              if (curYData !== 0) {
+                _data.push([curXData, Math.log10(Math.abs(curYData)), curTime])
+              }
+            } else {
+              curXData = parseFloat(seriesData[index][0])
+              curYData = parseFloat(seriesData[index][1])
+              curTime += deltaX
+              if (curYData !== 0) {
+                _data.push([curXData, Math.log10(Math.abs(curYData)), curTime])
+              }
+            }
+          }
+        }
+      } else if (this.diffClicked) {
+        const dataX = []
+        const dataY = []
+        const time = []
+        for (index = 0; index < dataLength; index++) {
+          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) {
+        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) {
+        this.$emit('switchModeButton', 'differential', 0, 0)
+      } else {
+        this.$emit('switchModeButton', 'default', 0, 0)
+      }
+      // TODO: modify the redundant code
+      if (this.xName === 'TIME') {
+        this.data.xAxis[0].axisLabel.formatter = function (val) {
+          return getTimeFormatter(val)
+        }
+      }
+      // this.data.yAxis[0].boundaryGap = [String(this.yBottomBoundary) + '%', '10%']
+      // console.log(this.data.yAxis[0].boundaryGap)
+      this.$emit('refreshData', this.data, dataRaw)
+    },
+    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 || device.status === 1) {
+          this.watchHandler()
+        }
+      }
+    },
+    clickXLog: function () {
+      if (this.xlogClicked) {
+        this.xlogClicked = false
+        if (this.ylogClicked) {
+          this.disableDiff = true
+          this.disableInt = true
+        } else {
+          this.disableDiff = false
+          this.disableInt = false
+        }
+      } else {
+        this.xlogClicked = true
+        this.disableDiff = true
+        this.disableInt = true
+      }
+      const device = this.deviceListNew.find(ele => String(ele.memory_board) === String(this.data.mappingID))
+      if (device !== undefined) {
+        if (device.status === 0 || device.status === 1) {
+          this.watchHandler()
+        }
+      }
+    },
+    clickYLog: function () {
+      if (this.ylogClicked) {
+        this.ylogClicked = false
+        if (this.xlogClicked) {
+          this.disableDiff = true
+          this.disableInt = true
+        } else {
+          this.disableDiff = false
+          this.disableInt = false
+        }
+      } else {
+        this.ylogClicked = true
+        this.disableDiff = true
+        this.disableInt = true
+      }
+      const device = this.deviceListNew.find(ele => String(ele.memory_board) === String(this.data.mappingID))
+      if (device !== undefined) {
+        if (device.status === 0 || device.status === 1) {
+          this.watchHandler()
+        }
+      }
+    },
+    clickDiff: function () {
+      this.diffClicked = !(this.diffClicked)
+      this.disableLog = !(this.disableLog)
+      this.disableInt = !(this.disableInt)
+      const device = this.deviceListNew.find(ele => String(ele.memory_board) === String(this.data.mappingID))
+      if (device !== undefined) {
+        if (device.status === 0 || device.status === 1) {
+          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]
+    // 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%']
+    // }
+  },
+}
+
+</script>
@@ -0,0 +1,261 @@
+<template>
+  <div>
+    <!-- cycle display -->
+    <div v-if="data !== null && data.cycle > 0" class="row flex sm12 xl12 md12 xs12 align--center my-0 py-0">
+      <div  style="text-align: right;">
+        <h1 style="color: #707ee7;"> cycle <span style="color: white; background-color: #707ee7; border-radius: 40%;" class="pa-2">{{ data.cycle }}</span></h1>
+      </div>
+    </div>
+    <div v-for="(chart, chartIndex) in realTime" :key="'c'+chartIndex">
+      <div v-for="(grid, gridIndex) in chart" :key="'s'+gridIndex" class="row ma-0 pa-0">
+        <div class="col flex xs0 sm0 lg0 md0 xl0 xxl1"/>
+        <div class="col flex xs2 sm2 lg2 md2 xl2 xxl1" pa-0 ma-0>
+          <p color="primary" style="text-align: right;">{{ grid.name }}</p>
+        </div>
+        <!-- value (y-axis) -->
+        <div class="col flex sm2 xl2 md2 xs2">
+          <va-input
+            label="y-value"
+            disable="disable"
+            v-model="grid.yValue"
+          />
+        </div>
+        <!-- unit (y-axis) -->
+        <div class="col flex sm2 xl2 md2 xs2">
+          <va-select
+            label="y-unit"
+            v-model="grid.yUnit"
+            :options="grid.yUnitOption"
+            noClear
+          />
+        </div>
+        <div class="col flex sm1 xl1 md1 xs1"></div>
+        <!-- value (x-axis) -->
+        <div class="col flex sm2 xl2 md2 xs2">
+          <va-input
+            label="x-value"
+            disable="disable"
+            v-model="grid.xValue"
+          />
+        </div>
+        <!-- unit (x-axis) -->
+        <div class="col flex sm2 xl2 md2 xs2">
+          <va-select
+            label="x-unit"
+            v-model="grid.xUnit"
+            :options="grid.xUnitOption"
+            noClear
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapFields } from 'vuex-map-fields'
+import { chartRouter } from './CanvasChartTable'
+import configTable from '@/data/config-table/index.js'
+import newTooltip from '@/factories/chart/tooltipFactory'
+
+export default {
+  name: 'CanvasChartRealTimeDisplay',
+  props: {
+    chartID: {
+      type: [Number, String],
+      required: true,
+    },
+  },
+  computed: {
+    ...mapFields('taskContent', [
+      'chartData',
+      'deviceListNew',
+    ]),
+  },
+  data () {
+    return {
+      data: null,
+      configTable: configTable,
+      chartRouter: chartRouter,
+      realTime: [[]],
+    }
+  },
+  methods: {
+    // for user to choose wanted unit
+    setUnit: function (gridIndex, channelIndex) {
+      // construct realTime object, i.e., record the coressponding value and unit
+      // the formate imitates the data.gridSource
+      if (this.data !== undefined && this.data.gridSource !== undefined) {
+        const _xPhysicsQuantity = this.data.gridSource[gridIndex][channelIndex].name.split('_')[0].at(-1)
+        const _yPhysicsQuantity = this.data.gridSource[gridIndex][channelIndex].name.split('_')[1].at(-1)
+        const [_xAxis, _yAxis] = this.chartRouter.getChartTable(_xPhysicsQuantity, _yPhysicsQuantity)
+        const _realTime = JSON.parse(JSON.stringify(this.realTime))
+        const _newChannel = {}
+        // set name, sourceIndex in data.series
+        _newChannel.name = this.data.gridSource[gridIndex][channelIndex].name
+        _newChannel.seriesSource = this.data.series.findIndex((ele) => ele.name === _newChannel.name)
+        // set x-axis
+        _newChannel.xValue = 0
+        _newChannel.xUnit = _xAxis.default.defaultUnit
+        _newChannel.xScale = _xAxis.default.unit
+        _newChannel.xUnitOption = Object.keys(_xAxis.default.unit)
+        _newChannel.xName = _xAxis.default.name
+        // set y-axis
+        _newChannel.yValue = 0
+        _newChannel.yUnit = _yAxis.default.defaultUnit
+        _newChannel.yScale = _yAxis.default.unit
+        _newChannel.yUnitOption = Object.keys(_yAxis.default.unit)
+        _newChannel.yName = _yAxis.default.name
+        // set functional
+        _newChannel.functional = 'default'
+
+        // padding
+        while (gridIndex >= _realTime.length) {
+          _realTime.push([])
+        }
+        while (channelIndex >= _realTime[gridIndex].length) {
+          _realTime[gridIndex].push({})
+        }
+
+        // merge the additional part into original part
+        _realTime[gridIndex][channelIndex] = _newChannel
+        this.realTime = _realTime
+      }
+    },
+    // record the latest data as the real time value
+    updateValue: function () {
+      if ((this.realTime.length === 0)) {
+        return
+      }
+      for (let gridIndex = 0; gridIndex < this.realTime.length; gridIndex++) {
+        for (let channelIndex = 0; channelIndex < this.realTime[gridIndex].length; channelIndex++) {
+          // miss the source of data -> try to find the source
+          if (this.realTime[gridIndex][channelIndex].seriesSource === -1) {
+            this.realTime[gridIndex][channelIndex].seriesSource = this.data.series.findIndex((ele) => ele.name === this.realTime[gridIndex][channelIndex].name)
+          }
+
+          // the device is active now --> update the real time value
+          if (this.data.series[this.realTime[gridIndex][channelIndex].seriesSource] !== undefined && this.data.series[this.realTime[gridIndex][channelIndex].seriesSource].data !== undefined && this.data.series[this.realTime[gridIndex][channelIndex].seriesSource].data.length > 0) {
+            this.realTime[gridIndex][channelIndex].xValue = (this.data.series[this.realTime[gridIndex][channelIndex].seriesSource].data.at(-1)[0] / this.realTime[gridIndex][channelIndex].xScale[this.realTime[gridIndex][channelIndex].xUnit]).toFixed(3)
+            this.realTime[gridIndex][channelIndex].yValue = (this.data.series[this.realTime[gridIndex][channelIndex].seriesSource].data.at(-1)[1] / this.realTime[gridIndex][channelIndex].yScale[this.realTime[gridIndex][channelIndex].yUnit]).toFixed(3)
+          }
+        }
+      }
+    },
+    // match the number of real time display bar to data.gridSource
+    matchChart: function () {
+      for (let gridIndex = 0; gridIndex < this.data.gridSource.length; gridIndex++) {
+        if (this.data.gridSource[gridIndex] !== undefined) {
+          for (let channelIndex = 0; channelIndex < this.data.gridSource[gridIndex].length; channelIndex++) {
+            if (gridIndex >= this.realTime.length) {
+              this.setUnit(gridIndex, channelIndex)
+            } else if (channelIndex >= this.realTime[gridIndex].length) {
+              this.setUnit(gridIndex, channelIndex)
+            }
+          }
+        }
+      }
+    },
+    // match the formatter to current unit and functional
+    matchFormatter: function () {
+      for (let gridIndex = 0; gridIndex < this.realTime.length; gridIndex++) {
+        for (let channelIndex = 0; channelIndex < this.realTime[gridIndex].length; channelIndex++) {
+          if (channelIndex === 0) {
+            const _xUnit = this.realTime[gridIndex][channelIndex].xUnit
+            const _yUnit = this.realTime[gridIndex][channelIndex].yUnit
+            const _xScale = this.realTime[gridIndex][channelIndex].xScale[this.realTime[gridIndex][channelIndex].xUnit]
+            const _yScale = this.realTime[gridIndex][channelIndex].yScale[this.realTime[gridIndex][channelIndex].yUnit]
+
+            // update xAxis.formatter
+            if (this.realTime[gridIndex][channelIndex].xName === 'Time') {
+              this.data.xAxis[gridIndex].axisLabel.formatter = this.timeFormatter
+            } else {
+              this.data.xAxis[gridIndex].axisLabel.formatter = function (val) {
+                return parseFloat(val / _xScale).toFixed(2) + _xUnit
+              }
+            }
+            // update yAxis.formatter
+            if (this.realTime[gridIndex][channelIndex].yName === 'Time') {
+              this.data.yAxis[gridIndex].axisLabel.formatter = this.timeFormatter
+            } else {
+              this.data.yAxis[gridIndex].axisLabel.formatter = function (val) {
+                return parseFloat(val / _yScale).toFixed(2) + _yUnit
+              }
+            }
+            // update tooltip.formatter
+            this.data.tooltip.formatter = newTooltip(this.realTime).formatter
+          }
+        }
+      }
+    },
+    // match the data to operated data in CanvasChart.vue
+    matchData: function (canvasChartData) {
+      this.data = canvasChartData
+    },
+    // match the functional to operated data in CanvasChart.vue
+    matchFunctional: function (newFunctional, gridIndex, channelIndex) {
+      if (this.realTime[gridIndex][channelIndex] === undefined) return
+      if (this.realTime[gridIndex][channelIndex].functional === newFunctional) return
+      const _currChannel = this.realTime[gridIndex][channelIndex]
+      const _xPhysicsQuantity = this.data.gridSource[gridIndex][channelIndex].name.split('_')[0].at(-1)
+      const _yPhysicsQuantity = this.data.gridSource[gridIndex][channelIndex].name.split('_')[1].at(-1)
+      const [_xAxis, _yAxis] = this.chartRouter.getChartTable(_xPhysicsQuantity, _yPhysicsQuantity)
+
+      _currChannel.functional = newFunctional
+      // set x-axis
+      _currChannel.xUnit = _xAxis.default.defaultUnit
+      _currChannel.xScale = _xAxis.default.unit
+      _currChannel.xUnitOption = Object.keys(_xAxis.default.unit)
+      _currChannel.xName = _xAxis.default.name
+      // set y-axis
+      _currChannel.yUnit = _yAxis[newFunctional].defaultUnit
+      _currChannel.yScale = _yAxis[newFunctional].unit
+      _currChannel.yUnitOption = Object.keys(_yAxis[newFunctional].unit)
+      _currChannel.yName = _yAxis[newFunctional].name
+    },
+    timeFormatter: function (val) {
+      let label = ''
+      const hour = Math.floor(val / 3.6e9)
+      const minute = Math.floor((val % 3.6e9) / 1000000 / 60)
+      const second = Math.floor((val % 6e7) / 1000000)
+      const millisecond = Math.floor((val % 1e6) / 1000)
+      const microsecond = Math.floor(val % 1e6) - 1000 * millisecond
+
+      if (hour > 0) {
+        label += hour + ' h '
+      }
+      if (minute > 0) {
+        label += minute + ' m '
+      }
+      if (second > 0) {
+        label += second + ' s '
+      }
+      if (millisecond > 0) {
+        label += millisecond + ' ms '
+      }
+      if (microsecond >= 0 && hour === 0 && minute === 0 && second === 0) {
+        label += microsecond + ' µs '
+      }
+      return label
+    },
+  },
+  mounted () {
+    this.data = this.chartData[this.chartID]
+  },
+  watch: {
+    data: {
+      handler: function () {
+        this.updateValue()
+        this.matchChart()
+      },
+      deep: true,
+    },
+    realTime: {
+      handler: function () {
+        this.matchFormatter()
+      },
+      deep: true,
+    },
+  },
+}
+</script>
@@ -30,7 +30,7 @@ export default {
  name: 'canvas-chart-setting',
  props: {
    chartID: {
-      type: Number,
+      type: [Number, String],
      required: true,
    },
  },
@@ -95,7 +95,7 @@ export default {
  name: 'canvas-chart-source',
  props: {
    chartID: {
-      type: Number,
+      type: [Number, String],
      required: true,
    },
  },
@@ -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,8 @@ export default {
      }
      this.sourceAddStatus = true
      this.clearSelectOptions()
-      await this.taskContentChartSaveToCache()
+      await this.taskContentChartSaveToCache({ controllerID: taskInfo.getTaskInfo().controllerID })
+      this.$emit('addSource')
    },
    async addGrid () {
      this.taskContentChartUpdateGridList({
@@ -358,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) {
@@ -0,0 +1,191 @@
+const chartTable = {
+  // split 'A-B' by '-',
+  // then A-B[0] is about 'A' and A-B[1] is about 'B'
+  T_V: [
+    // 0
+    {
+      default: {
+        name: 'Time',
+        unit: {
+          us: 1,
+          ms: 1e3,
+          s: 1e6,
+          min: 60 * 1e6,
+          hour: 60 * 60 * 1e6,
+        },
+        defaultUnit: 's',
+        downloadUnit: 'ms',
+      },
+    },
+    // 1
+    {
+      default: {
+        name: 'Voltage',
+        unit: {
+          uV: 1,
+          mV: 1e3,
+          V: 1e6,
+        },
+        defaultUnit: 'mV',
+        downloadUnit: 'mV',
+      },
+    },
+  ],
+  T_I: [
+    // 0
+    {
+      default: {
+        name: 'Time',
+        unit: {
+          us: 1,
+          ms: 1e3,
+          s: 1e6,
+          min: 60 * 1e6,
+          hour: 60 * 60 * 1e6,
+        },
+        defaultUnit: 's',
+        downloadUnit: 'ms',
+      },
+    },
+    // 1
+    {
+      default: {
+        name: 'Current',
+        unit: {
+          nA: 1,
+          uA: 1e3,
+          mA: 1e6,
+          A: 1e9,
+        },
+        defaultUnit: 'mA',
+        downloadUnit: 'mA',
+      },
+      // Q = ∫ I dt
+      integral: {
+        name: 'Charge',
+        unit: {
+          nC: 1e6,
+          uC: 1e9,
+          mC: 1e12,
+          C: 1e15,
+        },
+        defaultUnit: 'mC',
+        downloadUnit: 'mC',
+      },
+    },
+  ],
+  T_R: [
+    // 0
+    {
+      default: {
+        name: 'Time',
+        unit: {
+          us: 1,
+          ms: 1e3,
+          s: 1e6,
+          min: 60 * 1e6,
+          hour: 60 * 60 * 1e6,
+        },
+        defaultUnit: 's',
+        downloadUnit: 'ms',
+      },
+    },
+    // 1
+    {
+      default: {
+        name: 'Resistor',
+        unit: {
+          mΩ: 1,
+          Ω: 1e3,
+          kΩ: 1e6,
+          MΩ: 1e9,
+        },
+        defaultUnit: 'Ω',
+        downloadUnit: 'Ω',
+      },
+    },
+  ],
+  V_I: [
+    // 0
+    {
+      default: {
+        name: 'Voltage',
+        unit: {
+          uV: 1,
+          mV: 1e3,
+          V: 1e6,
+        },
+        defaultUnit: 'mV',
+        downloadUnit: 'mV',
+      },
+      // 𝜡 = dV/dI
+      differential: {
+        name: 'Impedance',
+        unit: {
+          mΩ: 1,
+          Ω: 1e3,
+          kΩ: 1e6,
+          MΩ: 1e9,
+        },
+        defaultUnit: 'Ω',
+        downloadUnit: 'Ω',
+      },
+      // Power = ∫ V di
+      integral: {
+        name: 'Power',
+        unit: {
+          mW: 1e12,
+          W: 1e15,
+          kW: 1e18,
+        },
+        defaultUnit: 'W',
+        downloadUnit: 'W',
+      },
+    },
+    // 1
+    {
+      default: {
+        name: 'Current',
+        unit: {
+          nA: 1,
+          uA: 1e3,
+          mA: 1e6,
+          A: 1e9,
+        },
+        defaultUnit: 'mA',
+        downloadUnit: 'mA',
+      },
+      // Gm = dI/dV
+      differential: {
+        name: 'Transconductance',
+        unit: {
+          'mA/V': 1,
+          'A/V': 1e3,
+          'kA/V': 1e6,
+        },
+        defaultUnit: 'A/V',
+        downloadUnit: 'A/V',
+      },
+      // Power = ∫ I dv
+      integral: {
+        name: 'Power',
+        unit: {
+          mW: 1e12,
+          W: 1e15,
+          kW: 1e18,
+        },
+        defaultUnit: 'W',
+        downloadUnit: 'W',
+      },
+    },
+  ],
+}
+export const chartRouter = {
+  getChartTable: (xAxis, yAxis) => {
+    const name1 = xAxis + '_' + yAxis
+    const name2 = yAxis + '_' + xAxis
+    if (chartTable[name1] !== undefined) return [chartTable[name1][0], chartTable[name1][1]]
+    else if (chartTable[name2] !== undefined) return [chartTable[name2][1], chartTable[name2][0]]
+    else return 'idiot'
+  },
+}
@@ -36,16 +36,19 @@
                <va-button @click.stop="start(device)" v-if="device.library_name.includes('Elite') && device.status !== 1" class="px-2 py-0 mr-0" color="success" small>START</va-button>
                <va-button @click.stop="stop(device)" v-if="device.library_name.includes('Elite') && device.status === 1" class="px-2 py-0 mr-0" color="danger" small>STOP</va-button>
                <va-button id="detectButton" @click.stop="detect(device)" v-if="device.library_name.includes('Elite')" color="primary" class="px-2 py-0 mr-0" small>DETECT</va-button>
+                <va-button  @click.stop="show($event, device)" v-if="developerMode" color="warning" class="px-2 py-0 mr-0" small>Show</va-button>
              </va-item-label>
            </va-item-section>
          </va-item>
        </span>
        <div slot="body">
-          <div>
-            <file-control-window :ref="'fcwindow_ref'" :device="device" class="pl-0 pr-0" />
-          </div>
-          <div v-if="device.library_name.includes('Elite')">
-            <elite-parameter-window :ref="'epwindow_ref'" :device="device" class="pl-0 pr-0" />
+          <div 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>
@@ -54,18 +57,22 @@
 </template>

 <script>
-import EliteParameterWindow from '../parameter/EliteParameterWindow'
+import DeviceParameterWindow from '../parameter/DeviceParameterWindow'
+// import EliteParameterWindow from '../parameter/EliteParameterWindow'
 // import NeuliveParameterWindow from '../parameter/NeuliveParameterWindow'
 import FileControlWindow from '../meta/FileControlWindow'
 import { mapActions } from 'vuex'
 import types from '@/store/modules/task/content/types'
 import { taskInfo } from '../../../../data/task/TaskInfo'
 import api from '@/data/api'
+// import CanvasChart from '../chart/CanvasChart'
+import { mapFields } from 'vuex-map-fields'

 export default {
  name: 'TaskDeviceList',
  components: {
-    EliteParameterWindow,
+    DeviceParameterWindow,
+    // EliteParameterWindow,
    // NeuliveParameterWindow,
    FileControlWindow,
  },
@@ -83,6 +90,9 @@ export default {
    }
  },
  computed: {
+    ...mapFields('', [
+      'developerMode',
+    ]),
  },
  methods: {
    mqttPub: function (topic, mes) {
@@ -90,7 +100,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) {
@@ -120,14 +130,15 @@ export default {
        api.task.update({
          device_config: taskInfo.getTaskInfo().deviceListNew,
        })
+        // CanvasChart.methods.resetClicked()
      }
    },
    stop: function (device) {
      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 () {
    },
@@ -145,6 +156,12 @@ export default {
      this.$emit('detect', device)
      this.pageToast('The device ' + device.name + ' has been detect.')
    },
+    show: function (event, device) {
+      this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
+        header: 'show_device_data/0',
+        device: device.memory_board,
+      }))
+    },
    recoverDetectButton () {
      document.getElementById('detectButton').className += ' no-dark-style-va-button'
    },
@@ -36,7 +36,7 @@
          :withHeader="true"
          :parameterName="name"
          :inputValue="parameter[name]"
-          :disable="name === 'CTRL_HIGH_Z_15' && device.status === 0"
+          :disable="name === 'CTRL_HIGH_Z_15' && device && device.status === 0"
          v-bind="parameterTable[name]"
          @parameterChange="parameterChange"
          @getParameter="getParameter"
@@ -71,7 +71,7 @@
          v-for="name in parameterArrayInMode"
          :key="name"
          :label="`${typeof parameterTable[name].showName === 'function'
-            ? parameterTable[name].showName(parameter.MODE)
+            ? parameterTable[name].showName(modeSelection)
            : parameterTable[name].showName} ${parameterValue(name)}`"
          style="font-size: 20px;"
        >
@@ -80,7 +80,7 @@
              :is="parameterTable[name].componentType"
              :parameterName="name"
              :inputValue="parameter[name]"
-              :disable="name === 'CTRL_HIGH_Z_15' && device.status === 0"
+              :disable="name === 'CTRL_HIGH_Z_15' && device && device.status === 0"
              v-bind="parameterTable[name]"
              @parameterChange="parameterChange"
              @getParameter="getParameter"
@@ -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"
@@ -126,7 +126,7 @@ import DevMode from '../parameter/itemNew/DevMode'
 import EliteParameterRecordingElitePulseSensing from '../parameter/itemNew/PulseSensingNew/EliteParameterRecordingElitePulseSensing'
 import { VueFinalModal } from 'vue-final-modal'
 import { mapFields } from 'vuex-map-fields'
-import parameterTable from '@/data/param-table/index.js'
+import configTable from '@/data/config-table/index'

 export default {
  name: 'EliteParameterRecordingElitezm15',
@@ -148,7 +148,9 @@ export default {
    },
    library: {
      type: String,
-      required: true,
+    },
+    serialNumber: {
+      type: [String, Array],
    },
    device: {
      type: Object,
@@ -156,9 +158,30 @@ export default {
    },
  },
  computed: {
+    parameterTable () {
+      if (this.library !== undefined) {
+        const config = configTable.getConfig(this.library)
+        if (config !== undefined) {
+          return config
+        }
+      }
+      if (this.serialNumber !== undefined) {
+        const config = configTable.getConfig(this.serialNumber)
+        if (config !== undefined) {
+          return config
+        }
+      }
+      return null
+    },
    parameterArrayInMode () {
      return this.workingModeSelect && this.parameterTable.MODE[this.workingModeSelect.id].parameter
    },
+    modeSelection () {
+      if (this.parameter.MODE) {
+        return this.parameter.MODE
+      }
+      return this.workingModeSelect.id
+    },
    getImageUrl () {
      if (this.workingModeSelect === null) {
        return 'IV-Wire'
@@ -174,7 +197,7 @@ export default {
      }
    },
    ...mapFields('', [
-      'developer_mode',
+      'developerMode',
    ]),
    ...mapFields('taskContent', [
      'deviceListNew',
@@ -184,7 +207,6 @@ export default {
  },
  data () {
    return {
-      parameterTable: parameterTable[this.library],
      showModal: false,
      workingModeSelect: null,
      workingModeOptions: [],
@@ -197,11 +219,12 @@ export default {
      this.$mqtt.publish(topic, mes)
    },
    parameterValue (name) {
+      const value = this.parameter[name]
      if (this.parameterTable[name].type === 'number') {
        const scale = this.parameterTable[name].unit[this.parameterTable[name].defaultUnit]
-        return ` ( ${this.parameterTable[name].outputReadabilityData(this.parameter[name], scale)} ${this.parameterTable[name].defaultUnit} )`
+        return ` ( ${this.parameterTable[name].outputReadabilityData(value, scale)} ${this.parameterTable[name].defaultUnit} )`
      } else if (this.parameterTable[name].type === 'array') {
-        return ` ( ${this.parameterTable[name].outputReadabilityData(this.parameter[name])} )`
+        return ` ( ${this.parameterTable[name].outputReadabilityData(value)} )`
      } else if (this.parameterTable[name].type === 'none') {
        return ''
      }
@@ -239,13 +262,12 @@ export default {
  },
  mounted () {
    // dev mode
-    // this.developer_mode === true
+    // this.developerMode === true
    //   ? this.workingModeOptions = this.workingModeDevOptions
    //   : this.workingModeOptions = this.workingModeNoDevOptions
    this.workingModeOptions = this.parameterTable.MODE_OPTIONS
-
    // init mode
-    this.workingModeSelect = this.workingModeOptions.find(ele => ele.id === this.parameter.MODE)
+    this.workingModeSelect = (this.parameter.MODE !== undefined) ? this.workingModeOptions.find(ele => ele.id === this.parameter.MODE) : this.workingModeOptions[0]
  },
  watch: {
  },
@@ -0,0 +1,78 @@
+<template>
+  <div v-if="device">
+    <device-parameter-recording
+      :parameter="device.configuration"
+      :library="device.library_name"
+      :serialNumber="device.serial_number"
+      :device="device"
+      @sendInstruction="sendInstruction"
+      @getParameter="getParameter"
+      @setParameter="setParameter"
+      @setParameterWithDebounce="setParameterWithDebounce"
+    />
+  </div>
+</template>
+
+<script>
+
+import DeviceParameterRecording from './DeviceParameterRecording'
+import { taskInfo } from '../../../../data/task/TaskInfo'
+import _ from 'lodash'
+
+export default {
+  name: 'EliteParameterWindow',
+  components: {
+    DeviceParameterRecording,
+  },
+  props: {
+    device: {
+      type: Object,
+    },
+  },
+  data () {
+    return {
+    }
+  },
+  mqtt: {
+  },
+  methods: {
+    mqttPublish: function (topic, mes) {
+      this.$mqtt.publish(topic, mes)
+    },
+    sendInstruction: function (instruction) {
+      this.mqttPublish(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
+        header: 'device_instruction/0',
+        device: this.device.mac_address,
+        instruction: instruction,
+      }))
+    },
+    getParameter: function (parameterName) {
+      this.mqttPublish(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
+        header: 'device_parameter_value/0',
+        device: this.device.mac_address,
+        parameter: parameterName,
+      }))
+    },
+    setParameter: function (parameterName, parameterValue) {
+      this.mqttPublish(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
+        header: 'device_parameter/0',
+        device: this.device.mac_address,
+        parameter: parameterName,
+        content: parameterValue,
+      }))
+    },
+    setParameterWithDebounce: _.debounce(function (parameterName, parameterValue) {
+      this.mqttPublish(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
+        header: 'device_parameter/0',
+        device: this.device.mac_address,
+        parameter: parameterName,
+        content: parameterValue,
+      }))
+    }, 100),
+  },
+  mounted () {
+  },
+  watch: {
+  },
+}
+</script>
@@ -120,7 +120,7 @@ import DevMode from '../parameter/itemNew/DevMode'
 import EliteParameterRecordingElitePulseSensing from '../parameter/itemNew/PulseSensingNew/EliteParameterRecordingElitePulseSensing'
 import { VueFinalModal } from 'vue-final-modal'
 import { mapFields } from 'vuex-map-fields'
-import parameterTable from '@/data/param-table/index.js'
+import parameterTable from '@/data/config-table/index.js'

 export default {
  name: 'EliteParameterRecordingElitezm15',
@@ -168,7 +168,7 @@ export default {
      }
    },
    ...mapFields('', [
-      'developer_mode',
+      'developerMode',
    ]),
    ...mapFields('taskContent', [
      'deviceListNew',
@@ -233,7 +233,7 @@ export default {
  },
  mounted () {
    // dev mode
-    // this.developer_mode === true
+    // this.developerMode === true
    //   ? this.workingModeOptions = this.workingModeDevOptions
    //   : this.workingModeOptions = this.workingModeNoDevOptions
    this.workingModeOptions = this.parameterTable.MODE_OPTIONS
@@ -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
@@ -25,7 +25,7 @@ export default {
        h: 60 * 60 * 1e6,
        auto: 1,
      },
-      defaultUnit: 'auto',
+      defaultUnit: 'us',
    },
    0: {
      name: 'I_in',
@@ -25,7 +25,7 @@ export default {
        h: 60 * 60 * 1e6,
        auto: 1,
      },
-      defaultUnit: 'auto',
+      defaultUnit: 'us',
    },
    0: {
      name: 'I_in',
@@ -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) => {
@@ -22,11 +22,10 @@ export default {
        us: 1,
        ms: 1e3,
        s: 1e6,
-        m: 60 * 1e6,
-        h: 60 * 60 * 1e6,
-        auto: 1,
+        minute: 60 * 1e6,
+        hour: 60 * 60 * 1e6,
      },
-      defaultUnit: 'auto',
+      defaultUnit: 'ms',
      downloadUnit: 'ms',
    },
    0: {
@@ -36,7 +35,7 @@ export default {
        uA: 1e3,
        mA: 1e6,
      },
-      defaultUnit: 'uA',
+      defaultUnit: 'mA',
      downloadUnit: 'mA',
    },
    1: {
@@ -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) => {
@@ -22,11 +22,10 @@ export default {
        us: 1,
        ms: 1e3,
        s: 1e6,
-        m: 60 * 1e6,
-        h: 60 * 60 * 1e6,
-        auto: 1,
+        minute: 60 * 1e6,
+        hour: 60 * 60 * 1e6,
      },
-      defaultUnit: 'auto',
+      defaultUnit: 'ms',
      downloadUnit: 'ms',
    },
    0: {
@@ -36,7 +35,7 @@ export default {
        uA: 1e3,
        mA: 1e6,
      },
-      defaultUnit: 'uA',
+      defaultUnit: 'mA',
      downloadUnit: 'mA',
    },
    1: {
@@ -57,6 +56,7 @@ export default {
        V: 1e6,
      },
      defaultUnit: 'mV',
+      downloadUnit: 'mV',
    },
  },
  charts: {
@@ -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) => {
@@ -22,11 +22,10 @@ export default {
        us: 1,
        ms: 1e3,
        s: 1e6,
-        m: 60 * 1e6,
-        h: 60 * 60 * 1e6,
-        auto: 1,
+        minute: 60 * 1e6,
+        hour: 60 * 60 * 1e6,
      },
-      defaultUnit: 'auto',
+      defaultUnit: 'ms',
      downloadUnit: 'ms',
    },
    0: {
@@ -36,7 +35,7 @@ export default {
        uA: 1e3,
        mA: 1e6,
      },
-      defaultUnit: 'uA',
+      defaultUnit: 'mA',
      downloadUnit: 'mA',
    },
    1: {
@@ -22,11 +22,10 @@ export default {
        us: 1,
        ms: 1e3,
        s: 1e6,
-        m: 60 * 1e6,
-        h: 60 * 60 * 1e6,
-        auto: 1,
+        minute: 60 * 1e6,
+        hour: 60 * 60 * 1e6,
      },
-      defaultUnit: 'auto',
+      defaultUnit: 'ms',
      downloadUnit: 'ms',
    },
    0: {
@@ -36,7 +35,7 @@ export default {
        uA: 1e3,
        mA: 1e6,
      },
-      defaultUnit: 'uA',
+      defaultUnit: 'mA',
      downloadUnit: 'mA',
    },
    1: {
@@ -24,9 +24,8 @@ export default {
        s: 1e6,
        m: 60 * 1e6,
        h: 60 * 60 * 1e6,
-        auto: 1,
      },
-      defaultUnit: 'auto',
+      defaultUnit: 'ms',
      downloadUnit: 'ms',
    },
    0: {
@@ -36,7 +35,7 @@ export default {
        uA: 1e3,
        mA: 1e6,
      },
-      defaultUnit: 'uA',
+      defaultUnit: 'mA',
      downloadUnit: 'mA',
    },
    1: {
@@ -27,11 +27,10 @@ export default {
        us: 1,
        ms: 1e3,
        s: 1e6,
-        m: 60 * 1e6,
-        h: 60 * 60 * 1e6,
-        auto: 1,
+        minute: 60 * 1e6,
+        hour: 60 * 60 * 1e6,
      },
-      defaultUnit: 'auto',
+      defaultUnit: 'ms',
      downloadUnit: 'ms',
    },
    0: {
@@ -41,7 +40,7 @@ export default {
        uA: 1e3,
        mA: 1e6,
      },
-      defaultUnit: 'uA',
+      defaultUnit: 'mA',
      downloadUnit: 'mA',
    },
    1: {
@@ -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) => {
@@ -22,11 +22,10 @@ export default {
        us: 1,
        ms: 1e3,
        s: 1e6,
-        m: 60 * 1e6,
-        h: 60 * 60 * 1e6,
-        auto: 1,
+        minute: 60 * 1e6,
+        hour: 60 * 60 * 1e6,
      },
-      defaultUnit: 'auto',
+      defaultUnit: 'ms',
      downloadUnit: 'ms',
    },
    0: {
@@ -36,7 +35,7 @@ export default {
        uA: 1e3,
        mA: 1e6,
      },
-      defaultUnit: 'uA',
+      defaultUnit: 'mA',
      downloadUnit: 'mA',
    },
    1: {
@@ -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) => {
@@ -22,11 +22,10 @@ export default {
        us: 1,
        ms: 1e3,
        s: 1e6,
-        m: 60 * 1e6,
-        h: 60 * 60 * 1e6,
-        auto: 1,
+        minute: 60 * 1e6,
+        hour: 60 * 60 * 1e6,
      },
-      defaultUnit: 'auto',
+      defaultUnit: 'ms',
      downloadUnit: 'ms',
    },
    0: {
@@ -36,7 +35,7 @@ export default {
        uA: 1e3,
        mA: 1e6,
      },
-      defaultUnit: 'uA',
+      defaultUnit: 'mA',
      downloadUnit: 'mA',
    },
    1: {
@@ -22,11 +22,10 @@ export default {
        us: 1,
        ms: 1e3,
        s: 1e6,
-        m: 60 * 1e6,
-        h: 60 * 60 * 1e6,
-        auto: 1,
+        minute: 60 * 1e6,
+        hour: 60 * 60 * 1e6,
      },
-      defaultUnit: 'auto',
+      defaultUnit: 'ms',
      downloadUnit: 'ms',
    },
    0: {
@@ -36,7 +35,7 @@ export default {
        uA: 1e3,
        mA: 1e6,
      },
-      defaultUnit: 'uA',
+      defaultUnit: 'mA',
      downloadUnit: 'mA',
    },
    1: {
@@ -22,11 +22,10 @@ export default {
        us: 1,
        ms: 1e3,
        s: 1e6,
-        m: 60 * 1e6,
-        h: 60 * 60 * 1e6,
-        auto: 1,
+        minute: 60 * 1e6,
+        hour: 60 * 60 * 1e6,
      },
-      defaultUnit: 'auto',
+      defaultUnit: 'ms',
      downloadUnit: 'ms',
    },
    0: {
@@ -36,7 +35,7 @@ export default {
        uA: 1e3,
        mA: 1e6,
      },
-      defaultUnit: 'uA',
+      defaultUnit: 'mA',
      downloadUnit: 'mA',
    },
    1: {
@@ -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) => {
@@ -22,11 +22,10 @@ export default {
        us: 1,
        ms: 1e3,
        s: 1e6,
-        m: 60 * 1e6,
-        h: 60 * 60 * 1e6,
-        auto: 1,
+        minute: 60 * 1e6,
+        hour: 60 * 60 * 1e6,
      },
-      defaultUnit: 'auto',
+      defaultUnit: 'ms',
      downloadUnit: 'ms',
    },
    0: {
@@ -36,7 +35,7 @@ export default {
        uA: 1e3,
        mA: 1e6,
      },
-      defaultUnit: 'uA',
+      defaultUnit: 'mA',
      downloadUnit: 'mA',
    },
    1: {
@@ -38,11 +38,10 @@ export default {
        us: 1,
        ms: 1e3,
        s: 1e6,
-        m: 60 * 1e6,
-        h: 60 * 60 * 1e6,
-        auto: 1,
+        minute: 60 * 1e6,
+        hour: 60 * 60 * 1e6,
      },
-      defaultUnit: 'auto',
+      defaultUnit: 'ms',
      downloadUnit: 'ms',
    },
    0: {
@@ -52,7 +51,7 @@ export default {
        uA: 1e3,
        mA: 1e6,
      },
-      defaultUnit: 'uA',
+      defaultUnit: 'mA',
      downloadUnit: 'mA',
    },
    1: {
@@ -62,7 +61,7 @@ export default {
        uA: 1e3,
        mA: 1e6,
      },
-      defaultUnit: 'uA',
+      defaultUnit: 'mA',
      downloadUnit: 'mA',
    },
  },
@@ -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) => {
@@ -22,11 +22,10 @@ export default {
        us: 1,
        ms: 1e3,
        s: 1e6,
-        m: 60 * 1e6,
-        h: 60 * 60 * 1e6,
-        auto: 1,
+        minute: 60 * 1e6,
+        hour: 60 * 60 * 1e6,
      },
-      defaultUnit: 'auto',
+      defaultUnit: 'ms',
      downloadUnit: 'ms',
    },
    0: {
@@ -36,7 +35,7 @@ export default {
        uA: 1e3,
        mA: 1e6,
      },
-      defaultUnit: 'uA',
+      defaultUnit: 'mA',
      downloadUnit: 'mA',
    },
    1: {
@@ -50,7 +49,7 @@ export default {
      downloadUnit: 'mV',
    },
    2: {
-      name: 'Resister',
+      name: 'Resistor',
      unit: {
        mΩ: 1,
        mohm: 1,
@@ -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) => {
@@ -22,11 +22,10 @@ export default {
        us: 1,
        ms: 1e3,
        s: 1e6,
-        m: 60 * 1e6,
-        h: 60 * 60 * 1e6,
-        auto: 1,
+        minute: 60 * 1e6,
+        hour: 60 * 60 * 1e6,
      },
-      defaultUnit: 'auto',
+      defaultUnit: 'ms',
      downloadUnit: 'ms',
    },
    0: {
@@ -36,7 +35,7 @@ export default {
        uA: 1e3,
        mA: 1e6,
      },
-      defaultUnit: 'uA',
+      defaultUnit: 'mA',
      downloadUnit: 'mA',
    },
    1: {
@@ -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,
+                },
+              },
+            ],
+          },
+        ],
+      },
+    ],
+  },
+}
@@ -24,7 +24,7 @@ export default {
        h: 60 * 60 * 1e6,
        auto: 1,
      },
-      defaultUnit: 'auto',
+      defaultUnit: 'us',
    },
    0: {
      name: '0',
@@ -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,
  },
 }

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

  into: (currentDataByChannel, currentDeviceID, currentChannel) => {
    // currentData = [ timeStart, d1, d2..... , timeEnd ]
-    // const currentData = JSON.parse(currentDataByChannel).binary.split(' ')
+    // const currentData = JSON.parse(currentDataByChannel).binary.split(' '))
    const currentData = currentDataByChannel.split(' ')
    // console.log(currentData)
    const timeStart = parseInt(currentData[0])
@@ -84,7 +84,7 @@ export const dataStreamBuffer = {
    //   console.log(dataBatch)
    // }
    for (const chart in _dataStreamBuffer) {
-      if (_dataStreamBuffer[chart][currentDeviceID] != null && _dataStreamBuffer[chart][currentDeviceID][currentChannel] != null) {
+      if (_dataStreamBuffer[chart][currentDeviceID] != null) {
        // const samplingDataBatch = {}
        // let lastTime = -1
        // dataBatch.forEach(data => {
@@ -95,6 +95,9 @@ export const dataStreamBuffer = {
        //   lastTime = samplingTime
        // })
        const _dataBatch = Array.from(dataBatch)
+        if (_dataStreamBuffer[chart][currentDeviceID][currentChannel] === undefined) {
+          _dataStreamBuffer[chart][currentDeviceID][currentChannel] = []
+        }
        _dataStreamBuffer[chart][currentDeviceID][currentChannel].push(_dataBatch)
        if (_dataStreamBuffer[chart][currentDeviceID][currentChannel].length > _dataStreamBufferSize) {
          _dataStreamBuffer[chart][currentDeviceID][currentChannel].shift()
@@ -109,7 +112,7 @@ export const dataStreamBuffer = {
  // pop the first batch data from datastream buffer
  pop: (chartID, deviceID, channel) => {
    if (_dataStreamBuffer[chartID] != null && _dataStreamBuffer[chartID][deviceID] != null &&
-        _dataStreamBuffer[chartID][deviceID][channel] != null && _dataStreamBuffer[chartID][deviceID][channel].length > 0) {
+      _dataStreamBuffer[chartID][deviceID][channel] != null && _dataStreamBuffer[chartID][deviceID][channel].length > 0) {
      return _dataStreamBuffer[chartID][deviceID][channel].shift()
    }
    return []
@@ -132,3 +135,10 @@ export const dataStreamBuffer = {
  },

 }
+/*
+{
+  "chartID" : {
+    "deviceID": {
+      "channel": [[dataset1], ... [dataset5], [datasetlog6]]
+  }
+} */
@@ -1,6 +1,6 @@
-function newChart (chartID) {
+function newChart (chartID, numOfCharts) {
  return {
-    chartID: parseInt(chartID),
+    chartID: chartID,
    chartType: 'detail',
    chartDevice: 'elite', // elite or neulive
    chartMode: 0,
@@ -8,17 +8,19 @@ function newChart (chartID) {
    chartYUnit: '',
    chartXMode: 'value', // value or time
    chartYMode: 'value', // value or time
-    cardName: 'chart' + String(chartID),
+    cardName: 'chart' + String(numOfCharts),
    cardHeight: '500px',
    cardWidth: 'auto',
-    mappingID: -1,
+    mappingID: '-1',
+    createdBy: '', // manual ror default
    run: false,
    timer: 0,
    legend: {
      type: 'scroll',
      data: [],
-      x: 'center',
-      y: '92%',
+      // x: 'center',
+      // y: '-10%',
+      bottom: '0%',
      textStyle: {
        color: '#34495e',
      },
@@ -34,6 +36,11 @@ function newChart (chartID) {
    yAxis: [],
    dataZoom: null,
    series: [],
+    cycle: 0,
+    // brush: {
+    //   /* toolbox: ['rect', 'polygon', 'lineX', 'lineY', 'keep', 'clear'],
+    //   xAxisIndex: 0, */
+    // },
  }
 }

@@ -5,7 +5,8 @@ function newDataZoom () {
    // top: '0%',
    height: '10px',
    // realtime: false,
-    bottom: '8%',
+    bottom: '6%',
+    brushSelect: false,
    zoomLock: false,
    handleStyle: {
      shadowColor: 'rgba(0, 0, 0, 0)',
@@ -13,6 +14,8 @@ function newDataZoom () {
    showDataShadow: false,
    showDetail: false,
    xAxisIndex: [],
+    start: 0,
+    end: 100,
  }, {
    type: 'inside',
    xAxisIndex: [],
@@ -0,0 +1,125 @@
+function getTime (val) {
+  let label = ''
+  const hour = Math.floor(val / 3.6e9)
+  const minute = Math.floor((val % 3.6e9) / 1000000 / 60)
+  const second = Math.floor((val % 6e7) / 1000000)
+  const millisecond = Math.floor((val % 1e6) / 1000)
+  const microsecond = Math.floor(val % 1e6) - 1000 * millisecond
+  if (hour > 0) {
+    label += hour + ' h '
+  }
+  if (minute > 0) {
+    label += minute + ' m '
+  }
+  if (second > 0) {
+    label += second + ' s '
+  }
+  if (millisecond > 0) {
+    label += millisecond + ' ms '
+  }
+  if (microsecond > 0 && hour === 0 && minute === 0 && second === 0) {
+    label += microsecond + ' µs '
+  }
+  return label
+}
+
+function newTooltip (chartID) {
+  return {
+    hideDelay: 5000,
+    trigger: 'axis',
+    backgroundColor: '#fff',
+    borderColor: 'rgba(0, 0, 200, 0.2)',
+    borderWidth: 1,
+    borderRadius: 0,
+    padding: 10,
+    // axisPointer: {
+    //   type: 'cross',
+    //   animation: false,
+    //   label: {
+    //     backgroundColor: '#505765',
+    //   },
+    // },
+    formatter: function (params) {
+      if (params.length) {
+        if (params[0].seriesName.split('_')[0] === 'T' && params[0].seriesName.split('_')[1] !== 'T') {
+          params.unshift({ seriesName: 'Time', value: [null, getTime(parseFloat(params[0].value[0]))], color: '#5193f2' })
+        } else if (params[0].seriesName.split('_')[0] !== 'T' && params[0].seriesName.split('_')[1] === 'T') {
+          params.unshift({ seriesName: 'Time', value: [null, getTime(parseFloat(params[0].value[1]))], color: '#5193f2' })
+        } else {
+          params.unshift({ seriesName: 'Time', value: [null, getTime(parseFloat(params[0].value[2]))], color: '#5193f2' })
+        }
+        let tip = ''
+        for (var i = 0; i < params.length; i++) {
+          const param = params[i]
+          const style = 'color: ' + param.color
+          let value
+          // console.log(param.value)
+          if (param.seriesName === 'Time') {
+            value = param.value[1]
+          } else if (param.seriesName.split('_')[1] === 'T' && param.seriesName.split('_')[0] !== 'T') {
+            const physicalQuantity = param.seriesName.split('_')[0][param.seriesName.split('_')[0].length - 1]
+            if (physicalQuantity === 'V') {
+              value = parseFloat(param.value[0]).toFixed(3) + ' μV'
+            } else if (physicalQuantity === 'I') {
+              value = parseFloat(param.value[0]).toFixed(3) + ' nA'
+            } else if (physicalQuantity === 'R') {
+              value = parseFloat(param.value[0]).toFixed(3) + ' mΩ'
+            } else if (physicalQuantity === 'X' || physicalQuantity === 'Y' || physicalQuantity === 'Z' || physicalQuantity === 'M') {
+              value = (parseFloat(param.value[0]) / 100).toFixed(3) + ' (g)'
+            } else if (!isNaN(physicalQuantity)) {
+              value = (parseFloat(param.value[0]) / 1000).toFixed(3) + ' (mV)'
+            } else {
+              value = parseFloat(param.value[0]).toFixed(3)
+            }
+          } else if (param.seriesName.split('_')[1] !== 'T' && param.seriesName.split('_')[0] === 'T') {
+            const physicalQuantity = param.seriesName.split('_')[1][param.seriesName.split('_')[1].length - 1]
+            if (physicalQuantity === 'V') {
+              value = parseFloat(param.value[1]).toFixed(3) + ' μV'
+            } else if (physicalQuantity === 'I') {
+              value = parseFloat(param.value[1]).toFixed(3) + ' nA'
+            } else if (physicalQuantity === 'R') {
+              value = parseFloat(param.value[1]).toFixed(3) + ' mΩ'
+            } else if (physicalQuantity === 'X' || physicalQuantity === 'Y' || physicalQuantity === 'Z' || physicalQuantity === 'M') {
+              value = (parseFloat(param.value[1]) / 100).toFixed(3) + ' (g)'
+            } else if (!isNaN(physicalQuantity)) {
+              value = (parseFloat(param.value[1]) / 1000).toFixed(3) + ' (mV)'
+            } else {
+              value = parseFloat(param.value[1]).toFixed(3)
+            }
+          } else {
+            let value1
+            let value2
+            if (param.seriesName.split('_')[0][param.seriesName.split('_')[0].length - 1] === 'V') {
+              value1 = parseFloat(param.value[0]).toFixed(3) + ' μV'
+            } else if (param.seriesName.split('_')[0][param.seriesName.split('_')[0].length - 1] === 'I') {
+              value1 = parseFloat(param.value[0]).toFixed(3) + ' nA'
+            } else if (param.seriesName.split('_')[0][param.seriesName.split('_')[0].length - 1] === 'R') {
+              value1 = parseFloat(param.value[0]).toFixed(3) + ' mΩ'
+            } else {
+              value1 = parseFloat(param.value[0]).toFixed(3)
+            }
+
+            if (param.seriesName.split('_')[1][param.seriesName.split('_')[1].length - 1] === 'V') {
+              value2 = parseFloat(param.value[1]).toFixed(3) + ' μV'
+            } else if (param.seriesName.split('_')[1][param.seriesName.split('_')[1].length - 1] === 'I') {
+              value2 = parseFloat(param.value[1]).toFixed(3) + ' nA'
+            } else if (param.seriesName.split('_')[1][param.seriesName.split('_')[1].length - 1] === 'R') {
+              value2 = parseFloat(param.value[1]).toFixed(3) + ' mΩ'
+            } else {
+              value2 = parseFloat(param.value[1]).toFixed(3)
+            }
+
+            value = value1 + ', ' + value2
+          }
+          tip += '<span style="' + style + '">' +
+                            param.seriesName +
+                            '：</span><span style="' +
+                            style + '">' + value + '</span><br>'
+        }
+        return tip
+      }
+    },
+  }
+}
+
+export default newTooltip
@@ -55,14 +55,11 @@ function newSeries (type, legendName, xAxisIndex, yAxisIndex, xAxisSource, yAxis
    xAxisSource: xAxisSource,
    yAxisSource: yAxisSource,
    animation: false,
-    hoverAnimation: false,
    dataXMax: null,
    dataXMin: null,
    dataYMax: null,
    dataYMin: null,
    itemStyle: {
-      normal: {
-      },
    },
    lineStyle: {
      width: 1.5,
@@ -5,6 +5,7 @@ function getTime (val) {
  const second = Math.floor((val % 6e7) / 1000000)
  const millisecond = Math.floor((val % 1e6) / 1000)
  const microsecond = Math.floor(val % 1e6) - 1000 * millisecond
+
  if (hour > 0) {
    label += hour + ' h '
  }
@@ -17,13 +18,13 @@ function getTime (val) {
  if (millisecond > 0) {
    label += millisecond + ' ms '
  }
-  if (microsecond > 0 && hour === 0 && minute === 0 && second === 0) {
+  if (microsecond >= 0 && hour === 0 && minute === 0 && second === 0) {
    label += microsecond + ' µs '
  }
  return label
 }

-function newTooltip (chartID) {
+function newTooltip (realTime, dataMode) {
  return {
    hideDelay: 5000,
    trigger: 'axis',
@@ -32,92 +33,46 @@ function newTooltip (chartID) {
    borderWidth: 1,
    borderRadius: 0,
    padding: 10,
-    // axisPointer: {
-    //   type: 'cross',
-    //   animation: false,
-    //   label: {
-    //     backgroundColor: '#505765',
-    //   },
-    // },
+
    formatter: function (params) {
-      if (params.length) {
-        if (params[0].seriesName.split('_')[0] === 'T' && params[0].seriesName.split('_')[1] !== 'T') {
-          params.unshift({ seriesName: 'Time', value: [null, getTime(parseFloat(params[0].value[0]))], color: '#5193f2' })
-        } else if (params[0].seriesName.split('_')[0] !== 'T' && params[0].seriesName.split('_')[1] === 'T') {
-          params.unshift({ seriesName: 'Time', value: [null, getTime(parseFloat(params[0].value[1]))], color: '#5193f2' })
-        } else {
-          params.unshift({ seriesName: 'Time', value: [null, getTime(parseFloat(params[0].value[2]))], color: '#5193f2' })
-        }
-        let tip = ''
-        for (var i = 0; i < params.length; i++) {
-          const param = params[i]
-          const style = 'color: ' + param.color
-          let value
-          // console.log(param.value)
-          if (param.seriesName === 'Time') {
-            value = param.value[1]
-          } else if (param.seriesName.split('_')[1] === 'T' && param.seriesName.split('_')[0] !== 'T') {
-            const physicalQuantity = param.seriesName.split('_')[0][param.seriesName.split('_')[0].length - 1]
-            if (physicalQuantity === 'V') {
-              value = parseFloat(param.value[0]).toFixed(3) + ' μV'
-            } else if (physicalQuantity === 'I') {
-              value = parseFloat(param.value[0]).toFixed(3) + ' nA'
-            } else if (physicalQuantity === 'R') {
-              value = parseFloat(param.value[0]).toFixed(3) + ' mΩ'
-            } else if (physicalQuantity === 'X' || physicalQuantity === 'Y' || physicalQuantity === 'Z' || physicalQuantity === 'M') {
-              value = (parseFloat(param.value[0]) / 100).toFixed(3) + ' (g)'
-            } else if (!isNaN(physicalQuantity)) {
-              value = (parseFloat(param.value[0]) / 1000).toFixed(3) + ' (mV)'
-            } else {
-              value = parseFloat(param.value[0]).toFixed(3)
-            }
-          } else if (param.seriesName.split('_')[1] !== 'T' && param.seriesName.split('_')[0] === 'T') {
-            const physicalQuantity = param.seriesName.split('_')[1][param.seriesName.split('_')[1].length - 1]
-            if (physicalQuantity === 'V') {
-              value = parseFloat(param.value[1]).toFixed(3) + ' μV'
-            } else if (physicalQuantity === 'I') {
-              value = parseFloat(param.value[1]).toFixed(3) + ' nA'
-            } else if (physicalQuantity === 'R') {
-              value = parseFloat(param.value[1]).toFixed(3) + ' mΩ'
-            } else if (physicalQuantity === 'X' || physicalQuantity === 'Y' || physicalQuantity === 'Z' || physicalQuantity === 'M') {
-              value = (parseFloat(param.value[1]) / 100).toFixed(3) + ' (g)'
-            } else if (!isNaN(physicalQuantity)) {
-              value = (parseFloat(param.value[1]) / 1000).toFixed(3) + ' (mV)'
-            } else {
-              value = parseFloat(param.value[1]).toFixed(3)
-            }
-          } else {
-            let value1
-            let value2
-            if (param.seriesName.split('_')[0][param.seriesName.split('_')[0].length - 1] === 'V') {
-              value1 = parseFloat(param.value[0]).toFixed(3) + ' μV'
-            } else if (param.seriesName.split('_')[0][param.seriesName.split('_')[0].length - 1] === 'I') {
-              value1 = parseFloat(param.value[0]).toFixed(3) + ' nA'
-            } else if (param.seriesName.split('_')[0][param.seriesName.split('_')[0].length - 1] === 'R') {
-              value1 = parseFloat(param.value[0]).toFixed(3) + ' mΩ'
-            } else {
-              value1 = parseFloat(param.value[0]).toFixed(3)
-            }
-
-            if (param.seriesName.split('_')[1][param.seriesName.split('_')[1].length - 1] === 'V') {
-              value2 = parseFloat(param.value[1]).toFixed(3) + ' μV'
-            } else if (param.seriesName.split('_')[1][param.seriesName.split('_')[1].length - 1] === 'I') {
-              value2 = parseFloat(param.value[1]).toFixed(3) + ' nA'
-            } else if (param.seriesName.split('_')[1][param.seriesName.split('_')[1].length - 1] === 'R') {
-              value2 = parseFloat(param.value[1]).toFixed(3) + ' mΩ'
-            } else {
-              value2 = parseFloat(param.value[1]).toFixed(3)
-            }
-
-            value = value1 + ', ' + value2
-          }
-          tip += '<span style="' + style + '">' +
-                            param.seriesName +
-                            '：</span><span style="' +
-                            style + '">' + value + '</span><br>'
-        }
-        return tip
+      // params is empty
+      if (!params.length && realTime.length) return params
+      // params is unempty
+      let tip = ''
+      let param // find coressonding parameter to the channel
+      let unitTable // unit is store in this object
+      let style // color
+      let value // value on cursor
+      const timeIndex = params[0].seriesName.split('_').findIndex(title => title === 'T')
+      // (Default) Time
+      if (timeIndex === -1) {
+        value = getTime(parseFloat(params[0].value[2]))
+      } else {
+        value = getTime(parseFloat(params[0].value[timeIndex]))
      }
+      tip += '<span style="color: #5193f2">' + 'Time: ' + value + '</span><br>'
+      // (Manual) Voltage, Current, Impedance
+      for (let gridIndex = 0; gridIndex < realTime.length; gridIndex++) {
+        for (let channelIndex = 0; channelIndex < realTime[gridIndex].length; channelIndex++) {
+          param = params.find(x => x.seriesName === realTime[gridIndex][channelIndex].name)
+          if (param === undefined) continue
+
+          unitTable = realTime[gridIndex][channelIndex]
+          style = 'color: ' + param.color
+
+          tip += '<span style="' + style + '">' + param.seriesName + ':<ul  style = "list-style-type: disc; list-style-position: inside">'
+          if (unitTable.xName !== 'Time') {
+            value = parseFloat(param.value[0] / unitTable.xScale[unitTable.xUnit]).toFixed(3) + unitTable.xUnit
+            tip += '<li>' + unitTable.xName + ' = ' + value + '</li>'
+          }
+          if (unitTable.yName !== 'Time') {
+            value = parseFloat(param.value[1] / unitTable.yScale[unitTable.yUnit]).toFixed(3) + unitTable.yUnit
+            tip += '<li>' + unitTable.yName + ' = ' + value + '</li>'
+          }
+          tip += '</ul></span>'
+        }
+      }
+      return tip
    },
  }
 }
@@ -20,7 +20,7 @@ function newState () {
    },
    isLoading: true,
    licenseCheck: true,
-    developer_mode: false,
+    developerMode: false,
    controller: null,
  }
 }
@@ -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',
@@ -9,3 +9,4 @@ $ionicons-font-path: "~ionicons/dist/fonts";
 $fa-font-path: "~font-awesome/fonts";

@import "../../../node_modules/font-awesome/scss/font-awesome";
+@import url(https://fonts.googleapis.com/icon?family=Material+Icons);
@@ -1,6 +1,6 @@
 import newSeries from '@/factories/chart/seriesFactory'
 import newChart from '@/factories/chart/chartFactory'
-import newTooltip from '@/factories/chart/tooltipFactory'
+import newTooltip from '@/factories/chart/replayTooltipFactory'
 import newDataZoom from '@/factories/chart/dataZoomFactory'
 import types from '@/store/modules/analysis/replay/types'

@@ -283,15 +283,16 @@ const actions = {
    const axis = payload.axis
    const chartID = payload.chartID
    const gridIndex = payload.gridIndex
-    if (type === 'log') {
-      if (axis === 'x') {
-        state.chartData[chartID].xAxis[gridIndex].type = type
-        state.chartData[chartID].xAxis[gridIndex].minorSplitLine.show = true
-      } else if (axis === 'y') {
-        state.chartData[chartID].yAxis[gridIndex].type = type
-        state.chartData[chartID].yAxis[gridIndex].minorSplitLine.show = true
-      }
-    } else if (type === 'value') {
+    // if (type === 'log') {
+    //   if (axis === 'x') {
+    //     state.chartData[chartID].xAxis[gridIndex].type = type
+    //     state.chartData[chartID].xAxis[gridIndex].minorSplitLine.show = true
+    //   } else if (axis === 'y') {
+    //     state.chartData[chartID].yAxis[gridIndex].type = type
+    //     state.chartData[chartID].yAxis[gridIndex].minorSplitLine.show = true
+    //   }
+    // } else
+    if (type === 'value') {
      if (axis === 'x') {
        state.chartData[chartID].xAxis[gridIndex].type = type
        state.chartData[chartID].xAxis[gridIndex].minorSplitLine.show = false
@@ -1,6 +1,6 @@
 import types from '@/store/modules/download/types'
 import golbalMethods from '@/data/global/global'
-import paramTable from '@/data/param-table/index'
+import configTable from '@/data/config-table/index'
 import api from '@/data/api'

 const typePath = types.export
@@ -49,7 +49,7 @@ const exportActs = {
      metaPath[metaPath.length - 1].split('.')[0],
    ]

-    const paramObj = paramTable[libraryName]
+    const paramObj = configTable.getConfig(libraryName)
    const modeObj = paramObj.MODE[meta.parameter_set.MODE]

    const param = modeObj.headerParameter(meta.parameter_set)
@@ -120,7 +120,7 @@ const exportActs = {
  [typePath.getTitle]: function ({ state, getters, commit, dispatch }, payload) {
    const meta = state.metaInfo
    const { library_name: libraryName } = meta.device
-    const modeObj = paramTable[libraryName].MODE[meta.parameter_set.MODE]
+    const modeObj = configTable.getModeConfig(libraryName, meta.parameter_set.MODE)
    const downloadInfo = state.downloadInfo
    const titleArray = []
    const channelString = ''
@@ -66,6 +66,8 @@ const projectActs = {
 */
  [typePath.select]: async ({ state, getters, commit }, payload) => {
    state.projectSelectIndex = payload.index
+    // initial default device library
+    state.projectLibrary = state.projectList[payload.index].device[0]?.library.value
  },

  /**
@@ -1,8 +1,5 @@
 function newState () {
  return {
-    projectAll: {},
-    projectSelectKey: '',
-
    projectList: [],
    projectSelectIndex: -1,

@@ -17,6 +14,8 @@ function newState () {
    projectManagerPanel: {
      show: true,
    },
+    // library
+    projectLibrary: null,

    taskViewPanel: {
      show: false,
@@ -16,31 +16,30 @@ const chartActs = {
  /**
   * init chartData from cache (cache will only record non-default chart)
   *
-   */
+  **/
  [typePath.initCustomizedFromCache]: async ({ state, getters, commit, dispatch }, payload) => {
-    const cacheData = await localforage.getItem('chart_data')
+    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)) {
-        if (_chart.mappingID === -1) { // not default chart
-          const newChartID = state.taskContentChartNumber
-          dispatch(typePath.add, {
-            chartID: newChartID,
-            maxDots: _chart.maxDots,
-            gridLength: _chart.grid.length,
-          })
-          for (let gridIndex = 0; gridIndex < _chart.grid.length; gridIndex++) {
-            if (gridIndex in _chart.gridSource) {
-              dispatch(typePath.registerFromCache, {
-                chartID: newChartID,
-                gridIndex: gridIndex,
-                gridSource: _chart.gridSource[gridIndex],
-              })
-            }
+        dispatch(typePath.add, {
+          chartID: _chart.chartID,
+          maxDots: _chart.maxDots,
+          gridLength: _chart.grid.length,
+        })
+        for (let gridIndex = 0; gridIndex < _chart.grid.length; gridIndex++) {
+          if (gridIndex in _chart.gridSource) {
+            dispatch(typePath.registerFromCache, {
+              chartID: _chart.chartID,
+              gridIndex: gridIndex,
+              gridSource: _chart.gridSource[gridIndex],
+            })
          }
-          state.taskContentChartNumber++
-          dispatch(typePath.refreshPanel)
        }
+        state.chartData[_chart.chartID].createdBy = 'manual'
      }
+      dispatch(typePath.refreshPanel)
    }
  },
  /**
@@ -48,21 +47,19 @@ const chartActs = {
   *
   */
  [typePath.saveToCache]: async ({ state, getters, commit, dispatch }, payload) => {
+    const { controllerID } = payload
    const _chartData = {}
    for (const [_id, _chart] of Object.entries(state.chartData)) {
-      if (_chart.mappingID === -1) { // not default chart
+      // manual chart clear series data
+      if (_chart.createdBy === 'manual') {
        _chartData[_id] = JSON.parse(JSON.stringify(_chart))
-        if (_chartData[_id].series.data != null) {
-          _chartData[_id].series.data.length = 0
-        }
-        _chartData[_id].series.length = 0
+        _chartData[_id].series.map((ele) => { ele.data.length = 0 })
      }
    }
-    await localforage.setItem('chart_data', _chartData)
+    await localforage.setItem('chart_data_' + controllerID, _chartData)
  },
-  /**
+  /*
   * add chartID to chartData
-   *
   * @param {String} chartID
   * @param {Number} maxDots
   * @param {Number} gridLength
@@ -70,8 +67,8 @@ const chartActs = {
   */
  [typePath.add]: ({ state, getters, commit, dispatch }, payload) => {
    const { chartID, maxDots, gridLength } = payload
-    if (state.chartData[parseInt(chartID)] == null) {
-      state.chartData[parseInt(chartID)] = newChart(chartID)
+    if (state.chartData[chartID] == null) {
+      state.chartData[chartID] = newChart(chartID, Object.keys(state.chartData).length)
      state.chartData[chartID].maxDots = maxDots
      state.chartData[chartID].tooltip = newTooltip()
      dispatch(typePath.updateGridList, { chartID: chartID, length: gridLength })
@@ -80,6 +77,7 @@ const chartActs = {
      return state.chartData[chartID]
    }
  },
+
  /**
   * register source channel setting from cache
   *
@@ -233,31 +231,17 @@ 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') {
      state.chartData[chartID].xAxis[_xAxisIndex].axisLabel.formatter = function (val) {
-        const hour = parseInt(val / 3.6e9)
-        const minute = parseInt((val % 3.6e9) / 1000000 / 60)
-        const second = parseInt((val % 6e7) / 1000000)
-        const millisecond = parseInt((val % 1e6) / 1000)
-        let label = ''
-        if (hour > 0) {
-          label += hour + ' h '
-        }
-        if (minute > 0) {
-          label += minute + ' m '
-        }
-        if (second > 0) {
-          label += second + ' s '
-        }
-        if (millisecond > 0) {
-          label += millisecond + ' ms '
-        }
-
-        // const label = parseInt(parseInt(val / 1000000) / 60) + ' m ' + parseInt((val % 60000000) / 1000000) + ' s'
-        return label
+        return getTimeFormatter(val)
      }
-      state.chartData[chartID].xAxis[_xAxisIndex].interval = 500 * 1000
+      // state.chartData[chartID].xAxis[_xAxisIndex].interval = 500 * 1000
    } else if (sourceList[0].name === 'Elite') {
      // state.chartData[chartID].series[state.chartData[chartID].series.length - 1].sampling = false
      switch (sourceList[0].channel) {
@@ -282,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) {
@@ -362,7 +346,6 @@ const chartActs = {
            return parseFloat(val / 1000).toFixed(2) + 'uA'
          }
          state.chartData[chartID].chartYUnit = 'uA' // nA * 1000
-          console.log(state.chartData[chartID])
          break
        case 2:
          state.chartData[chartID].yAxis[_yAxisIndex].axisLabel.formatter = function (val) {
@@ -379,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) {
@@ -515,7 +498,14 @@ const chartActs = {
    if (!state.chartData[chartID].gridSource[gridIndex].some(el => el.name === _gridSeries.name)) {
      state.chartData[chartID].gridSource[gridIndex].push(_gridSeries)
    }
-    // console.log(state.chartData[chartID])
+
+    // assign mappingID with device ID
+    if (deviceIDX >= 0) {
+      state.chartData[chartID].mappingID = deviceIDX
+    }
+    if (deviceIDY >= 0) {
+      state.chartData[chartID].mappingID = deviceIDY
+    }
    return state.chartData[chartID]
  },
  /**
@@ -537,7 +527,7 @@ const chartActs = {
   * @param {String} chartID
   */
  [typePath.refreshData]: ({ state, getters, commit, dispatch }, payload) => {
-    const { chartID, deviceList } = payload
+    const { chartID } = payload
    if (state.chartData[chartID] == null) {
      return false
    }
@@ -710,24 +700,12 @@ const chartActs = {
          // series data list shift by time
          if (series.data.length > 0) {
            if (series.xAxisSource[0] === -1) {
-              if (deviceList.find(ele => ele.memory_board === series.yAxisSource[0]).library_name.includes('Elite')) {
-                if (series.data.length > state.chartData[chartID].maxDots) {
-                  series.data.splice(0, series.data.length - state.chartData[chartID].maxDots)
-                }
-              } else {
-                if (series.data[series.data.length - 1][0] - series.data[0][0] > 3000000) {
-                  series.data.splice(0, popData.length)
-                }
+              if (series.data.length > state.chartData[chartID].maxDots) {
+                series.data.splice(0, series.data.length - state.chartData[chartID].maxDots)
              }
            } else if (series.yAxisSource[0] === -1) {
-              if (deviceList.find(ele => ele.memory_board === series.xAxisSource[0]).library_name.includes('Elite')) {
-                if (series.data.length > state.chartData[chartID].maxDots) {
-                  series.data.splice(0, series.data.length - state.chartData[chartID].maxDots)
-                }
-              } else {
-                if (series.data[series.data.length - 1][1] - series.data[0][1] > 3000000) {
-                  series.data.splice(0, popData.length)
-                }
+              if (series.data.length > state.chartData[chartID].maxDots) {
+                series.data.splice(0, series.data.length - state.chartData[chartID].maxDots)
              }
            }
          }
@@ -768,7 +746,6 @@ const chartActs = {
            // }
            return false
          }
-
          // get data from buffer
          const popDataX = dataStreamBuffer.pop(chartID, rawDeviceIDX, series.xAxisSource[1])
          const popDataY = dataStreamBuffer.pop(chartID, rawDeviceIDY, series.yAxisSource[1])
@@ -862,6 +839,11 @@ const chartActs = {
        }
      }
    })
+
+    const popCycle = dataStreamBuffer.pop(chartID, state.chartData[chartID].mappingID, 4)
+    if (popCycle.length) {
+      state.chartData[chartID].cycle = popCycle.at(-1).data
+    }
  },
  /**
   * generate default chart
@@ -1002,7 +984,7 @@ const chartActs = {
        mappingID: state.chartData[_chartID].mappingID,
        cardName: state.chartData[_chartID].cardName,
      })
-      state.chartData[_chartID].mappingID = parseInt(item.id)
+      state.chartData[_chartID].mappingID = item.id
      switch (_type) {
        case 'device':
          _chartRegisterDevice(_chartID, item)
@@ -1016,21 +998,23 @@ const chartActs = {
      let isSetting = false

      for (const chartID in state.chartData) {
-        if (parseInt(state.chartData[chartID].mappingID) === parseInt(item.id)) {
-          isSetting = true
-          dispatch(typePath.reset, {
-            chartID: chartID,
-            mappingID: state.chartData[chartID].mappingID,
-            cardName: state.chartData[chartID].cardName,
-          })
-          state.chartData[chartID].mappingID = parseInt(item.id)
-          switch (_type) {
-            case 'device':
-              _chartRegisterDevice(chartID, item)
-              break
-            case 'formula':
-              _chartRegisterFormula(chartID, item)
-              break
+        if (state.chartData[chartID].mappingID === item.id) {
+          if (state.chartData[chartID].createdBy === 'default') {
+            isSetting = true
+            dispatch(typePath.reset, {
+              chartID: chartID,
+              mappingID: state.chartData[chartID].mappingID,
+              cardName: state.chartData[chartID].cardName,
+            })
+            state.chartData[chartID].mappingID = item.id
+            switch (_type) {
+              case 'device':
+                _chartRegisterDevice(chartID, item)
+                break
+              case 'formula':
+                _chartRegisterFormula(chartID, item)
+                break
+            }
          }
        }
      }
@@ -1053,12 +1037,13 @@ const chartActs = {
    state.chartData[chartID].legend.data.length = 0
    state.chartData[chartID].xAxis.length = 0
    state.chartData[chartID].yAxis.length = 0
+    state.chartData[chartID].gridSource.length = 0
    if (state.chartData[chartID].series.data != null) {
      state.chartData[chartID].series.data.length = 0
    }
    state.chartData[chartID].series.length = 0
    if (mappingID == null) {
-      state.chartData[chartID].mappingID = -1
+      state.chartData[chartID].mappingID = '-1'
    }
    if (cardName == null) {
      state.chartData[chartID].cardName = 'chart' + String(chartID)
@@ -1066,6 +1051,22 @@ const chartActs = {
    state.chartData[chartID].dataZoom = null
    dispatch(typePath.updateGridList, { chartID: chartID, length: 1 })
  },
+
+  /**
+   * reset chart option
+   *
+   * @param {String} chartID
+   * @param {String} mappingID
+   * @param {String} cardName
+   */
+  [typePath.resetSeriesData]: ({ state, getters, commit, dispatch }, payload) => {
+    const { chartID, mappingID } = payload
+    if (String(mappingID) === String(state.chartData[chartID].mappingID)) {
+      for (const i in state.chartData[chartID].series) {
+        state.chartData[chartID].series[i].data.length = 0
+      }
+    }
+  },
  /**
  * refresh (key++) EChart
  *
@@ -1156,7 +1157,7 @@ function makeXAxis (gridIndex, type, channel) {
      showMaxLabel: false,
      color: '#34495e',
      // rotate: 45,
-      margin: 12,
+      // margin: 12,
    },
    splitLine: { show: true, lineStyle: { color: '#aaa' } },
    // minorSplitLine: {
@@ -1211,8 +1212,8 @@ function makeYAxis (gridIndex, type, channel) {

 // generate grid
 function makeGrid (index, length) {
-  const _height = (85 / length) + '%'
-  const _top = index * (85 / length) + 1 + '%'
+  const _height = (80 / length) + '%'
+  const _top = index * (80 / length) + 5 + '%'
  return {
    index: index,
    top: _top,
@@ -1318,3 +1319,24 @@ function getLegendName (sourceList, formulaID) {
  }
  return legendName
 }
+
+export function getTimeFormatter (val) {
+  const hour = parseInt(val / 3.6e9)
+  const minute = parseInt((val % 3.6e9) / 1000000 / 60)
+  const second = parseInt((val % 6e7) / 1000000)
+  const millisecond = parseInt((val % 1e6) / 1000)
+  let label = ''
+  if (hour > 0) {
+    label += hour + ' h '
+  }
+  if (minute > 0) {
+    label += minute + ' m '
+  }
+  if (second > 0) {
+    label += second + ' s '
+  }
+  if (millisecond > 0) {
+    label += millisecond + ' ms '
+  }
+  return label
+}
@@ -9,6 +9,7 @@ const types = {
    updateGridList: 'taskContentChartUpdateGridList',
    defaultChartGenerator: 'taskContentChartDefaultChartGenerator',
    reset: 'taskContentChartReset',
+    resetSeriesData: 'taskContentChartResetSeriesData',
    refreshData: 'taskContentChartRefreshData',
    refreshChart: 'taskContentChartRefreshChart',
    refreshPanel: 'taskContentChartRefreshPanel',
Author	SHA1	Message	Date
peterlu14	b3a745252f	[update] add show datastream buffer in dev mode	2022-08-11 00:59:14 +08:00
peterlu14	d229e1be28	[update] add debug button (show data)	2022-08-11 00:51:58 +08:00
peterlu14	c95bc79096	[update] rename developer mode & bind key	2022-08-10 23:56:38 +08:00
peterlu14	ac19737527	[update] default time unit ms -> s	2022-08-10 22:21:18 +08:00
peterlu14	69e4af91af	[update] remove x-axis interval and select all buttons & resize grid and dataZoom and asixLabel	2022-08-10 22:20:54 +08:00
peterlu14	cd961f70f9	[warning] remove warning of e-charts update	2022-08-10 22:13:53 +08:00
peterlu14	8b7b92bffb	[update] add eis ca mode	2022-08-09 14:54:32 +08:00
peterlu14	1b38bd1c00	[debug] fix library rename cause scheduler not showing problem	2022-08-09 14:53:12 +08:00
peterlu14	ab630b88e6	[update] fix replay show panel (x-axis not yet)	2022-08-09 09:11:56 +08:00
peterlu14	d83ae9370f	remove brush in factory & hide value	2022-08-08 17:51:51 +08:00
peterlu14	a11393f512	Merge branch 'dev/sg-filter' into release/v1.3.0/replay-capture-sgFilter	2022-08-08 17:34:02 +08:00
peterlu14	69d604045e	Merge remote-tracking branch 'origin/testing/echarts-update' into release/v1.3.0/replay-capture-sgFilter	2022-08-08 17:32:09 +08:00
peterlu14	26cb680e6f	Merge remote-tracking branch 'origin/dev/capture_chartData' into release/v1.3.0/replay-capture-sgFilter	2022-08-08 17:31:50 +08:00
peterlu14	815754ddf6	[debug] fix file name not refresh problem	2022-08-08 17:25:55 +08:00
peterlu14	d29a5a11e1	[update] fix ca mode naming problem	2022-08-08 17:05:42 +08:00
peterlu14	f1781037be	[update] sg-filter	2022-08-08 17:03:42 +08:00
108000207	cfab65e4a0	[update] check the calculation of specific integral done	2022-08-08 16:43:52 +08:00
sss28072637	fdd8c29bfb	[update] finish capture data & boundaryGap	2022-08-08 16:36:09 +08:00
108000207	ad4d31ce64	[update] SpecificIntegral component works	2022-08-08 10:29:21 +08:00
sss28072637	5a9349d903	[update] add boundaryGap (need to be adjustable)	2022-08-05 18:23:10 +08:00
108000207	e1453cf107	[update] new component for Specific Integral, but haven't connect with TopControlPanel	2022-08-05 18:18:44 +08:00
108000207	1453e70915	[update] add auto refresh after blur the va-input	2022-08-05 18:00:37 +08:00
108000207	2791d20173	[update] add va-input for the brush boundary	2022-08-05 17:36:52 +08:00
108000207	bd314b03dc	[update] add specific integral on replay	2022-08-05 11:33:11 +08:00
sss28072637	a801c0626a	[update] add the new function of capturing chart to a new chart	2022-08-04 17:47:34 +08:00
peterlu14	5f3f3110d9	[update] fix loading	2022-08-04 13:33:38 +08:00
peterlu14	41b00129ef	[update] echarts update version 5.3.3	2022-08-04 10:39:27 +08:00
peterlu14	13cb610302	Merge branch 'release/v1.2.8/realtime-tool' into testing/echarts-update	2022-08-04 10:14:54 +08:00
peterlu14	b7b70b86e2	Merge remote-tracking branch 'origin/dev/fix_dataZoom' into release/v1.2.8/realtime-tool	2022-08-03 14:50:36 +08:00
sss28072637	2575a97894	[debug] fix real-time dataZoom bug	2022-08-03 14:45:38 +08:00
peterlu14	a1f09942d9	Merge branch 'release/v1.2.9/fix-testing-bugs' into release/v1.2.8/realtime-tool	2022-08-02 18:42:49 +08:00
peterlu14	e9dc718d85	[update] fix cache with controller id	2022-08-02 16:25:47 +08:00
108000207	2f7a6b97e7	Merge branch 'dev/replay-calculation' into release/v1.2.8/realtime-tool	2022-08-02 14:35:31 +08:00
108000207	11a6de5e57	[update] add the getPanelInfo for tooltips formatter	2022-08-02 14:21:13 +08:00
peterlu14	7630951470	Merge remote-tracking branch 'origin/dev/realTimeDisplay_realTimeCalculation' into release/v1.2.8/realtime-tool	2022-08-02 12:52:16 +08:00
nthu1080112244	eb672d9c0a	[update] real time cycle display	2022-08-02 12:51:19 +08:00
sss28072637	566f59e29c	fix replay bugs, add integral in I-V mode(replay & realtime) and fix integral bugs	2022-08-01 18:22:01 +08:00
peterlu14	f06003304a	Merge branch 'release/v1.2.9/fix-testing-bugs' into release/v1.2.8/realtime-tool	2022-07-29 14:54:26 +08:00
peterlu14	c0fc13c451	[update] cp-mode rename	2022-07-29 14:54:07 +08:00
peterlu14	ab1df2cfe1	[update] add time duration in excel and replay & add cp mode volt unit	2022-07-29 10:16:05 +08:00
peterlu14	0b01d6c785	[update] fix display problem & help pic	2022-07-28 16:56:26 +08:00
peterlu14	d769a50459	[debug] charge/discharge value error	2022-07-28 14:58:47 +08:00
peterlu14	dac276c9de	[debug] fix cc mode charge display error	2022-07-28 14:40:36 +08:00
peterlu14	65c00031e3	[debug] fix volt step unit error	2022-07-28 10:35:51 +08:00
peterlu14	0ff3dd556f	[update] remove vue warn	2022-07-28 10:30:09 +08:00
peterlu14	968c578cee	Merge branch 'dev/realTimeDisplay_realTimeCalculation' into 'release/v1.2.8/realtime-tool' [debug] fix the conflict between display tool and funtional tool See merge request wisetop/controller/wisetopvue!1	2022-07-28 02:22:44 +00:00
peterlu14	b3510b1990	[debug] fix volt step unit error	2022-07-28 10:05:47 +08:00
108000207	7fc8d24a71	[update] add replay functional, need to check the time gap	2022-07-27 18:31:52 +08:00
nthu1080112244	35d45a36a4	[update] time-axis formatter	2022-07-27 18:31:16 +08:00
nthu1080112244	f1a55c3cd1	[debug] remove useless code	2022-07-27 14:09:20 +08:00
nthu1080112244	2577dcba9a	[update] 1. built and use CanvasChartTable.js 2. merge real time functional amd real time display 3. tooltip update	2022-07-27 13:41:33 +08:00
108000207	f2709241d2	[init] add CanvasChartReplayCalculation component	2022-07-27 09:56:20 +08:00
ROY	632762ce14	[update] library EliteEIS rename cause replay problem	2022-07-26 18:29:34 +08:00
sss28072637	63b627622b	[update] use setTimeOut to make the emit from changeScale work	2022-07-26 18:07:30 +08:00
ROY	e4e89a414a	[update] fix library rename replay nameing bug	2022-07-26 14:00:15 +08:00
ROY	921166cdc7	[update] update library name & change global chart setting	2022-07-26 11:05:50 +08:00
peterlu14	a3e7c7e2a6	Merge remote-tracking branch 'origin/dev/realTimeDisplayNew' into release/v1.2.8/realtime-tool	2022-07-26 09:53:25 +08:00
peterlu14	7469d270d0	Merge remote-tracking branch 'origin/dev/realtime-tool-fixed' into release/v1.2.8/realtime-tool	2022-07-26 09:53:21 +08:00
nthu1080112244	3c4676ec2c	[update] construct new table for chart axis unit	2022-07-26 09:45:49 +08:00
sss28072637	265c363858	fix real-time tooltips	2022-07-25 14:14:26 +08:00
peterlu14	89da594392	Merge remote-tracking branch 'origin/dev/haolung' into release/v1.2.8/realtime-tool	2022-07-22 16:24:33 +08:00
sss28072637	436ed27479	fix button bug	2022-07-22 14:55:42 +08:00
peterlu14	ea14ee2f3e	[update] remove redundence code	2022-07-22 14:31:16 +08:00
peterlu14	4416367acf	[update] fix replay tooltip problem	2022-07-22 14:31:13 +08:00
peterlu14	e44c1e4c18	[update] fix merge config table problem	2022-07-22 14:31:09 +08:00
peterlu14	4910719aa4	Merge remote-tracking branch 'origin/dev/real_time_value' into release/v1.2.8/realtime-tool	2022-07-22 14:30:32 +08:00
peterlu14	223e898d5e	[update] fix config-table rename problem ( download, replay )	2022-07-22 14:25:05 +08:00
sss28072637	1e80731438	separate the calculation file	2022-07-22 14:17:09 +08:00
peterlu14	d3d080eb08	[update] add EIS mimi	2022-07-22 10:34:07 +08:00
nthu1080112244	0bd84d865f	[update] integrate axis unit, tooltip information	2022-07-22 09:41:40 +08:00
sss28072637	b14488cf49	simplify the code (ver1)	2022-07-21 17:08:49 +08:00
peterlu14	4dda2d0a6a	[update] switch page remove cache fix	2022-07-21 17:02:16 +08:00
sss28072637	3460a0bfa0	fix time axisLabel	2022-07-21 11:46:47 +08:00
sss28072637	90738611eb	(07/20) finish differential, log, integral, add additional function, fix bugs and clear console log	2022-07-20 17:12:30 +08:00
peterlu14	35ba66ddd6	Merge branch 'release/v1.2.5/task_configuration' into release/v1.2.7/scheduler-parameter	2022-07-20 09:53:03 +08:00
peterlu14	4c3c63a0ba	[update] schedule parameter fix & config-table add default value	2022-07-20 09:52:40 +08:00
sss28072637	d22653a5a5	clear console error	2022-07-19 16:38:39 +08:00
sss28072637	05cae92b12	finish integral, differential and log	2022-07-19 14:59:08 +08:00
sss28072637	adbf30f08d	Merge remote-tracking branch 'origin/release/v1.2.5/task_configuration' into dev/haolung	2022-07-19 11:32:16 +08:00
nthu1080112244	5fe321828a	Merge remote-tracking branch 'origin/release/v1.2.5/task_configuration' into dev/real_time_value	2022-07-19 11:30:21 +08:00
peterlu14	ca823d174b	[update] reset series data type error fix	2022-07-19 11:26:46 +08:00
nthu1080112244	2e573e2c72	[update] add coment	2022-07-19 11:22:55 +08:00
nthu1080112244	84d136d4cf	[update] real time display modularization	2022-07-18 18:28:23 +08:00
nthu1080112244	9b296c45bd	[update] complete real time value display	2022-07-18 15:13:16 +08:00
nthu1080112244	ef9db8bee2	Merge commit 'bcf7b51dc6f0c241ab2f8bd3fdffb4173a5e7693' into dev/real_time_value	2022-07-18 14:15:23 +08:00
sss28072637	175f4ef23e	Merge remote-tracking branch 'origin/release/v1.2.5/task_configuration' into dev/haolung	2022-07-18 10:28:38 +08:00
sss28072637	eba7c080b4	merge_0718	2022-07-18 09:55:05 +08:00
nthu1080112244	7c4515521d	[update] unit correction, real time value bar	2022-07-15 19:40:34 +08:00
peterlu14	3db09734d2	[update] use deviceParameterWindow instead	2022-07-15 10:08:24 +08:00
peterlu14	c0e3a9c61a	[update] rename param-table to config-table & add api to config	2022-07-15 10:08:24 +08:00
peterlu14	bcf7b51dc6	[update] mapping unify format string	2022-07-15 10:05:24 +08:00
peterlu14	ba660ac952	[update] fix girdsource not clear problem	2022-07-14 10:21:39 +08:00
sss28072637	1062aea8db	fix tooltip constructor parameters, start / stop clicked reset, clear console errors, add differential function, get timeIndex automatically	2022-07-13 16:33:17 +08:00
sss28072637	b1f9edc624	Merge remote-tracking branch 'origin/release/v1.2.5/task_configuration' into dev/haolung	2022-07-13 09:37:41 +08:00
sss28072637	9210646611	add comments	2022-07-12 18:17:38 +08:00
sss28072637	de2315cd5b	finish integral and log	2022-07-12 17:33:01 +08:00
sss28072637	ec231aa368	fix stop mode intergration	2022-07-12 15:33:21 +08:00
nthu1080112244	7b6948d027	Merge remote-tracking branch 'origin/release/v1.2.5/task_configuration' into dev/real_time_value	2022-07-12 15:15:12 +08:00
nthu1080112244	28f1aef82c	[update] default real time representation	2022-07-12 15:14:31 +08:00
sss28072637	908db19110	finish mode switch button	2022-07-12 14:06:12 +08:00
sss28072637	9520e5102c	finish integral of VT_mode	2022-07-12 12:02:58 +08:00
peterlu14	d171d8b572	[update] only refresh chart which device running	2022-07-12 10:41:43 +08:00
peterlu14	1e57bde1df	[update] chartID uuid && fix mappingID -1 && reset series data && chart created manual or default	2022-07-12 10:38:04 +08:00
peterlu14	0946b01a41	[update] prop chartID add new type	2022-07-12 10:30:36 +08:00