后台数据可视化：Recharts 漏斗图、总览页 KPI 卡片和缓存饼图

2026-05-18 20:53:27 +08:00
parent e12d935cde
commit a9d71c18aa
7 changed files with 681 additions and 39 deletions
@@ -0,0 +1,10 @@
+import type { Metadata } from "next";
+import { requireOpsAdmin } from "@/lib/ops-admin";
+import { OverviewPageClient } from "@/components/ops/overview/OverviewPageClient";
+
+export const metadata: Metadata = { title: "总览 — PolyWeather Ops" };
+
+export default async function OverviewPage() {
+  await requireOpsAdmin("/ops/overview");
+  return <OverviewPageClient />;
+}
@@ -1,5 +1,5 @@
 import { redirect } from "next/navigation";

 export default function OpsPage() {
-  redirect("/ops/system");
+  redirect("/ops/overview");
 }
@@ -5,6 +5,16 @@ import { RefreshCcw } from "lucide-react";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
 import { opsApi } from "@/lib/ops-api";
+import {
+  BarChart,
+  Bar,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  ResponsiveContainer,
+  Cell,
+} from "recharts";

 type FunnelStep = { label: string; count: number; pct_of_prev?: number };

@@ -17,14 +27,19 @@ export function AnalyticsPageClient() {
    setLoading(true);
    try {
      const data = await opsApi.funnel(days);
-      const steps = (data as unknown as { steps?: FunnelStep[] }).steps ?? [];
-      setFunnel(steps);
+      setFunnel((data as unknown as { steps?: FunnelStep[] }).steps ?? []);
    } catch { /* */ }
    setLoading(false);
  };

  useEffect(() => { void load(); }, [days]);

+  const chartData = [...funnel].reverse().map((s) => ({
+    name: s.label,
+    count: s.count,
+    pct: s.pct_of_prev,
+  }));
+
  const maxCount = Math.max(...funnel.map((s) => s.count), 1);

  if (loading) return <div className="text-slate-400 animate-pulse">加载中...</div>;
