- fix EIS channel select wrong

- update find with range

.eslintrc.js

@@ -22,6 +22,7 @@ module.exports = {
   ],
 
   rules: {
+    '@typescript-eslint/no-empty-interface': 0,
     'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
     'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
     'prettier/prettier': ['warn', {}, { usePrettierrc: true }],

change-note.md

@@ -0,0 +1,16 @@
+### 2022.12.30
+
+- file system
+
+### 2022.12.06
+
+- e-chart
+- mqtt
+- new page data-analysis
+
+### 2022.11.30
+
+- setup environment
+- vite config add path
+- import windicss
+- add vue-shim.d.ts file (TS2307)

package.json

@@ -8,7 +8,7 @@
     "build": "npm run lint && vue-tsc --noEmit && vite build",
     "build:ci": "vite build",
     "prelint": "npm run format",
-    "lint": "eslint --fix './src/**/*.{ts,js,vue}'",
+    "lint": "eslint --fix \"./src/**/*.{ts,js,vue}\"",
     "format": "prettier --write .",
     "preview": "vite preview"
   },
@@ -18,52 +18,59 @@
     ]
   },
   "dependencies": {
-    "@amcharts/amcharts5": "^5.2.19",
-    "@amcharts/amcharts5-geodata": "^5.0.3",
-    "@fortawesome/fontawesome-free": "^6.1.1",
-    "@gtm-support/vue-gtm": "^1.6.0",
-    "axios": "^0.27.2",
-    "chart.js": "^3.8.0",
+    "@amcharts/amcharts5": "^5.3.6",
+    "@amcharts/amcharts5-geodata": "^5.1.0",
+    "@fortawesome/fontawesome-free": "^6.3.0",
+    "@gtm-support/vue-gtm": "^2.0.0",
+    "@hyjiacan/vue-slideout": "^3.0.2",
+    "axios": "^1.3.4",
+    "chart.js": "^4.2.1",
     "epic-spinners": "^2.0.0",
-    "flag-icons": "^6.6.4",
+    "flag-icons": "^6.6.6",
     "ionicons": "^4.6.3",
-    "leaflet": "^1.8.0",
+    "leaflet": "^1.9.3",
     "leaflet-map": "^0.2.1",
-    "maplibre-gl": "^2.1.9",
+    "maplibre-gl": "^2.4.0",
     "medium-editor": "^5.23.3",
-    "pinia": "^2.0.16",
-    "register-service-worker": "^1.7.1",
-    "sass": "^1.53.0",
-    "vue": "^3.2.25",
-    "vue-chartjs": "^4.1.1",
-    "vue-i18n": "^9.1.10",
-    "vue-router": "^4.0.14",
+    "npm-check-updates": "^16.7.10",
+    "pinia": "^2.0.33",
+    "register-service-worker": "^1.7.2",
+    "sass": "^1.58.3",
+    "v-contextmenu": "^3.0.0",
+    "vue": "^3.2.47",
+    "vue-chartjs": "^5.2.0",
+    "vue-good-table-next": "^0.2.1",
+    "vue-i18n": "^9.2.2",
+    "vue-router": "^4.1.6",
     "vue-yandex-maps": "^0.12.3",
-    "vuestic-ui": "^1.5.0"
+    "vuestic-ui": "^1.6.1"
   },
   "devDependencies": {
-    "@intlify/vite-plugin-vue-i18n": "^5.0.1",
-    "@types/leaflet": "^1.7.11",
+    "@intlify/vite-plugin-vue-i18n": "^6.0.3",
+    "@types/leaflet": "^1.9.1",
     "@types/medium-editor": "^5.0.5",
-    "@types/node": "^17.0.25",
-    "@typescript-eslint/eslint-plugin": "^5.20.0",
-    "@typescript-eslint/parser": "^5.20.0",
-    "@vitejs/plugin-vue": "^2.3.3",
-    "@vue/eslint-config-prettier": "^7.0.0",
-    "@vue/eslint-config-typescript": "^10.0.0",
-    "autoprefixer": "^10.4.4",
-    "eslint": "^8.13.0",
-    "eslint-plugin-prettier": "^4.0.0",
-    "eslint-plugin-vue": "^8.7.0",
-    "husky": "^8.0.1",
-    "lint-staged": "^13.0.1",
-    "postcss": "^8.4.12",
-    "prettier": "^2.6.2",
-    "typescript": "^4.5.4",
-    "vite": "^2.9.9",
-    "vite-plugin-windicss": "^1.8.8",
-    "vue-eslint-parser": "^8.3.0",
-    "vue-tsc": "^1.0.10",
+    "@types/node": "^18.14.6",
+    "@typescript-eslint/eslint-plugin": "^5.54.1",
+    "@typescript-eslint/parser": "^5.54.1",
+    "@vitejs/plugin-vue": "^4.0.0",
+    "@vue/eslint-config-prettier": "^7.1.0",
+    "@vue/eslint-config-typescript": "^11.0.2",
+    "autoprefixer": "^10.4.13",
+    "echarts": "^5.4.1",
+    "eslint": "^8.35.0",
+    "eslint-plugin-prettier": "^4.2.1",
+    "eslint-plugin-vue": "^9.9.0",
+    "husky": "^8.0.3",
+    "lint-staged": "^13.1.2",
+    "mqtt": "^4.3.7",
+    "postcss": "^8.4.21",
+    "prettier": "^2.8.4",
+    "typescript": "^4.9.5",
+    "vite": "^4.1.4",
+    "vite-plugin-windicss": "^1.8.10",
+    "vue-echarts": "^6.5.4",
+    "vue-eslint-parser": "^9.1.0",
+    "vue-tsc": "^1.2.0",
     "windicss": "^3.5.6"
   }
 }

src/components/data-analysis/chart-container/AxisSetting.vue

@@ -0,0 +1,196 @@
+<template>
+  <div>
+    <div class="mt-2 mx-1 grid grid-cols-6 items-center">
+      <div>
+        <p>Unit ({{ unitObj.text }})</p>
+      </div>
+      <va-button-toggle
+        v-model="unitObj.text"
+        :options="unitOption"
+        @update:model-value="changeUnit"
+      ></va-button-toggle>
+    </div>
+    <va-divider />
+    <div class="mt-2 mx-1 grid grid-cols-6 items-center">
+      <div class="col-span-1">
+        <p>Space</p>
+      </div>
+      <va-input
+        v-model="leftBoundryInput"
+        :label="axis === 'x' ? 'Left' : 'Bottom'"
+        placeholder="10%"
+        class="col-span-2"
+        @keyup.enter="setBoundry"
+        @blur="setBoundry"
+      />
+      <va-input
+        v-model="rightBoundryInput"
+        :label="axis === 'x' ? 'Right' : 'Top'"
+        placeholder="10%"
+        class="px-1 col-span-2"
+        @keyup.enter="setBoundry"
+        @blur="setBoundry"
+      />
+      <div class="mx-2 col-span-1 justify-self-end">
+        <button @click="resetBoundry">Reset</button>
+      </div>
+    </div>
+    <va-divider />
+    <div class="mt-2 mx-1 grid grid-cols-6 items-center">
+      <div class="col-span-1">
+        <p>Fixed</p>
+      </div>
+      <va-input
+        v-model="minInput"
+        class="col-span-2"
+        label="Min"
+        @keyup.enter="setMin(minInput)"
+        @blur="setMin(minInput)"
+      >
+        <template #appendInner>{{ unitObj.text }}</template>
+      </va-input>
+      <va-input
+        v-model="maxInput"
+        class="px-1 col-span-2"
+        label="Max"
+        @keyup.enter="setMax(maxInput)"
+        @blur="setMax(maxInput)"
+      >
+        <template #appendInner>{{ unitObj.text }}</template>
+      </va-input>
+      <div class="mx-2 col-span-1 justify-self-end">
+        <button small @click="resetMinMax">Reset</button>
+      </div>
+    </div>
+    <va-divider />
+    <div class="mt-2 mx-1 grid grid-cols-6 items-center">
+      <div>
+        <p>Interval</p>
+      </div>
+      <va-input
+        v-model="intervalInput"
+        class="col-span-2"
+        @keyup.enter="setInterval(Number(intervalInput))"
+        @blur="setInterval(Number(intervalInput))"
+      >
+        <template #appendInner>{{ unitObj.text }}</template>
+      </va-input>
+      <div class="mx-2 col-span-3 justify-self-end">
+        <button small @click="resetInterval">Reset</button>
+      </div>
+    </div>
+    <!-- <va-divider />
+    <div class="mt-2 mx-1 grid grid-cols-6 items-center">
+      <div>
+        <p>SplitLine</p>
+      </div>
+      <va-counter v-model="splitNumber" class="col-span-2" @update:model-value="setSplitNumber" />
+    </div> -->
+  </div>
+  <va-divider />
+</template>
+<script setup lang="ts">
+  import { ref, computed, toRef, defineProps } from 'vue'
+  import { XAxisManager } from '@/utils/chart/x-axis/xAxisManager'
+  import { YAxisManager } from '@/utils/chart/y-axis/yAxisManager'
+
+  /* init definition */
+
+  const props = defineProps<{
+    axis: string
+    axisManager: XAxisManager | YAxisManager
+    axisIndex: number
+    dataZoom: object
+  }>()
+  const axisManager = toRef(props, 'axisManager')
+  const dataZoom = toRef(props, 'dataZoom')
+
+  /**  axis setting */
+  /* unit */
+  const unitObj = computed(() => axisManager.value.getUnit())
+  const unitOption = computed(() =>
+    Object.keys(unitObj.value.option).map((ele) => {
+      return { label: ele, value: ele }
+    }),
+  )
+
+  const changeUnit = function (_unit: string) {
+    /* caculate the ratio */
+    const oldScale = unitObj.value.scale
+    const newScale = unitObj.value.option[_unit]
+    const ratio = newScale / oldScale
+
+    /* correct the input value with ratio */
+    if (maxInput.value !== '') maxInput.value = String(Number(maxInput.value) / ratio)
+    if (minInput.value !== '') minInput.value = String(Number(minInput.value) / ratio)
+    if (intervalInput.value !== '') intervalInput.value = String(Number(intervalInput.value) / ratio)
+
+    /* change the scale */
+    unitObj.value.scale = unitObj.value.option[_unit]
+  }
+
+  /* boundry */
+  const leftBoundryInput = ref('')
+  const rightBoundryInput = ref('')
+
+  const setBoundry = function () {
+    if (leftBoundryInput.value === '') leftBoundryInput.value = '0'
+    if (rightBoundryInput.value === '') rightBoundryInput.value = '0'
+    axisManager.value.setBoundry([leftBoundryInput.value, rightBoundryInput.value])
+    dataZoom.value[0].disabled = true
+  }
+  const resetBoundry = function () {
+    leftBoundryInput.value = ''
+    rightBoundryInput.value = ''
+    axisManager.value.resetBoundry()
+    dataZoom.value[0].disabled = false
+  }
+
+  /* max & min */
+  const maxInput = ref('')
+  const minInput = ref('')
+
+  const setMax = function (max: string) {
+    if (max === '') return
+    /* adjust max with scale */
+    max = String(Number(max) * unitObj.value.scale)
+    /* set max */
+    axisManager.value.setMax(max)
+    dataZoom.value[0].disabled = true
+  }
+  const setMin = function (min: string) {
+    if (min === '') return
+    /* adjust min with scale */
+    min = String(Number(min) * unitObj.value.scale)
+    /* set min */
+    axisManager.value.setMin(min)
+    dataZoom.value[0].disabled = true
+  }
+  const resetMinMax = function () {
+    maxInput.value = ''
+    minInput.value = ''
+    axisManager.value.resetMinMax()
+    dataZoom.value[0].disabled = false
+  }
+
+  /* interval */
+  const intervalInput = ref('')
+
+  const setInterval = function (interval: number) {
+    if (interval <= 0) return
+    interval = Number(interval) * unitObj.value.scale
+    axisManager.value.setInterval(interval)
+  }
+  const resetInterval = function () {
+    intervalInput.value = ''
+    axisManager.value.resetInterval()
+  }
+
+  /* splitLine */
+  const splitNumber = ref(5)
+
+  const setSplitNumber = function (splitNumber: number) {
+    axisManager.value.setSplitNumber(splitNumber)
+  }
+</script>
+<style></style>

src/components/data-analysis/chart-container/AxisSettingSlider.vue

@@ -0,0 +1,46 @@
+<template>
+  <slideout v-model="show" :show-mask="false" :arrow-button="false" :title="title" :size="'30%'" dock="left" resizable>
+    <div class="grid justify-items-center self-center text-lg">
+      <span>X-Axis</span>
+    </div>
+    <va-divider />
+    <AxisSetting
+      axis="x"
+      :axis-manager="chartStore.chartManager.children[chartIndex].xAxisManager"
+      :data-zoom="chartStore.chartManager.children[chartIndex].dataZoom"
+      :axis-index="0"
+    ></AxisSetting>
+
+    <div class="grid justify-items-center self-center text-lg">
+      <span>Y-Axis</span>
+    </div>
+    <va-divider />
+    <AxisSetting
+      axis="y"
+      :axis-manager="chartStore.chartManager.children[chartIndex].yAxisManager"
+      :data-zoom="chartStore.chartManager.children[chartIndex].dataZoom"
+      :axis-index="0"
+    ></AxisSetting>
+  </slideout>
+</template>
+<script setup lang="ts">
+  import AxisSetting from './AxisSetting.vue'
+  import { ref, computed } from 'vue'
+  import { useChartStore } from '@/stores/data-analysis/chart'
+
+  const title = 'Axis Settings'
+  const chartStore = useChartStore()
+  const chartIndex = ref(0)
+
+  /* slideout show */
+  const show = computed({
+    // getter
+    get() {
+      return chartStore.xAxisSlider
+    },
+    // setter
+    set(newValue) {
+      chartStore.xAxisSlider = newValue
+    },
+  })
+</script>

src/components/data-analysis/chart-container/CanvasContainer.vue

@@ -0,0 +1,428 @@
+<template>
+  <div class="">
+    <v-contextmenu ref="contextmenu">
+      <v-contextmenu-item @click="changeAxisPointer">pointer</v-contextmenu-item>
+      <v-contextmenu-item v-if="canvasInstance.format === 'line'" @click="changeFormat('scatter')"
+        >scatter</v-contextmenu-item
+      >
+      <v-contextmenu-item v-if="canvasInstance.format === 'scatter'" @click="changeFormat('line')"
+        >line</v-contextmenu-item
+      >
+      <v-contextmenu-item @click="deleteSelected">clear</v-contextmenu-item>
+      <v-contextmenu-item @click="download">download</v-contextmenu-item>
+    </v-contextmenu>
+    <va-card v-contextmenu:contextmenu class="h-full">
+      <va-card-content class="h-full">
+        <div style="position: relative" class="h-full">
+          <canvas
+            id="lineCanvas"
+            class="myCanvas"
+            :width="width"
+            :height="height"
+            style="position: absolute; top: 0; left: 0"
+          ></canvas>
+          <canvas
+            id="scatterCanvas"
+            class="myCanvas displayNone"
+            :width="width"
+            :height="height"
+            style="position: absolute; top: 0; left: 0"
+          ></canvas>
+          <canvas
+            id="axisCanvas"
+            class="myCanvas"
+            :width="width"
+            :height="height"
+            style="position: absolute; top: 0; left: 0"
+          ></canvas>
+        </div>
+      </va-card-content>
+    </va-card>
+  </div>
+</template>
+<script setup lang="ts">
+  import { ref, watch, computed, onMounted } from 'vue'
+  import { useCanvasStore } from '@/stores/data-analysis/canvas'
+  import api from '@/data/server-api'
+  import { useToast } from 'vuestic-ui'
+
+  const { init } = useToast()
+
+  const canvasStore = useCanvasStore()
+
+  const { width, height, numTicks, innerWidth, innerHeight, start, end, xTickPixels, yTickPixels, x, y } =
+    canvasStore.canvas
+  // monitor screen height
+  const screenHeight = computed(() => canvasStore.canvas.screenHeight)
+  // monitor screen width
+  const screenWidth = computed(() => canvasStore.canvas.screenWidth)
+  // monitor screen inner height
+  const screenInnerHeight = computed(() => canvasStore.canvas.screenInnerHeight)
+  // monitor screen inner width
+  const screenInnerWidth = computed(() => canvasStore.canvas.screenInnerWidth)
+  // line or scatter
+  const format = computed(() => canvasStore.canvas.format)
+  // canvas instance
+  const canvasInstance = canvasStore.canvas
+  // show axis pointer
+  const showAxisPointer = ref(false)
+
+  let axisCanvas: HTMLCanvasElement
+  let axisCtx: CanvasRenderingContext2D
+  let lineCanvas: HTMLCanvasElement
+  let lineCtx: CanvasRenderingContext2D
+  let scatterCanvas: HTMLCanvasElement
+  let scatterCtx: CanvasRenderingContext2D
+
+  // show axis pointer or not
+  const changeAxisPointer = function () {
+    showAxisPointer.value = !showAxisPointer.value
+    reDraw()
+  }
+
+  // change line or scatter
+  const changeFormat = function (format: string) {
+    canvasInstance.format = format
+  }
+
+  // delect select rect
+  const deleteSelected = function () {
+    canvasInstance.resetSelected()
+    reDraw()
+  }
+
+  const download = function () {
+    // create combined canvas
+    const combinedCanvas = document.createElement('canvas')
+    const combinedCtx = combinedCanvas.getContext('2d')
+    // if the source canvas is exist
+    if (combinedCtx && lineCanvas && scatterCanvas) {
+      // define height & width
+      combinedCanvas.width = axisCanvas.width
+      combinedCanvas.height = axisCanvas.height
+      // make background white
+      combinedCtx.fillStyle = '#FFFFFF'
+      combinedCtx.fillRect(0, 0, combinedCanvas.width, combinedCanvas.height)
+
+      // draw axis
+      combinedCtx.drawImage(axisCanvas, 0, 0)
+      combinedCtx.globalCompositeOperation = 'multiply'
+      // draw line
+      if (format.value === 'line') combinedCtx.drawImage(lineCanvas, 0, 0)
+      // draw scatter
+      if (format.value === 'scatter') combinedCtx.drawImage(scatterCanvas, 0, 0)
+
+      // create download link
+      const link = document.createElement('a')
+      link.download = 'canvas.png'
+      link.href = combinedCanvas.toDataURL()
+      link.click()
+    }
+  }
+
+  // mouse down position
+  let mouseStartX = -1
+  let mouseStartY = -1
+
+  // mouse moving temp position
+  let mouseTempX = -1
+  let mouseTempY = -1
+
+  // mouse up position
+  let mouseEndX = -1
+  let mouseEndY = -1
+
+  // dragging flag
+  let isDragging = false
+
+  // color code
+  let colorIndex = 0
+  const generatorColor = function () {
+    const colorCode = [
+      '#054A91',
+      '#5FA8D3',
+      '#16697A',
+      '#2A9D8F',
+      '#746C68',
+      '#E9C46A',
+      '#F78514',
+      '#D14958',
+      '#4C4DC8',
+      '#9E2A2B',
+      '#F87575',
+    ]
+    const ret = colorCode[colorIndex]
+    colorIndex = colorIndex === colorCode.length ? 0 : colorIndex + 1
+    return ret
+  }
+
+  const calcPositionX = function (xPos: number) {
+    const diffX = xPos - x.range[0]
+    let ratioX = Math.abs(diffX / (x.range[1] - x.range[0]))
+    if (ratioX > 1) ratioX = 1
+    return Math.trunc(ratioX * innerWidth) + start.x
+  }
+
+  const calcPositionY = function (yPoint: number) {
+    const diffY = y.range[1] - yPoint
+    let ratioY = Math.abs(diffY / (y.range[1] - y.range[0]))
+    if (ratioY > 1) ratioY = 1
+    return Math.trunc(ratioY * innerHeight) + end.y
+  }
+
+  const drawPoint = function (posX: number, posY: number, color: string, ctx: CanvasRenderingContext2D) {
+    // draw circle & fill color
+    ctx.beginPath()
+    ctx.arc(posX, posY, 2, 0, 2 * Math.PI)
+    ctx.fillStyle = color
+    ctx.fill()
+  }
+
+  // Helper function to draw the x axis with tick marks
+  function drawXAxis(xMin: number, xMax: number, tickPixels: number[], ctx: CanvasRenderingContext2D) {
+    // draw axis line
+    ctx.beginPath()
+    ctx.moveTo(start.x, start.y)
+    ctx.lineTo(end.x, start.y)
+    ctx.fillStyle = 'black'
+    ctx.lineWidth = 1
+    ctx.font = '40px sans-serif'
+    ctx.textAlign = 'center'
+
+    // draw axis tickle
+    for (let i = 0; i < tickPixels.length; i++) {
+      const x = tickPixels[i]
+      ctx.moveTo(start.x + x, start.y)
+      ctx.lineTo(start.x + x, start.y + 15)
+      const text = canvasInstance.getXText(xMin + (i / numTicks) * (xMax - xMin))
+      ctx.fillText(text, start.x + x, start.y + 75)
+    }
+    ctx.strokeStyle = 'black'
+    ctx.stroke()
+  }
+
+  function drawYAxis(yMin: number, yMax: number, tickPixels: number[], ctx: CanvasRenderingContext2D) {
+    // draw axis line
+    ctx.beginPath()
+    ctx.moveTo(start.x, start.y)
+    ctx.lineTo(start.x, end.y)
+    ctx.fillStyle = 'black'
+    ctx.font = '40px sans-serif'
+    ctx.textAlign = 'right'
+    ctx.lineWidth = 1
+
+    // draw axis tickle
+    for (let i = 0; i < tickPixels.length; i++) {
+      const y = tickPixels[i]
+      ctx.moveTo(start.x, start.y - y)
+      ctx.lineTo(start.x - 25, start.y - y)
+      const text = canvasInstance.getYText(yMin + (i / numTicks) * (yMax - yMin))
+      ctx.fillText(text, start.x - 30, start.y - y + 15)
+    }
+    ctx.strokeStyle = 'black'
+    ctx.stroke()
+  }
+
+  const drawXAxisPointer = function (mouseX: number, ctx: CanvasRenderingContext2D) {
+    const x = (mouseX * width) / screenWidth.value
+    ctx.moveTo(x, start.y)
+    ctx.lineTo(x, end.y)
+    ctx.strokeStyle = 'black'
+    ctx.stroke()
+
+    const value = canvasInstance.mouseXToValue(mouseX)
+    const text = canvasInstance.getXText(value)
+    ctx.textAlign = 'center'
+    ctx.fillText(text, x, start.y + 50)
+  }
+
+  const drawYAxisPointer = function (mouseY: number, ctx: CanvasRenderingContext2D) {
+    const y = (mouseY * height) / screenHeight.value
+    ctx.moveTo(start.x, y)
+    ctx.lineTo(end.x, y)
+    ctx.strokeStyle = 'black'
+    ctx.stroke()
+
+    const value = canvasInstance.mouseYToValue(mouseY)
+    const text = canvasInstance.getYText(value)
+    ctx.textAlign = 'right'
+    ctx.fillText(text, start.x, y)
+  }
+
+  const drawInputData = function (x: string | any[], y: number[]) {
+    const color = generatorColor()
+
+    // draw line
+    lineCtx.beginPath()
+    lineCtx.moveTo(calcPositionX(x[0]), calcPositionY(y[0]))
+    for (let i = 0; i < x.length; i++) {
+      const X = calcPositionX(x[i])
+      const Y = calcPositionY(y[i])
+      lineCtx.lineTo(X, Y)
+
+      // draw point
+      drawPoint(X, Y, color, scatterCtx)
+    }
+    lineCtx.lineWidth = 2
+    lineCtx.strokeStyle = color
+    lineCtx.stroke()
+  }
+
+  const generateAxis = function () {
+    drawXAxis(Number(x.range[0]), Number(x.range[1]), xTickPixels, axisCtx)
+    drawYAxis(Number(y.range[0]), Number(y.range[1]), yTickPixels, axisCtx)
+  }
+
+  const resetCanvas = function () {
+    axisCtx.clearRect(0, 0, width, height)
+    lineCtx?.clearRect(0, 0, width, height)
+    scatterCtx?.clearRect(0, 0, width, height)
+  }
+
+  const outOfBoundry = function (mouseX: number, mouseY: number) {
+    if (mouseX < canvasInstance.getBoundryInScreen(3) || mouseX > canvasInstance.getBoundryInScreen(1)) return true
+    if (mouseY < canvasInstance.getBoundryInScreen(0) || mouseY > canvasInstance.getBoundryInScreen(2)) return true
+    return false
+  }
+
+  const reDraw = function () {
+    const rect = axisCanvas.getBoundingClientRect()
+
+    //   Clear the canvas
+    axisCtx.clearRect(0, 0, width, height)
+
+    // Draw the x and y axes with tick marks
+    generateAxis()
+
+    // Draw the x and y axis pointers
+    if (showAxisPointer.value === true) {
+      drawXAxisPointer(mouseTempX, axisCtx)
+      drawYAxisPointer(mouseTempY, axisCtx)
+    }
+
+    for (const selectionRect of canvasInstance.selectedSave) {
+      axisCtx.lineWidth = 5
+      axisCtx.strokeRect(
+        (selectionRect[0] / rect.width) * width,
+        (selectionRect[1] / rect.height) * height,
+        ((selectionRect[2] - selectionRect[0]) / rect.width) * width,
+        ((selectionRect[3] - selectionRect[1]) / rect.height) * height,
+      )
+    }
+
+    if (isDragging || (mouseEndX !== -1 && mouseEndY !== -1)) {
+      if (isDragging === true) {
+        mouseEndX = mouseTempX
+        mouseEndY = mouseTempY
+      }
+
+      axisCtx.lineWidth = 5
+      axisCtx.strokeRect(
+        (mouseStartX / rect.width) * width,
+        (mouseStartY / rect.height) * height,
+        ((mouseEndX - mouseStartX) / rect.width) * width,
+        ((mouseEndY - mouseStartY) / rect.height) * height,
+      )
+    }
+  }
+
+  onMounted(() => {
+    axisCanvas = document.getElementById('axisCanvas') as HTMLCanvasElement
+    axisCtx = axisCanvas?.getContext('2d')
+    lineCanvas = document.getElementById('lineCanvas') as HTMLCanvasElement
+    lineCtx = lineCanvas?.getContext('2d')
+    scatterCanvas = document.getElementById('scatterCanvas') as HTMLCanvasElement
+    scatterCtx = scatterCanvas?.getContext('2d')
+
+    const rect = axisCanvas?.getBoundingClientRect()
+    if (rect) {
+      canvasInstance.setScreenSize(rect.width, rect.height)
+    }
+
+    // resize
+    window.addEventListener('resize', () => {
+      const rect = axisCanvas?.getBoundingClientRect()
+      if (rect) canvasInstance.setScreenSize(rect.width, rect.height)
+    })
+
+    // listen for mouse down event
+    axisCanvas?.addEventListener('mousedown', (event) => {
+      if (event.button === 0) {
+        const rect = axisCanvas.getBoundingClientRect()
+        // reset mouse up
+        mouseEndX = -1
+        mouseEndY = -1
+
+        // set starting coordinates of square
+        mouseStartX = event.clientX - rect.left
+        mouseStartY = event.clientY - rect.top
+        if (outOfBoundry(mouseStartX, mouseStartY) === true) return
+        isDragging = true
+      }
+    })
+
+    // listen for mouse up event
+    axisCanvas?.addEventListener('mouseup', async () => {
+      const rect = axisCanvas.getBoundingClientRect()
+      if (mouseEndX === -1 || mouseEndY === -1) return
+      canvasInstance.selectedSave.push([mouseStartX, mouseStartY, mouseEndX, mouseEndY])
+      // update ending coordinates of square
+      const dataStartX =
+        ((mouseStartX - rect.width * 0.1) * (x.range[1] - x.range[0])) / screenInnerWidth.value + Number(x.range[0])
+      const dataEndX =
+        ((mouseEndX - rect.width * 0.1) * (x.range[1] - x.range[0])) / screenInnerWidth.value + Number(x.range[0])
+      const dataStartY =
+        ((rect.height - mouseStartY - rect.height * 0.1) * (y.range[1] - y.range[0])) / screenInnerHeight.value +
+        Number(y.range[0])
+      const dataEndY =
+        ((rect.height - mouseEndY - rect.height * 0.1) * (y.range[1] - y.range[0])) / screenInnerHeight.value +
+        Number(y.range[0])
+      const xInfo = [canvasInstance.x.channel.id, dataStartX, dataEndX]
+      const yInfo = [canvasInstance.y.channel.id, dataStartY, dataEndY]
+      const ret = await api.meta.findMeta(canvasStore.canvas.metaIds, [xInfo, yInfo])
+      console.log('ret', ret)
+      for (const mes of ret.data) {
+        init(mes[1])
+      }
+
+      // reset mouse position
+      mouseStartX = mouseStartY = mouseEndX = mouseEndY = -1
+      // reset isDraggable flag
+      isDragging = false
+    })
+
+    axisCanvas?.addEventListener('mousemove', function (event) {
+      const rect = axisCanvas.getBoundingClientRect()
+      // get mouse current pos
+      mouseTempX = event.clientX - rect.left
+      mouseTempY = event.clientY - rect.top
+
+      if (outOfBoundry(mouseTempX, mouseTempY) === true) return
+
+      reDraw()
+    })
+  })
+
+  watch(format, (newVal: string) => {
+    if (newVal === 'line') {
+      lineCanvas?.classList.remove('displayNone')
+      scatterCanvas?.classList.add('displayNone')
+    }
+    if (newVal === 'scatter') {
+      lineCanvas?.classList.add('displayNone')
+      scatterCanvas?.classList.remove('displayNone')
+    }
+  })
+
+  defineExpose({ reDraw, generateAxis, drawInputData, resetCanvas })
+</script>
+<style>
+  .myCanvas {
+    width: 100%;
+    height: 100%;
+  }
+
+  .displayNone {
+    display: none;
+  }
+</style>

src/components/data-analysis/chart-container/ChartContainer.vue

