feat: charts animation

Zephyruso · Dec 5, 2024 · e7e555d · e7e555d
1 parent cd5c03d
commit e7e555d
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 7 deletions.
diff --git a/src/components/sidebar/SpeedCharts.vue b/src/components/sidebar/SpeedCharts.vue
@@ -79,7 +79,6 @@ onMounted(() => {
         },
         splitLine: { show: false },
       },
-      animation: false,
       series: [
         {
           name: t('upload'),

diff --git a/src/store/statistics.ts b/src/store/statistics.ts
@@ -1,19 +1,21 @@
 import { fetchMemoryAPI, fetchTrafficAPI } from '@/api'
 import { ref, watch } from 'vue'
 
+const initValue = new Array(60).fill(0).map((v, i) => ({ name: i, value: v }))
+
 export const memory = ref<number>(0)
 export const downloadSpeed = ref<number>(0)
 export const uploadSpeed = ref<number>(0)
-export const downloadSpeedHistory = ref<number[]>(new Array(60).fill(0))
-export const uploadSpeedHistory = ref<number[]>(new Array(60).fill(0))
+export const downloadSpeedHistory = ref([...initValue])
+export const uploadSpeedHistory = ref([...initValue])
 
 let cancel: () => void
 
 export const initSatistic = () => {
   cancel?.()
 
-  downloadSpeedHistory.value = new Array(60).fill(0)
-  uploadSpeedHistory.value = new Array(60).fill(0)
+  downloadSpeedHistory.value = [...initValue]
+  uploadSpeedHistory.value = [...initValue]
 
   const memoryWs = fetchMemoryAPI<string>()
   const unwatchMemory = watch(memoryWs.data, (data) => {
@@ -34,12 +36,19 @@ export const initSatistic = () => {
       up: number
       down: number
     }
+    const timestamp = Date.now().valueOf()
 
     downloadSpeed.value = parsedData.down
     uploadSpeed.value = parsedData.up
 
-    downloadSpeedHistory.value.push(parsedData.down)
-    uploadSpeedHistory.value.push(parsedData.up)
+    downloadSpeedHistory.value.push({
+      value: parsedData.down,
+      name: timestamp,
+    })
+    uploadSpeedHistory.value.push({
+      value: parsedData.up,
+      name: timestamp,
+    })
 
     downloadSpeedHistory.value = downloadSpeedHistory.value.slice(-60)
     uploadSpeedHistory.value = uploadSpeedHistory.value.slice(-60)