Container-data-analytics NPM

Data Analytics

如何使用

安装

# http://registry.npm.yoyi.com.cn/
$ npm install @container/data-anlytics -S

配置

配置示例可查看 src/DEV.ts

使用

使用此业务模块必须通过 url.query 动态传递参数. 供接口使用.如:

http://bi.yoyi.com/analytics/reports/0?owner=bi&user=test2019@test.com&agent_id=0&customer_id=0

目前根据后端需求必须提供的的参数有 owner, user, agent_id, costomer_id. 可能需要针对导航进行修改,具体参考 BI 项目

功能概述

此业务模块包含两大部分: 报表管理, 邮件管理. 功能修改请在下方单独添加, 并再原有功能初添加~~中划线~~ ~~中划线~~

报表管理
- 报表列表
  - 列表筛选, 如果配置了报表类型的下拉选项, 则列表可以切换筛选, 否则根据地址栏的 owner 产生定向查询.
  - 在输入框中输入 报表名称 进行筛选
  - 点击新建报表按钮, 跳转到报表详情,此时报表ID为0. 并需要携带其他参数跳转
  - 列表字段展示
    - 序号: 前端自行根据返回参数计算, 默认存储到原始对象的 $order 字段
    - 报表名称
    - 时间范围: 根据时间类型显示相对时间,还是绝对时间
    - 类型: 表格: table 柱状图: bar 折线图: line 映射字段反显
    - 创建时间
    - 创建人
  - 列表操作
    - 编辑: 跳转到报表编辑页面,并携带报表ID
    - 创建邮件: 跳转到邮件标记页面,并携带报表ID
    - 删除: 点击删除, 在用户确认后发送删除按钮, 重新拉取列表
- 报表详情
  - 报表名称: 新建报表时展示默认名称(可从listOptions配置). 编辑报表时展示报表名称
  - 报表名称编辑: 点击报表名称进行编辑, 但必须点击 保存 按钮后生效
  - 保存报表: 新建报表时,弹出输入框填写报表名称,确认后保存报表. 编辑报表时直接保存
  - ~~下载报表: 点击弹出输入框输入报表名称, 不输入则以固定格式命名文件~~
  - 表单操作:
    - 维度选择有条件控制, 比如选择曝光频次,无法再选择点击频次, 并且筛选项出现曝光频次并且不可删除, 点击重置也会保留. 此配置由前端控制,可查看 core/types: relation. 维度,筛选支持锁定值,无法删除三星oot报表下的adx=三星ott筛选值(指标, 过滤目前没有此功能, BI竞价分析因此无法集成). 支持搜索
    - 指标支持搜索, 选中的指标值可以被下方排序选取
    - 筛选. 点击+按钮. 输入变量值. 变量值不完全关闭后会被放弃. 只有完整的变量才会被保存. 点击某个筛选值进行编辑. 现在不支持禁用编辑(比如三星ott筛选性实际上不可被编辑). 点击x删除筛选. 锁定值不可删除(即不会显示x). 支持搜索维度和指标
    - 排序. 选中的指标值可以进行排序(支持搜索). 升序:指标值从小到大, 降序:指标值从大到小. 点击+ 新建排序. 点击 x 删除排序
    - 维度,指标, 筛选, 排序.修改后不会触发查询
  - 重置: 点击重置后, 表单值重置为页面初始值. 包括下方时间范围和表格形式. 包括下方图表数据
  - 查询: 点击查询后, 请求数据显示在下方图表中
  - 时间范围选择. 相对时间与自定义时间. 选择相对时间,前端计算为绝对时间再进行查询, 时间选框禁用. 选择自定义时间. 时间选框解禁. 可选择绝对时间. 默认为昨天的时间. 时间范围只能选今天之前. 屏幕较小时相对时间会显示为下拉选项. 平铺较大时会展开.
  - 时间维度选择: 可选择 无时间维度, 按天, 按小时. 时间维度(1) 加上维度数量大于1时只能选择表格. 为1时可选择所有可视化类型. 为0时不可查询, 提示错误. 当展现形式不为表格(为柱状图, 折线图时) 且已有1个维度. 则禁用 按天, 按小时 选项.
  - 展现形式选择: 可选择 表格, 折线图, 柱状图. 时间维度(1) 加上维度数量大于1时只能选择表格(其他则禁止选择).为1时可选择所有可视化类型. 为0时不可查询, 提示错误(同上).
  - 表格: 表格对多维度数据进行处理, 数据通过嵌套形式展现. 并不与下载接口返回的数据完全相同.
  - 柱状图: 柱状图下方分类进行30度旋转防止分类过多无法显示, 柱状图最大宽度为 30, 无最小高度.
  - 折线图: 同上

