[update] real time grid setting

src/components/admin/app-sidebar/NavigationRoutes.js

@@ -61,14 +61,14 @@ export const navigationRoutes = {
         iconClass: 'vuestic-iconset vuestic-iconset-settings',
       },
     },
-    {
-      name: 'project',
-      displayName: 'Scheduler',
-      meta: {
-        iconClass: 'vuestic-iconset vuestic-iconset-tables',
-        // iconClass: 'vuestic-iconset vuestic-iconset-browse-gallery',
-      },
-    },
+    // {
+    //   name: 'project',
+    //   displayName: 'Scheduler',
+    //   meta: {
+    //     iconClass: 'vuestic-iconset vuestic-iconset-tables',
+    //     // iconClass: 'vuestic-iconset vuestic-iconset-browse-gallery',
+    //   },
+    // },
     // {
     //   name: 'forms',
     //   displayName: 'menu.forms',

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

@@ -379,8 +379,8 @@ export default {
         toolbox: ['rect', 'clear'],
         // toolbox: ['rect', 'polygon', 'lineX', 'lineY', 'keep', 'clear'],
         xAxisIndex: 0,
-        // throttleType: 'debounce',
-        // throttleDelay: 5,
+        throttleType: 'debounce',
+        throttleDelay: 0.1,
       }
       this.showChartLoading('detail')
       const timeDur = this.endTimeCurrent - this.startTimeCurrent

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

