feat(ops): add rich analytics charts for overview, health, and payments pages

2026-05-20 09:48:12 +08:00
parent 4de009b401
commit 5e4070ad27
4 changed files with 181 additions and 23 deletions
@@ -4,6 +4,10 @@ import { useEffect, useState } from "react";
 import { RefreshCcw, CheckCircle2, XCircle, AlertTriangle } from "lucide-react";
 import { Card, CardContent } from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
+import {
+  BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip,
+  ResponsiveContainer, Cell,
+} from "recharts";

 type ServiceResult = { ok: boolean; status?: number; latency_ms?: number; error?: string };
 type HealthPayload = { ok: boolean; checked_at: string; services: Record<string, ServiceResult> };
@@ -70,6 +74,14 @@ export function HealthPageClient() {
  const services = Object.entries(data.services);
  const okCount = services.filter(([, v]) => v.ok).length;

+  const latencyData = services
+    .filter(([, svc]) => svc.ok && svc.latency_ms != null)
+    .map(([key, svc]) => ({
+      name: LABELS[key] || key,
+      latency: svc.latency_ms ?? 0,
+    }))
+    .sort((a, b) => a.latency - b.latency);
+
  return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
@@ -87,6 +99,35 @@ export function HealthPageClient() {
        </div>
      </div>

+      {latencyData.length > 0 && (
+        <Card className="border-slate-800 bg-slate-900/50">
+          <CardContent className="p-4">
+            <h3 className="text-sm font-semibold text-white mb-4">服务响应延迟对比 (ms)</h3>
+            <ResponsiveContainer width="100%" height={Math.max(160, latencyData.length * 28 + 40)}>
+              <BarChart
+                data={latencyData}
+                layout="vertical"
+                margin={{ top: 5, right: 30, left: 100, bottom: 5 }}
+              >
+                <CartesianGrid strokeDasharray="3 3" stroke="rgba(255,255,255,0.04)" />
+                <XAxis type="number" stroke="rgba(255,255,255,0.2)" tick={{ fill: "#64748b", fontSize: 10 }} />
+                <YAxis type="category" dataKey="name" stroke="rgba(255,255,255,0.2)" tick={{ fill: "#94a3b8", fontSize: 11 }} width={120} />
+                <Tooltip
+                  contentStyle={{ background: "#1e293b", border: "1px solid rgba(255,255,255,0.1)", borderRadius: 8, color: "#e2e8f0", fontSize: 12 }}
+                  formatter={(value) => [`${value} ms`, "延迟"]}
+                />
+                <Bar dataKey="latency" radius={[0, 4, 4, 0]}>
+                  {latencyData.map((d, i) => {
+                    const colors = ["#22c55e", "#10b981", "#14b8a6", "#06b6d4", "#0ea5e9", "#3b82f6", "#6366f1", "#8b5cf6", "#a855f7", "#d946ef", "#ec4899", "#f43f5e", "#ef4444"];
+                    return <Cell key={i} fill={colors[i % colors.length]} />;
+                  })}
+                </Bar>
+              </BarChart>
+            </ResponsiveContainer>
+          </CardContent>
+        </Card>
+      )}
+
      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">
        {services.map(([key, svc]) => (
          <Card key={key} className={svc.ok ? "border-emerald-400/20" : "border-red-400/30"}>
@@ -11,6 +11,7 @@ import type { SystemStatusPayload, MembershipsPayload, MembershipEntry } from "@
 import {
  PieChart, Pie, Cell, ResponsiveContainer, Tooltip,
  BarChart, Bar, XAxis, YAxis, CartesianGrid,
+  AreaChart, Area, Legend,
 } from "recharts";

 function KpiCard({ href, icon: Icon, label, value, color, sub }: {
@@ -37,18 +38,21 @@ export function OverviewPageClient() {
  const [status, setStatus] = useState<SystemStatusPayload | null>(null);
  const [memberships, setMemberships] = useState<MembershipEntry[]>([]);
  const [funnel, setFunnel] = useState<{ steps: { label: string; count: number; pct_of_prev?: number }[] } | null>(null);
+  const [growth, setGrowth] = useState<{ date: string; trial: number; paid: number; total: number; cumulative: number }[]>([]);

  const load = async () => {
    setLoading(true);
    try {
-      const [s, m, f] = await Promise.all([
+      const [s, m, f, g] = await Promise.all([
        opsApi.systemStatus() as Promise<SystemStatusPayload>,
        opsApi.memberships() as Promise<MembershipsPayload>,
        opsApi.funnel(30),
+        opsApi.membershipsGrowth(30),
      ]);
      setStatus(s);
      setMemberships((m as MembershipsPayload).memberships ?? []);
      setFunnel(f);
+      setGrowth(g?.daily ?? []);
    } catch { /* */ }
    setLoading(false);
  };
@@ -138,6 +142,54 @@ export function OverviewPageClient() {
        <KpiCard href="/ops/system" icon={Cpu} label="概率引擎" value={status?.probability?.engine_mode ?? "—"} color="text-amber-400" />
      </div>

+      {/* Membership Growth Trend */}
+      {growth.length > 0 && (
+        <Card>
+          <CardHeader className="pb-2">
+            <CardTitle className="text-sm">会员增长趋势 — 近 30 天</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+              {/* Cumulative area chart */}
+              <div>
+                <h4 className="text-xs text-slate-500 mb-2">累计会员</h4>
+                <ResponsiveContainer width="100%" height={160}>
+                  <AreaChart data={growth}>
+                    <defs>
+                      <linearGradient id="colorCumulative" x1="0" y1="0" x2="0" y2="1">
+                        <stop offset="5%" stopColor="#06b6d4" stopOpacity={0.2}/>
+                        <stop offset="95%" stopColor="#06b6d4" stopOpacity={0}/>
+                      </linearGradient>
+                    </defs>
+                    <CartesianGrid strokeDasharray="3 3" stroke="rgba(255,255,255,0.04)" />
+                    <XAxis dataKey="date" tick={{ fill: "#64748b", fontSize: 10 }} interval="preserveStartEnd" />
+                    <YAxis tick={{ fill: "#64748b", fontSize: 10 }} width={35} />
+                    <Tooltip contentStyle={{ background: "#1e293b", border: "1px solid rgba(255,255,255,0.1)", borderRadius: 8, color: "#e2e8f0", fontSize: 12 }} />
+                    <Area type="monotone" dataKey="cumulative" stroke="#06b6d4" fillOpacity={1} fill="url(#colorCumulative)" name="累计" />
+                  </AreaChart>
+                </ResponsiveContainer>
+              </div>
+
+              {/* Daily stack chart */}
+              <div>
+                <h4 className="text-xs text-slate-500 mb-2">每日新增</h4>
+                <ResponsiveContainer width="100%" height={160}>
+                  <AreaChart data={growth}>
+                    <CartesianGrid strokeDasharray="3 3" stroke="rgba(255,255,255,0.04)" />
+                    <XAxis dataKey="date" tick={{ fill: "#64748b", fontSize: 10 }} interval="preserveStartEnd" />
+                    <YAxis tick={{ fill: "#64748b", fontSize: 10 }} width={25} />
+                    <Tooltip contentStyle={{ background: "#1e293b", border: "1px solid rgba(255,255,255,0.1)", borderRadius: 8, color: "#e2e8f0", fontSize: 12 }} />
+                    <Legend wrapperStyle={{ fontSize: 11 }} />
+                    <Area type="monotone" dataKey="paid" stackId="1" stroke="#22c55e" fill="#22c55e40" name="付费" />
+                    <Area type="monotone" dataKey="trial" stackId="1" stroke="#f59e0b" fill="#f59e0b40" name="体验" />
+                  </AreaChart>
+                </ResponsiveContainer>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+      )}
+
      {/* Main grid: 2 columns */}
      <div className="grid grid-cols-1 lg:grid-cols-2 gap-5">

@@ -6,6 +6,9 @@ import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
 import { opsApi } from "@/lib/ops-api";
 import type { PaymentRuntimePayload, PaymentIncident } from "@/types/ops";
+import {
+  PieChart, Pie, Cell, ResponsiveContainer, Tooltip,
+} from "recharts";

 export function PaymentsPageClient() {
  const [loading, setLoading] = useState(true);
@@ -43,6 +46,19 @@ export function PaymentsPageClient() {

  if (loading) return <div className="text-slate-400 animate-pulse">加载中...</div>;

+  const reasonCounts: Record<string, number> = {};
+  incidents.forEach((inc) => {
+    const r = inc.reason || "unknown";
+    reasonCounts[r] = (reasonCounts[r] || 0) + 1;
+  });
+
+  const incidentPieData = Object.entries(reasonCounts).map(([name, value]) => ({
+    name,
+    value,
+  }));
+
+  const COLORS = ["#ef4444", "#f59e0b", "#3b82f6", "#10b981", "#a855f7", "#6366f1", "#ec4899"];
+
  return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
@@ -52,29 +68,72 @@ export function PaymentsPageClient() {
        </Button>
      </div>

-      <Card>
-        <CardHeader><CardTitle>支付运行时</CardTitle></CardHeader>
-        <CardContent>
-          <dl className="grid grid-cols-2 sm:grid-cols-3 gap-3 text-sm">
-            {runtime ? Object.entries({
-              chain_id: runtime.chain_id,
-              last_scanned_block: runtime.last_scanned_block,
-              audit_events_count: runtime.audit_events_count,
-            }).map(([k, v]) => (
-              <div key={k}>
-                <div className="text-slate-500 text-xs">{k}</div>
-                <div className="text-white font-mono">{String(v ?? "—")}</div>
+      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+        <Card className="lg:col-span-2">
+          <CardHeader><CardTitle>支付运行时</CardTitle></CardHeader>
+          <CardContent>
+            <dl className="grid grid-cols-2 sm:grid-cols-3 gap-3 text-sm">
+              {runtime ? Object.entries({
+                chain_id: runtime.chain_id,
+                last_scanned_block: runtime.last_scanned_block,
+                audit_events_count: runtime.audit_events_count,
+              }).map(([k, v]) => (
+                <div key={k}>
+                  <div className="text-slate-500 text-xs">{k}</div>
+                  <div className="text-white font-mono">{String(v ?? "—")}</div>
+                </div>
+              )) : <span className="text-slate-500">无数据</span>}
+            </dl>
+            {runtime?.receiver_contract ? (
+              <div className="mt-3">
+                <div className="text-slate-500 text-xs">receiver_contract</div>
+                <code className="text-xs text-blue-300 bg-black/40 rounded-lg px-2 py-1.5 block mt-1 truncate">{runtime.receiver_contract}</code>
              </div>
-            )) : <span className="text-slate-500">无数据</span>}
-          </dl>
-          {runtime?.receiver_contract ? (
-            <div className="mt-3">
-              <div className="text-slate-500 text-xs">receiver_contract</div>
-              <code className="text-xs text-blue-300 bg-black/40 rounded-lg px-2 py-1.5 block mt-1 truncate">{runtime.receiver_contract}</code>
-            </div>
-          ) : null}
-        </CardContent>
-      </Card>
+            ) : null}
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader><CardTitle>异常原因分布</CardTitle></CardHeader>
+          <CardContent className="h-[125px] flex items-center justify-center p-3">
+            {incidentPieData.length === 0 ? (
+              <span className="text-sm text-slate-500">暂无异常数据</span>
+            ) : (
+              <div className="w-full h-full flex items-center gap-2">
+                <div className="w-[100px] h-[100px] shrink-0">
+                  <ResponsiveContainer>
+                    <PieChart>
+                      <Pie
+                        data={incidentPieData}
+                        cx="50%"
+                        cy="50%"
+                        innerRadius={24}
+                        outerRadius={40}
+                        paddingAngle={2}
+                        dataKey="value"
+                      >
+                        {incidentPieData.map((d, i) => (
+                          <Cell key={i} fill={COLORS[i % COLORS.length]} />
+                        ))}
+                      </Pie>
+                      <Tooltip contentStyle={{ background: "#1e293b", border: "1px solid rgba(255,255,255,0.1)", borderRadius: 8, color: "#e2e8f0", fontSize: 11 }} />
+                    </PieChart>
+                  </ResponsiveContainer>
+                </div>
+                <div className="flex-1 space-y-1 overflow-y-auto max-h-[100px] text-xs">
+                  {incidentPieData.map((d, i) => (
+                    <div key={d.name} className="flex items-center gap-1.5 truncate">
+                      <span className="w-2 h-2 rounded-full shrink-0" style={{ backgroundColor: COLORS[i % COLORS.length] }} />
+                      <span className="text-slate-400 truncate" title={d.name}>{d.name}</span>
+                      <span className="text-white font-bold ml-auto">{d.value}</span>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            )}
+          </CardContent>
+        </Card>
+      </div>

      <Card>
        <CardHeader><CardTitle>支付异常 ({incidents.length})</CardTitle></CardHeader>
@@ -64,6 +64,12 @@ export const opsApi = {
  memberships() {
    return opsFetch<Record<string, unknown>>("/api/ops/memberships?limit=200");
  },
+  membershipsGrowth(days = 90) {
+    return opsFetch<{
+      days: number;
+      daily: { date: string; trial: number; paid: number; total: number; cumulative: number }[];
+    }>(`/api/ops/memberships/growth?days=${days}`);
+  },
  incidents(limit = 20, reason?: string) {
    const params = new URLSearchParams({ limit: String(limit) });
    if (reason) params.set("reason", reason);