写点什么

X6 在数栈指标管理中的应用

作者:数栈DTinsight
  • 2022 年 2 月 16 日
  • 本文字数:2570 字

    阅读完需:约 8 分钟

一、需求背景

产品成立之初,产品的需求是需要对各种指标进行公式运算,组合成一个新的复合指标,供后续使用。当时产品提出的形式是有两种:

一种是直接让用户输入,不作任何其他操作,但这种方式带来的问题一个是,需要前端对公式进行复杂的校验,太多不可控的问题,另一个是操作指导性很弱,用户在使用的时候没有任何限制,也并不太能明白如何操作;

另一种方式就是让用户通过拖拽的方式,添加运算符,去组成自己需要的公式,比较直观,且视觉效果更好,所以最终产品交互选定用这种方式。

二、选型考虑

复合指标的高级模式功能点分解:拖拽指标、新增运算符,设置指标的过滤条件,设置条件的过滤,去更新数据;节点新增后,重新计算位置,更新渲染。

关于拖拽后生成一个节点、且有序排列,针对当前节点新增前后节点,使其整齐排列,技术范围确定到 G6、X6 上面。但对于是选用 G6 还是 X6,从以下五个方面考虑:

1、针对上述需求分解,可以看到我们这个需求是偏重数据编辑的,而官方对于 G6、X6 的建议是,G6 偏向于图可视化和分析,X6 偏向于图编辑和数据编辑

2、自定义能力大小。由于指标管理中的节点并非只是个节点,而是可能是指标、操作符、输入框,形式多样,且,指标类型的节点需要展示的信息比较多,里面包含了图片、颜色、文本等信息,如果使用 X6 是可以直接用 html 写的,而使用 G6 就要熟悉了解 canvas,新版本的 G6 可以支持 jsx 语法自定义节点,但并没有支持的那么好。

3、数据量大小。如果是节点繁多,图的规模较大,想要交互流畅,当然是用 canvas 的 G6 更合适,但如果数据量比较小,则都可以。

4、是否需要统计图表节点:G6 支持嵌入 G2 的统计图到一个节点中,而当前需求是不需要嵌入图表节点

5、是否需要支持移动端/小程序:在移动端,G6 可以支持展示和简单交互,且在不断完善中。而且移动端、小程序对性能的要求更高,所以如果是要支持移动端或小程序会优选 G6

三、指标管理中复合指标的使用

关于 X6 在数栈指标管理的应用,主要是在复合指标的新增、编辑、删除模块,其中,分为普通、高级两种模式,其区别是:

普通模式仅可单公式,例如(A+B)*0.3;

而高级模式则可以配置多公式,例如当 A >=0 时,(A+B)*0.3;当 A < 0 时,(A+C-B)*0.4;

而本文主要叙述的是高级模式的相关内容,关于其操作,主要分为以下几个方面:

1、新增


点击并拖拽以移动

图 3-1

参考图 3-1,可以点击“新增公式”新增一条包含条件和公式的单公式;拖动左侧指标目录中的指标到右侧对应区域,可以将指标添加到条件或者公式里去。

2、编辑


点击并拖拽以移动

图 3-2


点击并拖拽以移动

图 3-3


点击并拖拽以移动

图 3-4


点击并拖拽以移动

图 3-5

如图 3-2 所示,我们可以点击对应指标将其选中,对这个选中指标进行结果过滤设置;如图 3-3 所示,我们可以点击条件右上角的“设置”按钮,对当前条件进行结果过滤设置;可以点击条件或者公式后的图标,对条件名、公式名进行编辑;如图 3-5 所示,点击维度设置,可以对当前所有加入到画布中的指标的公共维度进行设置,与此同时选中某一个指标,可以对当前选中指标进行维值过滤设置。

3、删除


点击并拖拽以移动

图 3-6


点击并拖拽以移动

图 3-7

如图 3-5 所示,可以在选中某一个指标之后,点击窗口右上角的“删除”按钮,将选中指标从当前公式中删除,最终得到的结果如图 3-6 所示;同样可以点击公式右边的删除图标,会将当前一整条公式(包含条件、公式)都删除。

4、查看

查看是指从指标列表里的某个复合指标右侧的“编辑”操作进入编辑页面,可以看到上次保存的配置好的公式信息,选中不同指标、点击不同条件的设置,会回显出上一次你保存的结果过滤信息。

四、X6 的具体使用

新手入门快速上手点这里:快速上手 | X6

而关于两种模式的实现区别则是数据处理上的区别,核心使用步骤有以下几点:

1、确定数据结构

高级模式下可以只配置一条公式,但是也可以通过点击新增公式按钮增加多条公式,公式数量上限为 5 条。对于 X6 来说,对 HTML 的支持、自定义的能力都是很不错的,所以对于自定义效果比较高的指标管理中的节点,我们根据视觉效果可以定出整体数据结构为

//指标基础信息const indexInfo = {	name: '',  code: '',  status: '',  ...}// 高级模式数据结构const advancedFormula = [	...  {  	condition: {      name: '条件1',			conditionSet: {},      formulaList: [      	{        	type: 'index', // index--指标节点  operator--运算符节点          value: '', // 当type为operator,且value有值时,则有数值输入框类型          ...indexInfo        }      ]		},    formula: {      name: '公式1',    	formulaList: [      	{        	type: 'index', // index--指标节点  operator--运算符节点          value: '', // 当type为operator,且value有值时,则有数值输入框类型          ...indexInfo        }      ]    }  }]
复制代码


点击并拖拽以移动

2、从数据结构到视图的渲染过程

这个过程主要是调用 X6 的 API 中提供的 graph.addNode 方法去添加节点到画布。

但首先要遍历数据结构处理为带着层级信息的数据,然后通过遍历数据结构,并同时将层级关系和指标信息加入到节点信息里,以确保在操作新增、编辑等操作时可以准确获取到层级信息,能够准备新增、插入、编辑节点信息。

drawAdvancedNode = (data: any) => {    // 画高级模式的层级结构,从单条公式父框 ---> 单条公式的条件 + 单条公式的公式 -----> 具体的操作、指标    if (data.length === 0) {      return false;    }    // 遍历数据结构调用graph.addNode方法添加对应节点到画布中: 计算每个节点对应的具体x、y坐标};
复制代码


点击并拖拽以移动

3、更新

更新的过程主要是在进行了新增、插入、编辑等操作后,会更改原数据,生成一份新的数据,这时候需要拿到新的数据进行重新渲染,需要将画布上的内容清空,然后重新绘制,而涉及到画布清空会用到 clearCells 方法,但高级模式会存在层级,所以会发现,使用这个方法并不能有效的把画布清空,所以最终先将所有节点获取到,再一一移除。在移除之后,将当前新数据渲染到画布中,即重复步骤 2 中的操作

// 清空所有画布中的节点const allNodes = this.state.graph.getCells();allNodes.map((item: any) => {   this.state.graph.removeCell(item.id);});
复制代码


点击并拖拽以移动

4、提交

遍历所有的数据,将层级信息字段去掉;对一些为空字段做过滤处理;将一些额外字段整理到节点数据中去;对画布上的现有公式的合法性做出校验,若是不合法公式则弹出提示。格式化完成后则可允许用户将画布中的数据提交到后端。​

用户头像

还未添加个人签名 2021.05.06 加入

还未添加个人简介

评论

发布
暂无评论
X6在数栈指标管理中的应用