GitHub 开源数据看板深度对标与 VOC 经营看板实施建议

调研快照：2026-08-07
目标仓库：E:\workspace\Saas-voc
目标页面：/domestic/overview
证据范围：项目官方 GitHub 仓库、官方前端源码目录和官方文档。本文不以 Star 数代替产品判断。
结论标签：直接采用、调整后采用、暂缓。

1. 结论先行

当前页面已经具备经营看板的基本骨架：经营结论、数据口径、4 个 KPI、7 日趋势、类目贡献、经营诊断和 Top 10 商品表。但与成熟系统的差距，不只是“图表数量少”，而是以下四个结构性问题：

对比基线不成立：当前代码把 7 天序列拆成前 4 天和后 3 天，直接比较求和结果。不同长度周期的 GMV、件数和退款额不可直接环比，会系统性压低后半段表现。该逻辑同时影响 KPI 和“本期执行结论”。见 operating-overview.component.ts:317-351、:460-473。
首屏层级偏平：页面头、执行结论、口径说明、4 张 KPI 卡依次占据首屏，真正回答“哪里异常、为什么、下一步看什么”的分析内容出现较晚。
全局分析上下文不足：时间固定为 7 日，缺少平台、店铺、类目、商品、对比周期、数据更新时间、刷新和 URL 状态。用户看到的是一张静态快照，不是可复用的经营分析工作台。
数据状态不完整：模板只有成功渲染和 loading 分支。数据为空、部分成功、陈旧、请求错误会被混为“持续加载”或空图，降低可信度。见 operating-overview.component.ts:64-212。

本项目不应照搬某一个开源产品，而应组合其最成熟的机制：

Grafana 的全局时间、变量、刷新、状态与高密度表格
+ Superset 的语义指标、时间粒度、滚动值和真实基线比较
+ Metabase 的业务筛选、跨图点击与低学习成本钻取
+ OpenObserve 的部分/缓存/无数据/错误状态和依赖变量
+ Sentry 的异常优先、单卡放大、上下文探索与阈值
+ PostHog 的注释、日期覆盖规则和经营事件解释

最终目标不是“更多卡片”，而是提高决策密度：用户在首屏回答本期表现、相对基线、首要风险、影响对象和下一步入口；继续向下才查看归因、证据和完整排行。

2. 当前页面基线

2.1 已有能力

维度	当前实现	判断
页面摘要	页面标题、平台、日期范围、商品列表入口	基础上下文已具备，但占高偏大且不可筛选
经营结论	规则生成 GMV 与退款结论，提供风险语气	有价值，应压缩为首屏异常摘要而非独占大卡
数据口径	显示日明细行数、自有/竞品评论数和日期	口径意识正确，应并入全局上下文和数据状态
KPI	GMV、成交件数、访客转化率、退款金额占比；含 sparkline	基础指标正确；对比算法、基线标签和指标层级需重做
趋势	GMV 折线与订单柱状图，共用时间轴、双 Y 轴	可用，但双轴增加解码成本且没有真实对比线、注释和选区联动
类目	二级类目 GMV 排序横条	可扫描，但缺少占比、基线变化、退款/VOC 风险和点击筛选
诊断	增长主力、退款风险商品、VOC 证据准备度	方向正确，但与趋势、表格、行动状态未形成联动
商品表	Top 10，6 列，商品可进入详情	可作为骨架；缺少排序、筛选、变化、风险、VOC、行动和列配置
移动端	KPI 在 560px 以下单列；900px 表格横向滚动	基础不溢出，但信息路径过长，表格不适合反复经营查看

2.2 当前最需要先修的事实问题

P0-1 对比周期

当前逻辑：

7 天数据 -> 前 4 天 previous + 后 3 天 current -> 比较两段求和

目标逻辑：

当前 7 天 -> 紧邻的前 7 天
当前 14 天 -> 紧邻的前 14 天
当前自然周 -> 上一个完整自然周
自定义 N 天 -> 紧邻的前 N 天

比率型指标必须区分两种变化：

转化率 3.2% -> 3.8%：主显示 +0.6 个百分点，辅助显示相对变化 +18.8%。
GMV 100 万 -> 120 万：显示相对变化 +20.0%，并允许查看绝对变化 +20 万。
当前或基线分母为 0：显示“基线不足”，不显示无限大或伪造的 0%。

P0-2 数据可用性

当前页面明确说明“本品评论尚未接入”，因此自有 VOC 指标不能用 0 伪装成“没有负面反馈”。必须显示：

未接入 / 无权限 / 无数据 / 已接入但本周期为 0

这四种状态的业务含义不同。竞品评论可以用于“市场风险观察”，不能直接成为本品满意度结论。

P0-3 URL 与返回恢复