@@ -0,0 +1,106 @@
+<template>
+  <div>
+    <va-card class="h-full">
+      <va-card-content class="h-full w-full">
+        <EChart ref="chart_ref" :option="chart" :autoresize="true" :loading="loading" />
+      </va-card-content>
+    </va-card>
+    <AxisSettingSlider></AxisSettingSlider>
+  </div>
+</template>
+<script setup lang="ts">
+  import { ECharts, EChartsCoreOption } from 'echarts'
+  import { ref, onMounted } from 'vue'
+  import { useChartStore } from '@/stores/data-analysis/chart'
+  import { useCanvasStore } from '@/stores/data-analysis/canvas'
+  import AxisSettingSlider from './AxisSettingSlider.vue'
+  import Chart from '@/utils/chart/chart'
+
+  const chartStore = useChartStore()
+  const canvasStore = useCanvasStore()
+  const chartIndex = 0
+
+  interface Props {
+    chart: Chart
+  }
+
+  const props = defineProps<Props>()
+
+  const chart_ref = ref<ECharts | null>(null)
+
+  const setOption = function (option: EChartsCoreOption, notMerge = false) {
+    chart_ref.value?.setOption(option, notMerge)
+  }
+
+  const appendData = function (seriesIndex: number, data: Array<number | string>) {
+    if (data.length <= 5e4) {
+      chartStore.chartManager.children[chartIndex].series[seriesIndex].data.push(...data)
+    } else {
+      for (const _data of data) {
+        chartStore.chartManager.children[chartIndex].series[seriesIndex].data.push(_data)
+      }
+    }
+    // chart_ref.value?.appendData({
+    //   seriesIndex: seriesIndex,
+    //   data: data,
+    // })
+    // chart_ref.value?.resize()
+    setTimeout(() => {
+      const chartXRange = chart_ref.value.chart.getModel().getComponent('xAxis').axis.scale._extent
+      const chartYRange = chart_ref.value.chart.getModel().getComponent('yAxis').axis.scale._extent
+      canvasStore.canvas.x.range = chartXRange.map((val: number) => String(val))
+      canvasStore.canvas.y.range = chartYRange.map((val: number) => String(val))
+    })
+  }
+
+  const markLine = function (value: number | Array<number> | string, seriesIndex = 0) {
+    chartStore.chartManager.children[chartIndex].series[seriesIndex].markLine.data = value
+    // chart_ref.value?.setOption({
+    //   series: [
+    //     {
+    //       markLine: {
+    //         data: [{ name: header, yAxis: value }],
+    //       },
+    //     },
+    //   ],
+    // })
+  }
+
+  /* refresh */
+  const reset = function () {
+    setOption({}, true)
+  }
+
+  /* Loading */
+  const loading = ref(false)
+  const startLoading = function () {
+    loading.value = true
+  }
+  const stopLoading = function () {
+    loading.value = false
+  }
+
+  onMounted(() => {
+    const newTool = {
+      show: true,
+      title: 'custom icon1',
+      icon: 'path://M432.45,595.444c0,2.177-4.661,6.82-11.305,6.82c-6.475,0-11.306-4.567-11.306-6.82s4.852-6.812,11.306-6.812C427.841,588.632,432.452,593.191,432.45,595.444L432.45,595.444z M421.155,589.876c-3.009,0-5.448,2.495-5.448,5.572s2.439,5.572,5.448,5.572c3.01,0,5.449-2.495,5.449-5.572C426.604,592.371,424.165,589.876,421.155,589.876L421.155,589.876z M421.146,591.891c-1.916,0-3.47,1.589-3.47,3.549c0,1.959,1.554,3.548,3.47,3.548s3.469-1.589,3.469-3.548C424.614,593.479,423.062,591.891,421.146,591.891L421.146,591.891zM421.146,591.891',
+      onclick: function () {
+        chartStore.xAxisSlider = !chartStore.xAxisSlider
+      },
+    }
+    for (const chart of chartStore.chartManager.children) {
+      chart.toolbox.feature['myTool1'] = newTool
+    }
+  })
+
+  defineExpose({
+    startLoading,
+    stopLoading,
+    setOption,
+    appendData,
+    markLine,
+    reset,
+  })
+</script>
+<style lang=""></style>

src/components/data-analysis/file-container/ChannelSelector.vue

@@ -0,0 +1,54 @@
+<template>
+  <div>
+    <div>
+      X-Axis
+      <va-select
+        v-model="channelStore.xAxisSelected"
+        :text-by="'name'"
+        :options="xOption"
+        :no-options-text="'Select a file first.'"
+      ></va-select>
+    </div>
+    <div>
+      Y-Axis
+      <va-select
+        v-model="channelStore.yAxisSelected"
+        :text-by="'name'"
+        :options="yOption"
+        :no-options-text="'Select a file first.'"
+      ></va-select>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+  import { computed, watch } from 'vue'
+  import { useChannelStore } from '@/stores/data-analysis/channel'
+
+  const channelStore = useChannelStore()
+  const xOption = computed(() => channelStore.xAxisOptions)
+  const yOption = computed(() => channelStore.yAxisOptions)
+
+  watch(
+    xOption,
+    () => {
+      if (Object.keys(channelStore.xAxisSelected).length === 0) {
+        channelStore.xAxisSelected = xOption.value[1]
+      }
+    },
+    {
+      deep: true,
+    },
+  )
+
+  watch(
+    yOption,
+    () => {
+      if (Object.keys(channelStore.yAxisSelected).length === 0) {
+        channelStore.yAxisSelected = yOption.value[2]
+      }
+    },
+    {
+      deep: true,
+    },
+  )
+</script>

src/components/data-analysis/file-container/FileContainer.vue

@@ -0,0 +1,44 @@
+<template>
+  <va-card>
+    <va-card-content>
+      <va-button @click="showModal">FILE</va-button>
+      <p>X: {{ channelStore.xAxisSelected.name }} Y: {{ channelStore.yAxisSelected.name }}</p>
+      <va-list class="py-2" fit>
+        <va-list-label> </va-list-label>
+        <template v-for="(file, i) in selectedFiles" :key="'item' + file.id">
+          <va-list-item>
+            <va-list-item-section>
+              <va-list-item-label>
+                {{ file.name }}
+              </va-list-item-label>
+            </va-list-item-section>
+          </va-list-item>
+
+          <va-list-separator v-if="i < selectedFiles.length - 1" :key="'separator' + i" class="my-1" fit />
+        </template>
+      </va-list>
+      <Suspense>
+        <FileSlide ref="file_modal_ref"></FileSlide>
+      </Suspense>
+    </va-card-content>
+  </va-card>
+</template>
+
+<script setup lang="ts">
+  import { ref, reactive } from 'vue'
+  import { useChannelStore } from '@/stores/data-analysis/channel'
+  import { useFileViewStore } from '@/stores/data-analysis/file-view'
+  import FileSlide from './FileSlider.vue'
+
+  const channelStore = useChannelStore()
+  const fileViewStore = useFileViewStore()
+  const selectedFiles = reactive(fileViewStore.selectedFiles)
+
+  /* File Modal Handling */
+  const file_modal_ref = ref<InstanceType<typeof FileSlide> | null>(null)
+  const showModal = function () {
+    file_modal_ref.value?.showModal()
+  }
+
+  defineExpose({ file_modal_ref, showModal })
+</script>

src/components/data-analysis/file-container/FileSlider.vue

@@ -0,0 +1,147 @@
+<template>
+  <slideout v-model="showSlideOut" title="The title" :size="'120%'" dock="left" resizable>
+    <ChannelSelector></ChannelSelector>
+    <div class="pa-1 d-flex align-center">
+      <va-button-group class="mr-1">
+        <va-button @click="changeViewFormat(0)">Table</va-button>
+        <va-button disabled @click="changeViewFormat(1)">Tree</va-button>
+      </va-button-group>
+      <va-button-group class="mr-3">
+        <va-button @click="changeFileView('time')">Time</va-button>
+        <va-button @click="changeFileView('folder')">Folder</va-button>
+        <va-button @click="changeFileView('project')">Project</va-button>
+      </va-button-group>
+      <va-button-group>
+        <va-button @click="expandAll(true)">Expand</va-button>
+        <va-button @click="expandAll(false)">Close</va-button>
+      </va-button-group>
+    </div>
+    <va-inner-loading :loading="loading">
+      <div>
+        <TableFormat
+          v-if="viewFormat === 0"
+          ref="table_format_ref"
+          :columns="columns"
+          :rows="rows"
+          @on-select="onSelect"
+        ></TableFormat>
+        <TreeFormat v-if="viewFormat === 1" ref="table_format_ref" :columns="columns" :rows="rows"></TreeFormat>
+      </div>
+    </va-inner-loading>
+  </slideout>
+</template>
+<script setup lang="ts">
+  import { ref, reactive, onMounted } from 'vue'
+  import { useFileViewStore } from '@/stores/data-analysis/file-view'
+  import { useChannelStore } from '@/stores/data-analysis/channel'
+  import { MetaFile } from '@/utils/file'
+  import TableFormat from './TableFormat.vue'
+  import TreeFormat from './TreeFormat.vue'
+  import ChannelSelector from './ChannelSelector.vue'
+  import configTable from '@/data/config-table'
+
+  const table_format_ref = ref<InstanceType<typeof TableFormat> | null>(null)
+
+  const getWorkingMode = function (rowObj) {
+    if (rowObj.parameter) return configTable.getModeConfig(rowObj.parameter._LIBRARY_, rowObj.parameter.MODE).name
+    return
+  }
+
+  const getDate = function (rowObj) {
+    if (rowObj.created_at) {
+      return rowObj.created_at.replace('Z', '').replace('T', ' ')
+    }
+    return
+  }
+
+  const fileViewStore = useFileViewStore()
+  const channelStore = useChannelStore()
+  const fileView = reactive(fileViewStore.fileView)
+  const rows: any = fileView.children
+  const columns = reactive([
+    {
+      label: 'Name',
+      field: 'name',
+    },
+    {
+      label: 'Working Mode',
+      field: getWorkingMode,
+    },
+    {
+      label: 'TotalTime',
+      field: 'time',
+      type: 'number',
+    },
+    {
+      label: 'Size',
+      field: 'size',
+      type: 'number',
+    },
+    {
+      label: 'Created At',
+      field: getDate,
+    },
+  ])
+
+  const loading = ref(true)
+  const showSlideOut = ref(false)
+  const showModal = function () {
+    showSlideOut.value = !showSlideOut.value
+
+    setTimeout(() => {
+      loading.value = false
+    }, 2000)
+  }
+
+  const viewFormat = ref(0)
+  const changeViewFormat = function (view: number) {
+    viewFormat.value = view
+  }
+
+  const changeFileView = async function (view: string) {
+    loading.value = true
+    fileView.changeView(view)
+    await fileView.appendChildren(1)
+    loading.value = false
+  }
+
+  const expandAll = function (expandOrNot: boolean) {
+    if (expandOrNot === true) table_format_ref.value?.expandAll()
+    if (expandOrNot === false) table_format_ref.value?.collapseAll()
+  }
+
+  const onSelect = function (selectedFile: MetaFile[]) {
+    fileViewStore.selectedFiles.length = 0
+    fileViewStore.selectedFiles.push(...selectedFile)
+
+    if (fileViewStore.selectedFiles.length > 0) {
+      // TODO get all selected library
+      const config: any = configTable.getModeConfig(
+        fileViewStore.selectedFiles[0].device.library_name,
+        fileViewStore.selectedFiles[0].parameter.MODE,
+      )
+      const channelKey = Object.keys(config.channels)
+      const channel = Object.values(config.channels)
+      const channelOptions = channel.map((v: any, idx) => {
+        v.id = channelKey[idx]
+        if (v.name === 'Time') {
+          v.id = 'Time'
+        }
+        return v
+      })
+      channelStore.xAxisOptions.length = 0
+      channelStore.xAxisOptions.push(...channelOptions)
+      channelStore.yAxisOptions.length = 0
+      channelStore.yAxisOptions.push(...channelOptions)
+    }
+  }
+
+  onMounted(() => {
+    fileView.appendChildren()
+  })
+
+  defineExpose({
+    showModal,
+  })
+</script>
+<style lang="scss"></style>

src/components/data-analysis/file-container/TableFormat.vue

@@ -0,0 +1,64 @@
+<template>
+  <VueGoodTable
+    ref="vue_good_table_refs"
+    :columns="columns"
+    :rows="rows"
+    :select-options="{ enabled: true, selectAllByGroup: true }"
+    :search-options="{ enabled: true }"
+    :group-options="{
+      enabled: true,
+      collapsable: true,
+      rowKey: 'id',
+    }"
+    @selected-rows-change="select"
+  >
+  </VueGoodTable>
+</template>
+<script setup lang="ts">
+  import { ref, onMounted } from 'vue'
+  import { MetaFile } from '@/utils/file'
+
+  // emit
+  const emit = defineEmits(['onSelect'])
+
+  // props
+  defineProps({
+    columns: {
+      type: Array,
+      default: () => {
+        return []
+      },
+    },
+    rows: {
+      type: Array,
+      default: () => {
+        return []
+      },
+    },
+  })
+
+  // ref
+  const vue_good_table_refs = ref()
+
+  const expandAll = function () {
+    vue_good_table_refs.value.expandAll()
+  }
+  const collapseAll = function () {
+    vue_good_table_refs.value.collapseAll()
+  }
+  const select = function (params: { selectedRows: MetaFile[] }) {
+    emit('onSelect', params.selectedRows)
+  }
+
+  onMounted(() => {
+    // Due to "vue_good_table" package error, need to fix group select by reassign function
+    vue_good_table_refs.value.toggleSelectGroup = function (event: { checked: any }, headerRow: { children: any[] }) {
+      headerRow.children.forEach((row: { [x: string]: any }) => {
+        row['vgtSelected'] = event.checked
+      })
+    }
+  })
+
+  defineExpose({ expandAll, collapseAll })
+</script>
+<style></style>

src/components/data-analysis/file-container/TreeFormat.vue

@@ -0,0 +1,55 @@
+<template>
+  <va-tree-view
+    v-model:checked="selectedNodes"
+    v-model:expanded="expanedNodes"
+    :nodes="rows"
+    class="customizable-content"
+    :filter="filter"
+    :filter-method="customFilterMethod"
+    :track-by="'idType'"
+    :value-by="'idType'"
+    selectable
+  >
+    <template #content="node">
+      <div class="align-center">
+        <va-icon v-if="node.type === 'Folder' && node.expanded === false" class="fas fa-folder mr-2" />
+        <va-icon v-if="node.type === 'Folder' && node.expanded === true" class="fas fa-folder-open mr-2" />
+        <va-icon v-if="node.type === 'MetaFile'" class="fas fa-file mr-2" />
+        <template v-if="node.type !== 'MetaFile'">{{ node.name }}</template>
+        <template v-if="node.type === 'MetaFile'">
+          {{ node.name }}
+        </template>
+      </div>
+    </template>
+  </va-tree-view>
+</template>
+<script setup lang="ts">
+  import { Ref, ref, computed } from 'vue'
+
+  defineProps({
+    columns: {
+      type: Array,
+      default: () => {
+        return []
+      },
+    },
+    rows: {
+      type: Array,
+      default: () => {
+        return []
+      },
+    },
+  })
+
+  const filter = ref('')
+  const selectedNodes: Ref<(never | string)[]> = ref([])
+  const expanedNodes: Ref<(never | string)[]> = ref([])
+
+  // filter function
+  const customFilterMethod = computed(() => {
+    return (node: any, filterText: string) => {
+      // console.log('customFilterMethod', node, filterText, key, node.name.includes(filterText))
+      return node.name.includes(filterText)
+    }
+  })
+</script>

src/components/data-analysis/setting-container/SettingContainer.vue

@@ -0,0 +1,178 @@
+<template>
+  <div>
+    <va-card class="h-full">
+      <va-card-content>
+        <va-switch
+          v-model="daSettingStore.batchMode"
+          class="mb-1"
+          size="small"
+          true-label="Batch Mode"
+          false-label="InterActive Mode"
+        ></va-switch>
+        <va-select
+          v-model="simpleSelectModel"
+          class="my-1"
+          :label="'Filter Mode'"
+          text-by="description"
+          track-by="id"
+          :options="simpleOptions"
+        />
+        <div class="my-2">
+          <div v-if="simpleSelectModel.id === 1">
+            <va-slider v-model="VTModeModel" label="percentage(%)" track-label-visible :min="0" :max="50" />
+          </div>
+          <div v-else-if="simpleSelectModel.id === 2">
+            <va-slider v-model="slopModeModel" label="1D window" track-label-visible :min="1" :max="50" />
+          </div>
+          <div v-else></div>
+        </div>
+        <div v-if="daSettingStore.batchMode" class="my-2">
+          <va-switch
+            v-model="lineOrScatter"
+            class="mb-1"
+            size="small"
+            true-label="Scatter"
+            false-label="Line"
+          ></va-switch>
+          <div>
+            <h1>Fixed Boundry</h1>
+            <va-divider></va-divider>
+            <div class="my-1 grid grid-cols-12 items-center">
+              <span>x</span>
+              <va-input v-model="canvasStore.canvas.x.range[0]" class="col-span-5">
+                <template #appendInner> </template>
+              </va-input>
+              <br />
+              <va-input v-model="canvasStore.canvas.x.range[1]" class="col-span-5"></va-input>
+            </div>
+            <div class="my-1 grid grid-cols-12 items-center">
+              <span>y</span>
+              <va-input v-model="canvasStore.canvas.y.range[0]" class="col-span-5"></va-input>
+              <br />
+              <va-input v-model="canvasStore.canvas.y.range[1]" class="col-span-5"></va-input>
+            </div>
+          </div>
+        </div>
+        <div>
+          <va-button class="mt-2" @click="filterData">Start</va-button>
+        </div>
+      </va-card-content>
+    </va-card>
+  </div>
+</template>
+<script setup lang="ts">
+  import { useChannelStore } from '@/stores/data-analysis/channel'
+  import { useChartStore } from '@/stores/data-analysis/chart'
+  import { useCanvasStore } from '@/stores/data-analysis/canvas'
+  import { useDASettingStore } from '@/stores/data-analysis/data-analysis'
+  import { useFileViewStore } from '@/stores/data-analysis/file-view'
+  import { Ref, ref, computed } from 'vue'
+
+  const emit = defineEmits(['filter-data'])
+
+  // chart index
+  const chartIndex = 0
+
+  // create stores
+  const chartStore = useChartStore()
+  const channelStore = useChannelStore()
+  const fileView = useFileViewStore()
+  const canvasStore = useCanvasStore()
+  const daSettingStore = useDASettingStore()
+
+  // setting
+  const VTModeModel = ref(10)
+  const slopModeModel = ref(20)
+  const simpleOptions = ref([
+    { id: 0, description: 'None' },
+    {
+      id: 1,
+      description: 'V-T Mode',
+    },
+    {
+      id: 2,
+      description: '1st Order Differential',
+    },
+    {
+      id: 3,
+      description: 'Third option',
+    },
+  ])
+  const simpleSelectModel: Ref<{ id: number; description: string }> = ref(simpleOptions.value[0])
+
+  const lineOrScatter = ref(false)
+
+  // const xOption = computed(() => channelStore.xAxisOptions)
+  // const yOption = computed(() => channelStore.yAxisOptions)
+
+  /* Start */
+  const filterData = function () {
+    /* reset specify chart */
+    const chart = chartStore.chartManager.children[chartIndex]
+    chart.reset()
+    /* reset specify canvas */
+    canvasStore.canvas.reset()
+    canvasStore.canvas.format = lineOrScatter.value === false ? 'line' : 'scatter'
+
+    /* assign mode & library and create series*/
+    for (const meta of fileView.selectedFiles) {
+      /* append info to chart */
+      chart.addLibraryMode(meta.parameter._LIBRARY_, meta.parameter.MODE)
+      /* append series */
+      chart.seriesManager.addSeries({ id: meta.id, name: meta.name })
+
+      canvasStore.canvas.metaIds.push(meta.id)
+    }
+
+    /* set x-axis name */
+    chart.xAxisManager.setName(channelStore.xAxisSelected.name)
+
+    /* set y-axis name */
+    chart.yAxisManager.setName(channelStore.yAxisSelected.name)
+
+    /* set x-axis label */
+    chart.xAxisManager.setAxisLabel({
+      text: channelStore.xAxisSelected.defaultUnit,
+      scale: channelStore.xAxisSelected.unit[channelStore.xAxisSelected.defaultUnit],
+      option: channelStore.xAxisSelected.unit,
+    })
+
+    const xChannel = JSON.parse(JSON.stringify(channelStore.xAxisSelected))
+    canvasStore.canvas.x.channel = xChannel
+    canvasStore.canvas.x.selectUnit = xChannel.defaultUnit
+    canvasStore.canvas.x.unit = xChannel.unit
+
+    /* set y-axis label */
+    chart.yAxisManager.setAxisLabel({
+      text: channelStore.yAxisSelected.defaultUnit,
+      scale: channelStore.yAxisSelected.unit[channelStore.yAxisSelected.defaultUnit],
+      option: channelStore.yAxisSelected.unit,
+    })
+
+    const yChannel = JSON.parse(JSON.stringify(channelStore.yAxisSelected))
+    canvasStore.canvas.y.channel = yChannel
+    canvasStore.canvas.y.selectUnit = yChannel.defaultUnit
+    canvasStore.canvas.y.unit = yChannel.unit
+
+    emit('filter-data', {
+      pattern: {
+        id: simpleSelectModel.value.id,
+        name: simpleSelectModel.value.description,
+        parameter: { percentage: VTModeModel.value, window: slopModeModel.value },
+      },
+      data: {
+        id: fileView.selectedFiles.map((ele: any) => ele.id),
+        channel: [channelStore.xAxisSelected.id, channelStore.yAxisSelected.id],
+      },
+    })
+  }
+
+  defineExpose({
+    simpleSelectModel,
+    simpleOptions,
+    VTModeModel,
+    slopModeModel,
+    filterData,
+  })
+</script>
+<style lang=""></style>

src/components/sidebar/NavigationRoutes.ts

@@ -12,220 +12,220 @@ export default {
   },
   routes: [
     {
-      name: 'dashboard',
-      displayName: 'menu.dashboard',
+      name: 'data-analysis',
+      displayName: 'Analysis',
       meta: {
         icon: 'vuestic-iconset-dashboard',
       },
     },
-    {
-      name: 'statistics',
-      displayName: 'menu.statistics',
-      meta: {
-        icon: 'vuestic-iconset-statistics',
-      },
-      disabled: true,
-      children: [
-        {
-          name: 'charts',
-          displayName: 'menu.charts',
-        },
-        {
-          name: 'progress-bars',
-          displayName: 'menu.progressBars',
-        },
-      ],
-    },
-    {
-      name: 'forms',
-      displayName: 'menu.forms',
-      meta: {
-        icon: 'vuestic-iconset-forms',
-      },
-      disabled: true,
-      children: [
-        {
-          name: 'form-elements',
-          displayName: 'menu.formElements',
-        },
-        {
-          name: 'medium-editor',
-          displayName: 'menu.mediumEditor',
-        },
-      ],
-    },
-    {
-      name: 'tables',
-      displayName: 'menu.tables',
-      meta: {
-        icon: 'vuestic-iconset-tables',
-      },
-      children: [
-        {
-          name: 'markup',
-          displayName: 'menu.markupTables',
-        },
-        // {
-        //   name: 'data',
-        //   displayName: 'menu.dataTables',
-        // },
-      ],
-    },
-    {
-      name: 'ui',
-      displayName: 'menu.uiElements',
-      meta: {
-        icon: 'vuestic-iconset-ui-elements',
-      },
-      disabled: true,
-      children: [
-        {
-          name: 'buttons',
-          displayName: 'menu.buttons',
-        },
-        {
-          name: 'cards',
-          displayName: 'menu.cards',
-        },
-        {
-          name: 'chat',
-          displayName: 'menu.chat',
-        },
-        {
-          name: 'chips',
-          displayName: 'menu.chips',
-        },
-        {
-          name: 'collapses',
-          displayName: 'menu.collapses',
-        },
-        {
-          name: 'colors',
-          displayName: 'menu.colors',
-        },
-        // {
-        //   name: 'color-pickers',
-        //   displayName: 'menu.colorPickers',
-        // },
-        {
-          name: 'file-upload',
-          displayName: 'menu.fileUpload',
-        },
-        {
-          name: 'grid',
-          displayName: 'menu.grid',
-        },
-        {
-          name: 'icon-sets',
-          displayName: 'menu.icons',
-          children: [
-            {
-              displayName: 'concrete',
-              name: 'icon-set',
-            },
-          ],
-        },
-        {
-          name: 'lists',
-          displayName: 'menu.lists',
-        },
-        {
-          name: 'modals',
-          displayName: 'menu.modals',
-        },
-        {
-          name: 'notifications',
-          displayName: 'menu.notifications',
-        },
-        {
-          name: 'popovers',
-          displayName: 'menu.popovers',
-        },
-        {
-          name: 'rating',
-          displayName: 'menu.rating',
-        },
-        {
-          name: 'sliders',
-          displayName: 'menu.sliders',
-        },
-        {
-          name: 'spacing',
-          displayName: 'menu.spacing',
-        },
-        {
-          name: 'spinners',
-          displayName: 'menu.spinners',
-        },
-        {
-          name: 'tabs',
-          displayName: 'menu.tabs',
-        },
-        // {
-        //   name: "timelines",
-        //   displayName: "menu.timelines",
-        // },
-        {
-          name: 'tree-view',
-          displayName: 'menu.treeView',
-        },
-        {
-          name: 'typography',
-          displayName: 'menu.typography',
-        },
-      ],
-    },
-    {
-      name: 'maps',
-      displayName: 'menu.maps',
-      meta: {
-        icon: 'vuestic-iconset-maps',
-      },
-      disabled: true,
-      children: [
-        {
-          name: 'maplibre-maps',
-          displayName: 'menu.maplibre-maps',
-        },
-        {
-          name: 'yandex-maps',
-          displayName: 'menu.yandex-maps',
-        },
-        {
-          name: 'leaflet-maps',
-          displayName: 'menu.leaflet-maps',
-        },
-        {
-          name: 'bubble-maps',
-          displayName: 'menu.bubble-maps',
-        },
-        {
-          name: 'line-maps',
-          displayName: 'menu.line-maps',
-        },
-      ],
-    },
-    {
-      name: 'pages',
-      displayName: 'menu.pages',
-      meta: {
-        icon: 'vuestic-iconset-files',
-      },
-      disabled: true,
-      children: [
-        {
-          name: 'login',
-          displayName: 'menu.login-singup',
-        },
-        {
-          name: '404-pages',
-          displayName: 'menu.404-pages',
-        },
-        {
-          name: 'faq',
-          displayName: 'menu.faq',
-        },
-      ],
-    },
+    // {
+    //   name: 'statistics',
+    //   displayName: 'menu.statistics',
+    //   meta: {
+    //     icon: 'vuestic-iconset-statistics',
+    //   },
+    //   disabled: true,
+    //   children: [
+    //     {
+    //       name: 'charts',
+    //       displayName: 'menu.charts',
+    //     },
+    //     {
+    //       name: 'progress-bars',
+    //       displayName: 'menu.progressBars',
+    //     },
+    //   ],
+    // },
+    // {
+    //   name: 'forms',
+    //   displayName: 'menu.forms',
+    //   meta: {
+    //     icon: 'vuestic-iconset-forms',
+    //   },
+    //   disabled: true,
+    //   children: [
+    //     {
+    //       name: 'form-elements',
+    //       displayName: 'menu.formElements',
+    //     },
+    //     {
+    //       name: 'medium-editor',
+    //       displayName: 'menu.mediumEditor',
+    //     },
+    //   ],
+    // },
+    // {
+    //   name: 'tables',
+    //   displayName: 'menu.tables',
+    //   meta: {
+    //     icon: 'vuestic-iconset-tables',
+    //   },
+    //   children: [
+    //     {
+    //       name: 'markup',
+    //       displayName: 'menu.markupTables',
+    //     },
+    //     // {
+    //     //   name: 'data',
+    //     //   displayName: 'menu.dataTables',
+    //     // },
+    //   ],
+    // },
+    // {
+    //   name: 'ui',
+    //   displayName: 'menu.uiElements',
+    //   meta: {
+    //     icon: 'vuestic-iconset-ui-elements',
+    //   },
+    //   disabled: true,
+    //   children: [
+    //     {
+    //       name: 'buttons',
+    //       displayName: 'menu.buttons',
+    //     },
+    //     {
+    //       name: 'cards',
+    //       displayName: 'menu.cards',
+    //     },
+    //     {
+    //       name: 'chat',
+    //       displayName: 'menu.chat',
+    //     },
+    //     {
+    //       name: 'chips',
+    //       displayName: 'menu.chips',
+    //     },
+    //     {
+    //       name: 'collapses',
+    //       displayName: 'menu.collapses',
+    //     },
+    //     {
+    //       name: 'colors',
+    //       displayName: 'menu.colors',
+    //     },
+    //     // {
+    //     //   name: 'color-pickers',
+    //     //   displayName: 'menu.colorPickers',
+    //     // },
+    //     {
+    //       name: 'file-upload',
+    //       displayName: 'menu.fileUpload',
+    //     },
+    //     {
+    //       name: 'grid',
+    //       displayName: 'menu.grid',
+    //     },
+    //     {
+    //       name: 'icon-sets',
+    //       displayName: 'menu.icons',
+    //       children: [
+    //         {
+    //           displayName: 'concrete',
+    //           name: 'icon-set',
+    //         },
+    //       ],
+    //     },
+    //     {
+    //       name: 'lists',
+    //       displayName: 'menu.lists',
+    //     },
+    //     {
+    //       name: 'modals',
+    //       displayName: 'menu.modals',
+    //     },
+    //     {
+    //       name: 'notifications',
+    //       displayName: 'menu.notifications',
+    //     },
+    //     {
+    //       name: 'popovers',
+    //       displayName: 'menu.popovers',
+    //     },
+    //     {
+    //       name: 'rating',
+    //       displayName: 'menu.rating',
+    //     },
+    //     {
+    //       name: 'sliders',
+    //       displayName: 'menu.sliders',
+    //     },
+    //     {
+    //       name: 'spacing',
+    //       displayName: 'menu.spacing',
+    //     },
+    //     {
+    //       name: 'spinners',
+    //       displayName: 'menu.spinners',
+    //     },
+    //     {
+    //       name: 'tabs',
+    //       displayName: 'menu.tabs',
+    //     },
+    //     // {
+    //     //   name: "timelines",
+    //     //   displayName: "menu.timelines",
+    //     // },
+    //     {
+    //       name: 'tree-view',
+    //       displayName: 'menu.treeView',
+    //     },
+    //     {
+    //       name: 'typography',
+    //       displayName: 'menu.typography',
+    //     },
+    //   ],
+    // },
+    // {
+    //   name: 'maps',
+    //   displayName: 'menu.maps',
+    //   meta: {
+    //     icon: 'vuestic-iconset-maps',
+    //   },
+    //   disabled: true,
+    //   children: [
+    //     {
+    //       name: 'maplibre-maps',
+    //       displayName: 'menu.maplibre-maps',
+    //     },
+    //     {
+    //       name: 'yandex-maps',
+    //       displayName: 'menu.yandex-maps',
+    //     },
+    //     {
+    //       name: 'leaflet-maps',
+    //       displayName: 'menu.leaflet-maps',
+    //     },
+    //     {
+    //       name: 'bubble-maps',
+    //       displayName: 'menu.bubble-maps',
+    //     },
+    //     {
+    //       name: 'line-maps',
+    //       displayName: 'menu.line-maps',
+    //     },
+    //   ],
+    // },
+    // {
+    //   name: 'pages',
+    //   displayName: 'menu.pages',
+    //   meta: {
+    //     icon: 'vuestic-iconset-files',
+    //   },
+    //   disabled: true,
+    //   children: [
+    //     {
+    //       name: 'login',
+    //       displayName: 'menu.login-singup',
+    //     },
+    //     {
+    //       name: '404-pages',
+    //       displayName: 'menu.404-pages',
+    //     },
+    //     {
+    //       name: 'faq',
+    //       displayName: 'menu.faq',
+    //     },
+    //   ],
+    // },
   ] as INavigationRoute[],
 }

src/components/va-charts/VaChart.vue

@@ -1,46 +0,0 @@
-<template>
-  <component :is="chartComponent" ref="chart" class="va-chart" :chart-options="chartOptions" :chart-data="data" />
-</template>
-
-<script setup lang="ts">
-  import { computed, ref } from 'vue'
-  import type { TChartOptions } from 'vue-chartjs/dist/types'
-  import { defaultConfig, chartTypesMap } from './vaChartConfigs'
-  import { TChartData } from '../../data/types'
-
-  const props = defineProps<{
-    data: TChartData
-    options?: TChartOptions<'line' | 'bar' | 'bubble' | 'doughnut' | 'pie'>
-    type: keyof typeof chartTypesMap
-  }>()
-
-  const chart = ref()
-
-  const chartComponent = computed(() => chartTypesMap[props.type])
-
-  const chartOptions = computed(() => ({
-    ...defaultConfig,
-    ...props.options,
-  }))
-</script>
-
-<style lang="scss">
-  .va-chart {
-    width: 100%;
-    height: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    > * {
-      height: 100%;
-      width: 100%;
-    }
-
-    canvas {
-      width: 100%;
-      height: auto;
-      min-height: 320px;
-    }
-  }
-</style>