@@ -107,12 +107,12 @@ export default {
   async mounted () {
     this.resizeTimer = setInterval(this.resize, 1000)
     // brush set at here won't work
-    /* this.data.brush = {
+    this.data.brush = {
       toolbox: ['rect', 'polygon', 'lineX', 'lineY', 'keep', 'clear'],
       xAxisIndex: 0,
       throttleType: 'debounce',
-      throttleDelay: 5,
-    } */
+      throttleDelay: 0,
+    }
     this.$refs.chart_ref.chart.on('brushSelected', (params) => {
       if (params.batch[0] && params.batch[0].areas.length !== 0) {
         var boundary = {

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

@@ -12,77 +12,26 @@
           <delete-file />
         </div>
       </div>
-
-      <!-- <div class="flex-container mb-2" v-show='false'>
-        <div class="flex sm2 xl2 md2 xs2 px-0 py-0">
-          <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"/>
-        </div>
-        <div class="flex sm5 xl5 md5 xs5 pl-1 pr-0 py-0">
-          <change-unit :ref="'change_unit_x'" axis="x" @refreshChart="refreshChart"/>
-        </div>
-      </div>
-      <div class="flex-container mb-2"  v-show='false'>
-        <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" @changeFunctional="changeFunctional"/>
-        </div>
-        <div class="flex sm5 xl5 md5 xs5 px-0 py-0">
-          <abs-toggle :ref="'abs_x'" axis="x" @changeAxis="changeAxis"/>
-        </div>
-      </div> -->
-
-      <!-- <div class="flex-container mb-2"  v-show='false'>
-        <div class="flex sm2 xl2 md2 xs2 px-0 py-0">
-          <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"/>
-        </div>
-        <div class="flex sm5 xl5 md5 xs5 pl-1 pr-0 py-0">
-          <change-unit :ref="'change_unit_y'" axis="y" @refreshChart="refreshChart"/>
-        </div>
-      </div>
-      <div class="flex-container mb-2"  v-show='false'>
-        <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" @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> -->
-      <!-- tang -->
       <div class="flex-container mb-2">
         <div class="flex sm2 xl2 md2 xs2 px-0 py-0">
           <p class="display-6"> X-Axis </p>
         </div>
         <div class="flex sm5 xl5 md5 xs5 pl-1 pr-0 py-0">
-          <change-axis-b :ref="'axis_x'" axis="x" @changeAxis="changeAxis"/>
+          <control-axis :ref="'axis_x'" axis="x" @changeAxis="changeAxis"/>
         </div>
         <div class="flex sm5 xl5 md5 xs5 pl-1 pr-0 py-0">
-          <change-unit-b
+          <control-unit
             :ref="'unit_x'"
             axis="x"
-            @changeUnit="refreshFormatter"
+            @changeUnit="changeUnit"
+            style="width: 75px;"
           />
         </div>
       </div>
       <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-funct-b :ref="'funct_x'" axis="x" @changeFunct="changeFunct"/>
+          <control-funct :ref="'funct_x'" axis="x" @changeFunct="changeFunct"/>
         </div>
       </div>
       <div class="flex-container mb-2">
@@ -90,23 +39,28 @@
           <p class="display-6"> Y-Axis </p>
         </div>
         <div class="flex sm5 xl5 md5 xs5 pl-1 pr-0 py-0">
-          <change-axis-b
+          <control-axis
             :ref="'axis_y'"
             axis="y"
             @changeAxis="changeAxis"
           />
         </div>
         <div class="flex sm5 xl5 md5 xs5 pl-1 pr-0 py-0">
-          <change-unit-b
+          <control-unit
             :ref="'unit_y'"
             axis="y"
-            @changeUnit="refreshFormatter"/>
+            @changeUnit="changeUnit"
+            style="width: 75px;"
+          />
         </div>
       </div>
       <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-funct-b :ref="'funct_y'" axis="y" @changeFunct="changeFunct"/>
+          <control-funct
+            :ref="'funct_y'"
+            axis="y"
+            @changeFunct="changeFunct"/>
         </div>
       </div>
       <specific-integral :ref="'specific_integral'" @setBrushBoundary="setBrushBoundary"/>
@@ -127,14 +81,10 @@
 
 <script>
 import ShowResampleRate from '@/components/analysis/replay/toolbox/ShowResampleRate.vue'
-// import ChangeAxis from '@/components/analysis/replay/toolbox/ChangeAxis.vue'
-import ChangeAxisB from '@/components/analysis/replay/toolbox/ChangeAxisB.vue'
-// import ChangeUnit from '@/components/analysis/replay/toolbox/ChangeUnit.vue'
-import ChangeUnitB from '@/components/analysis/replay/toolbox/ChangeUnitB.vue'
-// import ChangeScale from '@/components/analysis/replay/toolbox/ChangeScale.vue'
-import ChangeFunctB from '@/components/analysis/replay/toolbox/ChangeFunctB.vue'
+import controlAxis from '@/components/analysis/replay/toolbox/ControlAxis'
+import controlUnit from '@/components/analysis/replay/toolbox/ControlUnit'
+import controlFunct from '@/components/analysis/replay/toolbox/ControlFunct'
 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'
@@ -151,9 +101,9 @@ export default {
   name: 'top-control-panel',
   components: {
     ShowResampleRate,
-    ChangeAxisB,
-    ChangeUnitB,
-    ChangeFunctB,
+    controlAxis,
+    controlUnit,
+    controlFunct,
     ChangeCycle,
     SpecificIntegral,
     DownloadFile,
@@ -171,10 +121,6 @@ export default {
       'controlPanel',
     ]),
   },
-  props: {
-  },
-  async created () {
-  },
   data () {
     return {
       deviceName: '',
@@ -185,100 +131,22 @@ export default {
   },
   methods: {
     ...mapMutations('replay', [types.chart.updateAxisLabel]),
-    refreshFormatter (axis) {
-      this.updateAxisLabelChart({
-        chartID: 1,
-        axis: axis,
-        axisIndex: 0,
-      })
-    },
-    changeFunct (axis) {
-      this.refreshUnit()
-      this.refreshFormatter(axis)
-      this.$emit('changeFunctional', axis, this.controlPanel[axis].funct)
-      this.$emit('changeAxis', 0)
-    },
-    refreshAxis () {
-      const xType = this.controlPanel.x.type
-      const yType = this.controlPanel.y.type
-      const xFunct = this.controlPanel.x.funct
-      const yFunct = this.controlPanel.y.funct
-      this.$refs.axis_x.refreshAxis(xType, xFunct, yType, yFunct)
-      this.$refs.axis_y.refreshAxis(xType, xFunct, yType, yFunct)
-    },
-    refreshUnit (axis) {
-      const xType = this.controlPanel.x.type
-      const yType = this.controlPanel.y.type
-      const xFunct = this.controlPanel.x.funct
-      const yFunct = this.controlPanel.y.funct
-      if (axis === 'x') {
-        this.$refs.unit_x.refreshUnit(xType, xFunct, yType, yFunct)
-      } else {
-        this.$refs.unit_y.refreshUnit(xType, xFunct, yType, yFunct)
-      }
-    },
+    // initialize control buttons
     init () {
-      //
       this.deviceName = this.metaList[0].device.library_name
-      // tang
       this.initDefaultControlPanel()
       this.$refs.axis_x.init()
-      this.$refs.funct_x.init()
-      this.$refs.unit_x.init(this.controlPanel.x.type)
       this.$refs.axis_y.init()
-      this.$refs.funct_y.init()
+      this.$refs.unit_x.init(this.controlPanel.x.type)
       this.$refs.unit_y.init(this.controlPanel.y.type)
-      // prev
-      // 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)
-      // this.$refs.abs_y.init(this.deviceName)
+      this.$refs.funct_x.init(this.controlPanel.x.type, this.controlPanel.y.type)
+      this.$refs.funct_y.init(this.controlPanel.x.type, this.controlPanel.y.type)
       this.$refs.change_cycle.init()
       this.$refs.edit_file_name.init()
       this.$refs.show_param.init(this.deviceName)
       this.$refs.change_window_start_and_size.init()
     },
-    changeOverviewDataZoom () {
-      this.$emit('changeOverviewDataZoom')
-    },
-    refreshChart (options) {
-      this.$emit('refreshChart', options)
-    },
-    changeFunctional (axis, functional) {
-      this.$emit('changeFunctional', axis, functional)
-    },
-    changeAxis (gridIndex) {
-      this.$refs.funct_x.init()
-      this.$refs.funct_y.init()
-      this.$refs.unit_x.init(this.controlPanel.x.type)
-      this.$refs.unit_y.init(this.controlPanel.y.type)
-      this.refreshFormatter('x')
-      this.refreshFormatter('y')
-      this.$emit('changeFunctional', 'x', 'Linear')
-      this.$emit('changeFunctional', 'y', 'Linear')
-      this.$emit('changeAxis', gridIndex)
-    },
-    changeUnit (axis) {
-      if (axis === 'x') {
-        this.$refs.change_unit_x.changeUnitByAxis()
-      } else if (axis === 'y') {
-        this.$refs.change_unit_y.changeUnitByAxis()
-      }
-    },
-    clearCycle () {
-      this.$refs.change_cycle.clear()
-    },
-    setBrushBoundary (boundary) {
-      this.$emit('setBrushBoundary', boundary)
-    },
-    /* switchCollapse () {
-      this.innerCollapse = this.innerCollapse ? false : true
-      console.log(this.innerCollapse)
-    }, */
+    // initialize the setting of this control panel
     initDefaultControlPanel () {
       // use state meta to decide which default unit need to be used (like check I-V mode...)
       const setting = this.GLOBAL.getDefaultChartTypeByMode(this.metaList[0].parameter_set.MODE, this.deviceName)
@@ -311,26 +179,35 @@ export default {
         if (settingType.includes('EIS')) {
           if (settingValue === 3) {
             this.controlPanel.x.type = 'Frequency'
+            this.controlPanel.x.channel = 2
           } else if (settingValue === 5 || settingValue === 6 || settingValue === 7) {
             this.controlPanel.x.type = 'Impedance'
+            this.controlPanel.x.channel = 5
           } else if (settingValue === 8) {
             this.controlPanel.x.type = 'Phase'
+            this.controlPanel.x.channel = 7
           } else if (settingValue === 9) {
             this.controlPanel.x.type = 'Current'
+            this.controlPanel.x.channel = 8
           } else if (settingValue === 10) {
             this.controlPanel.x.type = 'Default'
+            this.controlPanel.x.channel = 0
           }
         } else if (settingType === 'Elite') {
           // 1: I, 2: V, 3: R
           if (settingValue === 1) {
             this.controlPanel.x.type = 'Current'
+            this.controlPanel.x.channel = 0
           } else if (settingValue === 2) {
-            this.dataTcontrolPanel.xype = 'Voltage'
+            this.controlPanel.x.type = 'Voltage'
+            this.controlPanel.x.channel = 1
           } else if (settingValue === 3) {
             this.controlPanel.x.type = 'Resistance'
+            this.controlPanel.x.channel = 2
           }
         } else if (settingType === 'Time') {
           this.controlPanel.x.type = 'Time'
+          this.controlPanel.x.channel = undefined
         }
       }
 
@@ -362,31 +239,108 @@ export default {
         if (settingType.includes('EIS')) {
           if (settingValue === 3) {
             this.controlPanel.y.type = 'Frequency'
+            this.controlPanel.y.channel = 2
           } else if (settingValue === 5 || settingValue === 6 || settingValue === 7) {
             this.controlPanel.y.type = 'Impedance'
+            this.controlPanel.y.channel = 4
           } else if (settingValue === 8) {
             this.controlPanel.y.type = 'Phase'
+            this.controlPanel.y.channel = 7
           } else if (settingValue === 9) {
             this.controlPanel.y.type = 'Current'
+            this.controlPanel.y.channel = 8
           } else if (settingValue === 10) {
             this.controlPanel.y.type = 'Default'
+            this.controlPanel.y.channel = undefined
           }
         } else if (settingType === 'Elite') {
           // 1: I, 2: V, 3: R
           if (settingValue === 1) {
             this.controlPanel.y.type = 'Current'
+            this.controlPanel.y.channel = 0
           } else if (settingValue === 2) {
-            this.dataTcontrolPanel.xype = 'Voltage'
+            this.controlPanel.y.type = 'Voltage'
+            this.controlPanel.y.channel = 0
           } else if (settingValue === 3) {
             this.controlPanel.y.type = 'Resistance'
+            this.controlPanel.y.channel = 0
           }
         } else if (settingType === 'Time') {
           this.controlPanel.y.type = 'Time'
+          this.controlPanel.y.channel = 0
         }
       }
     },
-  },
-  mounted () {
+    /* changeXXX: activate when pressing XXX button */
+    // trigger when changing the axis type
+    changeAxis (gridIndex) {
+      this.$refs.unit_x.init(this.controlPanel.x.type)
+      this.$refs.unit_y.init(this.controlPanel.y.type)
+      this.$refs.funct_x.init(this.controlPanel.x.type, this.controlPanel.y.type)
+      this.$refs.funct_y.init(this.controlPanel.x.type, this.controlPanel.y.type)
+      this.refreshFormatter('x')
+      this.refreshFormatter('y')
+      this.$emit('changeFunctional', 'x', 'Linear')
+      this.$emit('changeFunctional', 'y', 'Linear')
+      this.$emit('changeAxis', gridIndex)
+      this.$refs.specific_integral.checkMean(this.controlPanel.x.type, this.controlPanel.x.funct, this.controlPanel.y.type, this.controlPanel.y.funct)
+      this.$refs.specific_integral.setDisplayParam(this.controlPanel.x.type, this.controlPanel.x.unit, this.controlPanel.y.type, this.controlPanel.y.unit)
+    },
+    // trigger when changing the unit
+    changeUnit (axis) {
+      this.refreshFormatter(axis)
+      this.$refs.specific_integral.refreshDisplayParam(this.controlPanel.x.type, this.controlPanel.x.unit, this.controlPanel.y.type, this.controlPanel.y.unit)
+    },
+    // trigger when press the functional button
+    changeFunct (axis) {
+      this.refreshUnit()
+      this.refreshFormatter(axis)
+      this.$refs.specific_integral.checkMean(this.controlPanel.x.type, this.controlPanel.x.funct, this.controlPanel.y.type, this.controlPanel.y.funct)
+      this.$emit('changeFunctional', axis, this.controlPanel[axis].funct)
+      this.$emit('changeAxis', 0)
+    },
+    /* refreshXXX: passively called by changeXXX function to refresh some setting */
+    // refresh axis type
+    refreshAxis () {
+      const xType = this.controlPanel.x.type
+      const yType = this.controlPanel.y.type
+      const xFunct = this.controlPanel.x.funct
+      const yFunct = this.controlPanel.y.funct
+      this.$refs.axis_x.refreshAxis(xType, xFunct, yType, yFunct)
+      this.$refs.axis_y.refreshAxis(xType, xFunct, yType, yFunct)
+    },
+    // refresh unit option
+    refreshUnit (axis) {
+      const xType = this.controlPanel.x.type
+      const yType = this.controlPanel.y.type
+      const xFunct = this.controlPanel.x.funct
+      const yFunct = this.controlPanel.y.funct
+      if (axis === 'x') {
+        this.$refs.unit_x.refreshUnit(xType, xFunct, yType, yFunct)
+      } else {
+        this.$refs.unit_y.refreshUnit(xType, xFunct, yType, yFunct)
+      }
+    },
+    // refresh all formatters of charts
+    refreshFormatter (axis) {
+      this.updateAxisLabelChart({
+        chartID: 1,
+        axis: axis,
+        axisIndex: 0,
+      })
+    },
+    changeOverviewDataZoom () {
+      this.$emit('changeOverviewDataZoom')
+    },
+    refreshChart (options) {
+      this.$emit('refreshChart', options)
+    },
+    clearCycle () {
+      this.$refs.change_cycle.clear()
+    },
+    setBrushBoundary (boundary) {
+      this.$emit('setBrushBoundary', boundary)
+    },
   },
 }
 </script>

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

@@ -16,7 +16,7 @@ import { mapFields } from 'vuex-map-fields'
 import { tableRouter } from '@/components/analysis/replay/toolbox/EliteReplayTable'
 
 export default {
-  name: 'change-axis-b',
+  name: 'controlAxis',
   props: {
     axis: {
       type: String, // x or y

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

@@ -1,11 +1,12 @@
 <template>
-  <div>
+  <div class="flex row">
     <va-radio-button
       v-for="(funct, index) in functOption"
       :key="index"
       v-model="controlPanel[axis].funct"
       :option="funct"
       @input="changeFunct()"
+
     />
   </div>
 </template>
@@ -15,7 +16,7 @@ import { mapFields } from 'vuex-map-fields'
 import { tableRouter } from '@/components/analysis/replay/toolbox/EliteReplayTable'
 
 export default {
-  name: 'change-funct-b',
+  name: 'controlFuct',
   props: {
     axis: {
       type: String, // x or y
@@ -34,9 +35,9 @@ export default {
     ]),
   },
   methods: {
-    init () {
+    init (xAxis, yAixs) {
       this.controlPanel[this.axis].funct = 'Linear'
-      this.functOption = this.tableRouter.getFunct(this.axis)
+      this.functOption = this.tableRouter.getFunct(xAxis, yAixs, this.axis)
     },
     changeFunct () {
       this.$emit('changeFunct', this.axis)
@@ -45,11 +46,3 @@ export default {
 }
 
 </script>
-
-<style lang="scss">
-  .va-select-without-margin {
-    .va-select {
-      margin-bottom: 0;
-    }
-  }
-</style>

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

@@ -15,7 +15,7 @@ import { mapFields } from 'vuex-map-fields'
 import { tableRouter } from '@/components/analysis/replay/toolbox/EliteReplayTable'
 
 export default {
-  name: 'change-unit-b',
+  name: 'controlUnit',
   props: {
     axis: {
       type: String, // x or y

src/components/analysis/replay/toolbox/EliteReplayTable.js

@@ -57,13 +57,13 @@ const chartTable = {
     name: 'Charge',
     channel: -1,
     option: {
-      nC: 1e6,
-      uC: 1e9,
-      mC: 1e12,
-      C: 1e15,
+      nAh: 3600 * 1e6,
+      uAh: 1600 * 1e9,
+      mAh: 3600 * 1e12,
+      Ah: 3600 * 1e15,
     },
-    defaultUnit: 'C',
-    downloadUnit: 'C',
+    defaultUnit: 'mAh',
+    downloadUnit: 'mAh',
   },
   Power: {
     name: 'Power',
@@ -87,14 +87,26 @@ const chartTable = {
     defaultUnit: 'A/V',
     downloadUnit: 'A/V',
   },
-  Idiot: {
+  Impedance: {
+    name: 'Impedance',
+    chanel: 6,
+    option: {
+      mΩ: 1e-3,
+      Ω: 1,
+      kΩ: 1e3,
+      MΩ: 1e6,
+    },
+    downloadUnit: 'Ω',
+    defaultUnit: 'Ω',
+  },
+  None: {
     name: 'not support',
     channel: -1,
     option: {
-      'not support': 1,
+      none: 1,
     },
-    defaultUnit: 'not support',
-    downloadUnit: 'not support',
+    defaultUnit: 'none',
+    downloadUnit: 'none',
   },
 }
 export const tableRouter = {
@@ -109,7 +121,7 @@ export const tableRouter = {
   },
   getTable: (xAxis, xFunct, yAxis, yFunct) => {
     var xTable = chartTable[xAxis]
-    var yTable = chartTable.Idiot
+    var yTable = chartTable.None
     if (yFunct === 'Linear' || yFunct === 'Log') {
       yTable = chartTable[yAxis]
     } else if (yFunct === 'Integral') {
@@ -129,12 +141,29 @@ export const tableRouter = {
     }
     return [xTable, yTable]
   },
-  getFunct (axis) {
-    if (axis === 'x') {
-      return ['Linear', 'Log']
+  getFunct (xAxis, yAxis, axis) {
+    let xTable = ['']
+    let yTable = ['']
+    if (xAxis === 'Time') {
+      xTable = ['Linear']
+
+      if (yAxis === 'Current') {
+        yTable = ['Linear', 'Log', 'Integral']
+      } else {
+        yTable = ['Linear', 'Log']
+      }
     } else {
-      return ['Linear', 'Log', 'Integral', 'Differential']
+      xTable = ['Linear', 'Log']
+
+      if ((xAxis === 'Voltage' && yAxis === 'Current') || (xAxis === 'Current' && yAxis === 'Voltage')) {
+        yTable = ['Linear', 'Log', 'Integral', 'Differential']
+      } else {
+        yTable = ['Linear', 'Log']
+      }
     }
+
+    if (axis === 'x') return xTable
+    else return yTable
   },
   // axisLabel formatter
   autoTimeFormatter (val) {

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

@@ -1,171 +1,175 @@
 <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 class="flex sm2 xl2 md2 xs2 px-0 py-0">
+        <p class="display-6" v-if="ifMean"> Area </p>
+      </div>
+      <div
+        class="row sm10 xl10 md10 xs10"
+        v-show="ifMean"
+      >
+        <div class="flow xs6 sm6 lg6 xl6">
+          <va-input
+            v-model="specificIntegral"
+            label="Integral value"
+            disabled
+          />
+        </div>
+        <div class="flow xs2 sm2 lg2 xl2">
+          <va-select
+            v-model="integralUnit"
+            :options="integralOption"
+            @input="refreshScale"
+            style="width: 75px;"
+            class="va-select-without-margin"
+            noClear
+          />
+        </div>
       </div>
     </div>
 
-    <div v-if="!keyBoundary">
+    <div>
       <div class="flex-container mb-2">
-        <div class="flex sm2 xl2 md2 xs2 px-0 py-0" />
+        <div class="flex sm2 xl2 md2 xs2 px-0 py-0">
+          <p class="display-6"> Range </p>
+        </div>
         <va-input
-          v-model="this.boundary.x_start"
-          :label="$t('X Start')"
-        />
+          v-model="x_start"
+          label="X Start"
+          @focus="userEnter()"
+          @blur="userEnter()"
+          @keyup.enter="setBrushBoundary"
+        >
+          <p slot="append" style="margin-right: 0;" small>
+            {{ xUnit }}
+          </p>
+        </va-input>
         <va-input
-          v-model="this.boundary.x_end"
-          :label="$t('X End')"
-        />
+          v-model="x_end"
+          label="X End"
+          @focus="userEnter()"
+          @blur="userEnter()"
+          @keyup.enter="setBrushBoundary"
+        >
+          <p slot="append" style="margin-right: 0;" small>
+            {{ xUnit }}
+          </p>
+        </va-input>
       </div>
       <div class="flex-container mb-2">
-        <div class="flex sm2 xl2 md2 xs2 px-0 py-0" />
+        <div class="flex sm2 xl2 md2 xs2 px-0 py-0">
+        </div>
         <va-input
-          v-model="this.boundary.y_start"
-          :label="$t('Y Start')"
-        />
+          v-model="y_start"
+          label="Y Start"
+          @focus="userEnter()"
+          @blur="userEnter()"
+          @keyup.enter="setBrushBoundary"
+        >
+          <p slot="append" style="margin-right: 0;" small>
+            {{ yUnit }}
+          </p>
+        </va-input>
         <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>
+          v-model="y_end"
+          label="Y End"
+          @focus="userEnter()"
+          @blur="userEnter()"
+          @keyup.enter="setBrushBoundary"
+        >
+          <p slot="append" style="margin-right: 0;" small>
+            {{ yUnit }}
+          </p>
+        </va-input>
       </div>
     </div>
   </div>
 </template>
 
 <script>
-
+import { tableRouter } from '@/components/analysis/replay/toolbox/EliteReplayTable'
 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,
+      x_start: 0,
+      x_end: 0,
+      y_start: 0,
+      y_end: 0,
+      xUnit: '',
+      yUnit: '',
+      xScale: '',
+      yScale: '',
+      integralUnit: '',
+      integralOption: [],
+      integralTable: {},
+      integralScale: '',
+      ifMean: true,
+      ifUserEnter: false,
+      tableRouter,
     }
   },
-  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
-      }
+    refreshScale () {
+      this.integralScale = this.integralTable.option[this.integralUnit]
     },
-    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
+    userEnter () {
+      this.ifUserEnter = !this.ifUserEnter
+    },
+    getSpecificIntegral (specificIntegral, boundary) {
+      this.specificIntegral = specificIntegral / this.integralScale
+
+      if (!this.ifUserEnter) {
+        this.x_start = (boundary.x_start / this.xScale).toFixed(3)
+        this.x_end = (boundary.x_end / this.xScale).toFixed(3)
+        this.y_start = (boundary.y_start / this.yScale).toFixed(3)
+        this.y_end = (boundary.y_end / this.yScale).toFixed(3)
+      }
     },
     setBrushBoundary () {
       var boundary = {
-        x_start: Number(this.boundaryXstart),
-        x_end: Number(this.boundaryXend),
-        y_start: Number(this.boundaryYstart),
-        y_end: Number(this.boundaryYend),
+        x_start: Number(this.x_start) * this.xScale,
+        x_end: Number(this.x_end) * this.xScale,
+        y_start: Number(this.y_start) * this.yScale,
+        y_end: Number(this.y_end) * this.yScale,
       }
       this.$emit('setBrushBoundary', boundary)
     },
-  },
-  async mounted () {
-  },
-  destroyed () {
-  },
-  watch: {
+    setDisplayParam (xAxis, xUnit, yAxis, yUnit) {
+      const xOption = this.tableRouter.getOption(xAxis)
+      const yOption = this.tableRouter.getOption(yAxis)
+      this.xUnit = xUnit
+      this.yUnit = yUnit
+      this.xScale = xOption[xUnit]
+      this.yScale = yOption[yUnit]
+      this.integralTable = this.tableRouter.getTable(xAxis, 'Linear', yAxis, 'Integral')
+      this.integralTable = this.integralTable[1]
+      this.integralOption = Object.keys(this.integralTable.option)
+      this.integralUnit = this.integralTable.defaultUnit
+      this.integralScale = this.integralTable.option[this.integralUnit]
+    },
+    refreshDisplayParam (xAxis, xUnit, yAxis, yUnit) {
+      const xOption = this.tableRouter.getOption(xAxis)
+      const yOption = this.tableRouter.getOption(yAxis)
+      this.xUnit = xUnit
+      this.yUnit = yUnit
+      this.xScale = xOption[xUnit]
+      this.yScale = yOption[yUnit]
+    },
+    checkMean (xAxis, xFunct, yAxis, yFunct) {
+      if (yFunct === 'Integral' || yFunct === 'Differential') {
+        this.ifMean = false
+      } else {
+        if ((xAxis === 'Voltage' && yAxis === 'Current') ||
+        (xAxis === 'Current' && yAxis === 'Voltage') ||
+        (xAxis === 'Time' && yAxis === 'Current')) {
+          this.ifMean = true
+        } else {
+          this.ifMean = false
+        }
+      }
+    },
   },
 }
 </script>
-
-<style lang="scss">
-  /* .round-button {
-    border-radius: 12px;
-  } */
-</style>

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

@@ -30,14 +30,17 @@
       <div v-if="tabValue == 0" >
         <div v-if="chartData[chartID].legend.data.length != 0">
           <div class="row flex xl12 lg12 sm12 xs12 ma-0 pa-0">
-            <div class="flex xl1 lg1 sm0 xs0 ma-0 pa-0">
+            <!-- <div class="flex xl1 lg1 sm0 xs0 ma-0 pa-0"> -->
+            <div class="flex ma-0 pa-0">
             </div>
-            <div class="flex xl7 lg7 sm7 xs7 my-0 py-0">
+            <!-- <div class="flex xl7 lg7 sm7 xs7 ma-0 pa-0"> -->
+            <div class="flex ma-0 pa-0">
               <canvas-chart-real-time-display
                 :chartID="chartID" ref="CanvasChartRealTimeDisplay"
               />
             </div>
-            <div class="flex xl4 lg4 sm5 xs5 my-0 py-0 mt-2">
+            <!-- <div class="flex xl4 lg4 sm4 xs4 ma-0 pa-0"> -->
+            <div class="flex ma-0 pa-0">
               <canvas-chart-real-time-calculation :chartID="chartID" @refreshData="refreshData" @switchModeButton="switchModeButton" @getClicked="getClicked" @captureChart="captureChart" ref="'cal_ref'" />
             </div>
           </div>
@@ -114,55 +117,6 @@
           INVERSE SELECT
         </va-button>
       </div> -->
-      <div class="row flex align--left ma-0 pa-0 mt-2">
-        <va-input
-          v-if="chartData[chartID].chartXMode === 'time'"
-          class="mx-1"
-          @keyup.enter="timeIntervalChange(timeIntervalInput)"
-          @blur="timeIntervalChange(timeIntervalInput)"
-          v-model="timeIntervalInput"
-          :label="'time-grid'"
-        >
-          <p slot="append" style="margin-right: 0;" small>
-            ms
-          </p>
-        </va-input>
-        <va-input
-          v-if="chartData[chartID].chartXMode === 'value'"
-          class="mx-1"
-          @keyup.enter="xIntervalChange(xIntervalInput)"
-          @blur="xIntervalChange(xIntervalInput)"
-          v-model="xIntervalInput"
-          :label="'x-grid'"
-        >
-          <p slot="append" style="margin-right: 0;" small>
-            {{chartData[chartID].chartXUnit}}
-          </p>
-        </va-input>
-        <va-input
-          class="mx-1"
-          @keyup.enter="yIntervalChange(yIntervalInput)"
-          @blur="yIntervalChange(yIntervalInput)"
-          v-model="yIntervalInput"
-          :label="'y-grid'"
-        >
-          <p slot="append" style="margin-right: 0;" small>
-            {{chartData[chartID].chartYUnit}}
-          </p>
-        </va-input>
-        <va-input
-          v-if="chartData[chartID].chartDevice === 'neulive'"
-          class="mx-1"
-          @keyup.enter="threeAxisIntervalChange(threeAxisIntervalInput)"
-          @blur="threeAxisIntervalChange(threeAxisIntervalInput)"
-          v-model="threeAxisIntervalInput"
-          :label="'3axis-grid'"
-        >
-          <p slot="append" style="margin-right: 0;" small>
-            g
-          </p>
-        </va-input>
-      </div>
       <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" />
@@ -278,7 +232,7 @@ export default {
         this.dataZoomEnd = e.end
       }
     },
-    timeIntervalChange: function (val) {
+    timeIntervalChange: async function (val) {
       if (!isNaN(parseInt(val))) {
         this.chartData[this.chartID].xAxis.forEach(x => {
           if (x.type === 'time') {
@@ -293,6 +247,7 @@ export default {
           }
         })
       }
+      await this.taskContentChartSaveToCache({ controllerID: taskInfo.getTaskInfo().controllerID })
     },
     xIntervalChange: async function (val) {
       if (!isNaN(parseInt(val))) {
@@ -320,13 +275,13 @@ export default {
             } 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 maxList = []
+            // const minList = []
+            // 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
@@ -337,12 +292,10 @@ export default {
           }
         })
       } else {
-        this.timeIntervalInput = 'auto'
+        this.yIntervalInput = '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
           }
         })
       }

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

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div class="xs12 sm12 lg12 xl12 mr-4" style="text-align: end;">
+    <div class="xs12 sm12 lg12 xl12" style="text-align: end;">
       <!-- <img v-if="!integralClicked && (mode_name==='Chronoamperometric' || mode_name==='I-T Graph' || mode_name==='I-V Curve')" src='@/assets/img/toolbox/integral.svg' @click="clickIntegral"> -->
       <va-button :flat="true" class="pa-0 ma-0 mr-2" v-if="xlogClicked && (mode_name==='Linear Sweep Voltammetry' || mode_name==='I-V Curve')" color="danger" @click="clickXLog" small>
         <!-- To Raw Mode -->

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

@@ -1,51 +1,87 @@
 <template>
   <div>
-    <div v-for="(chart, chartIndex) in realTime" :key="'c'+chartIndex">
-      <div v-for="(grid, gridIndex) in chart" :key="'s'+gridIndex" class="row ma-0 pa-0">
+    <div v-for="(plot, plotIndex) in realTime" :key="plotIndex">
+      <div v-for="(line, lineIndex) in plot" :key="plotIndex + '_' + lineIndex" class="row ma-0 pa-0">
         <!-- cycle -->
-        <div class="ma-1" style="width: 75px;"
+        <div class="mt-1" style="width: 75px;"
           v-show="data !== null && data.cycle > 0"
         >
           <va-input
             label="cycle no."
             v-model="data.cycle"
-            :options="grid.xUnitOption"
+            :options="line.xUnitOption"
             noClear
+            disabled
           />
         </div>
-        <!-- value (x-axis) -->
-        <div class="ma-1" style="width: 100px;">
-          <va-input
-            label="x-value"
-            disable="disable"
-            v-model="grid.xValue"
-          />
+        <div class="d-flex flex-row mt-1 ml-1">
+          <!-- value (y-axis) -->
+          <div style="width: 75px;">
+            <va-input
+              label="y-axis"
+              v-model="line.yValue"
+            />
+          </div>
+          <!-- unit (y-axis) -->
+          <div style="width: 75px;">
+            <va-select
+              v-model="line.yUnit"
+              :options="line.yUnitOption"
+              @input="changeUnit('y', plotIndex, lineIndex)"
+              noClear
+            />
+          </div>
         </div>
-        <!-- unit (x-axis) -->
-        <div class="ma-1" style="width: 75px;">
-          <va-select
-            label="x-unit"
-            v-model="grid.xUnit"
-            :options="grid.xUnitOption"
-            noClear
-          />
+        <div class="d-flex flex-row mt-1 ml-1">
+          <!-- value (x-axis) -->
+          <div style="width: 75px;">
+            <va-input
+              label="x-axis"
+              v-model="line.xValue"
+              disabled
+            />
+          </div>
+          <!-- unit (x-axis) -->
+          <div style="width: 75px;">
+            <va-select
+              v-model="line.xUnit"
+              :options="line.xUnitOption"
+              @input="changeUnit('x', plotIndex, lineIndex)"
+              noClear
+            />
+          </div>
         </div>
-        <!-- value (y-axis) -->
-        <div class="ma-1" style="width: 100px;">
-          <va-input
-            label="y-value"
-            disable="disable"
-            v-model="grid.yValue"
-          />
-        </div>
-        <!-- unit (y-axis) -->
-        <div class="ma-1" style="width: 75px;">
-          <va-select
-            label="y-unit"
-            v-model="grid.yUnit"
-            :options="grid.yUnitOption"
-            noClear
-          />
+        <div class="d-flex flex-row mt-1 ml-1">
+          <!-- interval (y-axis) -->
+          <div class="ml-1" style="width: 80px;">
+            <va-input
+              v-show="!lineIndex"
+              v-model="line.yInterval"
+              label="y-grid"
+              @focus="$event.target.select()"
+              @keyup.enter="setInterval('y', plotIndex, lineIndex, line.yInterval)"
+              @blur="setInterval('y', plotIndex, lineIndex, line.yInterval)"
+            >
+              <p slot="append" style="margin-right: 0;" small>
+                {{ line.yUnit }}
+              </p>
+            </va-input>
+          </div>
+          <!-- interval (x-axis) -->
+          <div class="ml-1" style="width: 80px;">
+            <va-input
+              v-show="!lineIndex"
+              v-model="line.xInterval"
+              label="x-grid"
+              @focus="$event.target.select()"
+              @keyup.enter="setInterval('x', plotIndex, lineIndex, line.xInterval)"
+              @blur="setInterval('x', plotIndex, lineIndex, line.xInterval)"
+            >
+              <p slot="append" style="margin-right: 0;" small>
+                {{ line.xUnit }}
+              </p>
+            </va-input>
+          </div>
         </div>
       </div>
     </div>
@@ -57,6 +93,9 @@ import { mapFields } from 'vuex-map-fields'
 import { chartRouter } from './CanvasChartTable'
 import configTable from '@/data/config-table/index.js'
 import newTooltip from '@/factories/chart/tooltipFactory'
+import { mapActions } from 'vuex'
+import { taskInfo } from '../../../../data/task/TaskInfo'
+import taskTypes from '@/store/modules/task/content/types'
 
 export default {
   name: 'CanvasChartRealTimeDisplay',
@@ -81,13 +120,18 @@ export default {
     }
   },
   methods: {
+    // store the setting in cache
+    ...mapActions('taskContent', [
+      taskTypes.chart.saveToCache,
+    ]),
+    test: function () {},
     // 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 _xPhysicsQuantity = this.data.gridSource[gridIndex][channelIndex].name.split('_')[0].split('-').at(-1)
+        const _yPhysicsQuantity = this.data.gridSource[gridIndex][channelIndex].name.split('_')[1].split('-').at(-1)
         const [_xAxis, _yAxis] = this.chartRouter.getChartTable(_xPhysicsQuantity, _yPhysicsQuantity)
         const _realTime = JSON.parse(JSON.stringify(this.realTime))
         const _newChannel = {}
@@ -100,12 +144,14 @@ export default {
         _newChannel.xScale = _xAxis.default.unit
         _newChannel.xUnitOption = Object.keys(_xAxis.default.unit)
         _newChannel.xName = _xAxis.default.name
+        _newChannel.xInterval = 'auto'
         // 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
+        _newChannel.yInterval = 'auto'
         // set functional
         _newChannel.functional = 'default'
 
@@ -122,6 +168,22 @@ export default {
         this.realTime = _realTime
       }
     },
+    setInterval: async function (axis, plotIndex, lineIndex, val) {
+      if (!isNaN(val)) {
+        const scaleOption = this.realTime[plotIndex][lineIndex][axis + 'Scale']
+        const unit = this.realTime[plotIndex][lineIndex][axis + 'Unit']
+        this.chartData[this.chartID][axis + 'Axis'][plotIndex].interval = val * scaleOption[unit]
+      } else {
+        this.chartData[this.chartID][axis + 'Axis'][plotIndex].interval = null
+        this.realTime[plotIndex][lineIndex][axis + 'Interval'] = 'auto'
+      }
+      await this.taskContentChartSaveToCache({ controllerID: taskInfo.getTaskInfo().controllerID })
+    },
+    updateInterval: async function (axis, plotIndex, lineIndex) {
+      this.chartData[this.chartID][axis + 'Axis'][plotIndex].interval = null
+      this.realTime[plotIndex][lineIndex][axis + 'Interval'] = 'auto'
+      await this.taskContentChartSaveToCache({ controllerID: taskInfo.getTaskInfo().controllerID })
+    },
     // record the latest data as the real time value
     updateValue: function () {
       if ((this.realTime.length === 0)) {
@@ -188,6 +250,11 @@ export default {
         }
       }
     },
+    changeUnit: function (axis, plotIndex, lineIndex) {
+      this.updateValue()
+      this.matchFormatter()
+      this.updateInterval(axis, plotIndex, lineIndex)
+    },
     // match the data to operated data in CanvasChart.vue
     matchData: function (canvasChartData) {
       this.data = canvasChartData
@@ -197,8 +264,8 @@ export default {
       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 _xPhysicsQuantity = this.data.gridSource[gridIndex][channelIndex].name.split('_')[0].split('-').at(-1)
+      const _yPhysicsQuantity = this.data.gridSource[gridIndex][channelIndex].name.split('_')[1].split('-').at(-1)
       const [_xAxis, _yAxis] = this.chartRouter.getChartTable(_xPhysicsQuantity, _yPhysicsQuantity)
 
       _currChannel.functional = newFunctional

src/components/task/content/chart/CanvasChartTable.js

@@ -179,6 +179,36 @@ const chartTable = {
       },
     },
   ],
+  Zreal_Zimag: [
+    // 0
+    {
+      default: {
+        name: 'Z_real',
+        unit: {
+          mΩ: 1e-3,
+          Ω: 1,
+          kΩ: 1e3,
+          MΩ: 1e6,
+        },
+        downloadUnit: 'Ω',
+        defaultUnit: 'Ω',
+      },
+    },
+    // 1
+    {
+      default: {
+        name: 'Z_imag',
+        unit: {
+          mΩ: 1e-3,
+          Ω: 1,
+          kΩ: 1e3,
+          MΩ: 1e6,
+        },
+        downloadUnit: 'Ω',
+        defaultUnit: 'Ω',
+      },
+    },
+  ],
 }
 export const chartRouter = {
   getChartTable: (xAxis, yAxis) => {

src/factories/chart/tooltipFactory.js

@@ -62,11 +62,11 @@ function newTooltip (realTime, dataMode) {
 
           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
+            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
+            value = parseFloat(param.value[1] / unitTable.yScale[unitTable.yUnit]).toFixed(3) + ' ' + unitTable.yUnit
             tip += '<li>' + unitTable.yName + ' = ' + value + '</li>'
           }
           tip += '</ul></span>'