controller-wisetopvue/src/components/task/content/chart/CanvasChartRealTimeCalculation.vue

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