Merge remote-tracking branch 'origin/dev/file_modal' into 10-test

src/components/data-analysis/ChartContainer.vue

@@ -1,62 +0,0 @@
-<template>
-  <div>
-    <va-card class="h-full">
-      <va-card-content class="h-full w-full">
-        <EChart ref="chart_ref" :option="option" :autoresize="true" />
-      </va-card-content>
-    </va-card>
-  </div>
-</template>
-<script lang="ts">
-  import { ref, onMounted } from 'vue'
-
-  export default {
-    setup() {
-      const option = ref({
-        title: {
-          text: 'Traffic Sources',
-          left: 'center',
-        },
-        tooltip: {
-          trigger: 'item',
-          formatter: '{a} <br/>{b} : {c} ({d}%)',
-        },
-        legend: {
-          orient: 'vertical',
-          left: 'left',
-          data: ['Direct', 'Email', 'Ad Networks', 'Video Ads', 'Search Engines'],
-        },
-        series: [
-          {
-            name: 'Traffic Sources',
-            type: 'pie',
-            radius: '55%',
-            center: ['50%', '60%'],
-            data: [
-              { value: 335, name: 'Direct' },
-              { value: 310, name: 'Email' },
-              { value: 234, name: 'Ad Networks' },
-              { value: 135, name: 'Video Ads' },
-              { value: 1548, name: 'Search Engines' },
-            ],
-            emphasis: {
-              itemStyle: {
-                shadowBlur: 10,
-                shadowOffsetX: 0,
-                shadowColor: 'rgba(0, 0, 0, 0.5)',
-              },
-            },
-          },
-        ],
-      })
-
-      const chart_ref = ref<HTMLElement | null>(null)
-      onMounted(() => {
-        console.log(chart_ref.value)
-      })
-
-      return { option, chart_ref }
-    },
-  }
-</script>
-<style lang=""></style>

src/components/data-analysis/ControlPanel.vue

@@ -33,53 +33,62 @@
     </va-card>
   </div>
 </template>
-<script lang="ts">
+<script setup lang="ts">
   import { useChannelStore } from '@/stores/data-analysis/channel'
   import { useFileViewStore } from '@/stores/data-analysis/file-view'
-  import { ref } from 'vue'
+  import { Ref, ref, defineEmits, defineExpose } 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: 'V-T Mode',
-        },
-        {
-          id: 2,
-          description: '1st Order Differential',
-        },
-        {
-          id: 3,
-          description: 'Third option',
-        },
-      ])
-      const filterData = function () {
-        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 },
-        })
-      }
+  // define emit
+  // const emit = defineEmits({
+  //   'filter-data': ({ mode, data_id, data_channel, data }) => {
+  //     return { mode, data_id, data_channel, data }
+  //   },
+  // })
+  const emit = defineEmits(['filter-data'])
 
-      return { channel, fileView, props, simpleSelectModel, simpleOptions, VTModeModel, slopModeModel, filterData }
+  const channel = useChannelStore()
+  const fileView = useFileViewStore()
+  const VTModeModel = ref(10)
+  const slopModeModel = ref(20)
+  const simpleSelectModel: Ref<{ id: number; description: string } | Record<string, never>> = ref({})
+  const simpleOptions = ref([
+    {
+      id: 1,
+      description: 'V-T Mode',
     },
+    {
+      id: 2,
+      description: '1st Order Differential',
+    },
+    {
+      id: 3,
+      description: 'Third option',
+    },
+  ])
+  const filterData = function () {
+    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 },
+  })
+
+  defineExpose({
+    simpleSelectModel,
+    simpleOptions,
+    VTModeModel,
+    slopModeModel,
+    filterData,
+  })
 </script>
 <style lang=""></style>

src/components/data-analysis/FileContainer.vue

@@ -2,9 +2,9 @@
   <va-card class="">
     <div class="h-200px">
       <va-button @click="showModal">FILE</va-button>
-      <p>{{ channel.xAxis }}</p>
-      <p>{{ channel.yAxis }}</p>
-      <p>{{ fileView.filesSelected }}</p>
+      <p>Meta: {{ fileView.filesSelected }}</p>
+      <p>X: {{ channel.xAxis }}</p>
+      <p>Y: {{ channel.yAxis }}</p>
       <Suspense>
         <FileModal ref="file_modal_ref"></FileModal>
       </Suspense>
@@ -14,14 +14,14 @@
 
 <script setup lang="ts">
   import { ref } from 'vue'
-  import FileModal from '@/components/data-analysis/FileModal.vue'
   import { useChannelStore } from '@/stores/data-analysis/channel'
   import { useFileViewStore } from '@/stores/data-analysis/file-view'
+  import FileModal from '@/components/data-analysis/FileModal.vue'
 
   const channel = useChannelStore()
   const fileView = useFileViewStore()
 
-  // file modal control
+  /* File Modal Handling */
   let file_modal_ref = ref<InstanceType<typeof FileModal> | null>(null)
   const showModal = function () {
     file_modal_ref.value?.showModal()

src/components/data-analysis/FileModal.vue

@@ -81,7 +81,7 @@
 
   // filter function
   const customFilterMethod = computed(() => {
-    return (node: Project | MetaFile, filterText: string, key: string) => {
+    return (node: Project | MetaFile, filterText: string) => {
       // console.log('customFilterMethod', node, filterText, key, node.name.includes(filterText))
       return node.name.includes(filterText)
     }

src/stores/data-analysis/channel.ts

@@ -1,7 +1,20 @@
 import { defineStore } from 'pinia'
 
+interface AxisType {
+  id: number
+  name: string
+  unit: object
+  defaultUnit: string
+  downloadUnit: string
+}
+
+interface ChannelState {
+  xAxis: AxisType | Record<string, never>
+  yAxis: AxisType | Record<string, never>
+}
+
 export const useChannelStore = defineStore('data-analysis-channel', {
-  state: () => ({
+  state: (): ChannelState => ({
     xAxis: {},
     yAxis: {},
   }),