@@ -50,34 +65,100 @@ export function AnalyticsPageClient() {
        </div>
      </div>

+      {/* Summary cards */}
+      {funnel.length > 0 && (
+        <div className="grid grid-cols-2 sm:grid-cols-4 gap-3">
+          <Card>
+            <CardContent className="p-4">
+              <div className="text-xs text-slate-500">总注册</div>
+              <div className="text-xl font-bold text-white">{funnel[0]?.count ?? 0}</div>
+            </CardContent>
+          </Card>
+          <Card>
+            <CardContent className="p-4">
+              <div className="text-xs text-slate-500">点击付费</div>
+              <div className="text-xl font-bold text-cyan-400">{funnel[2]?.count ?? 0}</div>
+            </CardContent>
+          </Card>
+          <Card>
+            <CardContent className="p-4">
+              <div className="text-xs text-slate-500">发起支付</div>
+              <div className="text-xl font-bold text-amber-400">{funnel[4]?.count ?? 0}</div>
+            </CardContent>
+          </Card>
+          <Card>
+            <CardContent className="p-4">
+              <div className="text-xs text-slate-500">支付成功</div>
+              <div className="text-xl font-bold text-emerald-400">{funnel[5]?.count ?? 0}</div>
+              <div className="text-xs text-slate-500 mt-0.5">
+                总体转化 {maxCount > 0 ? `${((funnel[5]?.count ?? 0) / maxCount * 100).toFixed(1)}%` : "—"}
+              </div>
+            </CardContent>
+          </Card>
+        </div>
+      )}
+
+      {/* Funnel chart */}
      <Card>
-        <CardHeader><CardTitle>用户转化漏斗</CardTitle></CardHeader>
+        <CardHeader><CardTitle>转化漏斗 (Recharts)</CardTitle></CardHeader>
        <CardContent>
-          <div className="space-y-4">
-            {funnel.map((step, i) => {
-              const pct = (step.count / maxCount) * 100;
-              const prevPct = step.pct_of_prev != null ? `${step.pct_of_prev}%` : "—";
-              return (
-                <div key={i}>
-                  <div className="flex justify-between text-sm mb-1">
-                    <span className="text-slate-300">{step.label}</span>
-                    <span className="text-slate-400">
-                      <span className="text-white font-bold">{step.count}</span>
-                      <span className="ml-2 text-xs">转化 {prevPct}</span>
-                    </span>
-                  </div>
-                  <div className="h-6 w-full rounded-full bg-white/5 overflow-hidden">
-                    <div
-                      className="h-full rounded-full bg-gradient-to-r from-cyan-500 to-blue-500 transition-all duration-500"
-                      style={{ width: `${Math.max(pct, 2)}%` }}
-                    />
-                  </div>
-                </div>
-              );
-            })}
-            {funnel.length === 0 && (
-              <p className="text-slate-500 text-sm py-4 text-center">暂无数据</p>
-            )}
+          {chartData.length === 0 ? (
+            <p className="text-slate-500 text-sm py-8 text-center">暂无数据</p>
+          ) : (
+            <ResponsiveContainer width="100%" height={chartData.length * 60 + 40}>
+              <BarChart
+                data={chartData}
+                layout="vertical"
+                margin={{ top: 5, right: 40, left: 140, bottom: 5 }}
+              >
+                <CartesianGrid strokeDasharray="3 3" stroke="rgba(255,255,255,0.05)" />
+                <XAxis type="number" stroke="rgba(255,255,255,0.3)" tick={{ fill: "#94a3b8", fontSize: 12 }} />
+                <YAxis type="category" dataKey="name" stroke="rgba(255,255,255,0.3)" tick={{ fill: "#e2e8f0", fontSize: 13 }} width={130} />
+                <Tooltip
+                  contentStyle={{ background: "#1e293b", border: "1px solid rgba(255,255,255,0.1)", borderRadius: 8, color: "#e2e8f0" }}
+                  formatter={(value) => [`${value} 人`, "数量"]}
+                />
+                <Bar dataKey="count" radius={[0, 6, 6, 0]}>
+                  {chartData.map((_, i) => {
+                    const colors = ["#06b6d4", "#0ea5e9", "#6366f1", "#f59e0b", "#22c55e", "#10b981"];
+                    return <Cell key={i} fill={colors[i % colors.length]} />;
+                  })}
+                </Bar>
+              </BarChart>
+            </ResponsiveContainer>
+          )}
+        </CardContent>
+      </Card>
+
+      {/* Drop-off table */}
+      <Card>
+        <CardHeader><CardTitle>各阶段详情</CardTitle></CardHeader>
+        <CardContent>
+          <div className="overflow-x-auto">
+            <table className="w-full text-sm">
+              <thead>
+                <tr className="border-b border-white/10 text-left text-slate-400">
+                  <th className="py-2 px-3 font-medium">阶段</th>
+                  <th className="py-2 px-3 font-medium text-right">人数</th>
+                  <th className="py-2 px-3 font-medium text-right">转化率</th>
+                  <th className="py-2 px-3 font-medium text-right">流失率</th>
+                </tr>
+              </thead>
+              <tbody>
+                {funnel.map((step, i) => {
+                  const pct = step.pct_of_prev;
+                  const dropPct = pct != null ? 100 - pct : 0;
+                  return (
+                    <tr key={i} className="border-b border-white/5">
+                      <td className="py-2 px-3 text-white">{step.label}</td>
+                      <td className="py-2 px-3 text-right font-mono text-white">{step.count}</td>
+                      <td className="py-2 px-3 text-right text-emerald-400">{pct != null ? `${pct}%` : "—"}</td>
+                      <td className="py-2 px-3 text-right text-amber-400">{i > 0 ? `${dropPct}%` : "—"}</td>
+                    </tr>
+                  );
+                })}
+              </tbody>
+            </table>
          </div>
        </CardContent>
      </Card>
@@ -20,6 +20,7 @@ const navGroups = [
  {
    label: "监控",
    items: [
+      { href: "/ops/overview", icon: LayoutDashboard, label: "总览" },
      { href: "/ops/system", icon: Cpu, label: "系统状态" },
      { href: "/ops/training", icon: Database, label: "训练数据" },
      { href: "/ops/analytics", icon: BarChart3, label: "转化分析" },
@@ -0,0 +1,175 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { RefreshCcw, TrendingUp, Users, CreditCard, Database, Activity } from "lucide-react";
+import { Card, CardContent } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { opsApi } from "@/lib/ops-api";
+import Link from "next/link";
+import type { SystemStatusPayload, MembershipsPayload, FunnelPayload } from "@/types/ops";
+import {
+  PieChart, Pie, Cell, ResponsiveContainer, Tooltip,
+} from "recharts";
+
+export function OverviewPageClient() {
+  const [loading, setLoading] = useState(true);
+  const [status, setStatus] = useState<SystemStatusPayload | null>(null);
+  const [memberships, setMemberships] = useState<MembershipsPayload | null>(null);
+  const [funnel, setFunnel] = useState<FunnelPayload | null>(null);
+
+  const load = async () => {
+    setLoading(true);
+    try {
+      const [s, m, f] = await Promise.all([
+        opsApi.systemStatus() as Promise<SystemStatusPayload>,
+        opsApi.memberships() as Promise<MembershipsPayload>,
+        opsApi.funnel(7) as Promise<FunnelPayload>,
+      ]);
+      setStatus(s);
+      setMemberships(m);
+      setFunnel(f);
+    } catch { /* */ }
+    setLoading(false);
+  };
+
+  useEffect(() => { void load(); }, []);
+
+  if (loading) return <div className="text-slate-400 animate-pulse">加载中...</div>;
+
+  const cacheAnalysis = status?.cache?.analysis;
+  const cacheData = cacheAnalysis ? [
+    { name: "命中", value: cacheAnalysis.cache_hits ?? 0, color: "#22c55e" },
+    { name: "未命中", value: cacheAnalysis.cache_misses ?? 0, color: "#f59e0b" },
+    { name: "强制刷新", value: cacheAnalysis.force_refresh_requests ?? 0, color: "#3b82f6" },
+  ].filter((d) => d.value > 0) : [];
+
+  const mems = memberships?.memberships ?? [];
+  const paid = mems.filter((m) => !(m as Record<string, unknown>).is_trial).length;
+  const trials = mems.filter((m) => (m as Record<string, unknown>).is_trial).length;
+
+  const steps = funnel?.steps ?? [];
+  const totalUsers = steps[0]?.count ?? 0;
+  const payingUsers = steps[5]?.count ?? 0;
+  const convRate = totalUsers > 0 ? ((payingUsers / totalUsers) * 100).toFixed(1) : "—";
+
+  return (
+    <div className="space-y-6">
+      <div className="flex items-center justify-between">
+        <h1 className="text-2xl font-bold text-white">总览</h1>
+        <Button variant="outline" size="sm" onClick={load} className="gap-1.5">
+          <RefreshCcw className="h-3.5 w-3.5" /> 刷新
+        </Button>
+      </div>
+
+      {/* KPI cards */}
+      <div className="grid grid-cols-2 lg:grid-cols-5 gap-3">
+        <Link href="/ops/system" className="block">
+          <Card className="hover:bg-white/[0.03] transition-colors cursor-pointer">
+            <CardContent className="p-4">
+              <div className="flex items-center gap-2 mb-2">
+                <Activity className={`h-4 w-4 ${status?.db?.ok ? "text-emerald-400" : "text-red-400"}`} />
+                <span className="text-xs text-slate-500">系统状态</span>
+              </div>
+              <div className="text-lg font-bold text-white">{status?.db?.ok ? "OK" : "—"}</div>
+            </CardContent>
+          </Card>
+        </Link>
+        <Link href="/ops/memberships" className="block">
+          <Card className="hover:bg-white/[0.03] transition-colors cursor-pointer">
+            <CardContent className="p-4">
+              <div className="flex items-center gap-2 mb-2">
+                <Users className="h-4 w-4 text-cyan-400" />
+                <span className="text-xs text-slate-500">付费会员</span>
+              </div>
+              <div className="text-lg font-bold text-cyan-400">{paid}</div>
+              {trials > 0 && <div className="text-xs text-slate-500 mt-0.5">体验 {trials}</div>}
+            </CardContent>
+          </Card>
+        </Link>
+        <Link href="/ops/payments" className="block">
+          <Card className="hover:bg-white/[0.03] transition-colors cursor-pointer">
+            <CardContent className="p-4">
+              <div className="flex items-center gap-2 mb-2">
+                <CreditCard className="h-4 w-4 text-emerald-400" />
+                <span className="text-xs text-slate-500">支付成功</span>
+              </div>
+              <div className="text-lg font-bold text-emerald-400">{payingUsers}</div>
+            </CardContent>
+          </Card>
+        </Link>
+        <Link href="/ops/analytics" className="block">
+          <Card className="hover:bg-white/[0.03] transition-colors cursor-pointer">
+            <CardContent className="p-4">
+              <div className="flex items-center gap-2 mb-2">
+                <TrendingUp className="h-4 w-4 text-blue-400" />
+                <span className="text-xs text-slate-500">转化率</span>
+              </div>
+              <div className="text-lg font-bold text-blue-400">{convRate}%</div>
+            </CardContent>
+          </Card>
+        </Link>
+        <Link href="/ops/training" className="block">
+          <Card className="hover:bg-white/[0.03] transition-colors cursor-pointer">
+            <CardContent className="p-4">
+              <div className="flex items-center gap-2 mb-2">
+                <Database className="h-4 w-4 text-purple-400" />
+                <span className="text-xs text-slate-500">训练数据</span>
+              </div>
+              <div className="text-lg font-bold text-purple-400">
+                {status?.training_data?.truth_records?.row_count ?? "—"}
+              </div>
+            </CardContent>
+          </Card>
+        </Link>
+      </div>
+
+      {/* Cache pie chart */}
+      {cacheData.length > 0 && (
+        <Card>
+          <CardContent className="p-6">
+            <h3 className="text-sm font-bold text-white mb-4">缓存命中率</h3>
+            <div className="flex items-center gap-6">
+              <div className="w-48 h-48">
+                <ResponsiveContainer>
+                  <PieChart>
+                    <Pie
+                      data={cacheData}
+                      cx="50%"
+                      cy="50%"
+                      innerRadius={48}
+                      outerRadius={80}
+                      paddingAngle={2}
+                      dataKey="value"
+                    >
+                      {cacheData.map((d, i) => (
+                        <Cell key={i} fill={d.color} />
+                      ))}
+                    </Pie>
+                    <Tooltip
+                      contentStyle={{ background: "#1e293b", border: "1px solid rgba(255,255,255,0.1)", borderRadius: 8, color: "#e2e8f0" }}
+                    />
+                  </PieChart>
+                </ResponsiveContainer>
+              </div>
+              <div className="space-y-2 text-sm">
+                {cacheData.map((d) => (
+                  <div key={d.name} className="flex items-center gap-2">
+                    <span className="w-3 h-3 rounded-full" style={{ backgroundColor: d.color }} />
+                    <span className="text-slate-400">{d.name}</span>
+                    <span className="text-white font-bold ml-2">{d.value}</span>
+                  </div>
+                ))}
+                {cacheAnalysis?.hit_rate != null && (
+                  <div className="pt-2 border-t border-white/10">
+                    <span className="text-slate-400">命中率 </span>
+                    <span className="text-emerald-400 font-bold">{(cacheAnalysis.hit_rate * 100).toFixed(1)}%</span>
+                  </div>
+                )}
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+      )}
+    </div>
+  );
+}
@@ -21,6 +21,7 @@
        "react": "^19.0.0",
        "react-dom": "^19.0.0",
        "react-leaflet": "^5.0.0",
+        "recharts": "^3.8.1",
        "tailwind-merge": "^3.3.0"
      },
      "devDependencies": {
@@ -370,6 +371,42 @@
        "react-dom": "^19.0.0"
      }
    },
+    "node_modules/@reduxjs/toolkit": {
+      "version": "2.12.0",
+      "resolved": "https://registry.npmmirror.com/@reduxjs/toolkit/-/toolkit-2.12.0.tgz",
+      "integrity": "sha512-KiT+RzZbp6mQET+Mg+h2c97+9j1sNflUxQkIHI7Yuzf6Peu+OYpmkn6nbHWmLLWj+1ZODUJFwGZ7gx3L9R9EOw==",
+      "license": "MIT",
+      "dependencies": {
+        "@standard-schema/spec": "^1.0.0",
+        "@standard-schema/utils": "^0.3.0",
+        "immer": "^11.0.0",
+        "redux": "^5.0.1",
+        "redux-thunk": "^3.1.0",
+        "reselect": "^5.1.0"
+      },
+      "peerDependencies": {
+        "react": "^16.9.0 || ^17.0.0 || ^18 || ^19",
+        "react-redux": "^7.2.1 || ^8.1.3 || ^9.0.0"
+      },
+      "peerDependenciesMeta": {
+        "react": {
+          "optional": true
+        },
+        "react-redux": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@reduxjs/toolkit/node_modules/immer": {
+      "version": "11.1.8",
+      "resolved": "https://registry.npmmirror.com/immer/-/immer-11.1.8.tgz",
+      "integrity": "sha512-/tbkHMW7y10Lx6i1crLjD4/OhNkRG+Fo7byZHtah0547nIeXYcpIXaUh0IAQY6gO5459qpGGYapcEOHtFXkIuA==",
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/immer"
+      }
+    },
    "node_modules/@reown/appkit": {
      "version": "1.8.17-wc-circular-dependencies-fix.0",
      "hasInstallScript": true,
@@ -1129,6 +1166,18 @@
        "url": "https://paulmillr.com/funding/"
      }
    },
+    "node_modules/@standard-schema/spec": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmmirror.com/@standard-schema/spec/-/spec-1.1.0.tgz",
+      "integrity": "sha512-l2aFy5jALhniG5HgqrD6jXLi/rUWrKvqN/qJx6yoJsgKhblVd+iqqU4RCXavm/jPityDo5TCvKMnpjKnOriy0w==",
+      "license": "MIT"
+    },
+    "node_modules/@standard-schema/utils": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmmirror.com/@standard-schema/utils/-/utils-0.3.0.tgz",
+      "integrity": "sha512-e7Mew686owMaPJVNNLs55PUvgz371nKgwsc4vxE49zsODpJEnxgxRo2y/OKrqueavXgZNMDVj3DdHFlaSAeU8g==",
+      "license": "MIT"
+    },
    "node_modules/@supabase/auth-js": {
      "version": "2.99.1",
      "license": "MIT",
@@ -1220,6 +1269,69 @@
      "version": "0.6.0",
      "license": "MIT"
    },