src/components/va-charts/chart-types/BarChart.vue

@@ -1,17 +0,0 @@
-<template>
-  <Bar :chart-options="chartOptions" :chart-data="props.chartData" />
-</template>
-
-<script setup lang="ts">
-  import { Bar } from 'vue-chartjs'
-  import type { TChartOptions } from 'vue-chartjs/dist/types'
-  import { Chart as ChartJS, Title, Tooltip, Legend, BarElement, LinearScale, CategoryScale } from 'chart.js'
-  import { TBarChartData } from '../../../data/types'
-
-  ChartJS.register(Title, Tooltip, Legend, BarElement, LinearScale, CategoryScale)
-
-  const props = defineProps<{
-    chartData: TBarChartData
-    chartOptions?: TChartOptions<'bar'>
-  }>()
-</script>

src/components/va-charts/chart-types/BubbleChart.vue

@@ -1,17 +0,0 @@
-<template>
-  <Bubble :chart-options="chartOptions" :chart-data="props.chartData" />
-</template>
-
-<script setup lang="ts">
-  import { Bubble } from 'vue-chartjs'
-  import type { TChartOptions } from 'vue-chartjs/dist/types'
-  import { Chart as ChartJS, Title, Tooltip, Legend, PointElement, LinearScale } from 'chart.js'
-  import { TBubbleChartData } from '../../../data/types'
-
-  ChartJS.register(Title, Tooltip, Legend, PointElement, LinearScale)
-
-  const props = defineProps<{
-    chartData: TBubbleChartData
-    chartOptions?: TChartOptions<'bubble'>
-  }>()
-</script>

src/components/va-charts/chart-types/DoughnutChart.vue

@@ -1,17 +0,0 @@
-<template>
-  <Doughnut :chart-options="chartOptions" :chart-data="props.chartData" />
-</template>
-
-<script setup lang="ts">
-  import { Doughnut } from 'vue-chartjs'
-  import type { TChartOptions } from 'vue-chartjs/dist/types'
-  import { Chart as ChartJS, Title, Tooltip, Legend, ArcElement, CategoryScale } from 'chart.js'
-  import { TDoughnutChartData } from '../../../data/types'
-
-  ChartJS.register(Title, Tooltip, Legend, ArcElement, CategoryScale)
-
-  const props = defineProps<{
-    chartData: TDoughnutChartData
-    chartOptions?: TChartOptions<'doughnut'>
-  }>()
-</script>

src/components/va-charts/chart-types/HorizontalBarChart.vue

@@ -1,26 +0,0 @@
-<template>
-  <Bar :chart-options="{ ...chartOptions, ...horizontalBarOptions }" :chart-data="props.chartData" />
-</template>
-
-<script setup lang="ts">
-  import { Bar } from 'vue-chartjs'
-  import type { TChartOptions } from 'vue-chartjs/dist/types'
-  import { Chart as ChartJS, Title, Tooltip, Legend, BarElement, LinearScale, CategoryScale } from 'chart.js'
-  import { TBarChartData } from '../../../data/types'
-
-  ChartJS.register(Title, Tooltip, Legend, BarElement, LinearScale, CategoryScale)
-
-  const horizontalBarOptions = {
-    indexAxis: 'y' as 'x' | 'y',
-    elements: {
-      bar: {
-        borderWidth: 1,
-      },
-    },
-  }
-
-  const props = defineProps<{
-    chartData: TBarChartData
-    chartOptions?: TChartOptions<'bar'>
-  }>()
-</script>

src/components/va-charts/chart-types/LineChart.vue

@@ -1,27 +0,0 @@
-<template>
-  <Line :chart-options="chartOptions" :chart-data="props.chartData" />
-</template>
-
-<script setup lang="ts">
-  import { Line } from 'vue-chartjs'
-  import type { TChartOptions } from 'vue-chartjs/dist/types'
-  import {
-    Chart as ChartJS,
-    Title,
-    Tooltip,
-    Legend,
-    LineElement,
-    LinearScale,
-    PointElement,
-    CategoryScale,
-    Filler,
-  } from 'chart.js'
-  import { TLineChartData } from '../../../data/types'
-
-  ChartJS.register(Title, Tooltip, Legend, LineElement, LinearScale, PointElement, CategoryScale, Filler)
-
-  const props = defineProps<{
-    chartData: TLineChartData
-    chartOptions?: TChartOptions<'line'>
-  }>()
-</script>

src/components/va-charts/chart-types/PieChart.vue

@@ -1,17 +0,0 @@
-<template>
-  <Pie :chart-options="chartOptions" :chart-data="props.chartData" />
-</template>
-
-<script setup lang="ts">
-  import { Pie } from 'vue-chartjs'
-  import type { TChartOptions } from 'vue-chartjs/dist/types'
-  import { Chart as ChartJS, Title, Tooltip, Legend, ArcElement, CategoryScale } from 'chart.js'
-  import { TPieChartData } from '../../../data/types'
-
-  ChartJS.register(Title, Tooltip, Legend, ArcElement, CategoryScale)
-
-  const props = defineProps<{
-    chartData: TPieChartData
-    chartOptions?: TChartOptions<'pie'>
-  }>()
-</script>

src/components/va-charts/vaChartConfigs.js

@@ -1,48 +0,0 @@
-import { defineAsyncComponent } from 'vue'
-
-export const defaultConfig = {
-  plugins: {
-    legend: {
-      position: 'bottom',
-      labels: {
-        font: {
-          color: '#34495e',
-          family: 'sans-serif',
-          size: 14,
-        },
-        usePointStyle: true,
-      },
-    },
-    tooltip: {
-      bodyFont: {
-        size: 14,
-        family: 'sans-serif',
-      },
-      boxPadding: 4,
-    },
-  },
-  datasets: {
-    line: {
-      fill: 'origin',
-      tension: 0.3,
-      borderColor: 'transparent',
-    },
-    bubble: {
-      borderColor: 'transparent',
-    },
-    bar: {
-      borderColor: 'transparent',
-    },
-  },
-  maintainAspectRatio: false,
-  animation: true,
-}
-
-export const chartTypesMap = {
-  pie: defineAsyncComponent(() => import('./chart-types/PieChart.vue')),
-  doughnut: defineAsyncComponent(() => import('./chart-types/DoughnutChart.vue')),
-  bubble: defineAsyncComponent(() => import('./chart-types/BubbleChart.vue')),
-  line: defineAsyncComponent(() => import('./chart-types/LineChart.vue')),
-  bar: defineAsyncComponent(() => import('./chart-types/BarChart.vue')),
-  'horizontal-bar': defineAsyncComponent(() => import('./chart-types/HorizontalBarChart.vue')),
-}

src/components/va-medium-editor/VaMediumEditor.vue

@@ -1,189 +0,0 @@
-<template>
-  <div ref="editorElement" class="va-medium-editor content">
-    <slot />
-  </div>
-</template>
-
-<script setup lang="ts">
-  import { ref, Ref, onMounted, onBeforeUnmount } from 'vue'
-  import MediumEditor from 'medium-editor'
-
-  const props = withDefaults(
-    defineProps<{
-      editorOptions?: {
-        buttonLabels: string
-        autoLink: boolean
-        toolbar: {
-          buttons: string[]
-        }
-      }
-    }>(),
-    {
-      editorOptions: () => ({
-        buttonLabels: 'fontawesome',
-        autoLink: true,
-        toolbar: {
-          buttons: ['bold', 'italic', 'underline', 'anchor', 'h1', 'h2', 'h3'],
-        },
-      }),
-    },
-  )
-
-  const emit = defineEmits<{
-    (e: 'initialized', editor: typeof MediumEditor): void
-  }>()
-
-  const editorElement: Ref<null | HTMLElement> = ref(null)
-  let editor: typeof MediumEditor | null = null
-
-  onMounted(() => {
-    if (!editorElement.value) {
-      return
-    }
-
-    editor = new MediumEditor(editorElement.value, props.editorOptions)
-    emit('initialized', editor)
-  })
-
-  onBeforeUnmount(() => {
-    if (editor) {
-      editor.destroy()
-    }
-  })
-</script>
-
-<style lang="scss">
-  @import 'medium-editor/src/sass/medium-editor';
-  @import 'variables';
-
-  $medium-editor-shadow: var(--va-box-shadow);
-  $medium-editor-background-color: var(--va-divider);
-  $medium-editor-text-color: var(--va-dark);
-  $medium-editor-active-background-color: var(--va-primary);
-  $medium-editor-active-text-color: var(--va-white);
-
-  .va-medium-editor {
-    margin-bottom: var(--va-medium-editor-margin-bottom);
-    min-width: var(--va-medium-editor-min-width);
-    max-width: var(--va-medium-editor-max-width);
-
-    &:focus {
-      outline: none;
-    }
-
-    &.content {
-      i {
-        font-style: italic;
-      }
-    }
-  }
-
-  // isn't a part of the .va-medium-editor, so can't be places inside it
-  .medium-editor-toolbar,
-  .medium-editor-toolbar-form,
-  .medium-editor-toolbar-actions,
-  .medium-editor-toolbar-anchor-preview {
-    box-shadow: $medium-editor-shadow;
-    background-color: $medium-editor-background-color;
-    border-radius: 1.5rem;
-    height: 44px;
-    line-height: 42px;
-  }
-
-  .medium-editor-toolbar-anchor-preview {
-    a {
-      padding: 0 2rem;
-      margin: 0;
-      line-height: 44px;
-    }
-  }
-
-  .medium-editor-toolbar {
-    box-shadow: $medium-editor-shadow;
-
-    .medium-editor-toolbar-actions {
-      overflow: hidden;
-      height: 44px;
-    }
-
-    .medium-editor-action {
-      margin: 0;
-      border: 0;
-      padding: 0.375rem 1rem;
-      height: 44px;
-      background-color: $medium-editor-background-color;
-      box-shadow: none;
-      border-radius: 0;
-
-      i {
-        color: $medium-editor-text-color;
-      }
-
-      &.medium-editor-button-active {
-        background-color: $medium-editor-active-background-color;
-        color: $medium-editor-active-text-color;
-        i {
-          color: $medium-editor-active-text-color;
-        }
-      }
-    }
-
-    & > .medium-editor-action:not(:last-child) {
-      border-top-right-radius: 0;
-      border-bottom-right-radius: 0;
-      border-right: 0;
-    }
-
-    & > .medium-editor-action + .medium-editor-action {
-      border-top-left-radius: 0;
-      border-bottom-left-radius: 0;
-      border-left: 0;
-    }
-  }
-
-  .medium-editor-toolbar-form {
-    color: $medium-editor-text-color;
-    overflow: hidden;
-
-    a {
-      color: $medium-editor-text-color;
-      transform: translateY(1px);
-    }
-
-    input {
-      margin-left: 4px !important;
-      transform: translateY(-2px);
-      border-radius: 13px;
-    }
-
-    .medium-editor-toolbar-close {
-      margin-right: 1rem;
-    }
-  }
-
-  .medium-toolbar-arrow-under::after {
-    border-color: $medium-editor-background-color transparent transparent transparent;
-    top: 100%;
-  }
-
-  .medium-toolbar-arrow-over::before {
-    border-color: transparent transparent var(--va-primary) transparent;
-  }
-
-  .medium-editor-toolbar-anchor-preview {
-    // @include va-button($btn-padding-y-nrm, $btn-padding-x-nrm, $btn-font-size-nrm, $btn-line-height-nrm, $btn-border-radius-nrm);
-
-    .medium-editor-toolbar-anchor-preview {
-      margin: 0;
-    }
-  }
-
-  .medium-editor-anchor-preview {
-    max-width: 50%;
-
-    a {
-      color: $medium-editor-text-color;
-      text-decoration: none;
-    }
-  }
-</style>

src/components/va-medium-editor/_variables.scss

@@ -1,9 +0,0 @@
-:root {
-  --va-medium-editor-margin-bottom: 2.25rem;
-  --va-medium-editor-min-width: 6rem;
-  --va-medium-editor-max-width: 600px;
-
-  /* Toolbar */
-  --va-medium-editor-toolbar-max-width: 90%;
-  --va-medium-editor-toolbar-box-shadow: none;
-}

src/composables/utils/useMqtt.ts

@@ -0,0 +1,37 @@
+import MQTT from '@/utils/mqtt'
+import type { OnMessageCallback } from 'mqtt'
+import { onUnmounted, ref } from 'vue'
+
+export default function useMqtt() {
+  const PublicMqtt = ref<MQTT | null>(null)
+
+  const startMqtt = (val: string, callback: OnMessageCallback) => {
+    // set mqtt topic
+    PublicMqtt.value = new MQTT(val)
+    // init mqtt
+    PublicMqtt.value.init()
+    // link mqtt
+    PublicMqtt.value.link()
+    getMessage(callback)
+  }
+
+  const publish = (topic: string, message: string) => {
+    PublicMqtt.value?.publish(topic, message)
+  }
+
+  const getMessage = (callback: OnMessageCallback) => {
+    // PublicMqtt.value?.client.on('message', callback);
+    PublicMqtt.value?.get(callback)
+  }
+  onUnmounted(() => {
+    if (PublicMqtt.value) {
+      PublicMqtt.value.unsubscribes()
+      PublicMqtt.value.over()
+    }
+  })
+
+  return {
+    startMqtt,
+    publish,
+  }
+}

src/data/CountriesList.ts

@@ -1,243 +0,0 @@
-export default [
-  'Afghanistan',
-  'Albania',
-  'Algeria',
-  'American Samoa',
-  'Andorra',
-  'Angola',
-  'Anguilla',
-  'Antarctica',
-  'Antigua and Barbuda',
-  'Argentina',
-  'Armenia',
-  'Aruba',
-  'Australia',
-  'Austria',
-  'Azerbaijan',
-  'Bahamas',
-  'Bahrain',
-  'Bangladesh',
-  'Barbados',
-  'Belarus',
-  'Belgium',
-  'Belize',
-  'Benin',
-  'Bermuda',
-  'Bhutan',
-  'Bolivia',
-  'Bosnia and Herzegowina',
-  'Botswana',
-  'Bouvet Island',
-  'Brazil',
-  'British Indian Ocean Territory',
-  'Brunei Darussalam',
-  'Bulgaria',
-  'Burkina Faso',
-  'Burundi',
-  'Cambodia',
-  'Cameroon',
-  'Canada',
-  'Cape Verde',
-  'Cayman Islands',
-  'Central African Republic',
-  'Chad',
-  'Chile',
-  'China',
-  'Christmas Island',
-  'Cocos (Keeling) Islands',
-  'Colombia',
-  'Comoros',
-  'Congo',
-  'Congo, the Democratic Republic of the',
-  'Cook Islands',
-  'Costa Rica',
-  "Cote d'Ivoire",
-  'Croatia (Hrvatska)',
-  'Cuba',
-  'Cyprus',
-  'Czech Republic',
-  'Denmark',
-  'Djibouti',
-  'Dominica',
-  'Dominican Republic',
-  'East Timor',
-  'Ecuador',
-  'Egypt',
-  'El Salvador',
-  'Equatorial Guinea',
-  'Eritrea',
-  'Estonia',
-  'Ethiopia',
-  'Falkland Islands (Malvinas)',
-  'Faroe Islands',
-  'Fiji',
-  'Finland',
-  'France',
-  'France Metropolitan',
-  'French Guiana',
-  'French Polynesia',
-  'French Southern Territories',
-  'Gabon',
-  'Gambia',
-  'Georgia',
-  'Germany',
-  'Ghana',
-  'Gibraltar',
-  'Greece',
-  'Greenland',
-  'Grenada',
-  'Guadeloupe',
-  'Guam',
-  'Guatemala',
-  'Guinea',
-  'Guinea-Bissau',
-  'Guyana',
-  'Haiti',
-  'Heard and Mc Donald Islands',
-  'Holy See (Vatican City State)',
-  'Honduras',
-  'Hong Kong',
-  'Hungary',
-  'Iceland',
-  'India',
-  'Indonesia',
-  'Iran (Islamic Republic of)',
-  'Iraq',
-  'Ireland',
-  'Israel',
-  'Italy',
-  'Jamaica',
-  'Japan',
-  'Jordan',
-  'Kazakhstan',
-  'Kenya',
-  'Kiribati',
-  "Korea, Democratic People's Republic of",
-  'Korea, Republic of',
-  'Kuwait',
-  'Kyrgyzstan',
-  "Lao, People's Democratic Republic",
-  'Latvia',
-  'Lebanon',
-  'Lesotho',
-  'Liberia',
-  'Libyan Arab Jamahiriya',
-  'Liechtenstein',
-  'Lithuania',
-  'Luxembourg',
-  'Macau',
-  'Macedonia, The Former Yugoslav Republic of',
-  'Madagascar',
-  'Malawi',
-  'Malaysia',
-  'Maldives',
-  'Mali',
-  'Malta',
-  'Marshall Islands',
-  'Martinique',
-  'Mauritania',
-  'Mauritius',
-  'Mayotte',
-  'Mexico',
-  'Micronesia, Federated States of',
-  'Moldova, Republic of',
-  'Monaco',
-  'Mongolia',
-  'Montserrat',
-  'Morocco',
-  'Mozambique',
-  'Myanmar',
-  'Namibia',
-  'Nauru',
-  'Nepal',
-  'Netherlands',
-  'Netherlands Antilles',
-  'New Caledonia',
-  'New Zealand',
-  'Nicaragua',
-  'Niger',
-  'Nigeria',
-  'Niue',
-  'Norfolk Island',
-  'Northern Mariana Islands',
-  'Norway',
-  'Oman',
-  'Pakistan',
-  'Palau',
-  'Panama',
-  'Papua New Guinea',
-  'Paraguay',
-  'Peru',
-  'Philippines',
-  'Pitcairn',
-  'Poland',
-  'Portugal',
-  'Puerto Rico',
-  'Qatar',
-  'Reunion',
-  'Romania',
-  'Russian Federation',
-  'Rwanda',
-  'Saint Kitts and Nevis',
-  'Saint Lucia',
-  'Saint Vincent and the Grenadines',
-  'Samoa',
-  'San Marino',
-  'Sao Tome and Principe',
-  'Saudi Arabia',
-  'Senegal',
-  'Serbia',
-  'Seychelles',
-  'Sierra Leone',
-  'Singapore',
-  'Slovakia (Slovak Republic)',
-  'Slovenia',
-  'Solomon Islands',
-  'Somalia',
-  'South Africa',
-  'South Georgia and the South Sandwich Islands',
-  'Spain',
-  'Sri Lanka',
-  'St. Helena',
-  'St. Pierre and Miquelon',
-  'Sudan',
-  'Suriname',
-  'Svalbard and Jan Mayen Islands',
-  'Swaziland',
-  'Sweden',
-  'Switzerland',
-  'Syrian Arab Republic',
-  'Taiwan, Province of China',
-  'Tajikistan',
-  'Tanzania, United Republic of',
-  'United States of America',
-  'Thailand',
-  'Togo',
-  'Tokelau',
-  'Tonga',
-  'Trinidad and Tobago',
-  'Tunisia',
-  'Turkey',
-  'Turkmenistan',
-  'Turks and Caicos Islands',
-  'Tuvalu',
-  'Uganda',
-  'Ukraine',
-  'United Arab Emirates',
-  'United Kingdom',
-  'United States',
-  'United States Minor Outlying Islands',
-  'Uruguay',
-  'Uzbekistan',
-  'Vanuatu',
-  'Venezuela',
-  'Vietnam',
-  'Virgin Islands (British)',
-  'Virgin Islands (U.S.)',
-  'Wallis and Futuna Islands',
-  'Western Sahara',
-  'Yemen',
-  'Yugoslavia',
-  'Zambia',
-  'Zimbabwe',
-]

src/data/axios/index.ts

@@ -0,0 +1,13 @@
+import axios, { Axios } from 'axios'
+
+export const setBaseURL = function (baseURL: string) {
+  if (baseURL) {
+    axios.defaults.baseURL = `http://${baseURL}:3000`
+  }
+}
+
+setBaseURL(location.href.split('/')[2].split(':')[0])
+
+export const getAxios = function (): Axios {
+  return axios
+}

src/data/charts/barChartData.ts

@@ -1,30 +0,0 @@
-import { TBarChartData } from '../types'
-
-export const barChartData: TBarChartData = {
-  labels: [
-    'January',
-    'February',
-    'March',
-    'April',
-    'May',
-    'June',
-    'July',
-    'August',
-    'September',
-    'October',
-    'November',
-    'December',
-  ],
-  datasets: [
-    {
-      label: 'Last year',
-      backgroundColor: 'primary',
-      data: [50, 20, 12, 39, 10, 40, 39, 80, 40, 20, 12, 11],
-    },
-    {
-      label: 'Current year',
-      backgroundColor: 'info',
-      data: [50, 10, 22, 39, 15, 20, 85, 32, 60, 50, 20, 30],
-    },
-  ],
-}

src/data/charts/bubbleChartData.ts

@@ -1,231 +0,0 @@
-import { TBubbleChartData } from '../types'
-
-export const bubbleChartData: TBubbleChartData = {
-  datasets: [
-    {
-      label: 'USA',
-      backgroundColor: 'danger',
-      data: [
-        {
-          x: 23,
-          y: 25,
-          r: 15,
-        },
-        {
-          x: 40,
-          y: 10,
-          r: 10,
-        },
-        {
-          x: 30,
-          y: 22,
-          r: 30,
-        },
-        {
-          x: 7,
-          y: 43,
-          r: 40,
-        },
-        {
-          x: 23,
-          y: 27,
-          r: 12,
-        },
-        {
-          x: 20,
-          y: 15,
-          r: 11,
-        },
-        {
-          x: 7,
-          y: 10,
-          r: 35,
-        },
-        {
-          x: 10,
-          y: 20,
-          r: 40,
-        },
-      ],
-    },
-    {
-      label: 'Russia',
-      backgroundColor: 'primary',
-      data: [
-        {
-          x: 0,
-          y: 30,
-          r: 15,
-        },
-        {
-          x: 20,
-          y: 20,
-          r: 20,
-        },
-        {
-          x: 15,
-          y: 15,
-          r: 50,
-        },
-        {
-          x: 31,
-          y: 46,
-          r: 30,
-        },
-        {
-          x: 20,
-          y: 14,
-          r: 25,
-        },
-        {
-          x: 34,
-          y: 17,
-          r: 30,
-        },
-        {
-          x: 44,
-          y: 44,
-          r: 10,
-        },
-        {
-          x: 39,
-          y: 25,
-          r: 35,
-        },
-      ],
-    },
-    {
-      label: 'Canada',
-      backgroundColor: 'warning',
-      data: [
-        {
-          x: 10,
-          y: 30,
-          r: 45,
-        },
-        {
-          x: 10,
-          y: 50,
-          r: 20,
-        },
-        {
-          x: 5,
-          y: 5,
-          r: 30,
-        },
-        {
-          x: 40,
-          y: 30,
-          r: 20,
-        },
-        {
-          x: 33,
-          y: 15,
-          r: 18,
-        },
-        {
-          x: 40,
-          y: 20,
-          r: 40,
-        },
-        {
-          x: 33,
-          y: 33,
-          r: 40,
-        },
-      ],
-    },
-    {
-      label: 'Belarus',
-      backgroundColor: 'info',
-      data: [
-        {
-          x: 35,
-          y: 30,
-          r: 45,
-        },
-        {
-          x: 25,
-          y: 40,
-          r: 35,
-        },
-        {
-          x: 5,
-          y: 5,
-          r: 30,
-        },
-        {
-          x: 5,
-          y: 20,
-          r: 40,
-        },
-        {
-          x: 10,
-          y: 40,
-          r: 15,
-        },
-        {
-          x: 3,
-          y: 10,
-          r: 10,
-        },
-        {
-          x: 15,
-          y: 40,
-          r: 40,
-        },
-        {
-          x: 7,
-          y: 15,
-          r: 10,
-        },
-      ],
-    },
-    {
-      label: 'Ukraine',
-      backgroundColor: 'success',
-      data: [
-        {
-          x: 25,
-          y: 10,
-          r: 40,
-        },
-        {
-          x: 17,
-          y: 40,
-          r: 40,
-        },
-        {
-          x: 35,
-          y: 10,
-          r: 20,
-        },
-        {
-          x: 3,
-          y: 40,
-          r: 10,
-        },
-        {
-          x: 40,
-          y: 40,
-          r: 40,
-        },
-        {
-          x: 20,
-          y: 10,
-          r: 10,
-        },
-        {
-          x: 10,
-          y: 27,
-          r: 35,
-        },
-        {
-          x: 7,
-          y: 26,
-          r: 40,
-        },
-      ],
-    },
-  ],
-}

src/data/charts/composables/useChartColors.ts

@@ -1,35 +0,0 @@
-import { computed, ref } from '@vue/reactivity'
-import { watch } from 'vue'
-import { useColors, useGlobalConfig } from 'vuestic-ui'
-
-type chartColors = string | string[]
-
-export function useChartColors(chartColors = [] as chartColors, alfa = 0.6) {
-  const { getGlobalConfig } = useGlobalConfig()
-  const { setHSLAColor, getColor } = useColors()
-
-  const generateHSLAColors = (colors: chartColors) =>
-    typeof colors === 'string'
-      ? setHSLAColor(getColor(colors), { a: alfa })
-      : colors.map((color) => setHSLAColor(getColor(color), { a: alfa }))
-
-  const generateColors = (colors: chartColors) =>
-    typeof colors === 'string' ? getColor(colors) : colors.map((color) => getColor(color))
-
-  const generatedHSLAColors = ref(generateHSLAColors(chartColors))
-  const generatedColors = ref(generateColors(chartColors))
-
-  const theme = computed(() => getGlobalConfig().colors!)
-
-  watch(theme, () => {
-    generatedHSLAColors.value = generateHSLAColors(chartColors)
-    generatedColors.value = generateColors(chartColors)
-  })
-
-  return {
-    generateHSLAColors,
-    generateColors,
-    generatedColors,
-    generatedHSLAColors,
-  }
-}

src/data/charts/composables/useChartData.ts

@@ -1,20 +0,0 @@
-import { computed, ComputedRef } from '@vue/reactivity'
-import { useChartColors } from './useChartColors'
-import { TChartData } from '../../types'
-
-export function useChartData<T extends TChartData>(data: T, alfa?: number): ComputedRef<T> {
-  const datasetsColors = data.datasets.map((dataset) => dataset.backgroundColor as string)
-
-  const datasetsThemesColors = datasetsColors.map(
-    (colors) => useChartColors(colors, alfa)[alfa ? 'generatedHSLAColors' : 'generatedColors'],
-  )
-
-  return computed(() => {
-    const datasets = data.datasets.map((dataset, idx) => ({
-      ...dataset,
-      backgroundColor: datasetsThemesColors[idx].value,
-    }))
-
-    return { ...data, datasets } as T
-  })
-}

src/data/charts/doughnutChartData.ts

@@ -1,12 +0,0 @@
-import { TDoughnutChartData } from '../types'
-
-export const doughnutChartData: TDoughnutChartData = {
-  labels: ['North America', 'South America', 'Australia'],
-  datasets: [
-    {
-      label: 'Population (millions)',
-      backgroundColor: ['danger', 'info', 'primary'],
-      data: [2478, 5267, 734],
-    },
-  ],
-}

src/data/charts/horizontalBarChartData.ts

@@ -1,30 +0,0 @@
-import { TBarChartData } from '../types'
-
-export const horizontalBarChartData: TBarChartData = {
-  labels: [
-    'January',
-    'February',
-    'March',
-    'April',
-    'May',
-    'June',
-    'July',
-    'August',
-    'September',
-    'October',
-    'November',
-    'December',
-  ],
-  datasets: [
-    {
-      label: 'Vuestic Satisfaction Score',
-      backgroundColor: 'primary',
-      data: [80, 90, 50, 70, 60, 90, 50, 90, 80, 40, 72, 93],
-    },
-    {
-      label: 'Bulma Satisfaction Score',
-      backgroundColor: 'danger',
-      data: [20, 30, 20, 40, 50, 40, 15, 60, 30, 20, 42, 53],
-    },
-  ],
-}

src/data/charts/index.ts

@@ -1,6 +0,0 @@
-export { bubbleChartData } from './bubbleChartData'
-export { doughnutChartData } from './doughnutChartData'
-export { barChartData } from './barChartData'
-export { horizontalBarChartData } from './horizontalBarChartData'
-export { lineChartData } from './lineChartData'
-export { pieChartData } from './pieChartData'

src/data/charts/lineChartData.ts

@@ -1,44 +0,0 @@
-import { TLineChartData } from '../types'
-
-const months = [
-  'January',
-  'February',
-  'March',
-  'April',
-  'May',
-  'June',
-  'July',
-  'August',
-  'September',
-  'October',
-  'November',
-  'December',
-]
-
-const getSize = (minSize = 5) => Math.max(minSize, new Date().getMonth())
-const size = getSize()
-
-const generateValue = () => Math.floor(Math.random() * 100)
-const generateArray = (length: number) => Array.from(Array(length), generateValue)
-
-const generateYLabels = () => {
-  const flip = !!Math.floor(Math.random() * 2)
-  return flip ? ['Debit', 'Credit'] : ['Credit', 'Debit']
-}
-const yLabels = generateYLabels()
-
-export const lineChartData: TLineChartData = {
-  labels: months.slice(0, size),
-  datasets: [
-    {
-      label: yLabels[0],
-      backgroundColor: 'primary',
-      data: generateArray(size),
-    },
-    {
-      label: yLabels[1],
-      backgroundColor: 'secondary',
-      data: generateArray(size),
-    },
-  ],
-}

src/data/charts/pieChartData.ts

@@ -1,12 +0,0 @@
-import { TLineChartData } from '../types'
-
-export const pieChartData: TLineChartData = {
-  labels: ['Africa', 'Asia', 'Europe'],
-  datasets: [
-    {
-      label: 'Population (millions)',
-      backgroundColor: ['primary', 'warning', 'danger'],
-      data: [2478, 5267, 734],
-    },
-  ],
-}

src/data/config-table/Common/Idle.js

@@ -0,0 +1,20 @@
+export default {
+  name: 'Idle',
+  parameter: [], // 這個mode用到的參數
+  showParameter: [], // 有要秀給user看的參數
+  headerParameter: () => [], // export header的參數
+  valScales: {
+    linear: {
+      func: (val) => {
+        return val
+      },
+    },
+    log: {
+      func: (val) => {
+        return Math.log10(Math.abs(val))
+      },
+    },
+  },
+  channels: {},
+  charts: {},
+}

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

@@ -0,0 +1,94 @@
+export default {
+  name: 'Cali Mode - test',
+  parameter: ['ADC_DAC_CHANNEL_15', 'ADC_LEVEL_I_15', 'ADC_LEVEL_V_IN_15', 'DAC_LEVEL_V_OUT_15', 'DAC_VOLT_BUTTON'], // 這個mode用到的參數
+  showParameter: ['ADC_DAC_CHANNEL_15', 'ADC_LEVEL_I_15', 'ADC_LEVEL_V_IN_15', 'DAC_LEVEL_V_OUT_15', 'DAC_VOLT_BUTTON'], // 有要秀給user看的參數
+  headerParameter: () => [
+    'ADC_DAC_CHANNEL_15',
+    'ADC_LEVEL_I_15',
+    'ADC_LEVEL_V_IN_15',
+    'DAC_LEVEL_V_OUT_15',
+    'DAC_VOLT_BUTTON',
+  ], // export header的參數
+  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,
+        m: 60 * 1e6,
+        h: 60 * 60 * 1e6,
+        auto: 1,
+      },
+      defaultUnit: 'us',
+    },
+    0: {
+      name: 'I_in',
+      unit: {
+        nA: 1,
+      },
+      defaultUnit: 'nA',
+    },
+    1: {
+      name: 'V_in/V_out',
+      unit: {
+        uV: 1,
+      },
+      defaultUnit: 'uV',
+    },
+    2: {
+      name: 'Gain',
+      unit: {
+        default: 1,
+      },
+      defaultUnit: 'default',
+    },
+  },
+  charts: {
+    default: [
+      {
+        name: 'Cali Mode - test',
+        description: '',
+        subplot: [
+          {
+            x1: {
+              type: 'time',
+              valScale: 'linear',
+              min: 'dataMin',
+              max: 'dataMax',
+            },
+            y1: {
+              type: 'value',
+              valScale: 'linear',
+              min: 'dataMin',
+              max: 'dataMax',
+            },
+            data: [
+              {
+                legend: 'ADC',
+                x1: {
+                  channel: 'time',
+                },
+                y1: {
+                  channel: 0,
+                },
+              },
+            ],
+          },
+        ],
+      },
+    ],
+  },
+}

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

