fix(databi): separate game trend and detail navigation
This commit is contained in:
parent
231437f0fb
commit
e04aa7ed2f
@ -2,6 +2,7 @@
|
|||||||
// 数据契约见 SocialBiApp.jsx 的 useSocialBi();本视图只做展示与聚合,不直接调 API。
|
// 数据契约见 SocialBiApp.jsx 的 useSocialBi();本视图只做展示与聚合,不直接调 API。
|
||||||
|
|
||||||
import { useMemo, useState } from "react";
|
import { useMemo, useState } from "react";
|
||||||
|
import Button from "@mui/material/Button";
|
||||||
import { EChart } from "../../charts/EChart.jsx";
|
import { EChart } from "../../charts/EChart.jsx";
|
||||||
import { deltaDirection, formatCount, formatDeltaRate, formatMoney, isBlank } from "../format.js";
|
import { deltaDirection, formatCount, formatDeltaRate, formatMoney, isBlank } from "../format.js";
|
||||||
import { aggregateMetricMaps, appColor, formatMetric, metricChartValue, metricLabel, metricTooltip } from "../metrics.js";
|
import { aggregateMetricMaps, appColor, formatMetric, metricChartValue, metricLabel, metricTooltip } from "../metrics.js";
|
||||||
@ -22,7 +23,8 @@ const TREND_METRICS = [
|
|||||||
{ key: "recharge_usd_minor", label: "充值" },
|
{ key: "recharge_usd_minor", label: "充值" },
|
||||||
{ key: "new_users", label: "新增" },
|
{ key: "new_users", label: "新增" },
|
||||||
{ key: "active_users", label: "日活" },
|
{ key: "active_users", label: "日活" },
|
||||||
{ key: "gift_coin_spent", label: "礼物流水" }
|
{ key: "gift_coin_spent", label: "礼物流水" },
|
||||||
|
{ key: "game_turnover", label: "游戏流水" }
|
||||||
];
|
];
|
||||||
|
|
||||||
const COMPARE_METRICS = [
|
const COMPARE_METRICS = [
|
||||||
@ -332,26 +334,31 @@ export function OverviewView() {
|
|||||||
<strong>{trendLabel}趋势</strong>
|
<strong>{trendLabel}趋势</strong>
|
||||||
<small>按 App 堆叠</small>
|
<small>按 App 堆叠</small>
|
||||||
<div className="sbi-card-toolbar">
|
<div className="sbi-card-toolbar">
|
||||||
<div className="sbi-seg" role="group" aria-label="趋势指标与明细入口">
|
{trendMetric === "game_turnover" ? (
|
||||||
|
// 游戏流水先留在概览中展示趋势,只有用户明确点击明细入口时才切换到数据需求视图。
|
||||||
|
<Button
|
||||||
|
onClick={() => openRequirementSection("game")}
|
||||||
|
size="small"
|
||||||
|
title="进入数据需求中的游戏数据明细"
|
||||||
|
variant="outlined"
|
||||||
|
>
|
||||||
|
查看明细
|
||||||
|
</Button>
|
||||||
|
) : null}
|
||||||
|
<div className="sbi-seg" role="radiogroup" aria-label="趋势指标">
|
||||||
{TREND_METRICS.map((item) => (
|
{TREND_METRICS.map((item) => (
|
||||||
<button
|
<button
|
||||||
aria-pressed={trendMetric === item.key}
|
aria-checked={trendMetric === item.key}
|
||||||
className={trendMetric === item.key ? "is-active" : ""}
|
className={trendMetric === item.key ? "is-active" : ""}
|
||||||
key={item.key}
|
key={item.key}
|
||||||
onClick={() => setTrendMetric(item.key)}
|
onClick={() => setTrendMetric(item.key)}
|
||||||
|
role="radio"
|
||||||
title={metricTooltip(item.key)}
|
title={metricTooltip(item.key)}
|
||||||
type="button"
|
type="button"
|
||||||
>
|
>
|
||||||
{item.label}
|
{item.label}
|
||||||
</button>
|
</button>
|
||||||
))}
|
))}
|
||||||
<button
|
|
||||||
onClick={() => openRequirementSection("game")}
|
|
||||||
title="查看数据需求中的游戏数据"
|
|
||||||
type="button"
|
|
||||||
>
|
|
||||||
游戏流水
|
|
||||||
</button>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user