[update] replay control panel & real time layout

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

@@ -1,6 +1,5 @@
 <template>
   <div>
-    <pre>{{controlPanel}}</pre>
     <div class="row row-equal">
       <div class="flex md12 xl3 xs12 sm12">
         <div class="row">
@@ -393,7 +392,7 @@ export default {
         })
 
         let scale = '1'
-        if (this.axisXDataType.description === 'Time') {
+        if (this.controlPanel.x.type === 'Time') {
           scale = await this.computeResampleScale(metaInfo, timeDur)
         }
         // elite的sample rate不像neulive這麼高，因此試試scale = 100 or 1000時不要再sampling一次了，不然有些形狀（e.g. peak）會不一樣
@@ -412,11 +411,11 @@ export default {
         this.currentScale = scale
         this.chartDetailData.series[_gridNumber].data.length = 0
         let dataListX
-        const channelX = parseInt(this.axisXDataType.id)
-        if (this.axisXDataType.description !== 'Time') {
+        const channelX = parseInt(this.controlPanel.x.channel)
+        if (this.controlPanel.x.type !== 'Time') {
           dataListX = this.dataInfo[meta][channelX][scale]
         }
-        const channelY = parseInt(this.axisYDataType.id)
+        const channelY = parseInt(this.controlPanel.y.channel)
         const dataListY = this.dataInfo[meta][channelY][scale]
 
         const isThisModeHasCycle = this.GLOBAL.hasCycleMode(metaInfo.parameter_set.MODE, metaInfo.device.library_name)
@@ -463,7 +462,7 @@ export default {
         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') {
+          if (this.controlPanel.x.type !== 'Time') {
             dataX = await this.getData(parseInt(scale), this.sampleMethod, dataListX[i].id, channelX, metaInfo)
           }
           var deltaX = 0
@@ -565,7 +564,7 @@ export default {
           }
         }
 
-        if (this.axisXDataType.description === 'Time') {
+        if (this.controlPanel.x.type === 'Time') {
           this.chartDetailData.xAxis[_gridNumber].min = _startTime
           this.chartDetailData.xAxis[_gridNumber].max = _endTime
         } else {
@@ -575,7 +574,7 @@ export default {
         _gridNumber += 1
       }
 
-      if (this.axisXDataType.description !== 'Time') {
+      if (this.controlPanel.x.type !== 'Time') {
         this.showOverviewChart = false
         this.detailchartheight = '88vh'
         // this.$refs.chart_detail.updateChartHeight()
@@ -607,33 +606,65 @@ export default {
       }
     },
     changeAxis (gridIndex) {
+      // if (this.initDone) {
+      //   const libName = this.metaList[gridIndex].device.library_name
+      //   let xType
+      //   let xValue
+      //   if (this.axisXDataType.description === 'Time') {
+      //     xType = 'Time'
+      //   } else {
+      //     if (libName === 'EliteZM15' || libName.includes('Elite_EDC')) {
+      //       xType = 'Elite'
+      //     } else if (libName.includes('EIS')) {
+      //       xType = 'EliteEIS'
+      //     }
+      //     xValue = this.axisXDataType.id + 1
+      //   }
+      //   this.updateRegisteredChart({
+      //     chartAllData: this.chartData,
+      //     chartID: this.chartDetailData.chartID,
+      //     gridIndex: gridIndex,
+      //     deviceNameX: xType,
+      //     deviceIDX: this.metaList[gridIndex].name,
+      //     channelX: xValue,
+      //     deviceNameY: libName.includes('EIS') ? 'EliteEIS' : 'Elite',
+      //     deviceIDY: '',
+      //     channelY: this.axisYDataType.id + 1,
+      //   })
+      //   console.log({
+      //     chartAllData: this.chartData,
+      //     chartID: this.chartDetailData.chartID,
+      //     gridIndex: gridIndex,
+      //     deviceNameX: xType,
+      //     deviceIDX: this.metaList[gridIndex].name,
+      //     channelX: xValue,
+      //     deviceNameY: libName.includes('EIS') ? 'EliteEIS' : 'Elite',
+      //     deviceIDY: '',
+      //     channelY: this.axisYDataType.id + 1,
+      //   })
+      // }
+      // if (this.axisXDataType.description === 'Time') {
+      //   this.drawOverviewData()
+      // }
+      // this.drawDetailData() // reDraw
+      // tang
       if (this.initDone) {
         const libName = this.metaList[gridIndex].device.library_name
-        let xType
-        let xValue
-        if (this.axisXDataType.description === 'Time') {
-          xType = 'Time'
-        } else {
-          if (libName === 'EliteZM15' || libName.includes('Elite_EDC')) {
-            xType = 'Elite'
-          } else if (libName.includes('EIS')) {
-            xType = 'EliteEIS'
-          }
-          xValue = this.axisXDataType.id + 1
-        }
+        const xType = (this.controlPanel.x.type === 'Time') ? 'Time' : ((libName === 'EliteZM15' || libName.includes('Elite_EDC') ? 'Elite' : 'EliteEIS'))
+        const xChannel = (this.controlPanel.x.channel === -1) ? undefined : this.controlPanel.x.channel + 1
         this.updateRegisteredChart({
           chartAllData: this.chartData,
           chartID: this.chartDetailData.chartID,
           gridIndex: gridIndex,
           deviceNameX: xType,
           deviceIDX: this.metaList[gridIndex].name,
-          channelX: xValue,
+          channelX: xChannel,
           deviceNameY: libName.includes('EIS') ? 'EliteEIS' : 'Elite',
           deviceIDY: '',
-          channelY: this.axisYDataType.id + 1,
+          channelY: this.controlPanel.y.channel + 1,
         })
       }
-      if (this.axisXDataType.description === 'Time') {
+      if (this.controlPanel.x.type === 'Time') {
         this.drawOverviewData()
       }
       this.drawDetailData() // reDraw
@@ -656,7 +687,7 @@ export default {
         }
         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])
+          deltaX = Math.abs(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

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

@@ -69,7 +69,7 @@
           <p class="display-6"> X-test </p>
         </div>
         <div class="flex sm5 xl5 md5 xs5 pl-1 pr-0 py-0">
-          <change-axis-b :ref="'axis_x'" axis="x" @changeType="refresh"/>
+          <change-axis-b :ref="'axis_x'" axis="x" @changeAxis="changeAxis"/>
         </div>
         <div class="flex sm5 xl5 md5 xs5 pl-1 pr-0 py-0">
           <change-unit-b
@@ -93,7 +93,7 @@
           <change-axis-b
             :ref="'axis_y'"
             axis="y"
-            @changeType="refresh"
+            @changeAxis="changeAxis"
           />
         </div>
         <div class="flex sm5 xl5 md5 xs5 pl-1 pr-0 py-0">
@@ -248,14 +248,6 @@ export default {
       this.$refs.show_param.init(this.deviceName)
       this.$refs.change_window_start_and_size.init()
     },
-    refresh () {
-      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_y.init(this.controlPanel.y.type)
-    },
     changeOverviewDataZoom () {
       this.$emit('changeOverviewDataZoom')
     },
@@ -266,7 +258,15 @@ export default {
       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('changeAxis', gridIndex)
+      this.$emit('changeFunctional', 'x', 'Linear')
+      this.$emit('changeFunctional', 'y', 'Linear')
     },
     changeUnit (axis) {
       if (axis === 'x') {
@@ -309,15 +309,20 @@ export default {
           // 1: I, 2: V, 3: R, 4: cycle
           if (settingValue === 1) {
             this.controlPanel.x.type = 'Current'
+            this.controlPanel.x.channel = 0
           } else if (settingValue === 2) {
             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 (settingValue === 4) {
             this.controlPanel.x.type = 'Cycle'
+            this.controlPanel.x.channel = 3
           }
         } else if (settingType === 'Time') {
           this.controlPanel.x.type = 'Time'
+          this.controlPanel.x.channel = undefined
         }
       } else if (this.deviceName.includes('EIS')) {
         if (settingType.includes('EIS')) {
@@ -355,15 +360,20 @@ export default {
           // 1: I, 2: V, 3: R, 4: cycle
           if (settingValue === 1) {
             this.controlPanel.y.type = 'Current'
+            this.controlPanel.y.channel = 0
           } else if (settingValue === 2) {
             this.controlPanel.y.type = 'Voltage'
+            this.controlPanel.y.channel = 1
           } else if (settingValue === 3) {
             this.controlPanel.y.type = 'Resistance'
+            this.controlPanel.y.channel = 2
           } else if (settingValue === 4) {
             this.controlPanel.y.type = 'Cycle'
+            this.controlPanel.y.channel = 3
           }
         } else if (settingType === 'Time') {
           this.controlPanel.y.type = 'Time'
+          this.controlPanel.y.channel = undefined
         }
       } else if (this.deviceName.includes('EIS')) {
         if (settingType.includes('EIS')) {

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

@@ -2,10 +2,11 @@
   <div>
     <va-select
       v-model="controlPanel[axis].type"
+      testBy="name"
       class="va-select-without-margin"
       :options="typeOption"
       :noClear='true'
-      @input="changeType()"
+      @input="changeAxis()"
     />
   </div>
 </template>
@@ -34,23 +35,36 @@ export default {
   },
   methods: {
     init (type) {
-      this.typeOption = [
-        'Time',
-        'Current',
-        'Voltage',
-        'Resistance',
-      ]
+      if (this.axis === 'x') {
+        this.typeOption = [
+          'Time',
+          'Cycle',
+          'Current',
+          'Voltage',
+          'Resistance',
+        ]
+      } else {
+        this.typeOption = [
+          'Current',
+          'Voltage',
+          'Resistance',
+        ]
+      }
     },
     refreshAxis (xType, xFunct, yType, yFunct) {
       const [xTable, yTable] = this.tableRouter.getTable(xType, xFunct, yType, yFunct)
       if (this.axis === 'x') {
         this.controlPanel[this.axis].type = xTable.name
+        this.controlPanel[this.axis].channel = xTable.channel
       } else {
         this.controlPanel[this.axis].type = yTable.name
+        this.controlPanel[this.axis].channel = yTable.channel
       }
     },
-    changeType () {
-      this.$emit('changeType')
+    changeAxis () {
+      this.controlPanel[this.axis].channel = tableRouter.getChannel(this.controlPanel[this.axis].type)
+      this.$emit('changeAxis', 0)
+      this.$emit('changeUnit', this.axis)
     },
   },
 }

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

@@ -2,6 +2,7 @@ const chartTable = {
   // axis type
   Time: {
     name: 'Time',
+    channel: -1,
     option: {
       auto: 1,
     },
@@ -10,6 +11,7 @@ const chartTable = {
   },
   Current: {
     name: 'Current',
+    channel: 0,
     option: {
       nA: 1,
       uA: 1e3,
@@ -21,6 +23,7 @@ const chartTable = {
   },
   Voltage: {
     name: 'Voltage',
+    channel: 1,
     option: {
       uV: 1,
       mV: 1e3,
@@ -31,6 +34,7 @@ const chartTable = {
   },
   Resistance: {
     name: 'Resistance',
+    channel: 2,
     option: {
       mΩ: 1,
       Ω: 1e3,
@@ -40,8 +44,18 @@ const chartTable = {
     defaultUnit: 'Ω',
     downloadUnit: 'Ω',
   },
+  Cycle: {
+    name: 'Cycle',
+    channel: 3,
+    option: {
+      cycle: 1,
+    },
+    defaultUnit: 'cycle',
+    downloadUnit: 'cycle',
+  },
   Charge: {
     name: 'Charge',
+    channel: -1,
     option: {
       nC: 1e6,
       uC: 1e9,
@@ -53,6 +67,7 @@ const chartTable = {
   },
   Power: {
     name: 'Power',
+    channel: -1,
     option: {
       mW: 1e12,
       W: 1e15,
@@ -63,6 +78,7 @@ const chartTable = {
   },
   Transconductance: {
     name: 'Transconductance',
+    channel: -1,
     option: {
       'mA/V': 1,
       'A/V': 1e3,
@@ -73,6 +89,7 @@ const chartTable = {
   },
   Idiot: {
     name: 'Idiot',
+    channel: -1,
     option: {
       idiot: 1,
     },
@@ -81,6 +98,9 @@ const chartTable = {
   },
 }
 export const tableRouter = {
+  getChannel: (axis) => {
+    return chartTable[axis].channel
+  },
   getDefaultUnit: (axis) => {
     return chartTable[axis].defaultUnit
   },

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

@@ -37,6 +37,60 @@
           <canvas-chart-real-time-display
             :chartID="chartID" ref="CanvasChartRealTimeDisplay"
           />
+          <div class="row flex align--left ma-0 pa-0">
+            <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="developer_mode === true">
+            <canvas-chart-filter :chartID="chartID" :filterIndex="0" />
+            <canvas-chart-filter :chartID="chartID" :filterIndex="1" />
+            <canvas-chart-filter :chartID="chartID" :filterIndex="2" />
+          </div>
           <!-- chart -->
           <chart :key="taskContentChartKey" :ref="'chart_ref'" :style="'width: '+ cardwidth + '; height: ' + cardheight + ';'" :option="data" @dataZoom="updateZoom" :auto-resize="true"></chart>
         </div>

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

@@ -1,16 +1,17 @@
 <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>
+        <!-- cycle -->
+        <div class="col flex sm2 xl2 md2 xs2"
+          v-show="data !== null && data.cycle > 0"
+        >
+          <va-input
+            label="cycle no."
+            v-model="data.cycle"
+            :options="grid.xUnitOption"
+            noClear
+          />
         </div>
         <!-- value (y-axis) -->
         <div class="col flex sm2 xl2 md2 xs2">
@@ -29,7 +30,6 @@
             noClear
           />
         </div>
-        <div class="col flex sm1 xl1 md1 xs1"></div>
         <!-- value (x-axis) -->
         <div class="col flex sm2 xl2 md2 xs2">
           <va-input

src/factories/chart/replayTooltipFactory.js

@@ -1,3 +1,5 @@
+import { tableRouter } from '@/components/analysis/replay/toolbox/EliteReplayTable'
+
 function getTime (val) {
   let label = ''
   const hour = Math.floor(val / 3.6e9)
@@ -23,7 +25,7 @@ function getTime (val) {
   return label
 }
 
-function newTooltip (chartID) {
+function newTooltip (controlPanel) {
   return {
     hideDelay: 5000,
     trigger: 'axis',
@@ -32,92 +34,37 @@ 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) return params
+      // else return params
+      // params is unempty
+      let tip = ''
+      let value // value on cursor
+      const param = params[0]// find coressonding parameter to the channel
+      const style = 'color: ' + param.color
+      const [xTable, yTable] = tableRouter.getTable(controlPanel.x.type, controlPanel.x.funct, controlPanel.y.type, controlPanel.y.funct) // unit is store in this object
+      // (Default) Time
+      if (controlPanel.x.type === 'Time') {
+        value = getTime(parseFloat(param.value[0]))
+      } else {
+        value = getTime(parseFloat(param.value[2]))
       }
+      tip += '<span style="color: #000000">' + 'Time: ' + value + '</span><br>'
+      // (Manual) Voltage, Current, Resistance
+      tip += '<span style="' + style + '">' + param.seriesName + ':<ul style = "list-style-type: disc; list-style-position: inside">'
+      if (controlPanel.x.type !== 'Time') {
+        value = parseFloat(param.value[0] / xTable.option[controlPanel.x.unit]).toFixed(3) + ' ' + controlPanel.x.unit
+        tip += '<li>' + xTable.name + ' = ' + value + '</li>'
+      }
+      if (controlPanel.y.type !== 'Time') {
+        value = parseFloat(param.value[1] / yTable.option[controlPanel.y.unit]).toFixed(3) + ' ' + controlPanel.y.unit
+        tip += '<li>' + yTable.name + ' = ' + value + '</li>'
+      }
+      tip += '</ul></span>'
+
+      return tip
     },
   }
 }

src/factories/chart/tooltipFactory.js

@@ -50,7 +50,7 @@ function newTooltip (realTime, dataMode) {
       } else {
         value = getTime(parseFloat(params[0].value[timeIndex]))
       }
-      tip += '<span style="color: #5193f2">' + 'Time: ' + value + '</span><br>'
+      tip += '<span style="color: #000000">' + '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++) {

src/store/modules/analysis/replay/actions/chartAct.js

@@ -210,7 +210,7 @@ const actions = {
     if (payload.chartAllData[payload.chartID] == null) {
       payload.chartAllData[payload.chartID] = newChart(payload.chartID)
       if (payload.type !== 'overview') {
-        payload.chartAllData[payload.chartID].tooltip = newTooltip(state.info)
+        payload.chartAllData[payload.chartID].tooltip = newTooltip(state.controlPanel)
       }
       payload.chartAllData[payload.chartID].chartType = payload.type
       payload.chartAllData[payload.chartID].chartDevice = payload.device

src/store/modules/analysis/replay/state.js

@@ -38,11 +38,13 @@ function newState () {
     controlPanel: {
       x: {
         type: null,
+        channel: null,
         unit: null,
         funct: null,
       },
       y: {
         type: null,
+        channel: null,
         unit: null,
         funct: null,
       },