时间、平台、类目、商品、对比基线、选中图表点和表格排序应进入 URL 查询参数。点击商品或证据再返回时，应恢复同一分析上下文，而不是回到默认 7 日视图。

3. 开源项目逐项对标

3.1 Grafana

官方证据：GitHub 仓库、Dashboard 前端源码、Dashboard 文档、时间范围与刷新、变量、表格、Annotations、Panel options。

可学习机制

维度	Grafana 做法	映射到 VOC/电商经营
首屏信息架构	时间选择、变量、刷新等分析上下文固定在顶部，下面直接进入指标面板	把当前大段页面说明压缩为 44px 上下文栏，首屏尽快进入 KPI 和异常
指标层级	Stat 面板把当前值、阈值、趋势和 sparkline 放在一个稳定单元	KPI 同时展示当前值、真实基线差值、迷你趋势和状态，不再用说明文字填满卡片
时间范围	相对/绝对时间、时区、缩放、手动刷新、自动刷新均为一等控制；时间可进入 URL	增加 7/14/30 天、自定义、上一周期、刷新和可分享 URL
图表	时间序列、状态时间线、表格等围绕监控任务，不追求装饰	经营趋势保持克制，异常和数据状态使用状态条，不增加无意义饼图
表格密度	支持列过滤、分页、单元格色彩/背景/gauge/sparkline/data link；官方特别说明小屏应降低最小列宽	商品表加入变化列、风险色、in-cell sparkline、证据/详情链接；移动端改为核心列加详情，而非完整 900px 表格
筛选/钻取	变量改变后更新整个 Dashboard；panel/data link 将当前变量和时间传给下一视图	平台、类目、商品联动所有模块；进入商品详情时携带当前日期和对比基线
状态	面板标题、描述、阈值、链接和查询上下文相互独立	把“指标定义”放 tooltip/口径抽屉，把异常状态留在内容区域
移动	表格文档明确要求小屏降低最小列宽；核心值不依赖 hover	手机使用 tap/focus 明细、固定点击区域和缩减列集

结论

直接采用：全局时间栏、手动刷新、最后更新时间、URL 状态、KPI sparkline、表格单元格趋势和 data link。
调整后采用：自动刷新。电商数据更新频率通常低于监控数据，默认关闭，只提供与数据源 SLA 对齐的 15 分钟、1 小时选项。
暂缓：用户自由搭建任意面板、秒级实时刷新、完整 dashboard builder。当前更需要固定的经营语义和正确口径。

3.2 Apache Superset

官方证据：GitHub 仓库、Dashboard 前端源码、创建 Dashboard、Explore 与 Advanced Analytics、官方 README。

可学习机制

维度	Superset 做法	映射到 VOC/电商经营
首屏信息架构	可调整网格承载表格、时间序列和 Pivot Table，强调从 Dataset 到 Chart 再到 Dashboard	页面模块应由统一指标语义生成，避免每张卡各算一遍同名指标
指标层级	轻量语义层定义 metric 和 dimension，图表只选择分组与聚合	建立 `gmv`、`conversion_rate`、`refund_to_gmv_rate` 等统一定义，列表、KPI、趋势共用
时间范围	时间列、Time Range、Time Grain 分离；Advanced Analytics 支持 7 日 rolling mean、time shift、绝对差值和重采样	用户选择“看多久”和“按日/周聚合”应分开；真实 previous-period 作为第二序列或差值展示
图表	Table、Pivot Table、时间序列和多种分析图可在同一数据集上组合	类目/商品分析可用排序表、透视表和小多图，但首页只保留回答核心问题的图
表格密度	普通表负责明细，Pivot 负责多维汇总；Dashboard 卡片可调整尺寸	首页商品表负责行动排序，类目 x 指标透视放入展开态或独立分析页
筛选/钻取	Dashboard 作为多个 Chart 的统一分析容器，Explore 保留从图回到查询配置的路径	首页负责“发现”，类目/商品详情负责“解释”，两者通过固定筛选契约连接
空/错误/陈旧	Superset 更偏 BI 查询工作台，错误通常和查询/数据源上下文绑定	学习“让用户知道是哪张图、哪个查询失败”，但状态文案应换成业务语言
移动	可调整网格主要服务桌面分析，官方材料未把移动经营巡检作为核心范式	不复制其编辑网格；手机使用预定义阅读顺序

结论

直接采用：统一 metric/dimension 语义、时间范围和时间粒度分离、equal-period time shift、滚动均值。
调整后采用：Pivot Table 和可调整布局只用于分析详情/管理员配置，不进入默认首页。
暂缓：SQL Lab、用户自由定义 Dataset/Chart、任意 Dashboard 编辑器。这会显著扩大产品和权限边界。