+    "node_modules/@types/d3-array": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmmirror.com/@types/d3-array/-/d3-array-3.2.2.tgz",
+      "integrity": "sha512-hOLWVbm7uRza0BYXpIIW5pxfrKe0W+D5lrFiAEYR+pb6w3N2SwSMaJbXdUfSEv+dT4MfHBLtn5js0LAWaO6otw==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-color": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmmirror.com/@types/d3-color/-/d3-color-3.1.3.tgz",
+      "integrity": "sha512-iO90scth9WAbmgv7ogoq57O9YpKmFBbmoEoCHDB2xMBY0+/KVrqAaCDyCE16dUspeOvIxFFRI+0sEtqDqy2b4A==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-ease": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmmirror.com/@types/d3-ease/-/d3-ease-3.0.2.tgz",
+      "integrity": "sha512-NcV1JjO5oDzoK26oMzbILE6HW7uVXOHLQvHshBUW4UMdZGfiY6v5BeQwh9a9tCzv+CeefZQHJt5SRgK154RtiA==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-interpolate": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmmirror.com/@types/d3-interpolate/-/d3-interpolate-3.0.4.tgz",
+      "integrity": "sha512-mgLPETlrpVV1YRJIglr4Ez47g7Yxjl1lj7YKsiMCb27VJH9W8NVM6Bb9d8kkpG/uAQS5AmbA48q2IAolKKo1MA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-color": "*"
+      }
+    },
+    "node_modules/@types/d3-path": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmmirror.com/@types/d3-path/-/d3-path-3.1.1.tgz",
+      "integrity": "sha512-VMZBYyQvbGmWyWVea0EHs/BwLgxc+MKi1zLDCONksozI4YJMcTt8ZEuIR4Sb1MMTE8MMW49v0IwI5+b7RmfWlg==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-scale": {
+      "version": "4.0.9",
+      "resolved": "https://registry.npmmirror.com/@types/d3-scale/-/d3-scale-4.0.9.tgz",
+      "integrity": "sha512-dLmtwB8zkAeO/juAMfnV+sItKjlsw2lKdZVVy6LRr0cBmegxSABiLEpGVmSJJ8O08i4+sGR6qQtb6WtuwJdvVw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-time": "*"
+      }
+    },
+    "node_modules/@types/d3-shape": {
+      "version": "3.1.8",
+      "resolved": "https://registry.npmmirror.com/@types/d3-shape/-/d3-shape-3.1.8.tgz",
+      "integrity": "sha512-lae0iWfcDeR7qt7rA88BNiqdvPS5pFVPpo5OfjElwNaT2yyekbM0C9vK+yqBqEmHr6lDkRnYNoTBYlAgJa7a4w==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-path": "*"
+      }
+    },
+    "node_modules/@types/d3-time": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmmirror.com/@types/d3-time/-/d3-time-3.0.4.tgz",
+      "integrity": "sha512-yuzZug1nkAAaBlBBikKZTgzCeA+k1uy4ZFwWANOfKw5z5LRhV0gNA7gNkKm7HoK+HRN0wX3EkxGk0fpbWhmB7g==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-timer": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmmirror.com/@types/d3-timer/-/d3-timer-3.0.2.tgz",
+      "integrity": "sha512-Ps3T8E8dZDam6fUyNiMkekK3XUsaUEik+idO9/YjPtfj2qruF8tFBXS7XhtE4iIXBLxhmLjP3SXpLhVf21I9Lw==",
+      "license": "MIT"
+    },
    "node_modules/@types/geojson": {
      "version": "7946.0.16",
      "dev": true,
@@ -1265,6 +1377,12 @@
      "version": "2.0.7",
      "license": "MIT"
    },
