@@ -90,3 +119,7 @@ function formatRankMoney(value) {
}
return formatMoney(value);
}
+
+function hasRecharge(item) {
+ return Number(item?.recharge_usd_minor) > 0;
+}
diff --git a/databi/src/components/GlobeMap.jsx b/databi/src/components/GlobeMap.jsx
index e5a8a16..55d150a 100644
--- a/databi/src/components/GlobeMap.jsx
+++ b/databi/src/components/GlobeMap.jsx
@@ -16,6 +16,20 @@ export function GlobeMap({ items }) {
const [rotation, setRotation] = useState(INITIAL_ROTATION);
const [size, setSize] = useState({ height: 0, width: 0 });
const points = useMemo(() => normalizePoints(items), [items]);
+ const featuredPoint = points[0] || null;
+ const featuredTooltip = useMemo(() => pointTooltip(featuredPoint, size, rotation), [featuredPoint, rotation, size]);
+ const visibleTooltip = dragging ? null : hovered || featuredTooltip;
+
+ useEffect(() => {
+ if (!featuredPoint?.point) {
+ return;
+ }
+ setHovered(null);
+ setRotation({
+ lat: clamp(featuredPoint.point[1], -MAX_LATITUDE, MAX_LATITUDE),
+ lon: normalizeLongitude(featuredPoint.point[0])
+ });
+ }, [featuredPoint]);
useEffect(() => {
const element = wrapRef.current;
@@ -95,12 +109,12 @@ export function GlobeMap({ items }) {
role="img"
>
- {hovered ? (
-
-
{hovered.item.country}
-
充值 {formatMoney(hovered.item.value)}
-
活跃 {formatNumber(hovered.item.activeUsers)}
-
付费 {formatNumber(hovered.item.paidUsers)}
+ {visibleTooltip ? (
+
+ {visibleTooltip.item.country}
+ 充值 {formatMoney(visibleTooltip.item.value)}
+ 活跃 {formatNumber(visibleTooltip.item.activeUsers)}
+ 付费 {formatNumber(visibleTooltip.item.paidUsers)}
) : null}
@@ -237,34 +251,35 @@ function drawRoutes(context, points, rotation, cx, cy, radius) {
function drawPoints(context, points, rotation, cx, cy, radius) {
const max = Math.max(...points.map((item) => item.value), 1);
+ const min = Math.min(...points.map((item) => item.value), max);
for (const item of points) {
const point = project(item.point, rotation, cx, cy, radius);
if (!point) {
continue;
}
- const strength = Math.sqrt(item.value / max);
+ const strength = normalizeStrength(item.value, min, max);
const halo = 10 + strength * 24;
const core = 3.2 + strength * 5.4;
const glow = context.createRadialGradient(point.x, point.y, 1, point.x, point.y, halo);
- glow.addColorStop(0, "rgba(129, 252, 255, 0.86)");
- glow.addColorStop(0.2, "rgba(39, 228, 245, 0.42)");
- glow.addColorStop(1, "rgba(39, 228, 245, 0)");
+ glow.addColorStop(0, colorForStrength(strength, 0.92));
+ glow.addColorStop(0.25, colorForStrength(strength, 0.42));
+ glow.addColorStop(1, colorForStrength(strength, 0));
context.fillStyle = glow;
context.beginPath();
context.arc(point.x, point.y, halo, 0, Math.PI * 2);
context.fill();
- context.strokeStyle = "rgba(126, 252, 255, 0.42)";
+ context.strokeStyle = colorForStrength(strength, 0.62);
context.lineWidth = 1;
context.beginPath();
context.arc(point.x, point.y, core * 2.2, 0, Math.PI * 2);
context.stroke();
- context.fillStyle = "#35f0f3";
+ context.fillStyle = colorForStrength(strength, 1);
context.shadowBlur = 16;
- context.shadowColor = "rgba(53, 240, 243, 0.78)";
+ context.shadowColor = colorForStrength(strength, 0.82);
context.beginPath();
context.arc(point.x, point.y, core, 0, Math.PI * 2);
context.fill();
@@ -397,6 +412,7 @@ function project(coordinate, rotation, cx, cy, radius) {
function normalizePoints(items = []) {
return items
.filter((item) => Array.isArray(item.geo_point) && item.geo_point.length === 2)
+ .filter((item) => Number(item.recharge_usd_minor) > 0)
.map((item) => ({
activeUsers: Number(item.active_users) || 0,
country: item.country,
@@ -407,6 +423,24 @@ function normalizePoints(items = []) {
.sort((left, right) => right.value - left.value);
}
+function pointTooltip(item, size, rotation) {
+ if (!item || !size.width || !size.height) {
+ return null;
+ }
+ const cx = size.width / 2;
+ const cy = size.height / 2;
+ const radius = Math.max(1, Math.min(size.width * 0.48, size.height * 0.47));
+ const projected = project(item.point, rotation, cx, cy, radius);
+ if (!projected) {
+ return null;
+ }
+ return {
+ item,
+ x: clamp(projected.x + 14, 8, size.width - 136),
+ y: clamp(projected.y - 76, 8, size.height - 96)
+ };
+}
+
function findHoveredPoint(event, element, size, rotation, points) {
if (!element || !size.width || !size.height || !points.length) {
return null;
@@ -442,6 +476,24 @@ function findHoveredPoint(event, element, size, rotation, points) {
};
}
+function colorForStrength(strength, alpha = 1) {
+ const low = [66, 129, 255];
+ const mid = [39, 228, 245];
+ const high = [36, 215, 159];
+ const from = strength < 0.55 ? low : mid;
+ const to = strength < 0.55 ? mid : high;
+ const local = strength < 0.55 ? strength / 0.55 : (strength - 0.55) / 0.45;
+ const [red, green, blue] = from.map((channel, index) => Math.round(channel + (to[index] - channel) * local));
+ return `rgba(${red}, ${green}, ${blue}, ${alpha})`;
+}
+
+function normalizeStrength(value, min, max) {
+ if (max <= min) {
+ return 1;
+ }
+ return clamp((Math.sqrt(value) - Math.sqrt(min)) / (Math.sqrt(max) - Math.sqrt(min)), 0, 1);
+}
+
function extractRings(features = []) {
const rings = [];
diff --git a/databi/src/components/LuckyGiftPoolModal.jsx b/databi/src/components/LuckyGiftPoolModal.jsx
index d46649a..c4a1104 100644
--- a/databi/src/components/LuckyGiftPoolModal.jsx
+++ b/databi/src/components/LuckyGiftPoolModal.jsx
@@ -1,21 +1,60 @@
+import { useCallback, useEffect, useRef, useState } from "react";
import { formatCoin, formatPercent } from "../utils/format.js";
+const MODAL_TRANSITION_MS = 180;
+
export function LuckyGiftPoolModal({ items, onClose }) {
+ const [closing, setClosing] = useState(false);
+ const closeTimerRef = useRef(null);
const totals = items.reduce((summary, item) => ({
payout: summary.payout + item.payout,
profit: summary.profit + item.profit,
turnover: summary.turnover + item.turnover
}), { payout: 0, profit: 0, turnover: 0 });
+ const requestClose = useCallback(() => {
+ if (closing) {
+ return;
+ }
+ setClosing(true);
+ closeTimerRef.current = window.setTimeout(onClose, MODAL_TRANSITION_MS);
+ }, [closing, onClose]);
+
+ useEffect(() => () => {
+ if (closeTimerRef.current) {
+ window.clearTimeout(closeTimerRef.current);
+ }
+ }, []);
+
+ useEffect(() => {
+ const closeOnEscape = (event) => {
+ if (event.key === "Escape") {
+ requestClose();
+ }
+ };
+ window.addEventListener("keydown", closeOnEscape);
+ return () => window.removeEventListener("keydown", closeOnEscape);
+ }, [requestClose]);
+
return (
-
-
+
{
+ if (event.target === event.currentTarget) {
+ requestClose();
+ }
+ }}
+ >
+
diff --git a/databi/src/components/MetricCard.jsx b/databi/src/components/MetricCard.jsx
index e98c3d5..96af163 100644
--- a/databi/src/components/MetricCard.jsx
+++ b/databi/src/components/MetricCard.jsx
@@ -27,19 +27,77 @@ export function MetricCard({ item, loading = false, onClick }) {
}
} : undefined}
>
- {Icon ?
: null}
+ {Icon ? : null}
{item.label}
{UnitIcon ? : null}
{item.unit ? {item.unit} : null}
-
{item.value}
-
- {item.caption}
- {item.delta ? `${item.deltaTone === "down" ? "↓" : "↑"} ${item.delta.replace(/^[-+]/, "")}` : "--"}
-
+ {Array.isArray(item.subMetrics) && item.subMetrics.length ?
:
}
+
);
}
+
+function MetricMainValue({ item }) {
+ return (
+ <>
+ {item.value}
+
+
+ );
+}
+
+function MetricSubValues({ items }) {
+ return (
+
+ {items.map((subItem) => (
+
+ {subItem.label}
+ {subItem.value}
+
+
+ ))}
+
+ {item.caption}
+ {item.delta ? `${item.deltaTone === "down" ? "↓" : "↑"} ${item.delta.replace(/^[-+]/, "")}` : "--"}
+
+ );
+}
+
+function MetricSparkline({ series }) {
+ const lines = Array.isArray(series) ? series.filter((item) => Array.isArray(item.data) && item.data.length > 1) : [];
+ if (!lines.length) {
+ return ;
+ }
+ const values = lines.flatMap((line) => line.data.map((point) => Number(point.value) || 0));
+ const min = Math.min(...values);
+ const max = Math.max(...values);
+ return (
+
+ );
+}
+
+function sparklinePoints(points, min, max) {
+ const width = 100;
+ const height = 24;
+ const count = points.length;
+ return points.map((point, index) => {
+ const x = count <= 1 ? width : (index / (count - 1)) * width;
+ const normalized = max <= min ? 0.5 : ((Number(point.value) || 0) - min) / (max - min);
+ const y = height - normalized * 18 - 3;
+ return `${x.toFixed(2)},${y.toFixed(2)}`;
+ }).join(" ");
+}
diff --git a/databi/src/components/MetricTrendModal.jsx b/databi/src/components/MetricTrendModal.jsx
new file mode 100644
index 0000000..8265371
--- /dev/null
+++ b/databi/src/components/MetricTrendModal.jsx
@@ -0,0 +1,64 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import { EChart } from "../charts/EChart.jsx";
+import { createMetricTrendOption } from "../charts/options/createMetricTrendOption.js";
+
+const MODAL_TRANSITION_MS = 180;
+
+export function MetricTrendModal({ item, onClose }) {
+ const [closing, setClosing] = useState(false);
+ const closeTimerRef = useRef(null);
+ const requestClose = useCallback(() => {
+ if (closing) {
+ return;
+ }
+ setClosing(true);
+ closeTimerRef.current = window.setTimeout(onClose, MODAL_TRANSITION_MS);
+ }, [closing, onClose]);
+
+ useEffect(() => () => {
+ if (closeTimerRef.current) {
+ window.clearTimeout(closeTimerRef.current);
+ }
+ }, []);
+
+ useEffect(() => {
+ const closeOnEscape = (event) => {
+ if (event.key === "Escape") {
+ requestClose();
+ }
+ };
+ window.addEventListener("keydown", closeOnEscape);
+ return () => window.removeEventListener("keydown", closeOnEscape);
+ }, [requestClose]);
+
+ return (
+ {
+ if (event.target === event.currentTarget) {
+ requestClose();
+ }
+ }}
+ >
+
+
+
+
{item.label}
+ 每日折线图
+
+
+
+
+ {hasTrend(item) ?
:
暂无趋势数据
}
+
+