3.3 Metabase

官方证据：GitHub 仓库、Dashboard 前端源码、Dashboard 介绍、Dashboard filters、Dashboard interactivity、Dashboard subscriptions。

可学习机制

维度	Metabase 做法	映射到 VOC/电商经营
首屏信息架构	Dashboard 由问题卡、标题/文本、链接等组成，可通过 tab 分组；语言面向业务用户	本项目保持业务词汇，如“退款风险商品”，不要把查询、聚合器暴露给经营人员
指标层级	每张卡回答一个明确问题，文本/标题负责解释，不要求每个元素都做成重卡	页面按“结果、驱动、风险、对象”分带，减少嵌套卡片和重复说明
时间/刷新	URL 可控制 fullscreen 和 auto-refresh	筛选状态全部可分享；大屏模式和刷新策略可作为后续运营场景
筛选	Filter widget 可连接多个问题；支持默认值、必填、多选和 linked filters	店铺 -> 类目 -> 商品使用依赖筛选；大数据范围必须要求日期或店铺，避免无界查询
钻取	Click behavior 可跳往 dashboard/question/URL，或更新 dashboard filter；官方称后者为 cross-filtering	点击类目横条不应只弹 tooltip，而应筛选全页；点击风险商品进入带上下文的详情
表格/导出	Dashboard 订阅可附 CSV/XLSX/PDF；PDF 保留 Dashboard 布局和 tab 分页	周报/订阅有价值，但应等指标口径和历史数据稳定后实施
空/错误/陈旧	强调业务问题卡的独立性，单卡可以单独解释或失效	单模块失败不应让整个页面失效；保留其他已成功结果
移动	官方文档重点是网格与交互，不提供足够的移动规范	采用其低学习成本交互，不照搬桌面网格尺寸

结论

直接采用：点击图表更新全局筛选、依赖筛选、必填范围、URL 可恢复、业务化文案。
调整后采用：tab 只用于“经营 / 风险 / 数据质量”等稳定信息域，不把首屏关键异常藏在 tab 后。
暂缓：邮件/Slack/PDF 订阅，待基线、数据新鲜度和权限模型稳定后进入 P2。

3.4 OpenObserve

官方证据：GitHub 仓库、Dashboard 前端源码、Dashboard、Filters、Variable dependencies、Comparison Against、Table Chart、Panel troubleshooting。

可学习机制

维度	OpenObserve 做法	映射到 VOC/电商经营
首屏信息架构	实时/历史数据统一在 Dashboard，panel 可按 tab 组织	经营结果与数据质量可在同一工作台，但默认必须先展示经营结论
时间/基线	Comparison Against 用同一查询、同一时长执行当前和过去时间框，并并列展示	后端用同一指标定义同时返回 current/baseline，杜绝前端拼两套口径
筛选	Filter 支持静态值、动态变量、操作符、AND/OR 嵌套；变量支持 parent-child 依赖	平台 -> 店铺 -> 类目 -> 商品是天然的依赖链；高级组合条件放二级筛选抽屉
表格密度	支持列格式、Excel 式列过滤、分页、条件样式、转置和动态列	商品表可加入列筛选、分页、条件色、列配置；不需要照搬转置到首页
空状态	明确区分 loading placeholder、查询成功但 `No data`，并建议调整时间/筛选后刷新	首页必须把“本周期 0 条”与“接口失败”分开，空状态提供下一步动作
部分/陈旧	Troubleshooting 明确提示查询被中断导致 partial/no data，以及缓存结果与选中时间不一致	引入 `partial`、`stale`，继续显示已有值并标注影响范围、更新时间和重试按钮
错误	错误图标和 panel toolbar 说明具体失败原因	错误应落到模块级，并提供“重试该模块”和“查看数据状态”
移动	官方重心仍是桌面面板，表格功能复杂	手机只保留核心列，条件与完整列放详情抽屉；复杂 AND/OR 条件不占首屏

结论

直接采用：同查询对比基线、依赖变量、loading/empty/partial/stale/error 明确分态、模块级重试。
调整后采用：高级 AND/OR 筛选放“更多筛选”，默认栏只显示高频条件。
暂缓：多 SQL query 面板、日志级实时刷新和用户自定义复杂查询。

3.5 Sentry

官方证据：GitHub 仓库、Dashboard 前端源码、Dashboards、Widget Builder、Widget Library。

可学习机制