+    "node_modules/@types/use-sync-external-store": {
+      "version": "0.0.6",
+      "resolved": "https://registry.npmmirror.com/@types/use-sync-external-store/-/use-sync-external-store-0.0.6.tgz",
+      "integrity": "sha512-zFDAD+tlpf2r4asuHEj0XH6pY6i0g5NeAHPn+15wk3BV6JA69eERFXC1gyGThDkVa1zCyKr5jox1+2LbV/AMLg==",
+      "license": "MIT"
+    },
    "node_modules/@types/ws": {
      "version": "8.18.1",
      "license": "MIT",
@@ -2070,6 +2188,127 @@
      "devOptional": true,
      "license": "MIT"
    },
+    "node_modules/d3-array": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmmirror.com/d3-array/-/d3-array-3.2.4.tgz",
+      "integrity": "sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg==",
+      "license": "ISC",
+      "dependencies": {
+        "internmap": "1 - 2"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-color": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmmirror.com/d3-color/-/d3-color-3.1.0.tgz",
+      "integrity": "sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-ease": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmmirror.com/d3-ease/-/d3-ease-3.0.1.tgz",
+      "integrity": "sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-format": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmmirror.com/d3-format/-/d3-format-3.1.2.tgz",
+      "integrity": "sha512-AJDdYOdnyRDV5b6ArilzCPPwc1ejkHcoyFarqlPqT7zRYjhavcT3uSrqcMvsgh2CgoPbK3RCwyHaVyxYcP2Arg==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-interpolate": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmmirror.com/d3-interpolate/-/d3-interpolate-3.0.1.tgz",
+      "integrity": "sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-color": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-path": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmmirror.com/d3-path/-/d3-path-3.1.0.tgz",
+      "integrity": "sha512-p3KP5HCf/bvjBSSKuXid6Zqijx7wIfNW+J/maPs+iwR35at5JCbLUT0LzF1cnjbCHWhqzQTIN2Jpe8pRebIEFQ==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-scale": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmmirror.com/d3-scale/-/d3-scale-4.0.2.tgz",
+      "integrity": "sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-array": "2.10.0 - 3",
+        "d3-format": "1 - 3",
+        "d3-interpolate": "1.2.0 - 3",
+        "d3-time": "2.1.1 - 3",
+        "d3-time-format": "2 - 4"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-shape": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmmirror.com/d3-shape/-/d3-shape-3.2.0.tgz",
+      "integrity": "sha512-SaLBuwGm3MOViRq2ABk3eLoxwZELpH6zhl3FbAoJ7Vm1gofKx6El1Ib5z23NUEhF9AsGl7y+dzLe5Cw2AArGTA==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-path": "^3.1.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-time": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmmirror.com/d3-time/-/d3-time-3.1.0.tgz",
+      "integrity": "sha512-VqKjzBLejbSMT4IgbmVgDjpkYrNWUYJnbCGo874u7MMKIWsILRX+OpX/gTk8MqjpT1A/c6HY2dCA77ZN0lkQ2Q==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-array": "2 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-time-format": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmmirror.com/d3-time-format/-/d3-time-format-4.1.0.tgz",
+      "integrity": "sha512-dJxPBlzC7NugB2PDLwo9Q8JiTR3M3e4/XANkreKSUxF8vvXKqm1Yfq4Q5dl8budlunRVlUUaDUgFt7eA8D6NLg==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-time": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-timer": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmmirror.com/d3-timer/-/d3-timer-3.0.1.tgz",
+      "integrity": "sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
    "node_modules/dayjs": {
      "version": "1.11.13",
      "license": "MIT"
@@ -2081,6 +2320,12 @@
        "node": ">=0.10.0"
      }
    },
