[update] x-axis change unit

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

@@ -1,6 +1,17 @@
 <template>
   <slideout v-model="show" :show-mask="false" :arrow-button="false" :title="title" :size="'30%'" dock="left" resizable>
     <div>
+      <div class="mt-2 mx-1 grid grid-cols-6 items-center">
+        <div>
+          <p>Unit</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>Boundry</p>
@@ -58,17 +69,14 @@
   import { ref, computed } from 'vue'
   import { useChartStore } from '@/stores/data-analysis/chart'
 
-  const leftBoundryInput = ref('')
-  const rightBoundryInput = ref('')
-  const maxInput = ref('')
-  const minInput = ref('')
-  const intervalInput = ref('')
-  const splitNumber = ref(5)
+  /* init definition */
+  const title = 'X-Axis'
   const chartStore = useChartStore()
   const chartIndex = 0
-  const xAxisManager = chartStore.chartManager.children[chartIndex].xAxisManager
-  const title = 'X-Axis'
+  const xAxisManager = computed(() => chartStore.chartManager.children[chartIndex].xAxisManager)
+  // const xAxisIndex = 0
 
+  /* slideout show */
   const show = computed({
     // getter
     get() {
@@ -80,45 +88,69 @@
     },
   })
 
-  const setBoundry = function () {
-    if (leftBoundryInput.value === '' || rightBoundryInput.value === '') return
-    xAxisManager.setBoundry([leftBoundryInput.value, rightBoundryInput.value])
+  /**  axis setting */
+
+  /* unit */
+  const unitObj = computed(() => xAxisManager.value.getUnit())
+  const unitOption = computed(() =>
+    Object.keys(unitObj.value.option).map((ele) => {
+      return { label: ele, value: ele }
+    }),
+  )
+
+  const changeUnit = function (_unit: string) {
+    unitObj.value.scale = unitObj.value.option[_unit]
   }
 
+  /* boundry */
+  const leftBoundryInput = ref('')
+  const rightBoundryInput = ref('')
+
+  const setBoundry = function () {
+    if (leftBoundryInput.value === '' || rightBoundryInput.value === '') return
+    xAxisManager.value.setBoundry([leftBoundryInput.value, rightBoundryInput.value])
+  }
   const resetBoundry = function () {
     leftBoundryInput.value = ''
     rightBoundryInput.value = ''
-    xAxisManager.resetBoundry()
+    xAxisManager.value.resetBoundry()
   }
 
+  /* max & min */
+  const maxInput = ref('')
+  const minInput = ref('')
+
   const setMax = function (max: string) {
     if (max === '') return
-    xAxisManager.setMax(max)
+    xAxisManager.value.setMax(max)
   }
-
   const setMin = function (min: string) {
     if (min === '') return
-    xAxisManager.setMin(min)
+    xAxisManager.value.setMin(min)
   }
-
   const resetMinMax = function () {
     maxInput.value = ''
     minInput.value = ''
-    xAxisManager.resetMinMax()
+    xAxisManager.value.resetMinMax()
   }
 
+  /* interval */
+  const intervalInput = ref('')
+
   const setInterval = function (interval: number) {
     if (interval <= 0) return
-    xAxisManager.setInterval(interval)
+    xAxisManager.value.setInterval(interval)
   }
-
   const resetInterval = function () {
     intervalInput.value = ''
-    xAxisManager.resetInterval()
+    xAxisManager.value.resetInterval()
   }
 
+  /* splitLine */
+  const splitNumber = ref(5)
+
   const setSplitNumber = function (splitNumber: number) {
-    xAxisManager.setSplitNumber(splitNumber)
+    xAxisManager.value.setSplitNumber(splitNumber)
   }
 </script>
 <style></style>

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

@@ -73,6 +73,16 @@
       chart.seriesManager.addSeries({ id: meta.id, name: meta.name })
     }
 
+    /* set x-axis name */
+    chart.xAxisManager.setName(channelStore.xAxisSelected.name)
+
+    /* set x-axis label */
+    chart.xAxisManager.setAxisLabel({
+      text: channelStore.xAxisSelected.defaultUnit,
+      scale: channelStore.xAxisSelected.unit[channelStore.xAxisSelected.defaultUnit],
+      option: channelStore.xAxisSelected.unit,
+    })
+
     emit('filter-data', {
       mode: simpleSelectModel.value.id,
       data_id: fileView.selectedFiles.map((ele: any) => ele.idType),

src/stores/data-analysis/channel.ts

@@ -3,7 +3,7 @@ import { defineStore } from 'pinia'
 interface AxisType {
   id: number
   name: string
-  unit: object
+  unit: Record<string, never>
   defaultUnit: string
   downloadUnit: string
 }

src/utils/chart/x-axis/xAxis.ts

@@ -15,17 +15,14 @@ interface xAxisOption {
   scale?: boolean
   axisLine?: XAXisComponentOption['axisLine']
   axisTick?: XAXisComponentOption['axisTick']
-  axisLabel: XAXisComponentOption['axisLabel'] & { scale: number; unit: string }
+  axisLabel: XAXisComponentOption['axisLabel']
   splitLine?: XAXisComponentOption['splitLine']
   min?: XAXisComponentOption['min']
   max?: XAXisComponentOption['max']
-  unitOption: string[]
+  unit: { text: string; scale: number; option: Record<string, never> }
 }
 
-interface xAxis extends xAxisOption {
-  axisLabelUnit: string
-  axisLabelScale: number
-}
+interface xAxis extends xAxisOption {}
 class xAxis {
   constructor() {
     // this.id = undefined
@@ -36,16 +33,18 @@ class xAxis {
     this.gridIndex = 0
     this.axisLine = {}
     this.axisLabel = {
-      unit: '',
-      scale: 1,
-      formatter: (value: string) => `${Number(value) / this.axisLabel.scale} ${this.axisLabel.unit}`,
+      formatter: (value: string) => `${Number(value) / this.unit.scale} ${this.unit.text}`,
     }
     this.axisTick = {}
     this.splitLine = {}
     this.boundaryGap = undefined
     this.min = undefined
     this.max = undefined
-    this.unitOption = []
+    this.unit = {
+      text: '',
+      scale: 1,
+      option: {},
+    }
   }
 }
 

src/utils/chart/x-axis/xAxisManager.ts

@@ -29,12 +29,13 @@ class XAxisManager {
     this.children[idx].name = name
   }
 
-  setAxisLabel(option: { unit?: string; scale?: number }, idx = 0) {
-    const { unit, scale } = option
-    const axisLabel = this.children[idx].axisLabel
+  setAxisLabel(inputOption: { text?: string; scale?: number; option: Record<string, never> }, idx = 0) {
+    const { text, scale, option } = inputOption
+    const xAxis = this.children[idx]
 
-    if (unit) axisLabel.unit = unit
-    if (scale) axisLabel.scale = scale
+    if (text) xAxis.unit.text = text
+    if (scale) xAxis.unit.scale = scale
+    if (option) xAxis.unit.option = option
   }
 
   setBoundry(boundaryGap: [number | string, number | string], idx = 0) {
@@ -69,6 +70,10 @@ class XAxisManager {
   setSplitNumber(splitNumber: number, idx = 0) {
     this.children[idx].splitNumber = splitNumber
   }
+
+  getUnit(idx = 0) {
+    return this.children[idx].unit
+  }
 }
 
 export { XAxisManager }