维度	Sentry 做法	映射到 VOC/电商经营
首屏信息架构	Dashboard 先给应用健康概览，再用 widget 指向错误、性能、日志等 explorer	经营首页先给结果与风险，详细 VOC、退款和商品证据进入各自 explorer
全局筛选	project、environment、date range、release 统一作用于所有 widget；时间序列缩放会更新全页	平台、店铺、类目、商品、日期统一作用于全页；框选异常时间后其他模块同步
异常优先	Widget 支持阈值；Issues/Errors 围绕“最需要处理的对象”排序	退款率、退款金额、负面 VOC 和未完成行动组合为优先级，不只按 GMV 排行
钻取	Widget 菜单可打开 Errors、Traces、Logs、Replay、Metrics；Viewer 提供更强过滤、排序和导航	每个模块提供“进入退款分析 / VOC 证据 / 商品详情 / 行动中心”，不在首页塞完整明细
表格密度	Widget viewer 可显示更多行、分页、排序、调列宽；图表展开后附分组结果表	首页表格保持 10-20 行，展开查看完整排行并共享当前 URL
图表类型	Big number、时间序列、表格都服务于错误/性能任务；多序列有上限	默认不展示超过 5 个类目/主题序列；长尾进入表格或展开态
空/错误/陈旧	模块按 dataset 和查询独立，失败和探索上下文可定位	经营数据与 VOC 数据独立标注状态，不能因评论源失败隐藏经营数据
移动	官方文档没有专门移动范式，但单 widget viewer 天然降低单屏复杂度	手机点击图表后打开全屏单模块查看器，代替桌面多栏原样缩放

结论

直接采用：异常优先队列、阈值、模块级 explorer、单卡展开 viewer、全局时间缩放联动。
调整后采用：Widget Library 改为受控的 VOC/经营模块库，由产品定义，不允许任意查询。
暂缓：完整自助 Widget Builder 和跨数据集自由组合。

3.6 PostHog（补充）

官方证据：GitHub 仓库、Dashboard 前端源码、Dashboards、Insights、Annotations。

可学习机制

Dashboard 文档把 date range override、dashboard filter、tile-level filter precedence、单 tile 刷新、自动刷新和文本/按钮/widget 作为明确能力。这说明筛选优先级必须显式定义，不能由组件各自决定。
Annotations 可把版本发布、营销活动和事件写在时间线上，帮助解释指标突变。映射到本项目，可标记调价、促销、换包装、物流策略、客服规则和行动完成时间。
Trends/Funnels/Retention/Lifecycle 是产品行为分析语义。VOC 首页不应生搬漏斗留存，但“变化事件 + 指标结果”的解释方式值得采用。

结论

直接采用：经营事件 annotation、dashboard 与模块筛选优先级规则、单模块刷新。
调整后采用：AI refresh analysis 只能生成带证据的解释草稿，并显示数据范围、模型和生成时间。
暂缓：产品行为 retention/lifecycle 模型，除非后续接入用户级行为事件且具备合规的数据边界。

4. 横向结论矩阵

能力	最强参考	本项目结论	优先级
首屏经营层级	Sentry + Metabase	结果 KPI -> 首要异常 -> 驱动趋势 -> 对象排行	P0
时间与刷新	Grafana	7/14/30/自定义、刷新、更新时间、URL	P0
对比基线	Superset + OpenObserve	相同查询、相同长度、相邻周期；支持绝对差与相对差	P0
指标语义	Superset	所有视图复用同一 metric definition	P0
依赖筛选	Metabase + OpenObserve	平台 -> 店铺 -> 类目 -> 商品	P0
跨图联动	Metabase + Sentry	点击类目/时间范围更新全页或进入 explorer	P1
空/错/部分/陈旧	OpenObserve	模块级状态、已有数据保留、局部重试	P0
高密度表格	Grafana + Sentry + OpenObserve	条件格式、变化列、排序、分页、列管理、展开 viewer	P1
时间线解释	Grafana + PostHog	促销、调价、版本、行动完成 annotation	P1
移动分析	Sentry viewer 思路 + 本项目定制	单模块全屏、核心列、筛选底部抽屉	P1
自助搭建	Grafana/Superset/Metabase	先固定业务模板，后续再评估	P3/暂缓

5. 目标页面信息架构

5.1 桌面首屏（1366x768 也成立）

┌ 经营概览 | 京东 / 店铺 / 类目 / 商品 | 近7天 | 对比上一周期 | 更新于 10:30 | 刷新 ┐
├ GMV ─┬ 订单 ─┬ 访客 ─┬ 转化率 ─┬ 退款占比 ─┬ 高风险商品 ┤
├ 本期关键结论：退款风险升高，影响 3 个高 GMV 商品；数据状态：经营完整 / 本品 VOC 未接入 ┤
├ 经营结果与基线趋势（8列，当前/基线/事件注释） ─────┬ 风险待办 Top 5（4列） ┤
└ 首屏底部露出“转化驱动 / 类目风险 / VOC 证据”下一分析带的标题或首行 ┘

首屏规则：