@@ -0,0 +1,87 @@
+export default {
+  name: 'Cali DAC - test',
+  parameter: ['CTRL_HIGH_Z_15', 'DAC_VOLT'], // 這個mode用到的參數
+  showParameter: ['CTRL_HIGH_Z_15', 'DAC_VOLT'], // 有要秀給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,
+        m: 60 * 1e6,
+        h: 60 * 60 * 1e6,
+        auto: 1,
+      },
+      defaultUnit: 'us',
+    },
+    0: {
+      name: 'I_in',
+      unit: {
+        nA: 1,
+      },
+      defaultUnit: 'nA',
+    },
+    1: {
+      name: 'V_in/V_out',
+      unit: {
+        uV: 1,
+      },
+      defaultUnit: 'uV',
+    },
+    2: {
+      name: 'Gain',
+      unit: {
+        default: 1,
+      },
+      defaultUnit: 'default',
+    },
+  },
+  charts: {
+    default: [
+      {
+        name: 'Cali DAC - test',
+        description: '',
+        subplot: [
+          {
+            x1: {
+              type: 'time',
+              valScale: 'linear',
+              min: 'dataMin',
+              max: 'dataMax',
+            },
+            y1: {
+              type: 'value',
+              valScale: 'linear',
+              min: 'dataMin',
+              max: 'dataMax',
+            },
+            data: [
+              {
+                legend: 'DAC',
+                x1: {
+                  channel: 'time',
+                },
+                y1: {
+                  channel: 0,
+                },
+              },
+            ],
+          },
+        ],
+      },
+    ],
+  },
+}

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

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

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

@@ -0,0 +1,167 @@
+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',
+    '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) => {
+        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',
+    },
+    3: {
+      name: 'sum_cnt',
+      unit: {
+        uV: 1,
+        mV: 1e3,
+        V: 1e6,
+      },
+      defaultUnit: 'mV',
+      downloadUnit: 'uV',
+    },
+    4: {
+      name: 'sum_adc_delta_Iin',
+      unit: {
+        uV: 1,
+        mV: 1e3,
+        V: 1e6,
+      },
+      defaultUnit: 'mV',
+      downloadUnit: 'uV',
+    },
+    5: {
+      name: 'sum_adc_delta_Voutin',
+      unit: {
+        uV: 1,
+        mV: 1e3,
+        V: 1e6,
+      },
+      defaultUnit: 'mV',
+      downloadUnit: 'uV',
+    },
+    6: {
+      name: 'resis',
+      unit: {
+        uV: 1,
+        mV: 1e3,
+        V: 1e6,
+      },
+      defaultUnit: 'mV',
+      downloadUnit: 'uV',
+    },
+  },
+  charts: {
+    default: [
+      {
+        name: 'Chronopotentiometry',
+        description: '',
+        subplot: [
+          {
+            x1: {
+              type: 'time',
+              valScale: 'linear',
+              min: 'dataMin',
+              max: 'dataMax',
+            },
+            y1: {
+              type: 'value',
+              valScale: 'linear',
+              min: 'dataMin',
+              max: 'dataMax',
+            },
+            data: [
+              {
+                legend: 'CP',
+                x1: {
+                  channel: 'time',
+                },
+                y1: {
+                  channel: 1,
+                },
+              },
+            ],
+          },
+        ],
+      },
+    ],
+  },
+}

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

@@ -0,0 +1,127 @@
+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',
+    '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) => {
+        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: 'V_in',
+      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: 'Constant Current',
+        description: '',
+        subplot: [
+          {
+            x1: {
+              type: 'time',
+              valScale: 'linear',
+              min: 'dataMin',
+              max: 'dataMax',
+            },
+            y1: {
+              type: 'value',
+              valScale: 'linear',
+              min: 'dataMin',
+              max: 'dataMax',
+            },
+            data: [
+              {
+                legend: 'CC',
+                x1: {
+                  channel: 'time',
+                },
+                y1: {
+                  channel: 1,
+                },
+              },
+            ],
+          },
+        ],
+      },
+    ],
+  },
+}

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

@@ -0,0 +1,134 @@
+export default {
+  name: 'Cycle I-V',
+  parameter: [
+    'VOLT_ORIGIN',
+    'VOLT_FINAL',
+    'VOLT_STEP',
+    'STEP_TIME',
+    'SAMPLE_RATE',
+    'CYCLE_NUMBER',
+    'ADC_LEVEL_I_15',
+    'ADC_LEVEL_V_IN_15',
+    'CTRL_HIGH_Z_15',
+  ], // 這個mode用到的參數
+  showParameter: [
+    'ADC_LEVEL_I_15',
+    'ADC_LEVEL_V_IN_15',
+    'CTRL_HIGH_Z_15',
+    'VOLT_ORIGIN',
+    'VOLT_FINAL',
+    'VOLT_STEP',
+    'STEP_TIME',
+    'SAMPLE_RATE',
+    'CYCLE_NUMBER',
+  ], // 有要秀給user看的參數
+  headerParameter: () => [
+    'VOLT_ORIGIN',
+    'VOLT_FINAL',
+    'VOLT_STEP',
+    'STEP_TIME',
+    'SAMPLE_RATE',
+    'CYCLE_NUMBER',
+    'ADC_LEVEL_I_15',
+    'ADC_LEVEL_V_IN_15',
+  ], // export header的參數
+  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: 'V_out',
+      unit: {
+        uV: 1,
+        mV: 1e3,
+        V: 1e6,
+      },
+      defaultUnit: 'mV',
+      downloadUnit: 'mV',
+    },
+    2: {
+      name: 'V_in',
+      unit: {
+        uV: 1,
+        mV: 1e3,
+        V: 1e6,
+      },
+      defaultUnit: 'mV',
+      downloadUnit: 'mV',
+    },
+    3: {
+      name: 'Cycle number',
+      unit: {
+        cycle: 1,
+      },
+      defaultUnit: 'cycle',
+      downloadUnit: null,
+    },
+  },
+  charts: {
+    default: [
+      {
+        name: 'Cycle I-V',
+        description: '',
+        subplot: [
+          {
+            x1: {
+              type: 'value',
+              valScale: 'linear',
+              min: 'dataMin',
+              max: 'dataMax',
+            },
+            y1: {
+              type: 'value',
+              valScale: 'linear',
+              min: 'dataMin',
+              max: 'dataMax',
+            },
+            data: [
+              {
+                legend: 'CycleIV',
+                x1: {
+                  channel: 1,
+                },
+                y1: {
+                  channel: 0,
+                },
+              },
+            ],
+          },
+        ],
+      },
+    ],
+  },
+}

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

@@ -0,0 +1,134 @@
+export default {
+  name: 'Cyclic Voltammetry',
+  parameter: [
+    'VOLT_INITIAL',
+    'VOLT_MAX',
+    'VOLT_MIN',
+    'Scan_Rate',
+    'SAMPLE_RATE',
+    'CYCLE_NUMBER',
+    'ADC_LEVEL_I_15',
+    'ADC_LEVEL_V_IN_15',
+    'CTRL_HIGH_Z_15',
+  ], // 這個mode用到的參數
+  showParameter: [
+    'ADC_LEVEL_I_15',
+    'ADC_LEVEL_V_IN_15',
+    'CTRL_HIGH_Z_15',
+    'VOLT_INITIAL',
+    'VOLT_MAX',
+    'VOLT_MIN',
+    'Scan_Rate',
+    'SAMPLE_RATE',
+    'CYCLE_NUMBER',
+  ], // 有要秀給user看的參數
+  headerParameter: () => [
+    'VOLT_INITIAL',
+    'VOLT_MAX',
+    'VOLT_MIN',
+    'Scan_Rate',
+    'SAMPLE_RATE',
+    'CYCLE_NUMBER',
+    'ADC_LEVEL_I_15',
+    'ADC_LEVEL_V_IN_15',
+  ], // 有要秀給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,
+        m: 60 * 1e6,
+        h: 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',
+    },
+    3: {
+      name: 'Cycle number',
+      unit: {
+        cycle: 1,
+      },
+      defaultUnit: 'cycle',
+      downloadUnit: null,
+    },
+  },
+  charts: {
+    default: [
+      {
+        name: 'Cyclic Voltammetry',
+        description: '',
+        subplot: [
+          {
+            x1: {
+              type: 'value',
+              valScale: 'linear',
+              min: 'dataMin',
+              max: 'dataMax',
+            },
+            y1: {
+              type: 'value',
+              valScale: 'linear',
+              min: 'dataMin',
+              max: 'dataMax',
+            },
+            data: [
+              {
+                legend: 'CV',
+                x1: {
+                  channel: 1,
+                },
+                y1: {
+                  channel: 0,
+                },
+              },
+            ],
+          },
+        ],
+      },
+    ],
+  },
+}

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

@@ -0,0 +1,135 @@
+export default {
+  name: 'Differential Pulse Voltammetry',
+  parameter: ['DPV_e_init', 'DPV_e_final', 'DPV_increment', 'DPV_amp', 'DPV_pul_width', 'DPV_step_time'], // 這個mode用到的參數
+  parameterInMode: {
+    0: ['DPV_e_init', 'DPV_e_final', 'DPV_increment', 'DPV_amp', 'DPV_pul_width', 'DPV_step_time'],
+    1: [
+      'DPV_e_init',
+      'DPV_e_1',
+      'DPV_e_2',
+      'DPV_e_final',
+      'DPV_increment',
+      'DPV_amp',
+      'DPV_pul_width',
+      'DPV_step_time',
+      'CYCLE_NUMBER',
+      'DPV_pulse_option',
+      'DPV_curr_rec',
+    ],
+    2: [
+      'DPV_e_init',
+      'DPV_e_final',
+      'DPV_increment',
+      'DPV_amp',
+      'DPV_pul_width',
+      'DPV_step_time',
+      'CYCLE_NUMBER',
+      'DPV_notify_rate',
+      'DPV_engineering_enable',
+      'DPV_e_1',
+      'DPV_e_2',
+      'DPV_pulse_option',
+    ],
+  }, // 這個mode用到的參數
+  showParameter: [], // 有要秀給user看的參數
+  headerParameter: () => [], // export header的參數
+  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',
+    },
+    3: {
+      name: 'Cycle number',
+      unit: {
+        cycle: 1,
+      },
+      defaultUnit: 'cycle',
+      downloadUnit: null,
+    },
+  },
+  charts: {
+    default: [
+      {
+        name: 'Open Circuit Potential',
+        description: '',
+        subplot: [
+          {
+            x1: {
+              type: 'time',
+              valScale: 'linear',
+              min: 'dataMin',
+              max: 'dataMax',
+            },
+            y1: {
+              type: 'value',
+              valScale: 'linear',
+              min: 'dataMin',
+              max: 'dataMax',
+            },
+            data: [
+              {
+                legend: 'OCP',
+                x1: {
+                  channel: 'time',
+                },
+                y1: {
+                  channel: 1,
+                },
+              },
+            ],
+          },
+        ],
+      },
+    ],
+  },
+}

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

@@ -0,0 +1,93 @@
+export default {
+  name: 'Dev Mode',
+  parameter: ['ADC_VALUE_I'],
+  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,
+        m: 60 * 1e6,
+        h: 60 * 60 * 1e6,
+        auto: 1,
+      },
+      defaultUnit: 'auto',
+    },
+    0: {
+      name: '0',
+      unit: {
+        default: 1,
+      },
+      defaultUnit: 'default',
+    },
+    1: {
+      name: '1',
+      unit: {
+        default: 1,
+      },
+      defaultUnit: 'default',
+    },
+    2: {
+      name: '2',
+      unit: {
+        default: 1,
+      },
+      defaultUnit: 'default',
+    },
+    3: {
+      name: '3',
+      unit: {
+        default: 1,
+      },
+      defaultUnit: 'default',
+    },
+  },
+  charts: {
+    default: [
+      {
+        name: 'Dev Mode',
+        description: '',
+        subplot: [
+          {
+            x1: {
+              type: 'time',
+              valScale: 'linear',
+              min: 'dataMin',
+              max: 'dataMax',
+            },
+            y1: {
+              type: 'value',
+              valScale: 'linear',
+              min: 'dataMin',
+              max: 'dataMax',
+            },
+            data: [
+              {
+                legend: 'dev',
+                x1: {
+                  channel: 'time',
+                },
+                y1: {
+                  channel: 1,
+                },
+              },
+            ],
+          },
+        ],
+      },
+    ],
+  },
+}

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

@@ -0,0 +1,97 @@
+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', '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) => {
+        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: 'V_out',
+      unit: {
+        uV: 1,
+        mV: 1e3,
+        V: 1e6,
+      },
+      defaultUnit: 'mV',
+      downloadUnit: 'mV',
+    },
+    2: {
+      name: 'V_in',
+      unit: {
+        uV: 1,
+        mV: 1e3,
+        V: 1e6,
+      },
+      defaultUnit: 'mV',
+      downloadUnit: 'mV',
+    },
+  },
+  charts: {
+    default: [
+      {
+        name: 'Function Generator',
+        description: '',
+        subplot: [
+          {
+            x1: {
+              type: 'time',
+              valScale: 'linear',
+              min: 'dataMin',
+              max: 'dataMax',
+            },
+            y1: {
+              type: 'value',
+              valScale: 'linear',
+              min: 'dataMin',
+              max: 'dataMax',
+            },
+            data: [
+              {
+                legend: 'FuncGen',
+                x1: {
+                  channel: 'time',
+                },
+                y1: {
+                  channel: 1,
+                },
+              },
+            ],
+          },
+        ],
+      },
+    ],
+  },
+}

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

@@ -0,0 +1,97 @@
+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', '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) => {
+        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: 'V_in',
+      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: 'I-T Graph',
+        description: '',
+        subplot: [
+          {
+            x1: {
+              type: 'time',
+              valScale: 'linear',
+              min: 'dataMin',
+              max: 'dataMax',
+            },
+            y1: {
+              type: 'value',
+              valScale: 'linear',
+              min: 'dataMin',
+              max: 'dataMax',
+            },
+            data: [
+              {
+                legend: 'IT',
+                x1: {
+                  channel: 'time',
+                },
+                y1: {
+                  channel: 0,
+                },
+              },
+            ],
+          },
+        ],
+      },
+    ],
+  },
+}

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

@@ -0,0 +1,123 @@
+export default {
+  name: 'I-V Curve',
+  parameter: [
+    'VOLT_ORIGIN',
+    'VOLT_FINAL',
+    'VOLT_STEP',
+    'STEP_TIME',
+    'SAMPLE_RATE',
+    'ADC_LEVEL_I_15',
+    'ADC_LEVEL_V_IN_15',
+    'CTRL_HIGH_Z_15',
+  ], // 這個mode用到的參數
+  showParameter: [
+    'ADC_LEVEL_I_15',
+    'ADC_LEVEL_V_IN_15',
+    'CTRL_HIGH_Z_15',
+    'VOLT_ORIGIN',
+    'VOLT_FINAL',
+    'VOLT_STEP',
+    'STEP_TIME',
+    'SAMPLE_RATE',
+  ], // 有要秀給user看的參數
+  headerParameter: () => [
+    'VOLT_ORIGIN',
+    'VOLT_FINAL',
+    'VOLT_STEP',
+    'STEP_TIME',
+    'SAMPLE_RATE',
+    'ADC_LEVEL_I_15',
+    'ADC_LEVEL_V_IN_15',
+  ], // export header的參數
+  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: 'V_out',
+      unit: {
+        uV: 1,
+        mV: 1e3,
+        V: 1e6,
+      },
+      defaultUnit: 'mV',
+      downloadUnit: 'mV',
+    },
+    2: {
+      name: 'V_in',
+      unit: {
+        uV: 1,
+        mV: 1e3,
+        V: 1e6,
+      },
+      defaultUnit: 'mV',
+      downloadUnit: 'mV',
+    },
+  },
+  charts: {
+    default: [
+      {
+        name: 'I-V Curve',
+        description: '',
+        subplot: [
+          {
+            x1: {
+              type: 'value',
+              valScale: 'linear',
+              min: 'dataMin',
+              max: 'dataMax',
+            },
+            y1: {
+              type: 'value',
+              valScale: 'linear',
+              min: 'dataMin',
+              max: 'dataMax',
+            },
+            data: [
+              {
+                legend: 'IV',
+                x1: {
+                  channel: 1,
+                },
+                y1: {
+                  channel: 0,
+                },
+              },
+            ],
+          },
+        ],
+      },
+    ],
+  },
+}

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

@@ -0,0 +1,120 @@
+export default {
+  name: 'Linear Sweep Voltammetry',
+  parameter: [
+    'VOLT_INITIAL',
+    'VOLT_EFINAL',
+    'Scan_Rate',
+    'SAMPLE_RATE',
+    'ADC_LEVEL_I_15',
+    'ADC_LEVEL_V_IN_15',
+    'CTRL_HIGH_Z_15',
+  ], // 這個mode用到的參數
+  showParameter: [
+    'ADC_LEVEL_I_15',
+    'ADC_LEVEL_V_IN_15',
+    'CTRL_HIGH_Z_15',
+    'VOLT_INITIAL',
+    'VOLT_EFINAL',
+    'Scan_Rate',
+    'SAMPLE_RATE',
+  ], // 有要秀給user看的參數
+  headerParameter: () => [
+    'VOLT_INITIAL',
+    'VOLT_EFINAL',
+    'Scan_Rate',
+    'SAMPLE_RATE',
+    'ADC_LEVEL_I_15',
+    'ADC_LEVEL_V_IN_15',
+  ], // 有要秀給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: 'Linear Sweep Voltammetry',
+        description: '',
+        subplot: [
+          {
+            x1: {
+              type: 'value',
+              valScale: 'linear',
+              min: 'dataMin',
+              max: 'dataMax',
+            },
+            y1: {
+              type: 'value',
+              valScale: 'linear',
+              min: 'dataMin',
+              max: 'dataMax',
+            },
+            data: [
+              {
+                legend: 'LSV',
+                x1: {
+                  channel: 1,
+                },
+                y1: {
+                  channel: 0,
+                },
+              },
+            ],
+          },
+        ],
+      },
+    ],
+  },
+}

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

@@ -0,0 +1,97 @@
+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', 'TIME_DURATION'], // 有要秀給user看的參數
+  headerParameter: () => ['SAMPLE_RATE', 'ADC_LEVEL_I_15', 'ADC_LEVEL_V_IN_15', 'TIME_DURATION'], // export header的參數
+  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_in',
+      unit: {
+        uV: 1,
+        mV: 1e3,
+        V: 1e6,
+      },
+      defaultUnit: 'mV',
+      downloadUnit: 'mV',
+    },
+  },
+  charts: {
+    default: [
+      {
+        name: 'Open Circuit Potential',
+        description: '',
+        subplot: [
+          {
+            x1: {
+              type: 'time',
+              valScale: 'linear',
+              min: 'dataMin',
+              max: 'dataMax',
+            },
+            y1: {
+              type: 'value',
+              valScale: 'linear',
+              min: 'dataMin',
+              max: 'dataMax',
+            },
+            data: [
+              {
+                legend: 'OCP',
+                x1: {
+                  channel: 'time',
+                },
+                y1: {
+                  channel: 1,
+                },
+              },
+            ],
+          },
+        ],
+      },
+    ],
+  },
+}

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

@@ -0,0 +1,103 @@
+export default {
+  name: 'Pulse Sensing',
+  parameter: ['V_initial', 't_pulse', 'CURR_REC'],
+  // parameter: ['V_initial', 't_pulse', 'CURR_REC_START', 'CURR_REC_END', 'segment_ui_order', 'segment_order', 'DATA_OUTPUT', 'CYCLE_NUMBER'], // 這個mode用到的參數
+  showParameter: ['V_initial', 't_pulse', 'CURR_REC'], // 有要秀給user看的參數
+  headerParameter: (parameterSet) => {
+    // [
+    //   'V_initial_0', 't_pulse_0', 'CURR_REC_START_0', 'CURR_REC_END_0',
+    //   'V_initial_1', 't_pulse_1', 'CURR_REC_START_1', 'CURR_REC_END_1',
+    //   'V_initial_2', 't_pulse_2', 'CURR_REC_START_2', 'CURR_REC_END_2',
+    //   'V_initial_3', 't_pulse_3', 'CURR_REC_START_3', 'CURR_REC_END_3',
+    // ]
+    const defaultParameter = ['V_initial', 't_pulse', 'CURR_REC']
+    const ret = []
+    for (let index = 0; index < 4; index++) {
+      if (parameterSet.segment_order[index] !== -1) {
+        ret.push(...defaultParameter.map((ele) => [ele, index]))
+      }
+    }
+    return ret
+  }, // export header的參數
+  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_pul1',
+      unit: {
+        nA: 1,
+        uA: 1e3,
+        mA: 1e6,
+      },
+      defaultUnit: 'mA',
+      downloadUnit: 'mA',
+    },
+    1: {
+      name: 'I_in_pul2',
+      unit: {
+        nA: 1,
+        uA: 1e3,
+        mA: 1e6,
+      },
+      defaultUnit: 'mA',
+      downloadUnit: 'mA',
+    },
+  },
+  charts: {
+    default: [
+      {
+        name: 'Pulse Sensing',
+        description: '',
+        subplot: [
+          {
+            x1: {
+              type: 'time',
+              valScale: 'linear',
+              min: 'dataMin',
+              max: 'dataMax',
+            },
+            y1: {
+              type: 'value',
+              valScale: 'linear',
+              min: 'dataMin',
+              max: 'dataMax',
+            },
+            data: [
+              {
+                legend: 'PulseSensing',
+                x1: {
+                  channel: 'time',
+                },
+                y1: {
+                  channel: 1,
+                },
+              },
+            ],
+          },
+        ],
+      },
+    ],
+  },
+}

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

@@ -0,0 +1,102 @@
+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', '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) => {
+        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: 'V_out',
+      unit: {
+        uV: 1,
+        mV: 1e3,
+        V: 1e6,
+      },
+      defaultUnit: 'mV',
+      downloadUnit: 'mV',
+    },
+    2: {
+      name: 'Resistor',
+      unit: {
+        mΩ: 1,
+        mohm: 1,
+        Ω: 1e3,
+        ohm: 1e3,
+        kΩ: 1e6,
+        kohm: 1e6,
+        MΩ: 1e9,
+        Mohm: 1e9,
+      },
+      defaultUnit: 'Ω',
+      downloadUnit: 'ohm',
+    },
+  },
+  charts: {
+    default: [
+      {
+        name: 'R-T Graph',
+        description: '',
+        subplot: [
+          {
+            x1: {
+              type: 'time',
+              valScale: 'linear',
+              min: 'dataMin',
+              max: 'dataMax',
+            },
+            y1: {
+              type: 'value',
+              valScale: 'linear',
+              min: 'dataMin',
+              max: 'dataMax',
+            },
+            data: [
+              {
+                legend: 'RT',
+                x1: {
+                  channel: 'time',
+                },
+                y1: {
+                  channel: 2,
+                },
+              },
+            ],
+          },
+        ],
+      },
+    ],
+  },
+}

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

@@ -0,0 +1,87 @@
+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', 'TIME_DURATION'], // 有要秀給user看的參數
+  headerParameter: () => ['SAMPLE_RATE', 'ADC_LEVEL_I_15', 'ADC_LEVEL_V_IN_15', 'TIME_DURATION'], // export header的參數
+  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: 'V_in',
+      unit: {
+        uV: 1,
+        mV: 1e3,
+        V: 1e6,
+      },
+      defaultUnit: 'mV',
+      downloadUnit: 'mV',
+    },
+  },
+  charts: {
+    default: [
+      {
+        name: 'V-T Graph',
+        description: '',
+        subplot: [
+          {
+            x1: {
+              type: 'time',
+              valScale: 'linear',
+              min: 'dataMin',
+              max: 'dataMax',
+            },
+            y1: {
+              type: 'value',
+              valScale: 'linear',
+              min: 'dataMin',
+              max: 'dataMax',
+            },
+            data: [
+              {
+                legend: 'VT',
+                x1: {
+                  channel: 'time',
+                },
+                y1: {
+                  channel: 1,
+                },
+              },
+            ],
+          },
+        ],
+      },
+    ],
+  },
+}

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

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

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

@@ -0,0 +1,273 @@
+export default {
+  name: 'Constant Frequency',
+  parameter: [
+    'CF_DC_BIAS',
+    'CF_AC_AMP',
+    'CF_FREQ',
+    'CF_PPD',
+    'CF_SCALE',
+    'CF_DELAY',
+    'CF_AVERAGE_NUM',
+    'GENERAL_HS_RTIA',
+  ], // 這個mode用到的參數
+  showParameter: [
+    'CF_DC_BIAS',
+    'CF_AC_AMP',
+    'CF_FREQ',
+    'CF_PPD',
+    'CF_SCALE',
+    'CF_DELAY',
+    'CF_AVERAGE_NUM',
+    'GENERAL_HS_RTIA',
+  ], // 有要秀給user看的參數
+  headerParameter: () => [
+    'CF_DC_BIAS',
+    'CF_AC_AMP',
+    'CF_FREQ',
+    'CF_PPD',
+    'CF_SCALE',
+    'CF_DELAY',
+    'CF_AVERAGE_NUM',
+    'GENERAL_HS_RTIA',
+  ], // 有要秀給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,
+        m: 60 * 1e6,
+        h: 60 * 60 * 1e6,
+        auto: 1,
+      },
+      defaultUnit: 'auto',
+      downloadUnit: 'ms',
+    },
+    0: {
+      name: 'Z_Imag_Raw',
+      unit: {
+        ohm: 1,
+      },
+      downloadUnit: 'ohm',
+      defaultUnit: 'ohm',
+    },
+    1: {
+      name: 'Z_Real_Raw',
+      unit: {
+        default: 1,
+      },
+      downloadUnit: 'ohm',
+      defaultUnit: 'ohm',
+    },
+    2: {
+      name: 'Frequency',
+      unit: {
+        mHz: 1,
+        Hz: 1e3,
+        kHz: 1e6,
+      },
+      downloadUnit: 'mHz',
+      defaultUnit: 'mHz',
+    },
+    // 3: {
+    //   name: 'Cycle',
+    //   unit: {
+    //     cycle: 1,
+    //   },
+    //   defaultUnit: 'cycle',
+    //   downloadUnit: null,
+    // },
+    4: {
+      name: 'Z_Imag',
+      unit: {
+        mohm: 1e-3,
+        mΩ: 1e-3,
+        ohm: 1,
+        Ω: 1,
+        kohm: 1e3,
+        kΩ: 1e3,
+        Mohm: 1e6,
+        MΩ: 1e6,
+      },
+      downloadUnit: 'ohm',
+      defaultUnit: 'Ω',
+    },
+    5: {
+      name: 'Z_Real',
+      unit: {
+        mohm: 1e-3,
+        mΩ: 1e-3,
+        ohm: 1,
+        Ω: 1,
+        kohm: 1e3,
+        kΩ: 1e3,
+        Mohm: 1e6,
+        MΩ: 1e6,
+      },
+      downloadUnit: 'ohm',
+      defaultUnit: 'Ω',
+    },
+    6: {
+      name: 'Impedance',
+      unit: {
+        mohm: 1e-3,
+        mΩ: 1e-3,
+        ohm: 1,
+        Ω: 1,
+        kohm: 1e3,
+        kΩ: 1e3,
+        Mohm: 1e6,
+        MΩ: 1e6,
+      },
+      downloadUnit: 'ohm',
+      defaultUnit: 'Ω',
+    },
+    7: {
+      name: 'Phase',
+      unit: {
+        millidegree: 1,
+        '°': 1e3,
+      },
+      downloadUnit: 'millidegree',
+      defaultUnit: '°',
+    },
+    8: {
+      name: 'Current',
+      unit: {
+        nA: 1,
+        uA: 1e3,
+        mA: 1e6,
+      },
+      downloadUnit: 'nA',
+      defaultUnit: 'nA',
+    },
+    9: {
+      name: 'Level gain',
+      unit: {
+        default: 1,
+      },
+      downloadUnit: null,
+      defaultUnit: 'default',
+    },
+    10: {
+      name: 'notify_one',
+      unit: {
+        default: 1,
+      },
+      downloadUnit: null,
+      defaultUnit: 'default',
+    },
+    11: {
+      name: 'notify_two',
+      unit: {
+        default: 1,
+      },
+      downloadUnit: null,
+      defaultUnit: 'default',
+    },
+    12: {
+      name: 'notify_three',
+      unit: {
+        default: 1,
+      },
+      downloadUnit: null,
+      defaultUnit: 'default',
+    },
+    13: {
+      name: 'debug_amp[mV]',
+      unit: {
+        default: 1,
+      },
+      downloadUnit: null,
+      defaultUnit: 'default',
+    },
+  },
+  charts: {
+    default: [
+      {
+        name: 'Nyquist',
+        description: '',
+        subplot: [
+          {
+            x1: {
+              type: 'value',
+              valScale: 'linear',
+              min: 'dataMin',
+              max: 'dataMax',
+            },
+            y1: {
+              type: 'value',
+              valScale: 'linear',
+              min: 'dataMin',
+              max: 'dataMax',
+            },
+            data: [
+              {
+                legend: 'Nyquist',
+                x1: {
+                  channel: 5,
+                },
+                y1: {
+                  channel: 4,
+                },
+              },
+            ],
+          },
+        ],
+      },
+      {
+        name: 'Bode',
+        description: '',
+        subplot: [
+          {
+            x1: {
+              type: 'value',
+              valScale: 'log',
+              min: 'dataMin',
+              max: 'dataMax',
+            },
+            y1: {
+              type: 'value',
+              valScale: 'linear',
+              min: 'dataMin',
+              max: 'dataMax',
+            },
+            y2: {
+              type: 'value',
+              valScale: 'linear',
+              min: 'dataMin',
+              max: 'dataMax',
+            },
+            data: [
+              {
+                legend: 'Bode',
+                x1: {
+                  channel: 2,
+                },
+                y1: {
+                  channel: 6,
+                },
+                y2: {
+                  channel: 7,
+                },
+              },
+            ],
+          },
+        ],
+      },
+    ],
+  },
+}

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