+    "node_modules/decimal.js-light": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmmirror.com/decimal.js-light/-/decimal.js-light-2.5.1.tgz",
+      "integrity": "sha512-qIMFpTMZmny+MMIitAB6D7iVPEorVw6YQRWkvarTkT4tBeSLLiHzcwj6q0MmYSFCiVpiqPJTJEYIrpcPzVEIvg==",
+      "license": "MIT"
+    },
    "node_modules/defu": {
      "version": "6.1.4",
      "license": "MIT"
@@ -2305,6 +2550,25 @@
      ],
      "license": "BSD-3-Clause"
    },
+    "node_modules/immer": {
+      "version": "10.2.0",
+      "resolved": "https://registry.npmmirror.com/immer/-/immer-10.2.0.tgz",
+      "integrity": "sha512-d/+XTN3zfODyjr89gM3mPq1WNX2B8pYsu7eORitdwyA2sBubnTl3laYlBk4sXY5FUa5qTZGBDPJICVbvqzjlbw==",
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/immer"
+      }
+    },
+    "node_modules/internmap": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmmirror.com/internmap/-/internmap-2.0.3.tgz",
+      "integrity": "sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
    "node_modules/iron-webcrypto": {
      "version": "1.2.1",
      "license": "MIT",
@@ -2615,16 +2879,6 @@
      "version": "1.6.7",
      "license": "MIT"
    },
-    "node_modules/node-gyp-build": {
-      "version": "4.8.4",
-      "license": "MIT",
-      "optional": true,
-      "bin": {
-        "node-gyp-build": "bin.js",
-        "node-gyp-build-optional": "optional.js",
-        "node-gyp-build-test": "build-test.js"
-      }
-    },
    "node_modules/node-mock-http": {
      "version": "1.0.4",
      "license": "MIT"
@@ -3041,6 +3295,13 @@
        "react": "^19.2.4"
      }
    },
+    "node_modules/react-is": {
+      "version": "19.2.6",
+      "resolved": "https://registry.npmmirror.com/react-is/-/react-is-19.2.6.tgz",
+      "integrity": "sha512-XjBR15BhXuylgWGuslhDKqlSayuqvqBX91BP8pauG8kd1zY8kotkNWbXksTCNRarse4kuGbe2kIY05ARtwNIvw==",
+      "license": "MIT",
+      "peer": true
+    },
    "node_modules/react-leaflet": {
      "version": "5.0.0",
      "license": "Hippocratic-2.1",
@@ -3053,6 +3314,30 @@
        "react-dom": "^19.0.0"
      }
    },
+    "node_modules/react-redux": {
+      "version": "9.3.0",
+      "resolved": "https://registry.npmmirror.com/react-redux/-/react-redux-9.3.0.tgz",
+      "integrity": "sha512-KQopgqFo/p/fgmAs5qz6p5RWaNAzq40WAu7fJIXnQpYxFPbJYtsJPWvGeF2rOBaY/kEuV77AVsX8TsQzKm+A/g==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@types/use-sync-external-store": "^0.0.6",
+        "use-sync-external-store": "^1.4.0"
+      },
+      "peerDependencies": {
+        "@types/react": "^18.2.25 || ^19",
+        "react": "^18.0 || ^19",
+        "redux": "^5.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "redux": {
+          "optional": true
+        }
+      }
+    },
    "node_modules/read-cache": {
      "version": "1.0.0",
      "dev": true,
@@ -3079,6 +3364,52 @@
        "node": ">= 12.13.0"
      }
    },