页面标题不使用大面积 hero，不重复解释系统能力。
筛选栏和数据更新时间保持可见；向下滚动时可收缩为 sticky compact bar。
KPI 不超过 6 个，必须分为结果、效率、风险三类；颜色只表达状态，不为每张卡分配装饰色。
“本期执行结论”和“数据口径”合并为一条 compact status band，避免连续两个大卡占满首屏。
主趋势与风险队列在首屏形成“发生了什么”和“先处理谁”的配对。
下一内容带应在首屏底部露出，避免用户误认为页面只有 KPI。

5.2 完整页面阅读顺序

A. 全局上下文栏

字段：

平台：京东，后续可扩展天猫/抖音等。
店铺/账号：支持单选或多选，默认当前 workspace 主店铺。
类目：二级类目，依赖店铺。
商品：依赖类目，支持 SKU/名称搜索。
时间：近 7/14/30 天、自定义、自然周。
对比：上一等长周期、上周同期、无对比；同比在有足够历史后开放。
数据状态：完整/部分/陈旧，最后成功更新时间。
操作：刷新、复制当前视图链接；保存视图放 P2。

B. 一级经营结果

默认 6 项：

成交金额 GMV。
成交订单数。当前页面只把订单藏在趋势与帮助文案中，应提升为首屏结果指标。
访客数。
访客转化率。
退款金额占比。
高风险商品数，必须带阈值版本和影响 GMV。

每项固定结构：

指标名 | 当前值 | 对比差值 | 基线值 | sparkline | 状态/数据缺口 | 口径 tooltip

“成交件数”保留在二级驱动或订单详情中，首屏优先展示订单数，因为转化率分子使用订单数，语义链更一致。

C. 经营结果与基线趋势

默认使用上下对齐的小多图，而不是当前双 Y 轴：

图 1：GMV 当前值与基线值，直接标注期末差值。
图 2：订单数或转化率当前值与基线值，共享 X 轴。
annotation：促销、调价、库存、履约变更、行动完成时间。
交互：框选时间更新下方类目、商品和风险模块；“重置时间”清晰可见。

若空间受限，可通过 segmented control 在 GMV / 订单 / 转化 / 退款 间切换，但当前值、基线和差值始终同时可见。

D. 风险待办 Top 5

按“影响规模 x 异常程度 x 证据可信度”排序，而不是只按退款率或 GMV：

priorityScore = normalized(affectedGmv)
              * normalized(riskLift)
              * evidenceConfidence

每行显示：对象、异常、相对基线、影响 GMV、证据状态、已有行动状态、入口。不要把 AI 置信度当成业务严重度。

E. 驱动与归因层

用户问题	推荐图形	当前数据适配	交互
流量在哪一步流失	同口径漏斗或逐步转化条	impressions/clicks/cart/orders 均已有字段，但必须先校验同一人群和周期	点击阶段筛选商品排行
哪些类目贡献增长	排序横条，当前值 + 基线差值	已有二级类目 GMV，可直接扩展	点击类目 cross-filter 全页
哪些商品“规模大且风险高”	GMV x 退款占比散点，点大小为退款金额	已有 GMV、退款占比、退款金额	点击点打开商品 viewer
经营变化是否伴随 VOC 变化	两个共享 X 轴的小多图	仅在本品 VOC 接入后开放；目前显示数据缺口	选中时间进入反馈证据
哪些主题在升温	主题 x 周期 heatmap 或排名变化表	需要稳定 taxonomy 和跨周期主题记录	点击主题打开证据列表

不建议：

用饼图展示多个接近的类目占比。
用 gauge 表达没有明确目标区间的普通指标。
用 word cloud 代替主题数量、占比和趋势。
在同一图上继续增加第三条不同量纲的 Y 轴。
仅靠红绿表达好坏；必须同时有箭头、文本和数值。

F. 商品经营排行

桌面默认列：

列	表达
商品	sticky，名称 + SKU，点击进入详情
类目	支持列筛选
GMV	当前值，右对齐
GMV 变化	百分比 + in-cell sparkline
订单	当前值
转化率	当前值 + 百分点变化
退款占比	条件色 + 基线变化
退款金额	影响规模
VOC	`未接入` / 样本数 + 负向率；不把未接入显示成 0
主要问题	稳定 taxonomy 标签，点击看证据
行动	open/in progress/blocked/completed 数量
更新时间	该行对应数据的新鲜度

表格规格：

行高默认 44px，可切换紧凑 36px；表头 sticky。
商品列和操作列固定，数值列右对齐并使用 tabular nums。
默认按风险优先或 GMV 排序，明确显示排序字段。
支持 10/20/50 行分页，完整结果进入 viewer，不无限拉长首页。
支持列显隐和当前视图导出，列宽持久化放 P2。
颜色只用于超过阈值的单元格，不整行铺红。

