38 lines
1.2 KiB
JavaScript
38 lines
1.2 KiB
JavaScript
import { formatCoin, formatPercent } from "../utils/format.js";
|
|
import { FourMetricRow } from "./MiniStat.jsx";
|
|
import { Panel } from "./Panel.jsx";
|
|
|
|
export function GameEconomyPanel({ gameMetrics, gameRanking }) {
|
|
return (
|
|
<Panel title="游戏经济">
|
|
<FourMetricRow items={gameMetrics} />
|
|
<GameRankTable items={gameRanking} />
|
|
</Panel>
|
|
);
|
|
}
|
|
|
|
function GameRankTable({ items }) {
|
|
const max = Math.max(...items.map((item) => item.turnover_coin), 1);
|
|
const total = items.reduce((sum, item) => sum + item.turnover_coin, 0) || 1;
|
|
return (
|
|
<div className="game-table">
|
|
<div className="game-table-head">
|
|
<span>游戏流水排行</span>
|
|
<span>流水 (USD)</span>
|
|
<span>占比</span>
|
|
</div>
|
|
{items.map((item, index) => (
|
|
<div className="game-row" key={`${item.platform_code || "game"}-${item.game_id}`}>
|
|
<span>{index + 1}</span>
|
|
<em>{item.game_id || "-"}</em>
|
|
<div className="bar-track">
|
|
<i style={{ width: `${Math.max(5, (item.turnover_coin / max) * 100)}%` }} />
|
|
</div>
|
|
<b>{formatCoin(item.turnover_coin)}</b>
|
|
<strong>{formatPercent(item.turnover_coin / total)}</strong>
|
|
</div>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|