feat: add FPS range, device donut, and trust bar chart components

2026-04-26 15:47:13 +08:00
parent 20755fd0fe
commit 64cf13636c
3 changed files with 252 additions and 0 deletions
@@ -0,0 +1,75 @@
+"use client"
+
+import { useMemo } from "react"
+import { EChartWrapper, CHART_THEME, getDeviceColor } from "./EChartWrapper"
+import type { EChartsOption } from "echarts"
+
+interface DeviceEntry {
+  hardwareSlug: string
+  hardwareName: string
+  count: number
+}
+
+export function DeviceDonut({
+  data,
+  className,
+}: {
+  data: DeviceEntry[]
+  className?: string
+}) {
+  const option = useMemo<EChartsOption>(() => {
+    const total = data.reduce((sum, d) => sum + d.count, 0)
+
+    return {
+      tooltip: {
+        trigger: "item",
+        backgroundColor: "#1a1025",
+        borderColor: CHART_THEME.border,
+        textStyle: { color: CHART_THEME.text, fontSize: 12 },
+        formatter: "{b}: {c} ({d}%)",
+      },
+      series: [
+        {
+          type: "pie",
+          radius: ["50%", "75%"],
+          center: ["50%", "55%"],
+          avoidLabelOverlap: false,
+          itemStyle: {
+            borderRadius: 6,
+            borderColor: "#100b14",
+            borderWidth: 2,
+          },
+          label: {
+            show: true,
+            position: "center",
+            formatter: `{total|${total}}\n{label|entries}`,
+            rich: {
+              total: {
+                fontSize: 22,
+                fontWeight: "bold",
+                color: CHART_THEME.text,
+                lineHeight: 30,
+              },
+              label: {
+                fontSize: 11,
+                color: CHART_THEME.textMuted,
+              },
+            },
+          },
+          emphasis: {
+            label: { show: true },
+          },
+          data: data.map((d, idx) => ({
+            name: d.hardwareName,
+            value: d.count,
+            itemStyle: { color: getDeviceColor(idx) },
+          })),
+        },
+      ],
+    }
+  }, [data])
+
+  if (data.length === 0) return null
+
+  return <EChartWrapper option={option} height={220} className={className} />
+}