G. 数据质量与证据准备度

不要继续用普通“诊断卡”描述数据缺口。改为紧凑状态表：

数据域	覆盖	最新时间	状态	影响
商品日经营	N 行 / N 商品	时间戳	完整/部分/陈旧	影响 KPI、趋势和排行
本品评论	N 条 / N 商品	时间戳	未接入/完整	影响本品 VOC 结论
竞品评论	N 条 / N 商品	时间戳	完整/部分	仅用于竞品观察
行动项	N 条	时间戳	正常/错误	影响风险闭环

状态行可跳到 /data-status，并保留当前筛选范围。

6. 指标与数据契约

6.1 指标层级

L0 数据可信度
  source status / coverage / last successful update / partial reason

L1 经营结果
  GMV / orders / visitors / conversion rate / refund-to-GMV rate

L2 经营驱动
  impressions / clicks / CTR / cart units / sold units / average unit price

L3 风险与 VOC
  affected GMV / risky products / refund amount / own VOC volume
  negative rate / rising topics / competitor signals / evidence coverage

L4 执行闭环
  open actions / overdue actions / completed actions / validation result

L0 是其他层级能否被相信的前提，不能藏到页面底部；L3 的本品 VOC 数据未接入时只展示准备度，不生成正负结论。

6.2 前端查询状态

建议固定为可序列化契约：

interface DomesticOverviewQuery {
  platform: string;
  storeIds: string[];
  categoryIds: string[];
  productIds: string[];
  from: string;
  to: string;
  grain: 'day' | 'week';
  comparison: 'previous_period' | 'previous_week' | 'none';
  reviewScope: 'own' | 'competitor' | 'all';
}

URL 示例：

/domestic/overview?from=2026-07-31&to=2026-08-06&compare=previous_period&category=厨电&sort=risk_desc

6.3 KPI 返回结构

interface DashboardMetric {
  key: string;
  label: string;
  unit: string;
  value: number | null;
  baselineValue: number | null;
  absoluteDelta: number | null;
  relativeDelta: number | null;
  deltaUnit: 'percent' | 'percentage_point' | 'absolute';
  series: Array<{ at: string; value: number | null }>;
  baselineSeries: Array<{ at: string; value: number | null }>;
  status: 'ready' | 'empty' | 'partial' | 'stale' | 'error';
  updatedAt: string | null;
  definitionVersion: string;
}

同名指标必须由一个 definition 产生。KPI、图表、表格总计不允许各自在组件内重新聚合。

6.4 页面状态机

状态	判定	UI 行为
loading	首次请求未完成	保留稳定布局 skeleton，不显示伪造 0
ready	所有关键数据源成功	正常显示值和更新时间
empty	请求成功但当前筛选无记录	说明是哪一范围无数据，提供清除筛选/扩大时间
partial	部分数据源或部分分片成功	保留成功数据，标注缺失模块、覆盖率和重试
stale	当前筛选下显示的是过期缓存/上次成功值	显示“截至时间”，不清空图表，提供刷新
error	模块请求失败且无可用缓存	模块级错误说明、重试和数据状态入口

页面顶部展示全局状态，模块内部展示局部状态。不得用 toast 作为唯一错误载体。

7. 筛选、钻取与联动契约

7.1 筛选优先级

URL 显式参数
  > 用户当前会话选择
  > 保存视图默认值
  > workspace 默认值
  > 系统默认值

模块级筛选只能缩小范围，不能静默覆盖全局日期、店铺或权限范围。任何覆盖都要在模块标题附近可见。

7.2 Cross-filter 行为

点击类目横条：设置 categoryIds，更新 KPI、趋势、风险和商品表。
点击趋势区间：更新 from/to，保留原始范围为“重置”目标。
点击散点商品：打开单商品 viewer；“进入完整详情”再路由。
点击主题：打开证据抽屉，显示样本数、代表反馈和来源边界。
点击 KPI：进入对应 explorer，而不是 GMV、件数和转化率全部跳到同一个商品列表。

7.3 Drill-down 路径

经营结果
  -> 异常指标
  -> 类目/商品影响对象
  -> 退款或 VOC 证据
  -> 已有关联行动
  -> 行动效果验证

每一级都携带当前查询状态，并支持浏览器返回恢复。

8. 移动端实施规范

390x844 不是桌面页面缩小版，应有独立阅读状态：