邮件管理
- 邮件列表
  - 列表筛选(同报表列表), 如果配置了报表类型的下拉选项, 则列表可以切换筛选, 否则根据地址栏的 owner 产生定向查询.
  - 点击新建邮件按钮, 跳转到邮件详情,此时报表ID为0. 邮件ID为0 并需要携带其他参数跳转
  - 在输入框中输入 报表名称 进行筛选
  - 发送时间: 根据发送频次, 发送时间拼接
  - 状态, 类型: 开启: 1, 暂停: 2 映射字段反显
  - 维护时间
  - 创建人
  - 列表操作
    - 编辑: 跳转到报表编辑页面,并携带报表ID, 以及邮件ID
    - 删除: 点击删除, 在用户确认后发送删除按钮, 重新拉取列表
- 邮件详情
  - 报表名称: 拉取该分类(owner)下, 所有报表进行反显和选择, 必填
  - 创建人: 创建时显示当前用户, 编辑时显示原始用户. 禁止编辑
  - 收件人: 必填邮箱格式校验, 多邮件地址由;分隔
  - 抄送人: 邮箱格式校验, 多邮件地址由;分隔
  - 密送人: 邮箱格式校验, 多邮件地址由;分隔
  - 发送频次: 发送频次下拉选项由接口提供. 选择一次性,隐藏发送时间. 否则显示发送时间
  - 发送时间: 根据发送频次显示响应的的选择框. 支持
  - 一次性: 隐藏
  - 天更新. 选择时分
  - 月更新. 选择日期时分
  - 周更新. 选择周期时分
  - ~~未完成: 季度更新.~~
  - 邮件标题: 必填
  - 发送附件: 开关值, 具体行为后端进行处理
  - 邮件状态: 开关值.
  - 取消: 返回邮件列表
  - 保存: 校验表单-调用接口成功后-返回列表

修改

报表管理 - 报表详情 - x 下载报表: 点击下载文件文件名称遵循 报表名称 > 维度名称报表 > 时间名称报表

工程设计

目录结构

root 
|
|- core/          # 类型声明, 微前端基类, 状态管理
|- components/    # 业务组件, 报表, 邮件及其内部组件
|- DEV.ts         # 开发时入口文件
|- index.ts       # 微前端入口文件
|- Root.tsx       # 根组件, 包含路由配置
|- assets/        # 静态资源, 样式文件(css)

微前端支持

外部使用此模块时, 需要动态导入此模块. 并基于 core 提供的类进行属性的实例化

// 代码不完整, 具体参考实际项目
import { AnalyticsApi, BiApi, IRootProps, OwnerType } from '@container/data-analytics/lib/core'

export const analyticsProps: IRootProps = {
  biApi: new BiApi(
    { baseUrl: 'http://10.0.3.36:8080/bi-query/api', skipToken: true },
  ),
  analyticsApi: new AnalyticsApi(
    { baseUrl: 'http://10.0.3.36:8080/bi-query/api', skipToken: true },
  ),
  rootPath: '/analytics',
  access: {
    mail: true,
    report: true
  },
  listOwnerOptions: [
    { name: '自助查询', value: OwnerType.dsp },
    { name: '三星OTT查询', value: OwnerType.ott },
    { name: '一方数据查询', value: OwnerType.inSite },
    { name: '直投-监测数据', value: OwnerType.tracker },
    { name: '直投-媒体数据', value: OwnerType.effect },
    // { name: '竞价区间', value: 'bid_range' },
    // { name: '联合频控', value: 'union_tracker' },
    // { name: 'IVT报表', value: 'ivt' },
    // { name: 'SSP报表', value: 'ssp' },
    // { name: 'IES报表', value: 'ies' },
    // { name: 'TD查询', value: 'td' },

  ]
}

registerApplication(
  analyticsModule.name,
  () => import('@container/data-analytics/lib'),
  pathPrefix(analyticsProps.rootPath),
  analyticsProps
)

当基础类不满足某系统需求时, 可实现接口进行替换

// 全部重写
import { IAnalyticsApi, AnalyticsApi } from '@container/data-analytics'

class MyAnalyticsApi implements IAnalyticsApi {

}

// or 部分重写

class MyAnalyticsApi extends AnalyticsApi {

}

查询模块的抽象化

考虑到将此模块开发为通用查询模块. 在基础设计上大量适配器进行数据转化. 此查询模块基础功能类包含.

+---------------------+                               +---------------+                     +---------------------------+
|                     |        formatQueryJson        |               |  restoreQueryJson   |                           |
|                     |  +------------------------->  |               |  +--------------->  |                           |
|   Report Response   |                               |   FormValue   |                     |    BI Query Parameters    |
|                     |  <-------------------------+  |               |  <---------------+  |                           |
|                     |    restoreSaveParameters      |               |     _identity       |                           |
+---------------------+                               +---------------+                     +---------------------------+

- FormValue
  - DimensionValue # { field, required, disabled }
  - MetricsValue # { field, required, disabled }
  - FilterValue # { field, operator, value required, disabled }
  - SorterValue # { field, order }
  - other
- Ralation       
# 表单关系描述(e.g. 频次的交并关系) 也可据此设计复杂表单的配置化. 避免手动开发

2 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago