feat(webui): support command chart, fix #252

packages/plugin-webui/client/views/home/command-chart.vue

@@ -0,0 +1,32 @@
+<template>
+  <k-card class="frameless" title="指令调用频率">
+    <k-chart v-if="Object.keys(stats.commands).length" :option="option" autoresize/>
+    <p v-else>暂无数据。</p>
+  </k-card>
+</template>
+
+<script lang="ts" setup>
+
+import { stats } from '~/client'
+import { computed } from 'vue'
+
+const option = computed(() => ({
+  tooltip: {
+    trigger: 'item',
+    formatter({ data }) {
+      const output = [data.name]
+      output.push(`日均调用：${data.value}`)
+      return output.join('<br>')
+    },
+  },
+  series: [{
+    type: 'pie',
+    data: Object.entries(stats.value.commands)
+      .sort((a, b) => b[1] - a[1])
+      .map(([name, value]) => ({ name, value })),
+    radius: ['35%', '65%'],
+    minShowLabelAngle: 3,
+  }],
+}))
+
+</script>

packages/plugin-webui/client/views/home/home.vue

@@ -31,13 +31,15 @@
     <history-chart/>
     <hour-chart/>
     <group-chart/>
+    <command-chart/>
   </div>
 </template>
 
 <script setup lang="ts">
 
 import { computed } from 'vue'
 import { stats, profile, meta } from '~/client'
+import CommandChart from './command-chart.vue'
 import GroupChart from './group-chart.vue'
 import HistoryChart from './history-chart.vue'
 import HourChart from './hour-chart.vue'