顶部只保留标题、日期、状态和筛选按钮；完整筛选在 bottom sheet。
KPI 使用 2 列稳定网格，每卡约 104-116px 高；文字不随 viewport 缩放，长值采用单位缩写和完整值 tooltip/详情。
“本期关键结论”限制 2-3 行，展开后查看数据口径，不使用嵌套卡片。
主趋势一次显示一个指标，使用 segmented control 切换；当前与基线仍同时存在。
hover 行为全部有 tap/focus 等价实现；tooltip 可固定并关闭。
风险队列使用纵向 5 行列表，每行保持对象、异常、影响和入口。
商品表改为排名列表，只展示商品、GMV、变化、退款风险；其余字段在全屏 viewer/抽屉查看。
不允许页面级横向滚动。复杂图表和完整表格只在自身容器或 viewer 内处理。
筛选、选中商品和滚动前的分析上下文进入 URL；从详情返回后恢复。

9. 采用决策清单

9.1 直接采用

能力	来源	本项目落点
全局时间、刷新、更新时间	Grafana	顶部 compact context bar
真实等长周期基线	Superset/OpenObserve	服务层一次返回 current/baseline
metric/dimension 统一定义	Superset	analytics service/domain contract
linked filter 与 cross-filter	Metabase/OpenObserve	平台 -> 店铺 -> 类目 -> 商品，全页联动
模块级 viewer/explorer	Sentry	风险、商品、退款、VOC 独立展开
empty/partial/stale/error	OpenObserve	页面级 + 模块级状态机
高密度表格条件格式和 data link	Grafana/OpenObserve/Sentry	商品排行与完整 viewer
经营事件 annotation	Grafana/PostHog	趋势图上的促销、调价和行动事件

9.2 调整后采用

能力	调整原因	调整方案
自动刷新	电商数据不是秒级监控	默认关闭，按数据源 SLA 提供刷新周期
Dashboard tabs	关键异常可能被隐藏	只拆稳定信息域，默认总览仍露出风险
Pivot/Heatmap	手机和首屏解码成本高	放二级分析或全屏 viewer
Widget Library	任意组合会破坏口径	只提供经过定义和验收的业务模块
AI refresh analysis	可能把数据缺口写成结论	只生成引用型解释草稿，标明模型、范围、证据和时间
高级 AND/OR 筛选	高频用户才需要	放“更多筛选”，支持保存视图后再推广

9.3 暂缓

用户自由拖拽和搭建任意 Dashboard。
SQL Lab、自助 Dataset、任意查询表达式。
秒级实时刷新和大规模 streaming 图表。
任意第三方 iframe/widget。
用户级留存/lifecycle，直到存在合规且稳定的用户行为事件。
邮件/Slack/PDF 订阅，直到指标版本、权限、数据新鲜度均可审计。
3D、装饰性地图、word cloud 和不能形成行动的图表类型。

10. 分阶段实施建议

P0：先把看板做“可信且可比较”

交付

修复 4 天 vs 3 天对比，改为等长相邻周期。
引入 DomesticOverviewQuery，时间、对比、平台/类目/商品进入 URL。
顶部合并页面说明、数据口径和刷新状态为 compact context bar。
KPI 扩为 6 项，返回 current/baseline/delta/series/status/updatedAt。
引入 loading/ready/empty/partial/stale/error 状态机。
本品 VOC 未接入时显示缺口状态，不显示 0% 正负面率。
趋势改为当前 vs 基线小多图，移除默认双 Y 轴。

建议代码落点

src/modules/domestic-voc/operating-overview.component.ts
src/modules/domestic-voc/operating-overview.component.scss
src/app/core/services/domestic-analytics.service.ts
src/app/core/services/domestic-dataset.service.ts
新增查询状态/指标契约时优先放 src/app/core/models，不要继续扩张组件内 interface。

验收

近 7 天只和紧邻前 7 天比较，单测覆盖 0 分母、缺日、奇数天、自定义日期。
比率变化用百分点，规模变化用百分比；tooltip 显示公式和基线范围。
URL 刷新、复制、浏览器前进后退均恢复同一筛选。
任一数据源失败时，其他成功模块继续显示。
stale 状态保留最后成功值并显示“截至时间”。
1366x768 首屏可见全局上下文、6 个 KPI、关键结论、主趋势和风险队列标题/主体。

P1：提高分析密度与可行动性

交付

类目横条 cross-filter，全页同步。
GMV x 退款风险散点和流量转化驱动模块。
风险待办 Top 5，关联商品、退款/VOC 证据和 ActionItem。
商品表加入变化、退款金额、VOC 状态、主要问题、行动和更新时间。
完整表格 viewer：排序、分页、列管理、导出、可分享 URL。
annotation 模型与趋势图展示。
移动端 KPI 2 列、单图切换、风险列表和商品 viewer。

验收