@@ -0,0 +1,123 @@
+export default {
+  name: 'Cyclic Voltammetry',
+  parameter: ['CV_E_INITIAL', 'CV_E1', 'CV_E2', 'CV_SCAN_RATE', 'SAMPLE_RATE', 'CYCLE_NUMBER', 'GENERAL_LP_RTIA'], // 這個mode用到的參數
+  showParameter: [
+    'GENERAL_LP_RTIA',
+    'CTRL_HIGH_Z_15',
+    'CV_E_INITIAL',
+    'CV_E1',
+    'CV_E2',
+    'CV_SCAN_RATE',
+    'SAMPLE_RATE',
+    'CYCLE_NUMBER',
+  ], // 有要秀給user看的參數
+  headerParameter: () => [
+    'CV_E_INITIAL',
+    'CV_E1',
+    'CV_E2',
+    'CV_SCAN_RATE',
+    'SAMPLE_RATE',
+    'CYCLE_NUMBER',
+    'GENERAL_LP_RTIA',
+  ], // 有要秀給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,
+        m: 60 * 1e6,
+        h: 60 * 60 * 1e6,
+        auto: 1,
+      },
+      defaultUnit: 'auto',
+      downloadUnit: 'ms',
+    },
+    0: {
+      name: 'I_in',
+      unit: {
+        nA: 1,
+        uA: 1e3,
+        mA: 1e6,
+      },
+      defaultUnit: 'uA',
+      downloadUnit: 'mA',
+    },
+    1: {
+      name: 'V_out-V_in',
+      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',
+    },
+    3: {
+      name: 'Cycle',
+      unit: {
+        cycle: 1,
+      },
+      defaultUnit: 'cycle',
+      downloadUnit: null,
+    },
+  },
+  charts: {
+    default: [
+      {
+        name: 'Cyclic Voltammetry',
+        description: '',
+        subplot: [
+          {
+            x1: {
+              type: 'value',
+              valScale: 'linear',
+              min: 'dataMin',
+              max: 'dataMax',
+            },
+            y1: {
+              type: 'value',
+              valScale: 'linear',
+              min: 'dataMin',
+              max: 'dataMax',
+            },
+            data: [
+              {
+                legend: 'CV',
+                x1: {
+                  channel: 1,
+                },
+                y1: {
+                  channel: 0,
+                },
+              },
+            ],
+          },
+        ],
+      },
+    ],
+  },
+}

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

@@ -0,0 +1,93 @@
+export default {
+  name: 'Dev Mode',
+  parameter: ['ADC_VALUE_I'],
+  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,
+        m: 60 * 1e6,
+        h: 60 * 60 * 1e6,
+        auto: 1,
+      },
+      defaultUnit: 'us',
+    },
+    0: {
+      name: '0',
+      unit: {
+        default: 1,
+      },
+      defaultUnit: 'default',
+    },
+    1: {
+      name: '1',
+      unit: {
+        default: 1,
+      },
+      defaultUnit: 'default',
+    },
+    2: {
+      name: '2',
+      unit: {
+        default: 1,
+      },
+      defaultUnit: 'default',
+    },
+    3: {
+      name: '3',
+      unit: {
+        default: 1,
+      },
+      defaultUnit: 'default',
+    },
+  },
+  charts: {
+    default: [
+      {
+        name: 'Dev Mode',
+        description: '',
+        subplot: [
+          {
+            x1: {
+              type: 'time',
+              valScale: 'linear',
+              min: 'dataMin',
+              max: 'dataMax',
+            },
+            y1: {
+              type: 'value',
+              valScale: 'linear',
+              min: 'dataMin',
+              max: 'dataMax',
+            },
+            data: [
+              {
+                legend: 'dev',
+                x1: {
+                  channel: 'time',
+                },
+                y1: {
+                  channel: 1,
+                },
+              },
+            ],
+          },
+        ],
+      },
+    ],
+  },
+}

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

@@ -0,0 +1,275 @@
+export default {
+  name: 'EIS',
+  parameter: [
+    'EIS_DC_BIAS',
+    'EIS_AC_AMP',
+    'EIS_FREQ',
+    'EIS_PPD',
+    'EIS_SCALE',
+    'EIS_DELAY',
+    'EIS_AVERAGE_NUM',
+    'GENERAL_HS_RTIA',
+  ], // 這個mode用到的參數
+  showParameter: [
+    'EIS_DC_BIAS',
+    'EIS_AC_AMP',
+    'EIS_FREQ',
+    'EIS_PPD',
+    'EIS_SCALE',
+    'EIS_DELAY',
+    'EIS_AVERAGE_NUM',
+    'GENERAL_HS_RTIA',
+  ], // 有要秀給user看的參數
+  headerParameter: () => [
+    'EIS_DC_BIAS',
+    'EIS_AC_AMP',
+    'EIS_FREQ',
+    'EIS_PPD',
+    'EIS_SCALE',
+    'EIS_DELAY',
+    'EIS_AVERAGE_NUM',
+    'GENERAL_HS_RTIA',
+  ], // 有要秀給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,
+        m: 60 * 1e6,
+        h: 60 * 60 * 1e6,
+        auto: 1,
+      },
+      defaultUnit: 'auto',
+      downloadUnit: 'ms',
+    },
+    0: {
+      name: 'Z_Imag_Raw',
+      unit: {
+        ohm: 1,
+      },
+      downloadUnit: 'ohm',
+      defaultUnit: 'ohm',
+    },
+    1: {
+      name: 'Z_Real_Raw',
+      unit: {
+        default: 1,
+      },
+      downloadUnit: 'ohm',
+      defaultUnit: 'ohm',
+    },
+    2: {
+      name: 'Frequency',
+      unit: {
+        mHz: 1,
+        Hz: 1e3,
+        kHz: 1e6,
+      },
+      downloadUnit: 'mHz',
+      defaultUnit: 'mHz',
+    },
+    // 3: {
+    //   name: 'Cycle',
+    //   unit: {
+    //     cycle: 1,
+    //   },
+    //   defaultUnit: 'cycle',
+    //   downloadUnit: null,
+    // },
+    4: {
+      name: 'Z_Imag',
+      unit: {
+        mohm: 1e-3,
+        mΩ: 1e-3,
+        ohm: 1,
+        Ω: 1,
+        kohm: 1e3,
+        kΩ: 1e3,
+        Mohm: 1e6,
+        MΩ: 1e6,
+      },
+      downloadUnit: 'ohm',
+      defaultUnit: 'Ω',
+    },
+    5: {
+      name: 'Z_Real',
+      unit: {
+        mohm: 1e-3,
+        mΩ: 1e-3,
+        ohm: 1,
+        Ω: 1,
+        kohm: 1e3,
+        kΩ: 1e3,
+        Mohm: 1e6,
+        MΩ: 1e6,
+      },
+      downloadUnit: 'ohm',
+      defaultUnit: 'Ω',
+    },
+    6: {
+      name: 'Impedance',
+      unit: {
+        mohm: 1e-3,
+        mΩ: 1e-3,
+        ohm: 1,
+        Ω: 1,
+        kohm: 1e3,
+        kΩ: 1e3,
+        Mohm: 1e6,
+        MΩ: 1e6,
+      },
+      downloadUnit: 'ohm',
+      defaultUnit: 'Ω',
+    },
+    7: {
+      name: 'Phase',
+      unit: {
+        millidegree: 1,
+        '°': 1e3,
+      },
+      downloadUnit: 'millidegree',
+      defaultUnit: '°',
+    },
+    8: {
+      name: 'Current',
+      unit: {
+        nA: 1,
+        uA: 1e3,
+        mA: 1e6,
+      },
+      downloadUnit: 'nA',
+      defaultUnit: 'nA',
+    },
+    9: {
+      name: 'Level gain',
+      unit: {
+        default: 1,
+      },
+      downloadUnit: null,
+      defaultUnit: 'default',
+    },
+    10: {
+      name: 'notify_one',
+      unit: {
+        default: 1,
+      },
+      downloadUnit: null,
+      defaultUnit: 'default',
+    },
+    11: {
+      name: 'notify_two',
+      unit: {
+        default: 1,
+      },
+      downloadUnit: null,
+      defaultUnit: 'default',
+    },
+    12: {
+      name: 'notify_three',
+      unit: {
+        default: 1,
+      },
+      downloadUnit: null,
+      defaultUnit: 'default',
+    },
+    13: {
+      name: 'debug_amp[mV]',
+      unit: {
+        uV: 1,
+        mV: 1e3,
+        V: 1e6,
+      },
+      defaultUnit: 'mV',
+      downloadUnit: 'mV',
+    },
+  },
+  charts: {
+    default: [
+      {
+        name: 'Nyquist',
+        description: '',
+        subplot: [
+          {
+            x1: {
+              type: 'value',
+              valScale: 'linear',
+              min: 'dataMin',
+              max: 'dataMax',
+            },
+            y1: {
+              type: 'value',
+              valScale: 'linear',
+              min: 'dataMin',
+              max: 'dataMax',
+            },
+            data: [
+              {
+                legend: 'Nyquist',
+                x1: {
+                  channel: 5,
+                },
+                y1: {
+                  channel: 4,
+                },
+              },
+            ],
+          },
+        ],
+      },
+      {
+        name: 'Bode',
+        description: '',
+        subplot: [
+          {
+            x1: {
+              type: 'value',
+              valScale: 'log',
+              min: 'dataMin',
+              max: 'dataMax',
+            },
+            y1: {
+              type: 'value',
+              valScale: 'linear',
+              min: 'dataMin',
+              max: 'dataMax',
+            },
+            y2: {
+              type: 'value',
+              valScale: 'linear',
+              min: 'dataMin',
+              max: 'dataMax',
+            },
+            data: [
+              {
+                legend: 'Bode',
+                x1: {
+                  channel: 2,
+                },
+                y1: {
+                  channel: 6,
+                },
+                y2: {
+                  channel: 7,
+                },
+              },
+            ],
+          },
+        ],
+      },
+    ],
+  },
+}

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

@@ -0,0 +1,102 @@
+export default {
+  name: 'R-T Graph',
+  parameter: ['RT_VOLT_SET', 'SAMPLE_RATE', 'CTRL_HIGH_Z_15', 'TIME_DURATION'], // 這個mode用到的參數
+  showParameter: ['RT_VOLT_SET', 'SAMPLE_RATE', 'CTRL_HIGH_Z_15', 'TIME_DURATION'], // 有要秀給user看的參數
+  headerParameter: () => ['RT_VOLT_SET', 'SAMPLE_RATE', 'GENERAL_LP_RTIA', 'TIME_DURATION'], // export header的參數
+  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: 'V_out',
+      unit: {
+        uV: 1,
+        mV: 1e3,
+        V: 1e6,
+      },
+      defaultUnit: 'mV',
+      downloadUnit: 'mV',
+    },
+    2: {
+      name: 'Resistor',
+      unit: {
+        mΩ: 1,
+        mohm: 1,
+        Ω: 1e3,
+        ohm: 1e3,
+        kΩ: 1e6,
+        kohm: 1e6,
+        MΩ: 1e9,
+        Mohm: 1e9,
+      },
+      defaultUnit: 'Ω',
+      downloadUnit: 'ohm',
+    },
+  },
+  charts: {
+    default: [
+      {
+        name: 'R-T Graph',
+        description: '',
+        subplot: [
+          {
+            x1: {
+              type: 'time',
+              valScale: 'linear',
+              min: 'dataMin',
+              max: 'dataMax',
+            },
+            y1: {
+              type: 'value',
+              valScale: 'linear',
+              min: 'dataMin',
+              max: 'dataMax',
+            },
+            data: [
+              {
+                legend: 'RT',
+                x1: {
+                  channel: 'time',
+                },
+                y1: {
+                  channel: 2,
+                },
+              },
+            ],
+          },
+        ],
+      },
+    ],
+  },
+}

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

@@ -0,0 +1,87 @@
+export default {
+  name: 'V-T Graph',
+  parameter: ['SAMPLE_RATE', 'VT_MEASURE_VIN_RANGE', 'GENERAL_LP_RTIA', 'CTRL_HIGH_Z_15', 'TIME_DURATION'], // 這個mode用到的參數
+  showParameter: ['SAMPLE_RATE', 'VT_MEASURE_VIN_RANGE', 'GENERAL_LP_RTIA', 'CTRL_HIGH_Z_15', 'TIME_DURATION'], // 有要秀給user看的參數
+  headerParameter: () => ['SAMPLE_RATE', 'VT_MEASURE_VIN_RANGE', 'GENERAL_LP_RTIA', 'TIME_DURATION'], // export header的參數
+  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: 'V_in',
+      unit: {
+        uV: 1,
+        mV: 1e3,
+        V: 1e6,
+      },
+      defaultUnit: 'mV',
+      downloadUnit: 'mV',
+    },
+  },
+  charts: {
+    default: [
+      {
+        name: 'V-T Graph',
+        description: '',
+        subplot: [
+          {
+            x1: {
+              type: 'time',
+              valScale: 'linear',
+              min: 'dataMin',
+              max: 'dataMax',
+            },
+            y1: {
+              type: 'value',
+              valScale: 'linear',
+              min: 'dataMin',
+              max: 'dataMax',
+            },
+            data: [
+              {
+                legend: 'VT',
+                x1: {
+                  channel: 'time',
+                },
+                y1: {
+                  channel: 1,
+                },
+              },
+            ],
+          },
+        ],
+      },
+    ],
+  },
+}

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

@@ -0,0 +1,579 @@
+import PotentiostaticEIS from './PotentiostaticEIS'
+import CyclicVoltammetry from './CyclicVoltammetry'
+import DevMode from './DevMode'
+import Chronoamperometry from './Chronoamperometry'
+import VT from './VT'
+import RT from './RT'
+import ConstantFrequency from './ConstantFrequency'
+import Idle from '../Common/Idle'
+
+const EliteEIS = {
+  TIME_DURATION: {
+    type: 'number',
+    showName: 'Time duration',
+    componentType: 'input-range',
+    range: Object.freeze({ min: 0, max: 86400 }), // UI上能輸入的最大最小值
+    defaultValue: 0,
+    defaultUnit: 's',
+    downloadUnit: 's',
+    unit: {
+      ms: 1e-3,
+      s: 1,
+      m: 60,
+      h: 3600,
+    },
+    outputRawData: (val) => {
+      return parseInt(parseFloat(val))
+    },
+    outputReadabilityData: (val) => {
+      return parseInt(parseFloat(val))
+    },
+  },
+  CTRL_HIGH_Z_15: {
+    type: 'array',
+    showName: 'HighZ',
+    componentType: 'input-button-toggle',
+    options: [
+      { value: 0, label: 'On' },
+      { value: 1, label: 'Off' },
+    ],
+    range: ['On', 'Off'],
+    defaultValue: 1,
+    outputRawData: (val) => {
+      const highzArr = ['On', 'Off']
+      return highzArr.indexOf(val.toString())
+    },
+    outputReadabilityData: (idx) => {
+      const highzArr = ['On', 'Off']
+      return highzArr[parseInt(idx)]
+    },
+  },
+  CYCLE_NUMBER: {
+    type: 'number',
+    showName: 'Cycle',
+    componentType: 'input-range',
+    range: Object.freeze({ min: 1, max: 50000 }),
+    outputRawData: (val) => {
+      return parseInt(val)
+    },
+    outputReadabilityData: (val) => {
+      return parseInt(val)
+    },
+    defaultValue: 1,
+    defaultUnit: 'cycle',
+    downloadUnit: null,
+    unit: {
+      cycle: 1,
+    },
+  },
+  SAMPLE_RATE: {
+    type: 'number',
+    showName: 'Sample rate',
+    componentType: 'input-range',
+    range: Object.freeze({ min: 1, max: 1000 }),
+    outputRawData: (val, scale = 1) => {
+      return parseInt(parseFloat(val) * 10)
+    },
+    outputReadabilityData: (val, scale = 1) => {
+      return parseFloat(val) / 10
+    },
+    defaultValue: 1000,
+    defaultUnit: 'sps',
+    downloadUnit: 'sps',
+    unit: {
+      sps: 1,
+    },
+  },
+  GENERAL_HS_RTIA: {
+    type: 'array',
+    showName: 'Current range',
+    componentType: 'input-button-toggle',
+    options: [
+      { value: 0, label: '1' },
+      { value: 1, label: '2' },
+      { value: 2, label: '3' },
+      { value: 3, label: '4' },
+      { value: 4, label: 'Auto' },
+    ],
+    range: ['1', '2', '3', '4', 'Auto'],
+    defaultValue: 4,
+    outputRawData: (val) => {
+      const numArr = ['1', '2', '3', '4', 'Auto']
+      return numArr.indexOf(val.toString())
+    },
+    outputReadabilityData: (idx) => {
+      const numArr = ['1', '2', '3', '4', 'Auto']
+      return numArr[parseInt(idx)]
+    },
+  },
+  GENERAL_LP_RTIA: {
+    type: 'array',
+    showName: 'Current Range',
+    componentType: 'input-button-toggle',
+    options: [
+      { value: 0, label: '<1.5 uA' },
+      { value: 1, label: '1-60 uA' },
+      { value: 2, label: '40-175 uA' },
+      { value: 3, label: '>120 uA' },
+      { value: 4, label: 'Auto' },
+    ],
+    range: ['<1.5 uA', '1-60 uA', '40-175 uA', '>120 uA', 'Auto'],
+    defaultValue: 4,
+    outputRawData: (val) => {
+      const currentRangeArr = ['<1.5 uA', '1-60 uA', '40-175 uA', '>120 uA', 'Auto']
+      return currentRangeArr.indexOf(val.toString())
+    },
+    outputReadabilityData: (idx) => {
+      const currentRangeArr = ['<1.5 uA', '1-60 uA', '40-175 uA', '>120 uA', 'Auto']
+      return currentRangeArr[parseInt(idx)]
+    },
+  },
+  EIS_DC_BIAS: {
+    type: 'number',
+    showName: 'DC Volt',
+    componentType: 'input-field',
+    range: Object.freeze({ min: 2500, max: 50000 }), // UI上能輸入的最大最小值
+    outputRawData: (val, scale = 1) => {
+      return Math.round(parseInt(val) * 12.5 * scale + 25000)
+    },
+    outputReadabilityData: (val, scale = 1) => {
+      return Math.round(parseInt(val - 25000) / 12.5) / scale
+    },
+    defaultValue: 25000,
+    defaultUnit: 'mV',
+    downloadUnit: 'mV',
+    unit: {
+      mV: 1,
+      V: 1e3,
+    },
+  },
+  EIS_AC_AMP: {
+    type: 'number',
+    showName: 'AC Amp',
+    componentType: 'input-field',
+    range: Object.freeze({ min: 0, max: 2047 }),
+    outputRawData: (val, scale = 1) => {
+      return Math.round((parseInt(val * scale) / 800) * 2047)
+    },
+    outputReadabilityData: (val, scale = 1) => {
+      return Math.round((parseInt(val) / 2047) * 800) / scale
+    },
+    defaultValue: 25,
+    defaultUnit: 'mV',
+    downloadUnit: 'mV',
+    unit: {
+      mV: 1,
+    },
+  },
+  EIS_FREQ: {
+    type: 'array',
+    showName: 'Frequency',
+    componentType: 'multi-input-field',
+    range: Object.freeze({ min: 1, max: 13333333 }),
+    outputRawData: (val) => {
+      return parseFloat(val) < 0.1 ? Math.round(0.1 / 0.015) : Math.round(parseFloat(val) / 0.015)
+    },
+    outputReadabilityData: (val) => {
+      return (parseFloat(val) * 0.015).toFixed(1)
+    },
+    defaultValue: [13333333, 7],
+    defaultUnit: 'Hz',
+    downloadUnit: 'Hz',
+    unit: {
+      Hz: 1,
+    },
+  },
+  EIS_PPD: {
+    type: 'number',
+    showName: 'Points per decades',
+    componentType: 'input-field',
+    range: Object.freeze({ min: 1, max: 10 }),
+    outputRawData: (val) => {
+      return parseInt(val)
+    },
+    outputReadabilityData: (val) => {
+      return parseInt(val)
+    },
+    defaultValue: 10,
+    defaultUnit: 'points',
+    downloadUnit: null,
+    unit: {
+      points: 1,
+    },
+  },
+  EIS_SCALE: {
+    type: 'array',
+    showName: 'Point spacing',
+    componentType: 'input-button-toggle',
+    options: [
+      { value: 0, label: 'Logarithm' },
+      { value: 1, label: 'Linear' },
+    ],
+    range: ['Logarithm', 'Linear'],
+    defaultValue: 0,
+    outputRawData: (val) => {
+      const scaleArr = ['Logarithm', 'Linear']
+      return scaleArr.indexOf(val.toString())
+    },
+    outputReadabilityData: (idx) => {
+      const scaleArr = ['Logarithm', 'Linear']
+      return scaleArr[parseInt(idx)]
+    },
+  },
+  EIS_DELAY: {
+    type: 'number',
+    showName: 'DELAY',
+    componentType: 'input-field',
+    range: Object.freeze({ min: 0, max: 100 }),
+    outputRawData: (val) => {
+      return parseInt(parseFloat(val) * 10)
+    },
+    outputReadabilityData: (val) => {
+      return parseFloat(val / 10).toFixed(1)
+    },
+    defaultValue: 0,
+    defaultUnit: 'points',
+    downloadUnit: null,
+    unit: {
+      points: 1,
+    },
+  },
+  EIS_AVERAGE_NUM: {
+    type: 'array',
+    showName: 'Average',
+    componentType: 'input-button-toggle',
+    options: [
+      { value: 0, label: '2' },
+      { value: 1, label: '4' },
+      { value: 2, label: '6' },
+      { value: 3, label: '8' },
+    ],
+    range: ['2', '4', '6', '8'],
+    defaultValue: 0,
+    outputRawData: (val) => {
+      const numArr = ['2', '4', '6', '8']
+      return numArr.indexOf(val.toString())
+    },
+    outputReadabilityData: (idx) => {
+      const numArr = ['2', '4', '6', '8']
+      return numArr[parseInt(idx)]
+    },
+  },
+  CF_DC_BIAS: {
+    type: 'number',
+    showName: 'DC Volt',
+    componentType: 'input-field',
+    range: Object.freeze({ min: 2500, max: 50000 }), // UI上能輸入的最大最小值
+    outputRawData: (val, scale = 1) => {
+      return Math.round(parseInt(val) * 12.5 * scale + 25000)
+    },
+    outputReadabilityData: (val, scale = 1) => {
+      return Math.round(parseInt(val - 25000) / 12.5) / scale
+    },
+    defaultValue: 25000,
+    defaultUnit: 'mV',
+    downloadUnit: 'mV',
+    unit: {
+      mV: 1,
+      V: 1e3,
+    },
+  },
+  CF_AC_AMP: {
+    type: 'number',
+    showName: 'AC Amp',
+    componentType: 'input-field',
+    range: Object.freeze({ min: 0, max: 2047 }),
+    outputRawData: (val, scale = 1) => {
+      return Math.round((parseInt(val * scale) / 800) * 2047)
+    },
+    outputReadabilityData: (val, scale = 1) => {
+      return Math.round((parseInt(val) / 2047) * 800) / scale
+    },
+    defaultValue: 25,
+    defaultUnit: 'mV',
+    downloadUnit: 'mV',
+    unit: {
+      mV: 1,
+    },
+  },
+  CF_FREQ: {
+    type: 'number',
+    showName: 'Frequency',
+    componentType: 'input-field',
+    range: Object.freeze({ min: 1, max: 13333333 }),
+    outputRawData: (val) => {
+      return parseFloat(val) < 0.1 ? Math.round(0.1 / 0.015) : Math.round(parseFloat(val) / 0.015)
+    },
+    outputReadabilityData: (val) => {
+      return (parseFloat(val) * 0.015).toFixed(1)
+    },
+    defaultValue: 13333333,
+    defaultUnit: 'Hz',
+    downloadUnit: 'Hz',
+    unit: {
+      Hz: 1,
+    },
+  },
+  CF_PPD: {
+    type: 'number',
+    showName: 'Points per decades',
+    componentType: 'input-field',
+    range: Object.freeze({ min: 1, max: 10 }),
+    outputRawData: (val) => {
+      return parseInt(val)
+    },
+    outputReadabilityData: (val) => {
+      return parseInt(val)
+    },
+    defaultValue: 10,
+    defaultUnit: 'points',
+    downloadUnit: null,
+    unit: {
+      points: 1,
+    },
+  },
+  CF_SCALE: {
+    type: 'array',
+    showName: 'Point spacing',
+    componentType: 'input-button-toggle',
+    options: [
+      { value: 0, label: 'Logarithm' },
+      { value: 1, label: 'Linear' },
+    ],
+    range: ['Logarithm', 'Linear'],
+    defaultValue: 0,
+    outputRawData: (val) => {
+      const scaleArr = ['Logarithm', 'Linear']
+      return scaleArr.indexOf(val.toString())
+    },
+    outputReadabilityData: (idx) => {
+      const scaleArr = ['Logarithm', 'Linear']
+      return scaleArr[parseInt(idx)]
+    },
+  },
+  CF_DELAY: {
+    type: 'number',
+    showName: 'DELAY',
+    componentType: 'input-field',
+    range: Object.freeze({ min: 0, max: 100 }),
+    outputRawData: (val) => {
+      return parseInt(parseFloat(val) * 10)
+    },
+    outputReadabilityData: (val) => {
+      return parseFloat(val / 10).toFixed(1)
+    },
+    defaultValue: 0,
+    defaultUnit: 'points',
+    downloadUnit: null,
+    unit: {
+      points: 1,
+    },
+  },
+  CF_AVERAGE_NUM: {
+    type: 'array',
+    showName: 'Average',
+    componentType: 'input-button-toggle',
+    options: [
+      { value: 0, label: '2' },
+      { value: 1, label: '4' },
+      { value: 2, label: '6' },
+      { value: 3, label: '8' },
+    ],
+    range: ['2', '4', '6', '8'],
+    defaultValue: 3,
+    outputRawData: (val) => {
+      const numArr = ['2', '4', '6', '8']
+      return numArr.indexOf(val.toString())
+    },
+    outputReadabilityData: (idx) => {
+      const numArr = ['2', '4', '6', '8']
+      return numArr[parseInt(idx)]
+    },
+  },
+  CV_E_INITIAL: {
+    type: 'number',
+    showName: 'E-Initial',
+    componentType: 'input-range',
+    range: Object.freeze({ min: 2500, max: 50000 }),
+    outputRawData: (val, scale = 1) => {
+      return parseInt(parseFloat(val) * scale * 12.5 + 25000)
+    },
+    outputReadabilityData: (val, scale = 1) => {
+      return parseInt((parseFloat(val) - 25000) / 12.5) / scale
+    },
+    defaultValue: 25000,
+    defaultUnit: 'V',
+    downloadUnit: 'mV',
+    unit: {
+      mV: 1,
+      V: 1e3,
+    },
+  },
+  CV_E1: {
+    type: 'number',
+    showName: 'E1',
+    componentType: 'input-range',
+    range: Object.freeze({ min: 2500, max: 50000 }),
+    outputRawData: (val, scale = 1) => {
+      return parseInt(parseFloat(val) * scale * 12.5 + 25000)
+    },
+    outputReadabilityData: (val, scale = 1) => {
+      return parseInt((parseFloat(val) - 25000) / 12.5) / scale
+    },
+    defaultValue: 25000,
+    defaultUnit: 'V',
+    downloadUnit: 'mV',
+    unit: {
+      mV: 1,
+      V: 1e3,
+    },
+  },
+  CV_E2: {
+    type: 'number',
+    showName: 'E2',
+    componentType: 'input-range',
+    range: Object.freeze({ min: 2500, max: 50000 }),
+    outputRawData: (val, scale = 1) => {
+      return parseInt(parseFloat(val) * scale * 12.5 + 25000)
+    },
+    outputReadabilityData: (val, scale = 1) => {
+      return parseInt((parseFloat(val) - 25000) / 12.5) / scale
+    },
+    defaultValue: 25000,
+    defaultUnit: 'V',
+    downloadUnit: 'mV',
+    unit: {
+      mV: 1,
+      V: 1e3,
+    },
+  },
+  CV_SCAN_RATE: {
+    type: 'number',
+    showName: 'ScanRate',
+    componentType: 'input-range',
+    range: Object.freeze({ min: 1, max: 100000 }),
+    outputRawData: (val) => {
+      return parseInt(parseFloat(val) * 100)
+    },
+    outputReadabilityData: (val) => {
+      return parseFloat(val) / 100
+    },
+    defaultValue: 10000,
+    defaultUnit: 'mV/s',
+    downloadUnit: 'mV/s',
+    unit: {
+      'mV/s': 1,
+    },
+  },
+  CA_VOLT: {
+    type: 'number',
+    showName: 'Volt (v.s. ref)',
+    componentType: 'input-range',
+    range: Object.freeze({ min: 2500, max: 50000 }),
+    outputRawData: (val, scale = 1) => {
+      return parseInt(parseFloat(val) * scale * 12.5 + 25000)
+    },
+    outputReadabilityData: (val, scale = 1) => {
+      return parseInt((parseFloat(val) - 25000) / 12.5) / scale
+    },
+    defaultValue: 25000,
+    defaultUnit: 'V',
+    downloadUnit: 'mV',
+    unit: {
+      mV: 1,
+      V: 1e3,
+    },
+  },
+  VT_MEASURE_VIN_RANGE: {
+    type: 'array',
+    showName: 'Vin Range',
+    componentType: 'input-button-toggle',
+    options: [
+      { value: 0, label: '0~2V' },
+      { value: 1, label: '-1~1V' },
+      { value: 2, label: '-2~0V' },
+      { value: 3, label: 'Auto' },
+    ],
+    range: ['1', '2', '3', 'Auto'],
+    defaultValue: 0,
+    outputRawData: (val) => {
+      const voltageInRangeArr = ['1', '2', '3', 'Auto']
+      return voltageInRangeArr.indexOf(val.toString())
+    },
+    outputReadabilityData: (idx) => {
+      const voltageInRangeArr = ['1', '2', '3', 'Auto']
+      return voltageInRangeArr[parseInt(idx)]
+    },
+  },
+  RT_VOLT_SET: {
+    type: 'number',
+    showName: 'Volt out',
+    componentType: 'input-range',
+    range: Object.freeze({ min: 2500, max: 50000 }),
+    defaultValue: 37500,
+    defaultUnit: 'V',
+    downloadUnit: 'mV',
+    unit: {
+      mV: 1,
+      V: 1e3,
+    },
+    outputRawData: (val, scale = 1) => {
+      return parseInt(parseFloat(val) * scale * 12.5 + 25000)
+    },
+    outputReadabilityData: (val, scale = 1) => {
+      return parseInt((parseFloat(val) - 25000) / 12.5) / scale
+    },
+  },
+  ADC_VALUE_I: {
+    type: 'none',
+    showName: 'Instruction',
+    componentType: 'dev-mode',
+  },
+
+  MODE_OPTIONS: [
+    {
+      id: 7,
+      description: 'Idle',
+    },
+    {
+      id: 0,
+      description: 'Potentiostatic Electrochemical Impedance Spectroscopy',
+    },
+    {
+      id: 1,
+      description: 'CV',
+    },
+    {
+      id: 2,
+      description: 'Chronoamperometry',
+    },
+    {
+      id: 3,
+      description: 'VT',
+    },
+    {
+      id: 4,
+      description: 'RT',
+    },
+    {
+      id: 5,
+      description: 'Constant Frequency',
+    },
+    {
+      id: 6,
+      description: 'Dev Tools',
+    },
+  ],
+  MODE: {
+    0: PotentiostaticEIS,
+    1: CyclicVoltammetry,
+    2: Chronoamperometry,
+    3: VT,
+    4: RT,
+    5: ConstantFrequency,
+    6: DevMode,
+    7: Idle,
+  },
+}
+
+export default EliteEIS

src/data/config-table/index.js

@@ -0,0 +1,148 @@
+import EliteEDC from './EliteEDC/index'
+import EliteEIS from './EliteEIS/index'
+
+// object saving library name mapping table
+const libraryNameMappingTable = {
+  EDC: EliteEDC,
+  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,
+  EIS: EliteEIS,
+  '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 library or serial number (type)
+ * @param {String | Object} type
+ * @returns {Object} : config
+ */
+function getConfig(type) {
+  if (type === undefined || type === null) return
+  // if (typeof type === 'number') {
+  //   const deviceList = store.getters.getField('taskContent').deviceListNew
+  //   if (deviceList === undefined) return
+  //   const device = deviceList.find((ele) => ele.memory_board === type)
+  //   if (device === undefined) return
+  //   return libraryNameMappingTable[device.library_name]
+  // }
+
+  // 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

src/data/echart/chart.ts

@@ -0,0 +1,20 @@
+import { EChartsOption } from 'echarts'
+import { generateLegend } from './legend'
+import { generateGrid } from './grid'
+import { generateXAxis } from './xAxis'
+import { generateYAxis } from './yAxis'
+import { generateTooltip } from './tooltip'
+import { generateSeries } from './series'
+import { generateDataZoom } from './datazoom'
+
+export const generateChart = function (): EChartsOption {
+  return {
+    legend: generateLegend(),
+    tooltip: generateTooltip(),
+    grid: [generateGrid()],
+    xAxis: [generateXAxis()],
+    yAxis: [generateYAxis()],
+    series: [generateSeries('')],
+    dataZoom: generateDataZoom(),
+  }
+}

src/data/echart/composables/LineChart.ts

@@ -0,0 +1,10 @@
+import { ref } from 'vue'
+import { ECharts } from 'echarts'
+import { generateChart } from '@/data/echart/chart'
+
+export default function lineChart() {
+  const chart_ref = ref<ECharts | null>(null)
+  const option = generateChart()
+
+  return { option, chart_ref }
+}

src/data/echart/datazoom.ts

@@ -0,0 +1,20 @@
+import { DataZoomComponentOption } from 'echarts'
+
+export const generateDataZoom = function (): DataZoomComponentOption | DataZoomComponentOption[] {
+  return [
+    {
+      show: true,
+      realtime: true,
+      start: 0,
+      end: 100,
+      xAxisIndex: [0, 1],
+    },
+    {
+      type: 'inside',
+      realtime: true,
+      start: 0,
+      end: 100,
+      xAxisIndex: [0, 1],
+    },
+  ]
+}

src/data/echart/formatter.ts

@@ -0,0 +1,5 @@
+import { TooltipComponentFormatterCallbackParams } from 'echarts'
+
+export const generateFormatter = function (params: any): string {
+  return String(params[0].value)
+}

src/data/echart/grid.ts

@@ -0,0 +1,18 @@
+import { GridComponentOption } from 'echarts'
+
+export const generateGrid = function (): GridComponentOption {
+  const index = 0
+  const length = 1
+  //   const chartID = 1
+  const _height = 82 / length - 2 + '%'
+  const _top = index * (82 / length) + 1 + '%'
+  const _left = '8%'
+  const _right = '8%'
+
+  return {
+    top: _top,
+    height: _height,
+    left: _left,
+    right: _right,
+  }
+}

src/data/echart/legend.ts

@@ -0,0 +1,14 @@
+import { LegendComponentOption } from 'echarts'
+
+export const generateLegend = function (): LegendComponentOption {
+  return {
+    type: 'scroll',
+    data: [],
+    // x: 'center',
+    // y: '-10%',
+    bottom: '0%',
+    textStyle: {
+      color: '#34495e',
+    },
+  }
+}

src/data/echart/markLine.ts

@@ -0,0 +1,19 @@
+import { MarkLineComponentOption } from 'echarts'
+
+export const generateMarkLine = function (): MarkLineComponentOption {
+  return {
+    symbol: ['none', 'none'],
+    // cannot create empty mark line data
+    data: [
+      //   {
+      //     name: 'ceiling',
+      //   },
+      //   {
+      //     name: 'ground',
+      //   },
+      //   {
+      //     name: 'middle',
+      //   },
+    ],
+  }
+}

src/data/echart/series.ts

@@ -0,0 +1,36 @@
+import { LineSeriesOption } from 'echarts'
+import { generateMarkLine } from './markLine'
+
+export const generateSeries = function (name: string): LineSeriesOption {
+  return {
+    type: 'line',
+    name: name || '',
+    showSymbol: false,
+    // silent: true,
+    data: [],
+    // markLine: {
+    //   data: [
+    //     {
+    //       // 固定起点的 x 像素位置，用于模拟一条指向最大值的水平线
+    //       name: 'test',
+    //       yAxis: '200',
+    //     },
+    //   ],
+    // },
+    // xAxisIndex: xAxisIndex,
+    // yAxisIndex: yAxisIndex,
+    // AxisSource: [deviceID, channel], use it to get data stream from buffer
+    // xAxisSource: xAxisSource,
+    // yAxisSource: yAxisSource,
+    animation: false,
+    // dataXMax: null,
+    // dataXMin: null,
+    // dataYMax: null,
+    // dataYMin: null,
+    // itemStyle: {},
+    // lineStyle: {
+    //   width: 1.5,
+    // },
+    markLine: generateMarkLine(),
+  }
+}

src/data/echart/tooltip.ts

@@ -0,0 +1,15 @@
+import { TooltipComponentOption } from 'echarts'
+import { generateFormatter } from './formatter'
+
+export const generateTooltip = function (): TooltipComponentOption {
+  return {
+    padding: 10,
+    backgroundColor: '#fff',
+    borderColor: 'rgba(0, 0, 200, 0.2)',
+    borderWidth: 1,
+    borderRadius: 0,
+    trigger: 'axis',
+    hideDelay: 5000,
+    formatter: generateFormatter,
+  }
+}

src/data/echart/xAxis.ts

@@ -0,0 +1,35 @@
+import { XAXisComponentOption } from 'echarts'
+
+declare const AXIS_TYPES: {
+  readonly value: 1
+  readonly category: 1
+  readonly time: 1
+  readonly log: 1
+}
+declare type OptionAxisType = keyof typeof AXIS_TYPES
+
+export const generateXAxis = function (
+  type?: OptionAxisType,
+  gridIndex?: number,
+  //   boundaryGap?: [string | number, string | number],
+): XAXisComponentOption {
+  return {
+    type: type || 'value',
+    show: true,
+    gridIndex: gridIndex || 0,
+    // scale: true,
+    // boundaryGap: true,
+    axisLine: { onZero: false, lineStyle: { color: '#aaa' } },
+    axisTick: { show: false },
+    axisLabel: {
+      show: true,
+      showMinLabel: false,
+      showMaxLabel: false,
+      color: '#34495e',
+    },
+    splitLine: { show: true, lineStyle: { color: '#aaa' } },
+    min: 'dataMin',
+    max: 'dataMax',
+    // interval: undefined,
+  }
+}

src/data/echart/yAxis.ts

@@ -0,0 +1,35 @@
+import { YAXisComponentOption } from 'echarts'
+
+declare const AXIS_TYPES: {
+  readonly value: 1
+  readonly category: 1
+  readonly time: 1
+  readonly log: 1
+}
+declare type OptionAxisType = keyof typeof AXIS_TYPES
+
+export const generateYAxis = function (
+  type?: OptionAxisType,
+  gridIndex?: number,
+  //   boundaryGap?: [string | number, string | number],
+): YAXisComponentOption {
+  return {
+    type: type || 'value',
+    show: true,
+    gridIndex: gridIndex || 0,
+    // scale: true,
+    // boundaryGap: true,
+    axisLine: { onZero: false, lineStyle: { color: '#aaa' } },
+    axisTick: { show: false },
+    axisLabel: {
+      show: true,
+      showMinLabel: false,
+      showMaxLabel: false,
+      color: '#34495e',
+    },
+    splitLine: { show: true, lineStyle: { color: '#aaa' } },
+    min: 'dataMin',
+    max: 'dataMax',
+    // interval: undefined,
+  }
+}

src/data/maps/lineMapData.ts

@@ -1,342 +0,0 @@
-import { computed, ComputedRef, Ref } from '@vue/reactivity'
-import { useColors } from 'vuestic-ui'
-
-type GeoBounds = {
-  bottom: number
-  left: number
-  right: number
-  top: number
-}
-
-export type PointGeoCoord = {
-  latitude: number
-  longitude: number
-}
-
-export type DataGeometry = {
-  geometry: {
-    type: string
-    coordinates: [number, number][]
-  }
-}
-
-export type CityItem = {
-  id?: string
-  title: string
-  country: string
-  latitude: number
-  longitude: number
-  svgPath: string
-  color: string
-  flights?: PointGeoCoord[]
-}
-
-const targetSVG =
-  'M9,0C4.029,0,0,4.029,0,9s4.029,9,9,9s9-4.029,9-9S13.971,0,9,0z M9,15.93 c-3.83,0-6.93-3.1-6.93-6.93S5.17,2.07,9,2.07s6.93,3.1,6.93,6.93S12.83,15.93,9,15.93 M12.5,9c0,1.933-1.567,3.5-3.5,3.5S5.5,10.933,5.5,9S7.067,5.5,9,5.5 S12.5,7.067,12.5,9z'
-
-export const planeSVG =
-  'M19.671,8.11l-2.777,2.777l-3.837-0.861c0.362-0.505,0.916-1.683,0.464-2.135c-0.518-0.517-1.979,0.278-2.305,0.604l-0.913,0.913L7.614,8.804l-2.021,2.021l2.232,1.061l-0.082,0.082l1.701,1.701l0.688-0.687l3.164,1.504L9.571,18.21H6.413l-1.137,1.138l3.6,0.948l1.83,1.83l0.947,3.598l1.137-1.137V21.43l3.725-3.725l1.504,3.164l-0.687,0.687l1.702,1.701l0.081-0.081l1.062,2.231l2.02-2.02l-0.604-2.689l0.912-0.912c0.326-0.326,1.121-1.789,0.604-2.306c-0.452-0.452-1.63,0.101-2.135,0.464l-0.861-3.838l2.777-2.777c0.947-0.947,3.599-4.862,2.62-5.839C24.533,4.512,20.618,7.163,19.671,8.11z'
-
-const london = {
-  id: 'london',
-  color: 'info',
-  svgPath: targetSVG,
-  title: 'London',
-  country: 'United Kingdom',
-  latitude: 51.5002,
-  longitude: -0.1262,
-  flights: [
-    {
-      latitude: 50.4422,
-      longitude: 30.5367,
-    },
-    {
-      latitude: 46.948,
-      longitude: 7.4481,
-    },
-    {
-      latitude: 59.3328,
-      longitude: 18.0645,
-    },
-    {
-      latitude: 40.4167,
-      longitude: -3.7033,
-    },
-    {
-      latitude: 46.0514,
-      longitude: 14.506,
-    },
-    {
-      latitude: 48.2116,
-      longitude: 17.1547,
-    },
-    {
-      latitude: 44.8048,
-      longitude: 20.4781,
-    },
-    {
-      latitude: 55.7558,
-      longitude: 37.6176,
-    },
-    {
-      latitude: 38.7072,
-      longitude: -9.1355,
-    },
-    {
-      latitude: 54.6896,
-      longitude: 25.2799,
-    },
-    {
-      latitude: 64.1353,
-      longitude: -21.8952,
-    },
-    {
-      latitude: 40.43,
-      longitude: -74.0,
-    },
-  ],
-}
-
-const vilnius = {
-  id: 'vilnius',
-  color: 'info',
-  svgPath: targetSVG,
-  title: 'Vilnius',
-  country: 'Lithuania',
-  latitude: 54.6896,
-  longitude: 25.2799,
-  flights: [
-    {
-      latitude: 50.8371,
-      longitude: 4.3676,
-    },
-    {
-      latitude: 59.9138,
-      longitude: 10.7387,
-    },
-    {
-      latitude: 40.4167,
-      longitude: -3.7033,
-    },
-    {
-      latitude: 50.0878,
-      longitude: 14.4205,
-    },
-    {
-      latitude: 48.2116,
-      longitude: 17.1547,
-    },
-    {
-      latitude: 44.8048,
-      longitude: 20.4781,
-    },
-    {
-      latitude: 55.7558,
-      longitude: 37.6176,
-    },
-    {
-      latitude: 37.9792,
-      longitude: 23.7166,
-    },
-    {
-      latitude: 51.5002,
-      longitude: -0.1262,
-    },
-    {
-      latitude: 53.3441,
-      longitude: -6.2675,
-    },
-  ],
-}
-
-const cities: CityItem[] = [
-  london,
-  vilnius,
-  {
-    svgPath: targetSVG,
-    color: 'info',
-    title: 'Brussels',
-    country: 'Belgium',
-    latitude: 50.8371,
-    longitude: 4.3676,
-  },
-  {
-    svgPath: targetSVG,
-    color: 'info',
-    title: 'Prague',
-    country: 'Czech Republic',
-    latitude: 50.0878,
-    longitude: 14.4205,
-  },
-  {
-    svgPath: targetSVG,
-    color: 'info',
-    title: 'Athens',
-    country: 'Greece',
-    latitude: 37.9792,
-    longitude: 23.7166,
-  },
-  {
-    svgPath: targetSVG,
-    color: 'info',
-    title: 'Reykjavik',
-    country: 'Iceland',
-    latitude: 64.1353,
-    longitude: -21.8952,
-  },
-  {
-    svgPath: targetSVG,
-    color: 'info',
-    title: 'Dublin',
-    country: 'Ireland',
-    latitude: 53.3441,
-    longitude: -6.2675,
-  },
-  {
-    svgPath: targetSVG,
-    color: 'info',
-    title: 'Oslo',
-    country: 'Norway',
-    latitude: 59.9138,
-    longitude: 10.7387,
-  },
-  {
-    svgPath: targetSVG,
-    color: 'info',
-    title: 'Lisbon',
-    country: 'Portugal',
-    latitude: 38.7072,
-    longitude: -9.1355,
-  },
-  {
-    svgPath: targetSVG,
-    color: 'info',
-    title: 'Moscow',
-    country: 'Russia',
-    latitude: 55.7558,
-    longitude: 37.6176,
-  },
-  {
-    svgPath: targetSVG,
-    color: 'info',
-    title: 'Belgrade',
-    country: 'Serbia',
-    latitude: 44.8048,
-    longitude: 20.4781,
-  },
-  {
-    svgPath: targetSVG,
-    color: 'info',
-    title: 'Bratislava',
-    country: 'Slovakia',
-    latitude: 48.2116,
-    longitude: 17.1547,
-  },
-  {
-    svgPath: targetSVG,
-    color: 'info',
-    title: 'Ljubljana',
-    country: 'Slovenia',
-    latitude: 46.0514,
-    longitude: 14.506,
-  },
-  {
-    svgPath: targetSVG,
-    color: 'info',
-    title: 'Madrid',
-    country: 'Spain',
-    latitude: 40.4167,
-    longitude: -3.7033,
-  },
-  {
-    svgPath: targetSVG,
-    color: 'info',
-    title: 'Stockholm',
-    country: 'Sweden',
-    latitude: 59.3328,
-    longitude: 18.0645,
-  },
-  {
-    svgPath: targetSVG,
-    color: 'info',
-    title: 'Bern',
-    country: 'Switzerland',
-    latitude: 46.948,
-    longitude: 7.4481,
-  },
-  {
-    svgPath: targetSVG,
-    color: 'info',
-    title: 'Kiev',
-    country: 'Ukraine',
-    latitude: 50.4422,
-    longitude: 30.5367,
-  },
-  {
-    svgPath: targetSVG,
-    color: 'info',
-    title: 'Paris',
-    country: 'France',
-    latitude: 48.8567,
-    longitude: 2.351,
-  },
-  {
-    svgPath: targetSVG,
-    color: 'info',
-    title: 'New York',
-    country: 'United States of America',
-    latitude: 40.43,
-    longitude: -74,
-  },
-]
-
-export const lineMapData = {
-  cities,
-  mainCity: london.title,
-  homeCity: london.title,
-}
-
-export const useMapData = (data: Ref<CityItem[]>): ComputedRef<CityItem[]> => {
-  const { getColor } = useColors()
-
-  return computed(() =>
-    data.value.map((item) => ({
-      ...item,
-      color: getColor(item.color),
-    })),
-  )
-}
-
-export const getGeoBounds = (item?: CityItem): GeoBounds | undefined => {
-  if (!item || !item.flights || !item.flights.length) {
-    return
-  }
-
-  const latitudes = [...item.flights.map(({ latitude }) => latitude), item.latitude]
-  const longitudes = [...item.flights.map(({ longitude }) => longitude), item.longitude]
-
-  return {
-    bottom: Math.min(...latitudes),
-    left: Math.min(...longitudes),
-    right: Math.max(...longitudes),
-    top: Math.max(...latitudes),
-  }
-}
-
-export const generateLineSeriesData = (item?: CityItem): DataGeometry[] | undefined => {
-  if (!item || !item.flights || !item.flights.length) {
-    return
-  }
-
-  return item.flights.map((point) => ({
-    geometry: {
-      type: 'LineString',
-      coordinates: [
-        [item.longitude, item.latitude],
-        [point.longitude, point.latitude],
-      ],
-    },
-  }))
-}
-
-export const compareStrings = (first: string, second: string) => first.toLowerCase() === second.toLowerCase()

src/data/server-api/collection.ts

@@ -0,0 +1,29 @@
+import { getAxios } from '@/data/axios'
+import { AxiosResponse } from 'axios'
+
+const axios = getAxios()
+const FOLDER_TYPE = 'folder'
+
+const getCollection = async function (
+  parent: number,
+  offset: number,
+  limit: number,
+  order: Array<string>,
+): Promise<AxiosResponse<any, any>> {
+  let url = `api/file/collection/get?type=${FOLDER_TYPE}&`
+  if (parent) url += `parent=${parent}&`
+  if (offset) url += `offset=${offset}&`
+  if (limit) url += `limit=${limit}&`
+  if (order) {
+    const _order = order?.join('-')
+    url += `order=${_order}`
+  }
+  const result = await axios.get(url)
+  return result
+}
+
+const meta = {
+  getCollection,
+}
+
+export default meta

src/data/server-api/index.ts

@@ -0,0 +1,11 @@
+import meta from './meta'
+import collection from './collection'
+import project from './project'
+
+const api = {
+  collection,
+  meta,
+  project,
+}
+
+export default api

src/data/server-api/meta.ts

@@ -0,0 +1,72 @@
+import { getAxios } from '@/data/axios'
+import { AxiosResponse } from 'axios'
+
+const FOLDER_TYPE = 'folder'
+
+const axios = getAxios()
+
+const getMetaWithTypeFolder = async function (
+  parent: number,
+  offset?: number,
+  limit?: number,
+  order?: Array<string>,
+): Promise<AxiosResponse<any, any>> {
+  let url = `api/file/meta/get?type=${FOLDER_TYPE}&`
+  if (parent) url += `parent=${parent}&`
+  if (offset) url += `offset=${offset}&`
+  if (limit) url += `limit=${limit}&`
+  if (order) {
+    const _order = order?.join('-')
+    url += `order=${_order}`
+  }
+  const result = await axios.get(url)
+  return result
+}
+
+const getMetaByTime = async function (time: string, offset?: number, limit?: number): Promise<AxiosResponse<any, any>> {
+  let url = `api/file/meta/get?time=${time}`
+  if (offset !== undefined) url += `&offset=${offset}`
+  if (limit !== undefined) url += `&limit=${limit}`
+  // console.log('url', url)
+  const result = await axios.get(url)
+  return result
+}
+
+const getMetaGroupByTime = async function (offset?: number, limit?: number): Promise<AxiosResponse<any, any>> {
+  let url = `api/file/meta/get?group=time`
+  if (offset !== undefined) url += `&offset=${offset}`
+  if (limit !== undefined) url += `&limit=${limit}`
+  const result = await axios.get(url)
+
+  return result
+}
+
+const getMetaByProject = async function (
+  uuid: string,
+  offset?: number,
+  limit?: number,
+): Promise<AxiosResponse<any, any>> {
+  let url = `api/file/meta/get?type=project&project=${uuid}`
+  if (offset !== undefined) url += `&offset=${offset}`
+  if (limit !== undefined) url += `&limit=${limit}`
+  const result = await axios.get(url)
+  return result
+}
+
+const findMeta = async function (id, range) {
+  let url = `api/file/meta/find?`
+  if (id !== undefined) url += `id=${JSON.stringify(id)}`
+  if (range !== undefined) url += `&range=${JSON.stringify(range)}`
+  const result = await axios.get(url)
+  return result
+}
+
+const meta = {
+  getMetaWithTypeFolder,
+  getMetaByTime,
+  getMetaByProject,
+  getMetaGroupByTime,
+  findMeta,
+}
+
+export default meta

src/data/server-api/project.ts

@@ -0,0 +1,17 @@
+import { getAxios } from '@/data/axios'
+import { AxiosResponse } from 'axios'
+
+const axios = getAxios()
+
+const getProjectGroup = async function (attrs?: Array<string>): Promise<AxiosResponse<any, any>> {
+  let url = `api/project/report/get?`
+  if (attrs) url += `attrs=${attrs.join('-')}`
+  const result = await axios.get(url)
+  return result
+}
+
+const project = {
+  getProjectGroup,
+}
+
+export default project

src/data/tables/markup-table/data.json

@@ -1,402 +0,0 @@
-[
-  {
-    "id": "5d3026a3a4c8c8f35689104b",
-    "name": "Mcguire Prince",
-    "email": "mcguireprince@glasstep.com",
-    "country": "Swaziland",
-    "starred": false,
-    "status": "processing"
-  },
-  {
-    "id": "5d3026a3e1579c30d1703632",
-    "name": "Dean Jennings",
-    "email": "deanjennings@glasstep.com",
-    "country": "Korea (North)",
-    "starred": true,
-    "status": "rejected"
-  },
-  {
-    "id": "5d3026a38023a44a3b5e934d",
-    "name": "Cotton Weber",
-    "email": "cottonweber@glasstep.com",
-    "country": "Mozambique",
-    "starred": false,
-    "status": "rejected"
-  },
-  {
-    "id": "5d3026a31c6b23082419e5f4",
-    "name": "Osborne Foster",
-    "email": "osbornefoster@glasstep.com",
-    "country": "US Minor Outlying Islands",
-    "starred": true,
-    "status": "paid"
-  },
-  {
-    "id": "5d3026a3b2cca1fd45746dbf",
-    "name": "William Dillard",
-    "email": "williamdillard@glasstep.com",
-    "country": "Cayman Islands",
-    "starred": true,
-    "status": "processing"
-  },
-  {
-    "id": "5d3026a3486badb41f9f18b5",
-    "name": "Anna Meyers",
-    "email": "annameyers@glasstep.com",
-    "country": "Viet Nam",
-    "starred": false,
-    "status": "paid"
-  },
-  {
-    "id": "5d3026a3c614901a53477e5c",
-    "name": "Ana Barrett",
-    "email": "anabarrett@glasstep.com",
-    "country": "Rwanda",
-    "starred": false,
-    "status": "processing"
-  },
-  {
-    "id": "5d3026a3fcff2a76b73e6016",
-    "name": "Pam Ward",
-    "email": "pamward@glasstep.com",
-    "country": "Kuwait",
-    "starred": false,
-    "status": "processing"
-  },
-  {
-    "id": "5d3026a3b54fc3e9a2570ce8",
-    "name": "Hannah Holloway",
-    "email": "hannahholloway@glasstep.com",
-    "country": "Gibraltar",
-    "starred": false,
-    "status": "paid"
-  },
-  {
-    "id": "5d3026a3e2303324ae9d823f",
-    "name": "Allison Cobb",
-    "email": "allisoncobb@glasstep.com",
-    "country": "East Timor",
-    "starred": true,
-    "status": "processing"
-  },
-  {
-    "id": "5d3026a3f22a52e3706ed868",
-    "name": "Terrie Hawkins",
-    "email": "terriehawkins@glasstep.com",
-    "country": "Greenland",
-    "starred": false,
-    "status": "processing"
-  },
-  {
-    "id": "5d3026a32bad267623e706ec",
-    "name": "Peck Ryan",
-    "email": "peckryan@glasstep.com",
-    "country": "Belgium",
-    "starred": false,
-    "status": "processing"
-  },
-  {
-    "id": "5d3026a37a50452a85d01cbb",
-    "name": "Candace Powell",
-    "email": "candacepowell@glasstep.com",
-    "country": "Yugoslavia",
-    "starred": false,
-    "status": "rejected"
-  },
-  {
-    "id": "5d3026a3ce9f5acf20065037",
-    "name": "Wolfe Pitts",
-    "email": "wolfepitts@glasstep.com",
-    "country": "Bouvet Island",
-    "starred": true,
-    "status": "rejected"
-  },
-  {
-    "id": "5d3026a3e3a5afe09338eca5",
-    "name": "Marietta Robbins",
-    "email": "mariettarobbins@glasstep.com",
-    "country": "Martinique",
-    "starred": true,
-    "status": "paid"
-  },
-  {
-    "id": "5d3026a33fc3196e598bdc7b",
-    "name": "Michelle Wolfe",
-    "email": "michellewolfe@glasstep.com",
-    "country": "French Guiana",
-    "starred": false,
-    "status": "rejected"
-  },
-  {
-    "id": "5d3026a3364f517d8f5dbf16",
-    "name": "Katina Lindsay",
-    "email": "katinalindsay@glasstep.com",
-    "country": "Guyana",
-    "starred": true,
-    "status": "rejected"
-  },
-  {
-    "id": "5d3026a313dedc3cf25404ba",
-    "name": "Bridgett Lloyd",
-    "email": "bridgettlloyd@glasstep.com",
-    "country": "Niger",
-    "starred": false,
-    "status": "processing"
-  },
-  {
-    "id": "5d3026a3a72281322b845f6a",
-    "name": "Letha Hamilton",
-    "email": "lethahamilton@glasstep.com",
-    "country": "Zimbabwe",
-    "starred": true,
-    "status": "processing"
-  },
-  {
-    "id": "5d3026a3bd037e491b76f097",
-    "name": "Mcclain Doyle",
-    "email": "mcclaindoyle@glasstep.com",
-    "country": "Switzerland",
-    "starred": false,
-    "status": "rejected"
-  },
-  {
-    "id": "5d3026a36aa5b7fda077d6ef",
-    "name": "Giles Lucas",
-    "email": "gileslucas@glasstep.com",
-    "country": "Bhutan",
-    "starred": true,
-    "status": "processing"
-  },
-  {
-    "id": "5d3026a381c974954ce9ab94",
-    "name": "Figueroa Lowery",
-    "email": "figueroalowery@glasstep.com",
-    "country": "Netherlands Antilles",
-    "starred": false,
-    "status": "rejected"
-  },
-  {
-    "id": "5d3026a3c0af2698fcd2a750",
-    "name": "Valeria Justice",
-    "email": "valeriajustice@glasstep.com",
-    "country": "Moldova",
-    "starred": true,
-    "status": "processing"
-  },
-  {
-    "id": "5d3026a301d5e7c957e6d864",
-    "name": "Louise Ayala",
-    "email": "louiseayala@glasstep.com",
-    "country": "India",
-    "starred": true,
-    "status": "rejected"
-  },
-  {
-    "id": "5d3026a31f6f1fd6399aeee6",
-    "name": "Kathrine Kirby",
-    "email": "kathrinekirby@glasstep.com",
-    "country": "Cook Islands",
-    "starred": false,
-    "status": "rejected"
-  },
-  {
-    "id": "5d3026a3e8cb16cd2afa41dd",
-    "name": "Brandi Morris",
-    "email": "brandimorris@glasstep.com",
-    "country": "Honduras",
-    "starred": false,
-    "status": "rejected"
-  },
-  {
-    "id": "5d3026a3c52ac7ffb85c892d",
-    "name": "Margaret Mckenzie",
-    "email": "margaretmckenzie@glasstep.com",
-    "country": "Jordan",
-    "starred": false,
-    "status": "processing"
-  },
-  {
-    "id": "5d3026a3c66670f258790358",
-    "name": "Janie Collier",
-    "email": "janiecollier@glasstep.com",
-    "country": "Samoa",
-    "starred": true,
-    "status": "rejected"
-  },
-  {
-    "id": "5d3026a3108b6b1d543fb117",
-    "name": "Catherine Vance",
-    "email": "catherinevance@glasstep.com",
-    "country": "Sierra Leone",
-    "starred": false,
-    "status": "paid"
-  },
-  {
-    "id": "5d3026a325d727b6d9b85d84",
-    "name": "Kate Allen",
-    "email": "kateallen@glasstep.com",
-    "country": "France",
-    "starred": true,
-    "status": "processing"
-  },
-  {
-    "id": "5d3026a32be6debb7532cc75",
-    "name": "Jeanne Cross",
-    "email": "jeannecross@glasstep.com",
-    "country": "Anguilla",
-    "starred": true,
-    "status": "processing"
-  },
-  {
-    "id": "5d3026a3cc16b4cd36e3a7b4",
-    "name": "Stewart Hanson",
-    "email": "stewarthanson@glasstep.com",
-    "country": "Western Sahara",
-    "starred": false,
-    "status": "processing"
-  },
-  {
-    "id": "5d3026a3d3496dd200d5f6af",
-    "name": "Beulah Castaneda",
-    "email": "beulahcastaneda@glasstep.com",
-    "country": "Malaysia",
-    "starred": true,
-    "status": "rejected"
-  },
-  {
-    "id": "5d3026a3187e74fcd18a7918",
-    "name": "Carissa Taylor",
-    "email": "carissataylor@glasstep.com",
-    "country": "Burkina Faso",
-    "starred": false,
-    "status": "paid"
-  },
-  {
-    "id": "5d3026a32db20d8ce9111367",
-    "name": "Muriel Butler",
-    "email": "murielbutler@glasstep.com",
-    "country": "Pitcairn",
-    "starred": false,
-    "status": "processing"
-  },
-  {
-    "id": "5d3026a35b04715a89693024",
-    "name": "Janna Anthony",
-    "email": "jannaanthony@glasstep.com",
-    "country": "Nigeria",
-    "starred": false,
-    "status": "paid"
-  },
-  {
-    "id": "5d3026a3a40b0f908cf0b831",
-    "name": "Cortez Singleton",
-    "email": "cortezsingleton@glasstep.com",
-    "country": "Morocco",
-    "starred": true,
-    "status": "processing"
-  },
-  {
-    "id": "5d3026a30ab099fe57fe76ad",
-    "name": "Acevedo Blevins",
-    "email": "acevedoblevins@glasstep.com",
-    "country": "Turkmenistan",
-    "starred": false,
-    "status": "paid"
-  },
-  {
-    "id": "5d3026a39f9244d7f7d7fe80",
-    "name": "Hamilton Lewis",
-    "email": "hamiltonlewis@glasstep.com",
-    "country": "Marshall Islands",
-    "starred": true,
-    "status": "paid"
-  },
-  {
-    "id": "5d3026a3637724139b82f9bc",
-    "name": "Marylou Wright",
-    "email": "marylouwright@glasstep.com",
-    "country": "Iraq",
-    "starred": true,
-    "status": "paid"
-  },
-  {
-    "id": "5d3026a3e5cda49e94e1f0de",
-    "name": "Lenore Bullock",
-    "email": "lenorebullock@glasstep.com",
-    "country": "El Salvador",
-    "starred": true,
-    "status": "paid"
-  },
-  {
-    "id": "5d3026a30bcb1168afa7bb26",
-    "name": "Enid Stephens",
-    "email": "enidstephens@glasstep.com",
-    "country": "Greece",
-    "starred": false,
-    "status": "rejected"
-  },
-  {
-    "id": "5d3026a34b33074f1ee12e73",
-    "name": "Oneill Joyner",
-    "email": "oneilljoyner@glasstep.com",
-    "country": "Micronesia",
-    "starred": false,
-    "status": "paid"
-  },
-  {
-    "id": "5d3026a3f3f5a4121051c6bc",
-    "name": "Kristine Finley",
-    "email": "kristinefinley@glasstep.com",
-    "country": "Uganda",
-    "starred": false,
-    "status": "paid"
-  },
-  {
-    "id": "5d3026a341bb45b14a38d0ec",
-    "name": "York Carson",
-    "email": "yorkcarson@glasstep.com",
-    "country": "Cyprus",
-    "starred": true,
-    "status": "paid"
-  },
-  {
-    "id": "5d3026a32ed6a9a296e01c71",
-    "name": "Nikki Conway",
-    "email": "nikkiconway@glasstep.com",
-    "country": "Tuvalu",
-    "starred": true,
-    "status": "paid"
-  },
-  {
-    "id": "5d3026a32b3f710cb8b73bca",
-    "name": "Lindsey Burgess",
-    "email": "lindseyburgess@glasstep.com",
-    "country": "Mali",
-    "starred": false,
-    "status": "processing"
-  },
-  {
-    "id": "5d3026a3fbfadf6c0b971769",
-    "name": "Love Christian",
-    "email": "lovechristian@glasstep.com",
-    "country": "Andorra",
-    "starred": false,
-    "status": "rejected"
-  },
-  {
-    "id": "5d3026a35c48c5e49f1930e0",
-    "name": "Julia Sawyer",
-    "email": "juliasawyer@glasstep.com",
-    "country": "Hungary",
-    "starred": true,
-    "status": "processing"
-  },
-  {
-    "id": "5d3026a3fc275278bd752b31",
-    "name": "Mayer Warren",
-    "email": "mayerwarren@glasstep.com",
-    "country": "Latvia",
-    "starred": false,
-    "status": "rejected"
-  }
-]

src/data/types.ts

@@ -1,13 +0,0 @@
-import type { TChartData as ChartData } from 'vue-chartjs/dist/types'
-
-export type ColorThemes = {
-  [key: string]: string
-}
-
-export type TLineChartData = ChartData<'line'>
-export type TBarChartData = ChartData<'bar'>
-export type TBubbleChartData = ChartData<'bubble'>
-export type TDoughnutChartData = ChartData<'doughnut'>
-export type TPieChartData = ChartData<'pie'>
-
-export type TChartData = TLineChartData | TBarChartData | TBubbleChartData | TDoughnutChartData | TPieChartData

src/data/users.json

@@ -1,386 +0,0 @@
-[
-  {
-    "id": "5d2c865e9a0bae79a6ef7cfa",
-    "firstName": "Ashley",
-    "lastName": "Mcdaniel",
-    "fullName": "Ashley Mcdaniel",
-    "email": "ashleymcdaniel@nebulean.com",
-    "country": "Cayman Islands",
-    "starred": true,
-    "hasReport": false,
-    "status": "warning",
-    "checked": false,
-    "trend": "down",
-    "color": "warning",
-    "graph": "M 5 20 C 10 5, 15 5, 30 30 S 20 20, 70 20",
-    "graphColor": "#4ae387"
-  },
-  {
-    "id": "5d2c865ec73341e16e5f2251",
-    "firstName": "Sellers",
-    "lastName": "Todd",
-    "fullName": "Todd Sellers",
-    "email": "sellerstodd@nebulean.com",
-    "country": "Togo",
-    "starred": false,
-    "hasReport": false,
-    "status": "info",
-    "checked": false,
-    "trend": "none",
-    "color": "primary",
-    "graph": "M 5 30 C 10 5, 30 10, 40 30 S 30 30, 90 40",
-    "graphColor": "#e34a4a"
-  },
-  {
-    "id": "5d2c865e38800c5ce28f2f6b",
-    "firstName": "Sherman",
-    "lastName": "Knowles",
-    "fullName": "Sherman Knowles",
-    "email": "shermanknowles@nebulean.com",
-    "country": "Central African Republic",
-    "starred": true,
-    "hasReport": true,
-    "status": "warning",
-    "checked": false,
-    "trend": "none",
-    "color": "warning",
-    "graph": "M 5 20 C 10 5, 15 5, 30 30 S 20 20, 70 20",
-    "graphColor": "#4ae387"
-  },
-  {
-    "id": "5d2c865e957cd150b82e17a6",
-    "firstName": "Vasquez",
-    "lastName": "Lawson",
-    "fullName": "Vasquez Lawson",
-    "email": "vasquezlawson@nebulean.com",
-    "country": "Bouvet Island",
-    "starred": true,
-    "hasReport": false,
-    "status": "info",
-    "checked": false,
-    "trend": "down",
-    "color": "warning",
-    "graph": "M 5 30 C 10 5, 30 10, 40 30 S 30 30, 90 40",
-    "graphColor": "#e34a4a"
-  },
-  {
-    "id": "5d2c865e9194dbe2faf99227",
-    "firstName": "April",
-    "lastName": "Sykes",
-    "fullName": "April Sykes",
-    "email": "aprilsykes@nebulean.com",
-    "country": "Saint Vincent and The Grenadines",
-    "starred": false,
-    "hasReport": true,
-    "status": "warning",
-    "checked": false,
-    "trend": "down",
-    "color": "primary",
-    "graph": "M 5 20 C 10 5, 15 5, 30 30 S 20 20, 70 20",
-    "graphColor": "#4ae387"
-  },
-  {
-    "id": "5d2c865e1ed74d83f6b26934",
-    "firstName": "Hodges",
-    "lastName": "Garrison",
-    "fullName": "Hodges Garrison",
-    "email": "hodgesgarrison@nebulean.com",
-    "country": "Zimbabwe",
-    "starred": true,
-    "hasReport": false,
-    "status": "info",
-    "checked": false,
-    "trend": "none",
-    "color": "info",
-    "graph": "M 5 30 C 10 5, 30 10, 40 30 S 30 30, 90 40",
-    "graphColor": "#e34a4a"
-  },
-  {
-    "id": "5d2c865e0ef31380880c3de5",
-    "firstName": "Therese",
-    "lastName": "Stokes",
-    "fullName": "Therese Stokes",
-    "email": "theresestokes@nebulean.com",
-    "country": "Mali",
-    "starred": true,
-    "hasReport": false,
-    "status": "info",
-    "checked": false,
-    "trend": "up",
-    "color": "warning",
-    "graph": "M 5 20 C 10 5, 15 5, 30 30 S 20 20, 70 20",
-    "graphColor": "#4ae387"
-  },
-  {
-    "id": "5d2c865e4b5ab4727e5c8b69",
-    "firstName": "Goodwin",
-    "lastName": "Brewer",
-    "fullName": "Goodwin Brewer",
-    "email": "goodwinbrewer@nebulean.com",
-    "country": "Iraq",
-    "starred": true,
-    "hasReport": true,
-    "status": "info",
-    "checked": false,
-    "trend": "none",
-    "color": "info",
-    "graph": "M 5 30 C 10 5, 30 10, 40 30 S 30 30, 90 40",
-    "graphColor": "#e34a4a"
-  },
-  {
-    "id": "5d2c865e4c4d675787cfe1c0",
-    "firstName": "Gomez",
-    "lastName": "Wise",
-    "fullName": "Gomez Wise",
-    "email": "gomezwise@nebulean.com",
-    "country": "Portugal",
-    "starred": true,
-    "hasReport": true,
-    "status": "info",
-    "checked": false,
-    "trend": "none",
-    "color": "primary",
-    "graph": "M 5 30 C 10 5, 30 10, 40 30 S 30 30, 90 40",
-    "graphColor": "#e34a4a"
-  },
-  {
-    "id": "5d2c865e1017c3229017fc68",
-    "firstName": "Laverne",
-    "lastName": "Ayers",
-    "fullName": "Laverne Ayers",
-    "email": "laverneayers@nebulean.com",
-    "country": "Micronesia",
-    "starred": false,
-    "hasReport": false,
-    "status": "warning",
-    "checked": false,
-    "trend": "down",
-    "color": "info",
-    "graph": "M 5 20 C 10 5, 15 5, 30 30 S 20 20, 70 20",
-    "graphColor": "#4ae387"
-  },
-  {
-    "id": "5d2c865ee66676fd7464f8b9",
-    "firstName": "Stewart",
-    "lastName": "Leon",
-    "fullName": "Stewart Leon",
-    "email": "stewartleon@nebulean.com",
-    "country": "Seychelles",
-    "starred": true,
-    "hasReport": false,
-    "status": "info",
-    "checked": false,
-    "trend": "up",
-    "color": "info",
-    "graph": "M 5 30 C 10 5, 30 10, 40 30 S 30 30, 90 40",
-    "graphColor": "#e34a4a"
-  },
-  {
-    "id": "5d2c865e644d8acbed1e0e97",
-    "firstName": "Lindsey",
-    "lastName": "Hopkins",
-    "fullName": "Lindsey Hopkins",
-    "email": "lindseyhopkins@nebulean.com",
-    "country": "Costa Rica",
-    "starred": false,
-    "hasReport": true,
-    "status": "info",
-    "checked": false,
-    "trend": "up",
-    "color": "primary",
-    "graph": "M 5 20 C 10 5, 15 5, 30 30 S 20 20, 70 20",
-    "graphColor": "#4ae387"
-  },
-  {
-    "id": "5d2c865ef2b732c74dc3d6a2",
-    "firstName": "Head",
-    "lastName": "Lloyd",
-    "fullName": "Head Lloyd",
-    "email": "headlloyd@nebulean.com",
-    "country": "Turkey",
-    "starred": true,
-    "hasReport": false,
-    "status": "warning",
-    "checked": false,
-    "trend": "down",
-    "color": "info",
-    "graph": "M 5 30 C 10 5, 30 10, 40 30 S 30 30, 90 40",
-    "graphColor": "#e34a4a"
-  },
-  {
-    "id": "5d2c865e4ee4f09e92ead2e7",
-    "firstName": "Fisher",
-    "lastName": "Bradford",
-    "fullName": "Fisher Bradford",
-    "email": "fisherbradford@nebulean.com",
-    "country": "Ethiopia",
-    "starred": true,
-    "hasReport": true,
-    "status": "info",
-    "checked": false,
-    "trend": "up",
-    "color": "info",
-    "graph": "M 5 20 C 10 5, 15 5, 30 30 S 20 20, 70 20",
-    "graphColor": "#4ae387"
-  },
-  {
-    "id": "5d2c865e88d46a9e9049a549",
-    "firstName": "Aurora",
-    "lastName": "Bird",
-    "fullName": "Aurora Bird",
-    "email": "aurorabird@nebulean.com",
-    "country": "Burkina Faso",
-    "starred": false,
-    "hasReport": true,
-    "status": "warning",
-    "checked": false,
-    "trend": "up",
-    "color": "info",
-    "graph": "M 5 30 C 10 5, 30 10, 40 30 S 30 30, 90 40",
-    "graphColor": "#e34a4a"
-  },
-  {
-    "id": "5d2c865e44bf14ea96d6e752",
-    "firstName": "Bonita",
-    "lastName": "Shields",
-    "fullName": "Bonita Shields",
-    "email": "bonitashields@nebulean.com",
-    "country": "Cote D'Ivoire (Ivory Coast)",
-    "starred": true,
-    "hasReport": true,
-    "status": "warning",
-    "checked": false,
-    "trend": "down",
-    "color": "primary",
-    "graph": "M 5 20 C 10 5, 15 5, 30 30 S 20 20, 70 20",
-    "graphColor": "#4ae387"
-  },
-  {
-    "id": "5d2c865e2a8be26f6ac4369c",
-    "firstName": "Ethel",
-    "lastName": "Underwood",
-    "fullName": "Ethel Underwood",
-    "email": "ethelunderwood@nebulean.com",
-    "country": "Vanuatu",
-    "starred": false,
-    "hasReport": false,
-    "status": "warning",
-    "checked": false,
-    "trend": "down",
-    "color": "info",
-    "graph": "M 5 30 C 10 5, 30 10, 40 30 S 30 30, 90 40",
-    "graphColor": "#e34a4a"
-  },
-  {
-    "id": "5d2c865e5e0aea40111c37f8",
-    "firstName": "Parker",
-    "lastName": "May",
-    "fullName": "Parker May",
-    "email": "parkermay@nebulean.com",
-    "country": "Pakistan",
-    "starred": true,
-    "hasReport": false,
-    "status": "warning",
-    "checked": false,
-    "trend": "down",
-    "color": "warning",
-    "graph": "M 5 20 C 10 5, 15 5, 30 30 S 20 20, 70 20",
-    "graphColor": "#4ae387"
-  },
-  {
-    "id": "5d2c865e7e0c05ecc2d0c186",
-    "firstName": "Hillary",
-    "lastName": "Waters",
-    "fullName": "Hillary Waters",
-    "email": "hillarywaters@nebulean.com",
-    "country": "Comoros",
-    "starred": true,
-    "hasReport": true,
-    "status": "info",
-    "checked": false,
-    "trend": "down",
-    "color": "primary",
-    "graph": "M 5 30 C 10 5, 30 10, 40 30 S 30 30, 90 40",
-    "graphColor": "#e34a4a"
-  },
-  {
-    "id": "5d2c865e80a72eeda016b169",
-    "firstName": "Raquel",
-    "lastName": "Ferrell",
-    "fullName": "Raquel Ferrell",
-    "email": "raquelferrell@nebulean.com",
-    "country": "China",
-    "starred": false,
-    "hasReport": false,
-    "status": "warning",
-    "checked": false,
-    "trend": "down",
-    "color": "info",
-    "graph": "M 5 20 C 10 5, 15 5, 30 30 S 20 20, 70 20",
-    "graphColor": "#4ae387"
-  },
-  {
-    "id": "5d2c865eafacadd378add679",
-    "firstName": "Pickett",
-    "lastName": "Page",
-    "fullName": "Pickett Page",
-    "email": "pickettpage@nebulean.com",
-    "country": "Bermuda",
-    "starred": true,
-    "hasReport": false,
-    "status": "info",
-    "checked": false,
-    "trend": "up",
-    "color": "info",
-    "graph": "M 5 30 C 10 5, 30 10, 40 30 S 30 30, 90 40",
-    "graphColor": "#e34a4a"
-  },
-  {
-    "id": "5d2c865e772b1a75bb0a07b5",
-    "firstName": "Alyson",
-    "lastName": "Bailey",
-    "fullName": "Alyson Bailey",
-    "email": "alysonbailey@nebulean.com",
-    "country": "United Arab Emirates",
-    "starred": false,
-    "hasReport": false,
-    "status": "warning",
-    "checked": false,
-    "trend": "up",
-    "color": "warning",
-    "graph": "M 5 20 C 10 5, 15 5, 30 30 S 20 20, 70 20",
-    "graphColor": "#4ae387"
-  },
-  {
-    "id": "5d2c865e137c19a76b56210c",
-    "firstName": "Farley",
-    "lastName": "Meyers",
-    "fullName": "Farley Meyers",
-    "email": "farleymeyers@nebulean.com",
-    "country": "Christmas Island",
-    "starred": false,
-    "hasReport": false,
-    "status": "info",
-    "checked": false,
-    "trend": "up",
-    "color": "warning",
-    "graph": "M 5 30 C 10 5, 30 10, 40 30 S 30 30, 90 40",
-    "graphColor": "#e34a4a"
-  },
-  {
-    "id": "5d2c865eb0ba37a27aa9afe0",
-    "firstName": "Hinton",
-    "lastName": "Avery",
-    "fullName": "Hinton Avery",
-    "email": "hintonavery@nebulean.com",
-    "country": "Liechtenstein",
-    "starred": false,
-    "hasReport": true,
-    "status": "info",
-    "checked": false,
-    "trend": "up",
-    "color": "info",
-    "graph": "M 5 30 C 10 5, 30 10, 40 30 S 30 30, 90 40",
-    "graphColor": "#e34a4a"
-  }
-]

src/main.ts

@@ -9,12 +9,62 @@ import vuesticGlobalConfig from './services/vuestic-ui/global-config'
 import App from './App.vue'
 import 'virtual:windi.css'
 
+// import ECharts modules
+import ECharts from 'vue-echarts'
+import { use } from 'echarts/core'
+// import ECharts modules manually to reduce bundle size
+import { CanvasRenderer } from 'echarts/renderers'
+import { LineChart, BarChart, PieChart } from 'echarts/charts'
+import {
+  TitleComponent,
+  LegendComponent,
+  GridComponent,
+  TooltipComponent,
+  DataZoomComponent,
+  MarkLineComponent,
+  ToolboxComponent,
+  BrushComponent,
+} from 'echarts/components'
+
+use([
+  CanvasRenderer,
+  LineChart,
+  PieChart,
+  BarChart,
+  GridComponent,
+  TooltipComponent,
+  TitleComponent,
+  LegendComponent,
+  DataZoomComponent,
+  ToolboxComponent,
+  BrushComponent,
+  MarkLineComponent,
+])
+
+import serverApi from '@/data/server-api'
+
+import Slideout from '@hyjiacan/vue-slideout'
+import '@hyjiacan/vue-slideout/dist/slideout.css'
+
+import VueGoodTable from 'vue-good-table-next'
+import 'vue-good-table-next/dist/vue-good-table-next.css'
+
+import contextmenu from 'v-contextmenu'
+import 'v-contextmenu/dist/themes/default.css'
+
 const app = createApp(App)
 
 app.use(stores)
 app.use(router)
 app.use(i18n)
 app.use(createVuestic({ config: vuesticGlobalConfig }))
+app.use(Slideout)
+app.use(VueGoodTable)
+app.use(contextmenu)
+
+app.component('EChart', ECharts)
+
+app.provide('server-api', serverApi)
 
 if (import.meta.env.VITE_APP_GTM_ENABLED) {
   app.use(

src/pages/admin/dashboard/Dashboard.vue

@@ -1,50 +0,0 @@
-<template>
-  <div class="dashboard">
-    <dashboard-charts />
-
-    <dashboard-info-block />
-
-    <div class="row row-equal">
-      <div class="flex xs12 lg6">
-        <dashboard-tabs @submit="addAddressToMap" />
-      </div>
-
-      <div class="flex xs12 lg6">
-        <DashboardMap ref="dashboardMap" />
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-  import { ref } from 'vue'
-
-  import DashboardCharts from './DashboardCharts.vue'
-  import DashboardInfoBlock from './DashboardInfoBlock.vue'
-  import DashboardTabs from './DashboardTabs.vue'
-  import DashboardMap from './DashboardMap.vue'
-
-  const dashboardMap = ref()
-
-  function addAddressToMap({ city, country }: { city: { text: string }; country: string }) {
-    dashboardMap.value.addAddress({ city: city.text, country })
-  }
-</script>
-
-<style lang="scss">
-  .row-equal .flex {
-    .va-card {
-      height: 100%;
-    }
-  }
-
-  .dashboard {
-    .va-card {
-      margin-bottom: 0 !important;
-      &__title {
-        display: flex;
-        justify-content: space-between;
-      }
-    }
-  }
-</style>

src/pages/admin/dashboard/DashboardCharts.vue

@@ -1,101 +0,0 @@
-<template>
-  <div class="row row-equal">
-    <div class="flex xs12 lg6 xl6">
-      <va-card v-if="lineChartDataGenerated">
-        <va-card-title>
-          <h1>{{ t('dashboard.charts.trendyTrends') }}</h1>
-          <div>
-            <va-button
-              class="ma-1"
-              size="small"
-              color="danger"
-              :disabled="datasetIndex === minIndex"
-              @click="setDatasetIndex(datasetIndex - 1)"
-            >
-              {{ t('dashboard.charts.showInLessDetail') }}
-            </va-button>
-            <va-button
-              class="ma-1"
-              size="small"
-              color="danger"
-              :disabled="datasetIndex === maxIndex - 1"
-              @click="setDatasetIndex(datasetIndex + 1)"
-            >
-              {{ t('dashboard.charts.showInMoreDetail') }}
-            </va-button>
-          </div>
-        </va-card-title>
-        <va-card-content>
-          <va-chart class="chart" :data="lineChartDataGenerated" type="line" />
-        </va-card-content>
-      </va-card>
-    </div>
-
-    <div class="flex xs12 sm6 md6 lg3 xl3">
-      <va-card class="d-flex">
-        <va-card-title>
-          <h1>{{ t('dashboard.charts.loadingSpeed') }}</h1>
-          <va-button icon="print" plain @click="printChart" />
-        </va-card-title>
-        <va-card-content v-if="doughnutChartDataGenerated">
-          <va-chart ref="doughnutChart" class="chart chart--donut" :data="doughnutChartDataGenerated" type="doughnut" />
-        </va-card-content>
-      </va-card>
-    </div>
-
-    <div class="flex xs12 sm6 md6 lg3 xl3">
-      <dashboard-contributors-chart />
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-  import { ref } from 'vue'
-  import { useI18n } from 'vue-i18n'
-  import { doughnutChartData, lineChartData } from '../../../data/charts'
-  import { useChartData } from '../../../data/charts/composables/useChartData'
-  import { usePartOfChartData } from './composables/usePartOfChartData'
-  import VaChart from '../../../components/va-charts/VaChart.vue'
-  import DashboardContributorsChart from './DashboardContributorsList.vue'
-
-  const { t } = useI18n()
-
-  const doughnutChart = ref()
-
-  const dataGenerated = useChartData(lineChartData, 0.7)
-  const doughnutChartDataGenerated = useChartData(doughnutChartData)
-
-  const {
-    dataComputed: lineChartDataGenerated,
-    minIndex,
-    maxIndex,
-    datasetIndex,
-    setDatasetIndex,
-  } = usePartOfChartData(dataGenerated)
-
-  function printChart() {
-    const windowObjectReference = window.open('', 'Print', 'height=600,width=800') as Window
-
-    const img = windowObjectReference.document.createElement('img')
-
-    img.src = `${(document.querySelector('.chart--donut canvas') as HTMLCanvasElement | undefined)?.toDataURL(
-      'image/png',
-    )}`
-
-    img.onload = () => {
-      windowObjectReference?.document.body.appendChild(img)
-    }
-
-    windowObjectReference.print()
-
-    windowObjectReference.onafterprint = () => {
-      windowObjectReference?.close()
-    }
-  }
-</script>
-
-<style scoped>
-  .chart {
-    height: 400px;
-  }
-</style>

src/pages/admin/dashboard/DashboardContributorsList.vue

@@ -1,95 +0,0 @@
-<template>
-  <va-card class="d-flex dashboard-contributors-list">
-    <va-card-title>
-      <h1>{{ t('dashboard.charts.topContributors') }}</h1>
-      <div class="mr-0 va-text-right">
-        <a class="mr-0 va-link" :disabled="contributors.length <= step" @click="showNext">
-          {{ t('dashboard.charts.showNextFive') }}
-        </a>
-      </div>
-    </va-card-title>
-
-    <va-card-content>
-      <va-inner-loading :loading="loading" style="width: 100%">
-        <div v-for="(contributor, idx) in visibleList" :key="idx" class="mb-3">
-          <va-progress-bar :model-value="getPercent(contributor.contributions)" :color="getProgressBarColor(idx)">
-            {{ contributor.contributions }} {{ t('dashboard.charts.commits') }}
-          </va-progress-bar>
-          <p class="mt-2">{{ contributor.login }}</p>
-        </div>
-      </va-inner-loading>
-    </va-card-content>
-  </va-card>
-</template>
-
-<script setup lang="ts">
-  import { onMounted, ref } from 'vue'
-  import { useI18n } from 'vue-i18n'
-  import axios from 'axios'
-
-  const { t } = useI18n()
-
-  interface IContributor {
-    contributions: number
-    login: string
-  }
-
-  const contributors = ref<IContributor[]>([])
-  const loading = ref(false)
-  const progressMax = ref(392)
-  const visibleList = ref<IContributor[]>([])
-  const step = ref(5)
-  const page = ref(0)
-
-  onMounted(() => {
-    loadContributorsList()
-  })
-
-  async function loadContributorsList() {
-    loading.value = true
-    const { data } = await axios.get<IContributor[]>(
-      'https://api.github.com/repos/epicmaxco/vuestic-admin/contributors',
-    )
-    contributors.value = data
-    progressMax.value = Math.max(...contributors.value.map(({ contributions }) => contributions))
-    showNext()
-    loading.value = false
-  }
-
-  function getPercent(val: number) {
-    return (val / progressMax.value) * 100
-  }
-
-  function showNext() {
-    visibleList.value = contributors.value.slice(page.value * step.value, page.value * step.value + step.value)
-    page.value += 1
-
-    const maxPages = (contributors.value.length - 1) / step.value
-
-    if (page.value > maxPages) {
-      page.value = 0
-    }
-  }
-
-  function getProgressBarColor(idx: number) {
-    const themeColors = ['primary', 'success', 'info', 'danger', 'warning']
-
-    if (idx < themeColors.length) {
-      return themeColors[idx]
-    }
-
-    // Get random color if idx out of colors array
-    const keys = Object.keys(themeColors)
-    return themeColors[keys[(keys.length * Math.random()) << 0] as unknown as number]
-  }
-</script>
-
-<style scoped lang="scss">
-  .dashboard-contributors-list {
-    flex-direction: column;
-
-    .inner-loading {
-      height: 100%;
-    }
-  }
-</style>

src/pages/admin/dashboard/DashboardInfoBlock.vue

@@ -1,145 +0,0 @@
-<template>
-  <div class="row row-equal">
-    <div class="flex xl6 xs12 lg6">
-      <div class="row">
-        <div v-for="(info, idx) in infoTiles" :key="idx" class="flex xs12 sm4">
-          <va-card class="mb-4" :color="info.color">
-            <va-card-content>
-              <h2 class="va-h2 ma-0" style="color: white">{{ info.value }}</h2>
-              <p style="color: white">{{ t('dashboard.info.' + info.text) }}</p>
-            </va-card-content>
-          </va-card>
-        </div>
-      </div>
-
-      <div class="row">
-        <div class="flex xs12 sm6 md6">
-          <va-card>
-            <va-card-content>
-              <h2 class="va-h2 ma-0" :style="{ color: colors.primary }">291</h2>
-              <p class="no-wrap">{{ t('dashboard.info.completedPullRequests') }}</p>
-            </va-card-content>
-          </va-card>
-        </div>
-        <div class="flex xs12 sm6 md6">
-          <va-card>
-            <va-card-content>
-              <div class="row row-separated">
-                <div class="flex xs4">
-                  <h2 class="va-h2 ma-0 va-text-center" :style="{ color: colors.primary }">3</h2>
-                  <p class="va-text-center">{{ t('dashboard.info.users') }}</p>
-                </div>
-                <div class="flex xs4">
-                  <h2 class="va-h2 ma-0 va-text-center" :style="{ color: colors.info }">24</h2>
-                  <p class="va-text-center no-wrap">{{ t('dashboard.info.points') }}</p>
-                </div>
-                <div class="flex xs4">
-                  <h2 class="va-h2 ma-0 va-text-center" :style="{ color: colors.warning }">91</h2>
-                  <p class="va-text-center">{{ t('dashboard.info.units') }}</p>
-                </div>
-              </div>
-            </va-card-content>
-          </va-card>
-        </div>
-      </div>
-    </div>
-
-    <div class="flex xs12 sm6 md6 xl3 lg3">
-      <va-card stripe stripe-color="info">
-        <va-card-title>
-          {{ t('dashboard.info.componentRichTheme') }}
-        </va-card-title>
-        <va-card-content>
-          <p class="rich-theme-card-text">
-            Buying the right telescope to take your love of astronomy to the next level is a big next step.
-          </p>
-
-          <div class="mt-3">
-            <va-button color="primary" target="_blank" href="https://github.com/epicmaxco/vuestic-ui">
-              {{ t('dashboard.info.viewLibrary') }}
-            </va-button>
-          </div>
-        </va-card-content>
-      </va-card>
-    </div>
-
-    <div class="flex xs12 sm6 md6 xl3 lg3">
-      <va-card>
-        <va-image :src="images[currentImageIndex]" style="height: 200px" />
-        <va-card-title>
-          <va-button preset="plain" icon-right="fa-arrow-circle-right" @click="showModal">
-            {{ t('dashboard.info.exploreGallery') }}
-          </va-button>
-        </va-card-title>
-      </va-card>
-    </div>
-    <va-modal v-model="modal">
-      <va-carousel v-model="currentImageIndex" :items="images" class="gallery-carousel" />
-    </va-modal>
-  </div>
-</template>
-
-<script setup lang="ts">
-  import { ref } from 'vue'
-  import { useI18n } from 'vue-i18n'
-  import { VaCarousel, VaModal, VaCard, VaCardContent, VaCardTitle, VaButton, VaImage, useColors } from 'vuestic-ui'
-
-  const { t } = useI18n()
-  const { colors } = useColors()
-
-  const infoTiles = ref([
-    {
-      color: 'success',
-      value: '803',
-      text: 'commits',
-      icon: '',
-    },
-    {
-      color: 'danger',
-      value: '57',
-      text: 'components',
-      icon: '',
-    },
-    {
-      color: 'info',
-      value: '5',
-      text: 'teamMembers',
-      icon: '',
-    },
-  ])
-
-  const modal = ref(false)
-  const currentImageIndex = ref(0)
-  const images = ref([
-    'https://i.imgur.com/qSykGko.jpg',
-    'https://i.imgur.com/jYwT08D.png',
-    'https://i.imgur.com/9930myH.jpg',
-    'https://i.imgur.com/2JxhWD6.jpg',
-    'https://i.imgur.com/MpiOWbM.jpg',
-  ])
-
-  function showModal() {
-    modal.value = true
-  }
-</script>
-
-<style lang="scss" scoped>
-  .row-separated {
-    .flex + .flex {
-      border-left: 1px solid var(--va-background-primary);
-    }
-  }
-
-  .rich-theme-card-text {
-    line-height: 1.5;
-  }
-
-  .gallery-carousel {
-    width: 80vw;
-    max-width: 100%;
-
-    @media all and (max-width: 576px) {
-      width: 100%;
-    }
-  }
-</style>

src/pages/admin/dashboard/DashboardMap.vue

@@ -1,38 +0,0 @@
-<template>
-  <va-card>
-    <va-card-title>
-      {{ t('dashboard.currentVisitors') }}
-    </va-card-title>
-    <line-map v-model="mainCity" :map-data="cities" :home-city="homeCity" class="dashboard-map" />
-  </va-card>
-</template>
-
-<script setup lang="ts">
-  import { ref } from 'vue'
-  import { useI18n } from 'vue-i18n'
-
-  import LineMap from '../../../components/maps/LineMap.vue'
-  import { lineMapData, compareStrings } from '../../../data/maps/lineMapData'
-
-  const { t } = useI18n()
-
-  const cities = ref(lineMapData.cities)
-  const mainCity = ref('Vilnius')
-  const homeCity = ref('Vilnius')
-
-  function addAddress(address: { city: string; country: string }) {
-    cities.value = cities.value.map((mapItem) =>
-      compareStrings(mapItem.title, address.city) && compareStrings(mapItem.country, address.country)
-        ? { ...mapItem, color: 'success' }
-        : mapItem,
-    )
-  }
-
-  defineExpose({ addAddress })
-</script>
-
-<style>
-  .dashboard-map {
-    height: 380px;
-  }
-</style>

src/pages/admin/dashboard/DashboardTabs.vue

@@ -1,53 +0,0 @@
-<template>
-  <va-card>
-    <va-card-title>
-      {{ t('dashboard.setupRemoteConnections') }}
-    </va-card-title>
-    <va-card-content>
-      <va-tabs v-model="activeTabName" grow>
-        <template #tabs>
-          <va-tab name="OverviewTab">
-            {{ t('dashboard.tabs.overview.title') }}
-          </va-tab>
-          <va-tab name="BillingAddressTab">
-            {{ t('dashboard.tabs.billingAddress.title') }}
-          </va-tab>
-          <va-tab name="BankDetailsTab">
-            {{ t('dashboard.tabs.bankDetails.title') }}
-          </va-tab>
-        </template>
-      </va-tabs>
-      <va-separator />
-      <component :is="tabs[activeTabName]" @submit="submit" />
-    </va-card-content>
-  </va-card>
-</template>
-
-<script setup lang="ts">
-  import { defineAsyncComponent, ref } from 'vue'
-  import { useI18n } from 'vue-i18n'
-
-  const { t } = useI18n()
-
-  const tabs = {
-    OverviewTab: defineAsyncComponent(() => import('./dashboard-tabs/OverviewTab.vue')),
-    BillingAddressTab: defineAsyncComponent(() => import('./dashboard-tabs/BillingAddressTab.vue')),
-    BankDetailsTab: defineAsyncComponent(() => import('./dashboard-tabs/BankDetailsTab.vue')),
-  }
-
-  const emit = defineEmits<{
-    (e: 'submit', data: any): void
-  }>()
-
-  const activeTabName = ref<keyof typeof tabs>('BillingAddressTab')
-
-  function submit(data: any) {
-    emit('submit', data)
-  }
-</script>
-
-<style lang="scss">
-  .va-tabs__tabs {
-    height: 100%;
-  }
-</style>

src/pages/admin/dashboard/composables/usePartOfChartData.ts

@@ -1,27 +0,0 @@
-import { computed, ref, ComputedRef } from '@vue/reactivity'
-import { TChartData } from '../../../../data/types'
-
-export function usePartOfChartData<T extends TChartData>(data: ComputedRef<T>) {
-  const datasetIndex = ref(0)
-
-  const setDatasetIndex = (index: number) => {
-    datasetIndex.value = index
-  }
-
-  const dataComputed = computed<T>(() => ({
-    ...data.value,
-    labels: data.value.labels?.slice(datasetIndex.value),
-    datasets: data.value.datasets.map((dataset) => ({
-      ...dataset,
-      data: dataset.data.slice(datasetIndex.value),
-    })),
-  }))
-
-  return {
-    datasetIndex,
-    minIndex: 0,
-    maxIndex: (data.value.labels?.length ?? 0) - 1,
-    dataComputed,
-    setDatasetIndex,
-  }
-}

src/pages/admin/dashboard/dashboard-tabs/BankDetailsTab.vue

@@ -1,46 +0,0 @@
-<template>
-  <div class="pt-2">
-    <div class="title text-dark">
-      {{ t('dashboard.tabs.bankDetails.detailsFields') }}
-    </div>
-    <div class="row">
-      <div class="flex xs12 md6">
-        <va-input v-model="form.bankName" class="mb-3" :label="t('dashboard.tabs.bankDetails.bankName')" />
-        <va-input v-model="form.accountName" class="mb-3" :label="t('dashboard.tabs.bankDetails.accountName')" />
-        <va-input v-model="form.sortCode" class="mb-3" :label="t('dashboard.tabs.bankDetails.sortCode')" />
-      </div>
-      <div class="flex xs12 md6">
-        <va-input v-model="form.accountNumber" class="mb-3" :label="t('dashboard.tabs.bankDetails.accountNumber')" />
-        <va-input v-model="form.notes" class="mb-3" :label="t('dashboard.tabs.bankDetails.notes')" />
-      </div>
-    </div>
-    <div class="row justify-center">
-      <va-button @click="sendDetails">
-        {{ t('dashboard.tabs.bankDetails.sendDetails') }}
-      </va-button>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-  import { ref } from 'vue'
-  import { useI18n } from 'vue-i18n'
-  import { useColors, useToast } from 'vuestic-ui'
-
-  const { colors } = useColors()
-  const { t } = useI18n()
-  const { init: initToast } = useToast()
-
-  const form = ref({
-    bankName: 'Raiffeisen Bank',
-    accountName: 'GoalSaver',
-    sortCode: '6558912',
-    accountNumber: '000876432',
-    notes: '',
-  })
-
-  function sendDetails() {
-    const color = colors.primary
-    initToast({ message: `Details sent!`, color })
-  }
-</script>

src/pages/admin/dashboard/dashboard-tabs/BillingAddressTab.vue

@@ -1,102 +0,0 @@
-<template>
-  <div class="pt-2">
-    <div class="row">
-      <div class="flex sm12 md6">
-        <div class="title mb-3" :style="computedStylesTitle">
-          {{ t('dashboard.tabs.billingAddress.personalInfo') }}
-        </div>
-        <va-input v-model="form.name" :label="t('dashboard.tabs.billingAddress.firstName')" />
-        <va-input v-model="form.email" :label="t('dashboard.tabs.billingAddress.email')" />
-        <va-input v-model="form.address" :label="t('dashboard.tabs.billingAddress.address')" />
-      </div>
-      <div class="flex sm12 md6">
-        <div class="title mb-3" :style="computedStylesTitle">
-          {{ t('dashboard.tabs.billingAddress.companyInfo') }}
-        </div>
-        <va-select
-          v-model="form.country"
-          :options="countriesList"
-          :label="t('dashboard.tabs.billingAddress.country')"
-          searchable
-          clearable
-          class="mb-3"
-        />
-        <va-select
-          v-model="form.city"
-          :label="t('dashboard.tabs.billingAddress.city')"
-          :options="allowedCitiesList"
-          key-by="text"
-          track-by="text"
-          class="mb-3"
-        />
-        <va-checkbox v-model="form.connection" :label="t('dashboard.tabs.billingAddress.infiniteConnections')" />
-      </div>
-    </div>
-    <div class="row justify-center mb-3">
-      <va-button @click="submit">
-        {{ t('dashboard.tabs.billingAddress.addConnection') }}
-      </va-button>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-  import { computed, reactive, ref, watch } from 'vue'
-  import { useColors } from 'vuestic-ui'
-  import { useI18n } from 'vue-i18n'
-  import { lineMapData } from '../../../../data/maps/lineMapData'
-  import CountriesList from '../../../../data/CountriesList'
-
-  const { colors } = useColors()
-  const { t } = useI18n()
-
-  const emit = defineEmits<{
-    (e: 'submit', data: typeof form): void
-  }>()
-
-  const form = reactive({
-    name: 'John Smith',
-    email: 'smith@gmail.com',
-    address: '93  Guild Street',
-    city: { text: 'London' },
-    country: 'United Kingdom',
-    connection: true,
-  })
-
-  const countriesList = computed(() => {
-    return CountriesList.filter((item) => citiesList.value.filter(({ country }) => country === item).length)
-  })
-
-  const citiesList = computed(() => {
-    return lineMapData.cities.map(({ title, country }) => ({ text: title, country }))
-  })
-
-  const allowedCitiesList = ref<typeof citiesList['value']>([])
-
-  const computedStylesTitle = computed(() => ({ color: colors.dark }))
-
-  watch(
-    () => form.country,
-    (newCountry, oldCountry) => {
-      allowedCitiesList.value = form.country
-        ? citiesList.value.filter(({ country }) => country === form.country)
-        : [...citiesList.value]
-
-      if (newCountry !== oldCountry) {
-        const city = allowedCitiesList.value.find(({ country }) => country === newCountry)?.text || ''
-        form.city = { text: city }
-      }
-    },
-    { immediate: true },
-  )
-
-  function submit() {
-    emit('submit', form)
-  }
-</script>
-
-<style lang="scss" scoped>
-  .va-input-wrapper {
-    margin-bottom: 1rem;
-  }
-</style>

src/pages/admin/dashboard/dashboard-tabs/OverviewTab.vue

@@ -1,89 +0,0 @@
-<template>
-  <div class="overview-tab pt-2 layout">
-    <div class="mb-2"></div>
-    <div class="row">
-      <div class="flex xs12 xl6 mb-5">
-        <div class="overview-tab__item d-flex align--center">
-          <div class="overview-tab__item-icon fill-height mr-2">
-            <va-icon-vue />
-          </div>
-          <div class="text--bold">{{ t('dashboard.tabs.overview.built') }}</div>
-        </div>
-      </div>
-
-      <div class="flex xs12 xl6 mb-5">
-        <div class="overview-tab__item d-flex align--center">
-          <div class="overview-tab__item-icon fill-height mr-2">
-            <va-icon-responsive />
-          </div>
-          <div class="text--bold">{{ t('dashboard.tabs.overview.mobile') }}</div>
-        </div>
-      </div>
-    </div>
-
-    <div class="row">
-      <div class="flex xs12 xl6 mb-5">
-        <div class="overview-tab__item d-flex align--center">
-          <div class="overview-tab__item-icon fill-height mr-2">
-            <va-icon-free />
-          </div>
-          <div class="text--bold">{{ t('dashboard.tabs.overview.free') }}</div>
-        </div>
-      </div>
-
-      <div class="flex xs12 xl6 mb-5">
-        <div class="overview-tab__item d-flex align--center">
-          <div class="overview-tab__item-icon fill-height mr-2">
-            <va-icon-rich />
-          </div>
-          <div class="text--bold">{{ t('dashboard.tabs.overview.components') }}</div>
-        </div>
-      </div>
-    </div>
-
-    <div class="row">
-      <div class="flex xs12 xl6 mb-5">
-        <div class="overview-tab__item d-flex align--center">
-          <div class="overview-tab__item-icon fill-height mr-2">
-            <va-icon-fresh />
-          </div>
-          <div class="text--bold">{{ t('dashboard.tabs.overview.fresh') }}</div>
-        </div>
-      </div>
-
-      <div class="flex xs12 xl6">
-        <div class="overview-tab__item d-flex align--center">
-          <div class="overview-tab__item-icon fill-height mr-2">
-            <va-icon-clean-code />
-          </div>
-          <div class="text--bold">{{ t('dashboard.tabs.overview.nojQuery') }}</div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-  import VaIconVue from '../../../../components/icons/VaIconVue.vue'
-  import VaIconFree from '../../../../components/icons/VaIconFree.vue'
-  import VaIconFresh from '../../../../components/icons/VaIconFresh.vue'
-  import VaIconResponsive from '../../../../components/icons/VaIconResponsive.vue'
-  import VaIconRich from '../../../../components/icons/VaIconRich.vue'
-  import VaIconCleanCode from '../../../../components/icons/VaIconCleanCode.vue'
-
-  import { useI18n } from 'vue-i18n'
-  const { t } = useI18n()
-</script>
-
-<style lang="scss">
-  .overview-tab {
-    &__item {
-      height: 55px;
-
-      &-icon {
-        min-width: 65px;
-        max-width: 65px;
-      }
-    }
-  }
-</style>

src/pages/admin/data-analysis/DataAnalysis.vue

@@ -0,0 +1,127 @@
+<template>
+  <div class="h-[86vh] grid grid-cols-4 gap-3">
+    <div class="h-full col-span-1">
+      <div class="h-1/3">
+        <FileContainer class="h-200px overflow-auto"></FileContainer>
+      </div>
+      <div class="h-2/3 pt-1">
+        <ControlPanel class="h-[100%]" @filter-data="filterData"></ControlPanel>
+      </div>
+    </div>
+    <template v-for="chart in chartManager.children" :key="chart.id">
+      <template v-if="dataAnalysisSettitngStore.batchMode">
+        <CanvasContainer ref="canvas_ref" class="h-[100%] col-span-3"></CanvasContainer>
+      </template>
+      <template v-else>
+        <ChartContainer ref="chart_ref" :chart="chart" class="h-[100%] col-span-3"></ChartContainer>
+      </template>
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import useMqtt from '@/composables/utils/useMqtt'
+  import FileContainer from '@/components/data-analysis/file-container/FileContainer.vue'
+  import ControlPanel from '@/components/data-analysis/setting-container/SettingContainer.vue'
+  import ChartContainer from '@/components/data-analysis/chart-container/ChartContainer.vue'
+  import CanvasContainer from '@/components/data-analysis/chart-container/CanvasContainer.vue'
+  import { useDASettingStore } from '@/stores/data-analysis/data-analysis'
+  import { useChartStore } from '@/stores/data-analysis/chart'
+  import { ref, reactive, onMounted } from 'vue'
+
+  // reference
+  const chart_ref = ref()
+  const canvas_ref = ref()
+
+  const chartStore = useChartStore()
+  const chartManager = reactive(chartStore.chartManager)
+  onMounted(() => {
+    if (chartManager.children.length === 0) {
+      chartManager.addChart()
+    }
+  })
+
+  const dataAnalysisSettitngStore = useDASettingStore()
+
+  // mqtt init
+  const { startMqtt, publish } = useMqtt()
+  const controllerID = 'b8:27:eb:14:55:ef'
+
+  // define subscribe and callback
+  startMqtt(`${controllerID}/data_analysis/#`, (topic: string, message: ArrayBuffer) => {
+    console.timeEnd('analysising')
+    console.time('painting')
+    // [metaID, xData, yData, horizontalLine, twoPointLine]
+    const msg = JSON.parse(message.toString())
+    console.log('msg', msg)
+
+    // reformat data
+    // for (const info of msg) {
+    const metaID = msg[0]
+    const xData = msg[1]
+    const yData = msg[2]
+    const horizontal = msg[3]
+    const line = msg[4]
+    const groupData: number | string[][] = []
+
+    if (dataAnalysisSettitngStore.batchMode === true) {
+      canvas_ref.value[0].reDraw()
+      canvas_ref.value[0].drawInputData(xData, yData)
+    } else {
+      for (let i = 0; i < xData.length; i++) {
+        groupData.push([xData[i], yData[i]])
+      }
+
+      chartManager.children.forEach((chart, index) => {
+        const seriesIndex = chart.seriesManager.findSeries({ id: metaID })
+        // append Data
+        if (seriesIndex !== -1) {
+          chart_ref.value[index]?.appendData(seriesIndex, groupData)
+        }
+        // draw line
+        if (horizontal !== undefined) {
+          const yAxis_list = horizontal.map((x: any) => ({ yAxis: x }))
+          const coord_list = [{ coord: [line[0][0], line[0][1]] }, { coord: [line[1][0], line[1][1]] }]
+          yAxis_list.push(coord_list)
+          chart_ref.value[index]?.markLine(yAxis_list)
+          chart_ref.value[0].setOption({
+            series: [
+              {
+                markLine: {
+                  data: yAxis_list,
+                },
+              },
+            ],
+          })
+        }
+        // stop loading
+        chart_ref.value[index]?.stopLoading()
+      })
+    }
+
+    // download file
+    // const name = 'test'
+    // const url = `http://192.168.2.1:3000/api/analysis/get/csv?name=${name}`
+    // const a = document.createElement('a')
+    // a.href = url
+    // a.target = '_blank'
+    // document.body.appendChild(a)
+    // a.click()
+    // document.body.removeChild(a)
+  })
+
+  // ControlPanel handling
+  const filterData = function (e: any) {
+    if (dataAnalysisSettitngStore.batchMode === true) {
+      canvas_ref.value[0].resetCanvas()
+    } else {
+      chart_ref.value[0]?.reset()
+      chart_ref.value[0]?.startLoading()
+    }
+    publish(`${controllerID}_data_analysis/get_analysis_data`, JSON.stringify(e))
+  }
+
+  defineExpose({ chart_ref, filterData })
+</script>
+
+<style></style>

src/pages/admin/forms/data/CountriesList.ts

@@ -1,243 +0,0 @@
-export default [
-  'Afghanistan',
-  'Albania',
-  'Algeria',
-  'American Samoa',
-  'Andorra',
-  'Angola',
-  'Anguilla',
-  'Antarctica',
-  'Antigua and Barbuda',
-  'Argentina',
-  'Armenia',
-  'Aruba',
-  'Australia',
-  'Austria',
-  'Azerbaijan',
-  'Bahamas',
-  'Bahrain',
-  'Bangladesh',
-  'Barbados',
-  'Belarus',
-  'Belgium',
-  'Belize',
-  'Benin',
-  'Bermuda',
-  'Bhutan',
-  'Bolivia',
-  'Bosnia and Herzegowina',
-  'Botswana',
-  'Bouvet Island',
-  'Brazil',
-  'British Indian Ocean Territory',
-  'Brunei Darussalam',
-  'Bulgaria',
-  'Burkina Faso',
-  'Burundi',
-  'Cambodia',
-  'Cameroon',
-  'Canada',
-  'Cape Verde',
-  'Cayman Islands',
-  'Central African Republic',
-  'Chad',
-  'Chile',
-  'China',
-  'Christmas Island',
-  'Cocos (Keeling) Islands',
-  'Colombia',
-  'Comoros',
-  'Congo',
-  'Congo, the Democratic Republic of the',
-  'Cook Islands',
-  'Costa Rica',
-  "Cote d'Ivoire",
-  'Croatia (Hrvatska)',
-  'Cuba',
-  'Cyprus',
-  'Czech Republic',
-  'Denmark',
-  'Djibouti',
-  'Dominica',
-  'Dominican Republic',
-  'East Timor',
-  'Ecuador',
-  'Egypt',
-  'El Salvador',
-  'Equatorial Guinea',
-  'Eritrea',
-  'Estonia',
-  'Ethiopia',
-  'Falkland Islands (Malvinas)',
-  'Faroe Islands',
-  'Fiji',
-  'Finland',
-  'France',
-  'France Metropolitan',
-  'French Guiana',
-  'French Polynesia',
-  'French Southern Territories',
-  'Gabon',
-  'Gambia',
-  'Georgia',
-  'Germany',
-  'Ghana',
-  'Gibraltar',
-  'Greece',
-  'Greenland',
-  'Grenada',
-  'Guadeloupe',
-  'Guam',
-  'Guatemala',
-  'Guinea',
-  'Guinea-Bissau',
-  'Guyana',
-  'Haiti',
-  'Heard and Mc Donald Islands',
-  'Holy See (Vatican City State)',
-  'Honduras',
-  'Hong Kong',
-  'Hungary',
-  'Iceland',
-  'India',
-  'Indonesia',
-  'Iran (Islamic Republic of)',
-  'Iraq',
-  'Ireland',
-  'Israel',
-  'Italy',
-  'Jamaica',
-  'Japan',
-  'Jordan',
-  'Kazakhstan',
-  'Kenya',
-  'Kiribati',
-  "Korea, Democratic People's Republic of",
-  'Korea, Republic of',
-  'Kuwait',
-  'Kyrgyzstan',
-  "Lao, People's Democratic Republic",
-  'Latvia',
-  'Lebanon',
-  'Lesotho',
-  'Liberia',
-  'Libyan Arab Jamahiriya',
-  'Liechtenstein',
-  'Lithuania',
-  'Luxembourg',
-  'Macau',
-  'Macedonia, The Former Yugoslav Republic of',
-  'Madagascar',
-  'Malawi',
-  'Malaysia',
-  'Maldives',
-  'Mali',
-  'Malta',
-  'Marshall Islands',
-  'Martinique',
-  'Mauritania',
-  'Mauritius',
-  'Mayotte',
-  'Mexico',
-  'Micronesia, Federated States of',
-  'Moldova, Republic of',
-  'Monaco',
-  'Mongolia',
-  'Montserrat',
-  'Morocco',
-  'Mozambique',
-  'Myanmar',
-  'Namibia',
-  'Nauru',
-  'Nepal',
-  'Netherlands',
-  'Netherlands Antilles',
-  'New Caledonia',
-  'New Zealand',
-  'Nicaragua',
-  'Niger',
-  'Nigeria',
-  'Niue',
-  'Norfolk Island',
-  'Northern Mariana Islands',
-  'Norway',
-  'Oman',
-  'Pakistan',
-  'Palau',
-  'Panama',
-  'Papua New Guinea',
-  'Paraguay',
-  'Peru',
-  'Philippines',
-  'Pitcairn',
-  'Poland',
-  'Portugal',
-  'Puerto Rico',
-  'Qatar',
-  'Reunion',
-  'Romania',
-  'Russian Federation',
-  'Rwanda',
-  'Saint Kitts and Nevis',
-  'Saint Lucia',
-  'Saint Vincent and the Grenadines',
-  'Samoa',
-  'San Marino',
-  'Sao Tome and Principe',
-  'Saudi Arabia',
-  'Senegal',
-  'Serbia',
-  'Seychelles',
-  'Sierra Leone',
-  'Singapore',
-  'Slovakia (Slovak Republic)',
-  'Slovenia',
-  'Solomon Islands',
-  'Somalia',
-  'South Africa',
-  'South Georgia and the South Sandwich Islands',
-  'Spain',
-  'Sri Lanka',
-  'St. Helena',
-  'St. Pierre and Miquelon',
-  'Sudan',
-  'Suriname',
-  'Svalbard and Jan Mayen Islands',
-  'Swaziland',
-  'Sweden',
-  'Switzerland',
-  'Syrian Arab Republic',
-  'Taiwan, Province of China',
-  'Tajikistan',
-  'Tanzania, United Republic of',
-  'United States of America',
-  'Thailand',
-  'Togo',
-  'Tokelau',
-  'Tonga',
-  'Trinidad and Tobago',
-  'Tunisia',
-  'Turkey',
-  'Turkmenistan',
-  'Turks and Caicos Islands',
-  'Tuvalu',
-  'Uganda',
-  'Ukraine',
-  'United Arab Emirates',
-  'United Kingdom',
-  'United States',
-  'United States Minor Outlying Islands',
-  'Uruguay',
-  'Uzbekistan',
-  'Vanuatu',
-  'Venezuela',
-  'Vietnam',
-  'Virgin Islands (British)',
-  'Virgin Islands (U.S.)',
-  'Wallis and Futuna Islands',
-  'Western Sahara',
-  'Yemen',
-  'Yugoslavia',
-  'Zambia',
-  'Zimbabwe',
-]

src/pages/admin/forms/form-elements/FormElements.vue

@@ -1,330 +0,0 @@
-<template>
-  <div class="form-elements">
-    <div class="row">
-      <div class="flex xs12">
-        <va-card>
-          <va-card-title>{{ t('forms.inputs.title') }}</va-card-title>
-          <va-card-content>
-            <form>
-              <div class="row">
-                <div class="flex md4 sm6 xs12">
-                  <va-input v-model="simple" placeholder="Text Input" />
-                </div>
-                <div class="flex md4 sm6 xs12">
-                  <va-input v-model="withIcon" placeholder="Input With Icon">
-                    <template #prepend>
-                      <va-icon color="gray" name="envelope" />
-                    </template>
-                  </va-input>
-                </div>
-                <div class="flex md4 sm6 xs12">
-                  <va-input v-model="withButton" placeholder="Input With Button">
-                    <template #append>
-                      <va-button style="margin-right: 0" small> UPLOAD </va-button>
-                    </template>
-                  </va-input>
-                </div>
-                <div class="flex md4 sm6 xs12">
-                  <va-input v-model="successfulEmail" type="email" label="Email (Validated with success)" success>
-                  </va-input>
-                </div>
-                <div class="flex md4 sm6 xs12">
-                  <va-input v-model="clearableText" placeholder="Input With Clear Button" clearable />
-                </div>
-                <div class="flex md4 sm6 xs12">
-                  <va-input
-                    v-model="wrongEmail"
-                    type="email"
-                    label="Email (Validated)"
-                    error
-                    :error-messages="errorMessages"
-                  >
-                  </va-input>
-                </div>
-                <div class="flex md4 sm6 xs12">
-                  <va-input
-                    v-model="withDescription"
-                    placeholder="Text Input (with description)"
-                    :messages="messages"
-                  />
-                </div>
-              </div>
-            </form>
-          </va-card-content>
-        </va-card>
-      </div>
-
-      <div class="flex xs12">
-        <va-card>
-          <va-card-title>{{ t('forms.dateTimePicker.title') }}</va-card-title>
-          <va-card-content>
-            <form>
-              <div class="row">
-                <div class="flex md4 sm6 xs12">
-                  <va-date-input v-model="dateInput.simple" :label="t('forms.dateTimePicker.basic')" />
-                </div>
-                <div class="flex md4 sm6 xs12">
-                  <va-date-input
-                    v-model="dateInput.simple"
-                    :label="t('forms.dateTimePicker.manualInput')"
-                    manual-input
-                  />
-                </div>
-                <div class="flex md4 sm6 xs12">
-                  <va-date-input v-model="dateInput.disabled" :label="t('forms.dateTimePicker.disabled')" disabled />
-                </div>
-                <div class="flex md4 sm6 xs12">
-                  <va-date-input
-                    v-model="dateInput.multiple"
-                    :label="t('forms.dateTimePicker.multiple')"
-                    mode="multiple"
-                    clearable
-                  />
-                </div>
-                <div class="flex md4 sm6 xs12">
-                  <va-date-input
-                    v-model="dateInput.range"
-                    :label="t('forms.dateTimePicker.range')"
-                    mode="range"
-                    clearable
-                  />
-                </div>
-                <div class="flex md4 sm6 xs12">
-                  <va-date-input
-                    v-model="dateInput.simple"
-                    :label="t('forms.dateTimePicker.customFirstDay')"
-                    first-weekday="Monday"
-                    highlight-weekend
-                  />
-                </div>
-              </div>
-            </form>
-          </va-card-content>
-          <va-divider />
-          <va-card-content>
-            <form>
-              <div class="row">
-                <div class="flex md4 sm6 xs12">
-                  <va-time-input v-model="dateInput.simple" :label="t('forms.dateTimePicker.basic')" />
-                </div>
-                <div class="flex md4 sm6 xs12">
-                  <va-time-input
-                    v-model="dateInput.simple"
-                    :label="t('forms.dateTimePicker.manualInput')"
-                    manual-input
-                  />
-                </div>
-                <div class="flex md4 sm6 xs12">
-                  <va-time-input v-model="dateInput.simple" :label="t('forms.dateTimePicker.disabled')" disabled />
-                </div>
-              </div>
-            </form>
-          </va-card-content>
-        </va-card>
-      </div>
-
-      <div class="flex xs12">
-        <va-card>
-          <va-card-title>{{ t('forms.selects.title') }}</va-card-title>
-          <va-card-content>
-            <form>
-              <div class="row">
-                <div class="flex md6 xs12">
-                  <va-select
-                    v-model="simpleSelectModel"
-                    :label="t('forms.selects.simple')"
-                    text-by="description"
-                    track-by="id"
-                    :options="simpleOptions"
-                  />
-                </div>
-                <div class="flex md6 xs12">
-                  <va-select
-                    v-model="multiSelectModel"
-                    :label="t('forms.selects.multi')"
-                    text-by="description"
-                    track-by="id"
-                    multiple
-                    :options="simpleOptions"
-                  />
-                </div>
-                <div class="flex md6 xs12">
-                  <va-select v-model="chosenCountry" :label="t('forms.selects.country')" :options="countriesList" />
-                </div>
-                <div class="flex md6 xs12">
-                  <va-select
-                    v-model="multiSelectCountriesModel"
-                    :label="t('forms.selects.countryMulti')"
-                    multiple
-                    :options="countriesList"
-                  />
-                </div>
-                <div class="flex md6 xs12">
-                  <va-select
-                    v-model="searchableSelectModel"
-                    :label="t('forms.selects.searchable')"
-                    searchable
-                    text-by="description"
-                    track-by="id"
-                    :options="simpleOptions"
-                  />
-                </div>
-                <div class="flex md6 xs12">
-                  <va-select
-                    v-model="multiSearchableSelectModel"
-                    :label="t('forms.selects.searchableMulti')"
-                    text-by="description"
-                    searchable
-                    multiple
-                    :options="countriesList"
-                  />
-                </div>
-              </div>
-            </form>
-          </va-card-content>
-        </va-card>
-      </div>
-
-      <div class="flex xs12">
-        <va-card>
-          <va-card-title>{{ t('forms.controls.title') }}</va-card-title>
-          <va-card-content>
-            <form>
-              <div class="row">
-                <div class="flex md6 xs12">
-                  <fieldset>
-                    <va-checkbox v-model="checkbox.unselected" :label="t('forms.controls.unselected')" class="mb-2" />
-                    <va-checkbox v-model="checkbox.selected" :label="t('forms.controls.selected')" class="mb-2" />
-                    <va-checkbox
-                      v-model="checkbox.readonly"
-                      :label="t('forms.controls.readonly')"
-                      readonly
-                      class="mb-2"
-                    />
-                    <va-checkbox
-                      v-model="checkbox.disabled"
-                      :label="t('forms.controls.disabled')"
-                      disabled
-                      class="mb-2"
-                    />
-                    <va-checkbox v-model="checkbox.error" :label="t('forms.controls.error')" error class="mb-2" />
-                    <va-checkbox
-                      v-model="checkbox.errorMessages"
-                      :label="t('forms.controls.errorMessage')"
-                      error
-                      :error-messages="errorMessages"
-                      :error-count="2"
-                    />
-                  </fieldset>
-                </div>
-                <div class="flex md6 xs12">
-                  <fieldset>
-                    <va-radio v-model="radioSelectedOption" option="option1" label="Radio-1" />
-                    <va-radio v-model="radioSelectedOption" option="option2" label="Radio-2" />
-                  </fieldset>
-                  <fieldset>
-                    <va-radio v-model="radioSelectedDisableOption" option="option1" disabled label="Disabled Radio-1" />
-                    <va-radio v-model="radioSelectedDisableOption" option="option2" disabled label="Disabled Radio-2" />
-                  </fieldset>
-                </div>
-                <div class="flex">
-                  <fieldset>
-                    <va-switch v-model="toggles.selected" label="Selected toggle" class="mr-4 mb-2" />
-                    <va-switch v-model="toggles.unselected" label="Unselected toggle" class="mr-4 mb-2" />
-                  </fieldset>
-                  <fieldset>
-                    <va-switch v-model="toggles.disabled" disabled label="Disabled toggle" class="mr-4 mb-2" />
-                    <va-switch v-model="toggles.disabled" readonly label="Readonly toggle" class="mr-4 mb-2" />
-                  </fieldset>
-                  <fieldset>
-                    <va-switch v-model="toggles.small" size="small" label="Small toggle" class="mr-4 mb-2" />
-                    <va-switch v-model="toggles.large" size="large" label="Large toggle" class="mr-4 mb-2" />
-                  </fieldset>
-                </div>
-              </div>
-            </form>
-          </va-card-content>
-        </va-card>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-  import { ref } from 'vue'
-  import CountriesList from '../data/CountriesList'
-  import { useI18n } from 'vue-i18n'
-  const { t } = useI18n()
-
-  const countriesList = ref(CountriesList)
-  const chosenCountry = ref('')
-  const simple = ref('')
-  const withIcon = ref('')
-  const withButton = ref('')
-  const withDescription = ref('')
-  const clearableText = ref('Vasili Savitski')
-  const successfulEmail = ref('andrei@dreamsupport.io')
-  const wrongEmail = ref('andrei@dreamsupport')
-  const messages = ref([
-    'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor ' +
-      'incididunt ut labore et dolore magna aliqua.',
-  ])
-  const errorMessages = ref(['Field should contain a valid email'])
-  const simpleOptions = ref([
-    {
-      id: 1,
-      description: 'First option',
-    },
-    {
-      id: 2,
-      description: 'Second option',
-    },
-    {
-      id: 3,
-      description: 'Third option',
-    },
-  ])
-
-  const simpleSelectModel = ref('')
-  const multiSelectModel = ref([])
-  const multiSelectCountriesModel = ref([])
-  const searchableSelectModel = ref('')
-  const multiSearchableSelectModel = ref([])
-  const radioSelectedOption = ref('option1')
-  const radioSelectedDisableOption = ref('option1')
-  const checkbox = ref({
-    unselected: false,
-    selected: true,
-    readonly: true,
-    disabled: true,
-    error: false,
-    errorMessages: true,
-  })
-
-  const toggles = ref({
-    unselected: false,
-    selected: true,
-    disabled: true,
-    small: false,
-    large: false,
-  })
-
-  const datePlusDay = (date: Date, days: number) => {
-    const d = new Date(date)
-    d.setDate(d.getDate() + days)
-    return d
-  }
-
-  const dateInput = ref({
-    simple: new Date(),
-    disabled: '2018-05-09',
-    range: { start: new Date(), end: datePlusDay(new Date(), 7) },
-    multiple: ['2018-04-25', '2018-04-27'],
-  })
-</script>
-
-<style lang="scss" scoped>
-  fieldset {
-    margin-bottom: 0.5rem;
-  }
-</style>