[update] create new page data analysis

src/components/data-analysis/ChartContainer.vue

@@ -0,0 +1,62 @@
+<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

@@ -0,0 +1,40 @@
+<template>
+  <div>
+    <va-card class="h-full">
+      <va-card-content>
+        <va-select
+          v-model="simpleSelectModel"
+          :label="'Filter'"
+          text-by="description"
+          track-by="id"
+          :options="simpleOptions"
+        />
+      </va-card-content>
+    </va-card>
+  </div>
+</template>
+<script lang="ts">
+  import { ref } from 'vue'
+  export default {
+    setup() {
+      const simpleSelectModel = ref('')
+      const simpleOptions = ref([
+        {
+          id: 1,
+          description: 'First option',
+        },
+        {
+          id: 2,
+          description: 'Second option',
+        },
+        {
+          id: 3,
+          description: 'Third option',
+        },
+      ])
+
+      return { simpleSelectModel, simpleOptions }
+    },
+  }
+</script>
+<style lang=""></style>

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

@@ -0,0 +1,31 @@
+<template>
+  <div class="h-[88vh] grid grid-cols-4 gap-6">
+    <ControlPanel class="h-full col-span-1"></ControlPanel>
+    <ChartContainer class="h-[50%] col-span-3"></ChartContainer>
+  </div>
+</template>
+
+<script lang="ts">
+  import useMqtt from '@/composables/utils/useMqtt'
+  import ControlPanel from '@/components/data-analysis/ControlPanel.vue'
+  import ChartContainer from '@/components/data-analysis/ChartContainer.vue'
+
+  export default {
+    components: {
+      ControlPanel,
+      ChartContainer,
+    },
+    setup() {
+      const { startMqtt } = useMqtt()
+
+      // startMqtt('b8:27:eb:18:f8:cc/+/#', (topic: string, message: ArrayBuffer) => {
+      //   const msg = JSON.parse(message.toString())
+      //   console.log('1', topic, msg)
+      // })
+
+      return {}
+    },
+  }
+</script>
+
+<style></style>

src/router/index.ts

@@ -22,6 +22,11 @@ const routes: Array<RouteRecordRaw> = [
         path: 'dashboard',
         component: () => import('../pages/admin/dashboard/Dashboard.vue'),
       },
+      {
+        name: 'data-analysis',
+        path: 'data-analysis',
+        component: () => import('../pages/admin/data-analysis/DataAnalysis.vue'),
+      },
       {
         name: 'statistics',
         path: 'statistics',