+    "node_modules/recharts": {
+      "version": "3.8.1",
+      "resolved": "https://registry.npmmirror.com/recharts/-/recharts-3.8.1.tgz",
+      "integrity": "sha512-mwzmO1s9sFL0TduUpwndxCUNoXsBw3u3E/0+A+cLcrSfQitSG62L32N69GhqUrrT5qKcAE3pCGVINC6pqkBBQg==",
+      "license": "MIT",
+      "workspaces": [
+        "www"
+      ],
+      "dependencies": {
+        "@reduxjs/toolkit": "^1.9.0 || 2.x.x",
+        "clsx": "^2.1.1",
+        "decimal.js-light": "^2.5.1",
+        "es-toolkit": "^1.39.3",
+        "eventemitter3": "^5.0.1",
+        "immer": "^10.1.1",
+        "react-redux": "8.x.x || 9.x.x",
+        "reselect": "5.1.1",
+        "tiny-invariant": "^1.3.3",
+        "use-sync-external-store": "^1.2.2",
+        "victory-vendor": "^37.0.2"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-is": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/redux": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmmirror.com/redux/-/redux-5.0.1.tgz",
+      "integrity": "sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w==",
+      "license": "MIT",
+      "peer": true
+    },
+    "node_modules/redux-thunk": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmmirror.com/redux-thunk/-/redux-thunk-3.1.0.tgz",
+      "integrity": "sha512-NW2r5T6ksUKXCabzhL9z+h206HQw/NJkcLm1GPImRQ8IzfXwRGqjVhKJGauHirT0DAuyy6hjdnMZaRoAcy0Klw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "redux": "^5.0.0"
+      }
+    },
    "node_modules/require-directory": {
      "version": "2.1.1",
      "license": "MIT",
@@ -3090,6 +3421,12 @@
      "version": "2.0.0",
      "license": "ISC"
    },
