From 78ad69caeaccdad8801c2026689f01e8fc540f44 Mon Sep 17 00:00:00 2001
From: Shigma <shigma10826@gmail.com>
Date: Sun, 17 Dec 2023 01:02:59 +0800
Subject: [PATCH] feat(status): show QPS card

---
 plugins/status/client/analytics.vue   | 25 +++++++++++++++++++++++++
 plugins/status/client/icons/index.ts  |  2 ++
 plugins/status/client/icons/pulse.vue |  5 +++++
 plugins/status/client/index.ts        |  6 ++++++
 4 files changed, 38 insertions(+)
 create mode 100644 plugins/status/client/analytics.vue
 create mode 100644 plugins/status/client/icons/pulse.vue

diff --git a/plugins/status/client/analytics.vue b/plugins/status/client/analytics.vue
new file mode 100644
index 00000000..84452ac8
--- /dev/null
+++ b/plugins/status/client/analytics.vue
@@ -0,0 +1,25 @@
+<template>
+  <analytic-number icon="analytic:pulse" title="当前 QPS">
+    <template #default>{{ current }}</template>
+    <template #footer-left>近期 QPS</template>
+    <template #footer-right>{{ +recent.toFixed(2) }}</template>
+  </analytic-number>
+</template>
+
+<script setup lang="ts">
+
+import { computed, inject } from 'vue'
+import { store } from '@koishijs/client'
+import {} from '@koishijs/plugin-analytics/src'
+
+const AnalyticNumber = inject('component:analytic-number')
+
+const current = computed(() => {
+  return Object.values(store.status.bots).reduce((acc, bot) => acc + bot.messageReceived, 0)
+})
+
+const recent = computed(() => {
+  return Object.values(store.analytics.messageByDate).slice(-7).reduce((acc, value) => acc + value.receive, 0) / 7 / 24 / 60 / 60
+})
+
+</script>
diff --git a/plugins/status/client/icons/index.ts b/plugins/status/client/icons/index.ts
index d15bae29..3e0275db 100644
--- a/plugins/status/client/icons/index.ts
+++ b/plugins/status/client/icons/index.ts
@@ -2,9 +2,11 @@ import { icons } from '@koishijs/client'
 import ArrowUp from './arrow-up.vue'
 import ArrowDown from './arrow-down.vue'
 import Platform from './platform.vue'
+import Pulse from './pulse.vue'
 import Robot from './robot.vue'
 
 icons.register('arrow-up', ArrowUp)
 icons.register('arrow-down', ArrowDown)
 icons.register('platform', Platform)
+icons.register('analytic:pulse', Pulse)
 icons.register('robot', Robot)
diff --git a/plugins/status/client/icons/pulse.vue b/plugins/status/client/icons/pulse.vue
new file mode 100644
index 00000000..bba0b609
--- /dev/null
+++ b/plugins/status/client/icons/pulse.vue
@@ -0,0 +1,5 @@
+<template>
+  <svg class="k-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512">
+    <path fill="currentColor" d="M640 240C640 248.8 632.8 256 624 256h-133.1l-60 150c-2.625 6.375-8.375 10.25-16 9.1C408 415.5 402.1 410.6 400.5 403.9l-78.75-315l-82 410.3C238.3 506.5 231.9 511.8 224.4 512H224c-7.25 0-13.75-5-15.5-12.12L147.5 256H16C7.201 256 0 248.8 0 240s7.201-15.1 16-15.1H160c7.375 0 13.75 4.993 15.5 12.12l46.75 187l82-410.3C305.8 5.5 312 .25 319.5 0c8.125 .125 14.25 4.875 16 12.12l84 336l45.63-114.1C467.5 228 473.5 224 480 224h144C632.8 224 640 231.2 640 240z"/>
+  </svg>
+</template>
\ No newline at end of file
diff --git a/plugins/status/client/index.ts b/plugins/status/client/index.ts
index 48dd1bbc..1feb40c6 100644
--- a/plugins/status/client/index.ts
+++ b/plugins/status/client/index.ts
@@ -2,6 +2,7 @@ import { defineExtension } from '@koishijs/client'
 import {} from '@koishijs/plugin-status/src'
 import Bots from './bots'
 import Load from './load'
+import Analytics from './analytics.vue'
 import EnvInfo from './envinfo.vue'
 import './icons'
 
@@ -13,4 +14,9 @@ export default defineExtension((ctx) => {
     type: 'status-left',
     component: EnvInfo,
   })
+
+  ctx.slot({
+    type: 'analytic-number',
+    component: Analytics,
+  })
 })