diff --git a/package.json b/package.json
index 36f8420..96026d8 100644
--- a/package.json
+++ b/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"
   },
diff --git a/src/components/data-analysis/ControlPanel.vue b/src/components/data-analysis/ControlPanel.vue
index c454cbc..3f98374 100644
--- a/src/components/data-analysis/ControlPanel.vue
+++ b/src/components/data-analysis/ControlPanel.vue
@@ -4,13 +4,28 @@
       <va-card-content>
         <va-select
           v-model="simpleSelectModel"
-          :label="'Filter'"
+          :label="'Filter Mode'"
           text-by="description"
           track-by="id"
           :options="simpleOptions"
         />
+        <va-card-content>
+          <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>
+            <p>{{ channel.xAxis }}</p>
+            <p>{{ channel.yAxis }}</p>
+            <p>{{ fileView.filesSelected }}</p>
+          </div>
+        </va-card-content>
+
         <va-button class="mt-2" @click="filterData">Start</va-button>
-        <!-- <div v-if="simpleSelectModel.id === 1">
+        <!-- <div v-if="simpleSelectModel.id === 1"> 
           <va-button>test</va-button>
           <va-input></va-input>
         </div> -->
@@ -19,20 +34,26 @@
   </div>
 </template>
 <script lang="ts">
+  import { useChannelStore } from '@/stores/data-analysis/channel'
+  import { useFileViewStore } from '@/stores/data-analysis/file-view'
   import { ref } from 'vue'
 
   export default {
     emits: ['filter-data'],
     setup(props, { emit }) {
+      const channel = useChannelStore()
+      const fileView = useFileViewStore()
+      const VTModeModel = ref(10)
+      const slopModeModel = ref(20)
       const simpleSelectModel = ref({})
       const simpleOptions = ref([
         {
           id: 1,
-          description: 'First option',
+          description: 'V-T Mode',
         },
         {
           id: 2,
-          description: 'Second option',
+          description: '1st Order Differential',
         },
         {
           id: 3,
@@ -40,10 +61,24 @@
         },
       ])
       const filterData = function () {
-        emit('filter-data')
+        console.log(VTModeModel.value)
+        // switch(simpleSelectModel.value.id) {
+        //   case 1:
+        //     const return_data = { mode: 1, data_id: 166, data: { persentage: 0 } };
+        //   case 2:
+        //     const return_data = { mode: 2, data_id: 166, data: { persentage: 0 } };
+        //   default:
+        // }
+        // console.log(return_data)
+        emit('filter-data', {
+          mode: simpleSelectModel.value.id,
+          data_id: fileView.filesSelected,
+          data_channel: [channel.xAxis.id, channel.yAxis.id],
+          data: { persentage: VTModeModel.value, window: slopModeModel.value },
+        })
       }
 
-      return { props, simpleSelectModel, simpleOptions, filterData }
+      return { channel, fileView, props, simpleSelectModel, simpleOptions, VTModeModel, slopModeModel, filterData }
     },
   }
 </script>
diff --git a/src/pages/admin/data-analysis/DataAnalysis.vue b/src/pages/admin/data-analysis/DataAnalysis.vue
index 23c878c..3f28bd4 100644
--- a/src/pages/admin/data-analysis/DataAnalysis.vue
+++ b/src/pages/admin/data-analysis/DataAnalysis.vue
@@ -43,13 +43,19 @@
     // stop loading
     linechart_ref.value?.stopLoading()
 
+    // draw line
     // draw line
     if (msg.length < 3) return true
+    let yAxis_list = msg[2].map((x) => ({ yAxis: x }))
+    let coord_list = [{ coord: [msg[3][0][0], msg[3][0][1]] }, { coord: [msg[3][1][0], msg[3][1][1]] }]
+    // yAxis_list.append([{ coord:[ msg[3][0][0],msg[3][0][1]]},{ coord:[ msg[3][1][0], msg[3][1][1]]}])
+    yAxis_list.push(coord_list)
+    console.log('yAxis_list', yAxis_list)
     linechart_ref.value.setOption({
       series: [
         {
           markLine: {
-            data: [{ yAxis: msg[2] }, { yAxis: msg[3] }],
+            data: yAxis_list,
           },
         },
       ],
@@ -60,9 +66,11 @@
   const linechart_ref = ref()
 
   // ControlPanel handling
-  const filterData = function () {
+  const filterData = function (e: any) {
     linechart_ref.value?.startLoading()
-    publish(`${controllerID}_data_analysis/get_analysis_data`, JSON.stringify({}))
+    console.log(linechart_ref)
+    console.log(e)
+    publish(`${controllerID}_data_analysis/get_analysis_data`, JSON.stringify({ e }))
   }
 
   defineExpose({ linechart_ref, filterData })