+    "node_modules/reselect": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmmirror.com/reselect/-/reselect-5.1.1.tgz",
+      "integrity": "sha512-K/BG6eIky/SBpzfHZv/dd+9JBFiS4SWV7FIujVyJRux6e45+73RaUHXLmIR1f7WOMaQ0U1km6qwklRQxpJJY0w==",
+      "license": "MIT"
+    },
    "node_modules/resolve": {
      "version": "1.22.11",
      "dev": true,
@@ -3379,6 +3716,12 @@
        "real-require": "^0.2.0"
      }
    },
+    "node_modules/tiny-invariant": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmmirror.com/tiny-invariant/-/tiny-invariant-1.3.3.tgz",
+      "integrity": "sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg==",
+      "license": "MIT"
+    },
    "node_modules/tinyglobby": {
      "version": "0.2.15",
      "dev": true,
@@ -3625,6 +3968,15 @@
        "browserslist": ">= 4.21.0"
      }
    },
+    "node_modules/use-sync-external-store": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmmirror.com/use-sync-external-store/-/use-sync-external-store-1.6.0.tgz",
+      "integrity": "sha512-Pp6GSwGP/NrPIrxVFAIkOQeyw8lFenOHijQWkUTrDvrF4ALqylP2C/KCkeS9dpUM3KvYRQhna5vt7IL95+ZQ9w==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
    "node_modules/util-deprecate": {
      "version": "1.0.2",
      "dev": true,
@@ -3652,6 +4004,28 @@
        }
      }
    },
+    "node_modules/victory-vendor": {
+      "version": "37.3.6",
+      "resolved": "https://registry.npmmirror.com/victory-vendor/-/victory-vendor-37.3.6.tgz",
+      "integrity": "sha512-SbPDPdDBYp+5MJHhBCAyI7wKM3d5ivekigc2Dk2s7pgbZ9wIgIBYGVw4zGHBml/qTFbexrofXW6Gu4noGxrOwQ==",
+      "license": "MIT AND ISC",
+      "dependencies": {
+        "@types/d3-array": "^3.0.3",
+        "@types/d3-ease": "^3.0.0",
+        "@types/d3-interpolate": "^3.0.1",
+        "@types/d3-scale": "^4.0.2",
+        "@types/d3-shape": "^3.1.0",
+        "@types/d3-time": "^3.0.0",
+        "@types/d3-timer": "^3.0.0",
+        "d3-array": "^3.1.6",
+        "d3-ease": "^3.0.1",
+        "d3-interpolate": "^3.0.1",
+        "d3-scale": "^4.0.2",
+        "d3-shape": "^3.1.0",
+        "d3-time": "^3.0.0",
+        "d3-timer": "^3.0.1"
+      }
+    },
    "node_modules/viem": {
      "version": "2.47.2",
      "funding": [
@@ -24,6 +24,7 @@
    "react": "^19.0.0",
    "react-dom": "^19.0.0",
    "react-leaflet": "^5.0.0",
+    "recharts": "^3.8.1",
    "tailwind-merge": "^3.3.0"
  },
  "devDependencies": {