点击类目、趋势区间、风险商品后，所有关联模块使用同一 query state。
风险排行同时体现异常幅度和影响规模，排序理由可解释。
桌面表格 1440px 无截断；390px 页面无横向滚动，核心排行无需横移即可阅读。
键盘可访问所有筛选、图表数据点等价入口、表格排序和 viewer。
颜色之外同时提供文本、图标或数值状态。

P2：保存、传播与 AI 解释

交付

保存视图与角色默认视图。
周报/PDF/消息订阅，保留筛选、指标版本、生成时间和数据状态。
AI 解释当前变化，但只引用结构化指标、annotation 和 evidence ID。
Dashboard 使用分析、慢查询和数据质量运营指标。

验收

同一保存视图在权限范围内得到相同口径和布局。
订阅报告能说明数据是否 partial/stale，不能把旧缓存包装成当前结果。
AI 生成的每个数字与结论可回到具体指标或证据；无本品 VOC 时不生成本品满意度判断。

11. 设计与工程验收总表

类别	必须满足
数据正确性	等长基线；比率与规模变化口径区分；缺失不等于 0
首屏	上下文、KPI、关键异常、主趋势、风险入口形成完整阅读路径
图表	关键值不依赖 hover；直接标签；序列不超过可辨识上限；无无意义双轴
表格	sticky 标识列、数值右对齐、明确排序、条件格式、分页、完整 viewer
状态	loading/empty/partial/stale/error 可区分；局部失败不清空全页
筛选	依赖关系、优先级、URL 序列化、返回恢复、权限边界明确
移动	390px 无页面级横向滚动；tap 等价；表格有移动阅读模式
可访问性	键盘操作、可见 focus、色彩冗余编码、图表文本摘要
性能	首屏关键数据优先；下方重图延迟加载；筛选防抖和请求取消
审计	指标定义版本、数据更新时间、筛选范围、AI 生成信息均可追踪

12. 最终判断

/domestic/overview 的下一轮不应继续以“新增若干漂亮卡片”为目标。正确顺序是：

先修正比较事实
  -> 建立统一查询与状态契约
  -> 重排首屏决策层级
  -> 增加驱动、风险和对象密度
  -> 打通筛选、钻取、证据和行动
  -> 最后再做保存、订阅与 AI 解释

最值得立即落地的组合是：Grafana 的控制与表格、Superset 的指标和时间比较、Metabase 的业务交互、OpenObserve 的数据状态、Sentry 的异常工作流。PostHog 的 annotation 应作为 P1 增强。自助搭建、SQL 和任意 widget 暂不进入本项目主线。

13. 官方资料索引

Grafana

Apache Superset

Metabase

OpenObserve

Sentry

PostHog

以上链接均在调研日直接访问核验。latest 文档会随上游版本更新；实施时应记录实际采用机制对应的版本或提交。

GITHUB-DATA-DASHBOARD-BENCHMARK-2026-08.md 42 KB Байнгын холболт Түүх Анхны өгөгдөл

GitHub 开源数据看板深度对标与 VOC 经营看板实施建议

1. 结论先行

2. 当前页面基线

2.1 已有能力

2.2 当前最需要先修的事实问题

P0-1 对比周期

P0-2 数据可用性

P0-3 URL 与返回恢复

3. 开源项目逐项对标

3.1 Grafana

可学习机制

结论

3.2 Apache Superset

可学习机制

结论

3.3 Metabase

可学习机制

结论

3.4 OpenObserve

可学习机制

结论

3.5 Sentry

可学习机制

结论

3.6 PostHog（补充）

可学习机制

结论

4. 横向结论矩阵

5. 目标页面信息架构

5.1 桌面首屏（1366x768 也成立）

5.2 完整页面阅读顺序

A. 全局上下文栏

B. 一级经营结果

C. 经营结果与基线趋势

D. 风险待办 Top 5

E. 驱动与归因层

F. 商品经营排行

G. 数据质量与证据准备度

6. 指标与数据契约

6.1 指标层级

6.2 前端查询状态

6.3 KPI 返回结构

6.4 页面状态机

7. 筛选、钻取与联动契约

7.1 筛选优先级

7.2 Cross-filter 行为

7.3 Drill-down 路径

8. 移动端实施规范

9. 采用决策清单

9.1 直接采用

9.2 调整后采用

9.3 暂缓

10. 分阶段实施建议

P0：先把看板做“可信且可比较”

交付

建议代码落点

验收

P1：提高分析密度与可行动性

交付

验收

P2：保存、传播与 AI 解释

交付

验收

11. 设计与工程验收总表

12. 最终判断

13. 官方资料索引

Grafana

Apache Superset

Metabase

OpenObserve

Sentry

PostHog

GITHUB-DATA-DASHBOARD-BENCHMARK-2026-08.md 42 KB

Байнгын холболт Түүх Анхны өгөгдөл