乐趣区

关于前端:X6在数栈指标管理中的应用

 一、需要背景

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

一种是间接让用户输出,不作任何其余操作,但这种形式带来的问题一个是,须要前端对公式进行简单的校验,太多不可控的问题,另一个是操作指导性很弱,用户在应用的时候没有任何限度,也并不太能明确如何操作;

另一种形式就是让用户通过拖拽的形式,增加运算符,去组成本人须要的公式,比拟直观,且视觉效果更好,所以最终产品交互选定用这种形式。

二、选型思考

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

对于拖拽后生成一个节点、且有序排列,针对以后节点新增前后节点,使其参差排列,技术范畴确定到 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、提交

遍历所有的数据,将层级信息字段去掉;对一些为空字段做过滤解决;将一些额定字段整顿到节点数据中去;对画布上的现有公式的合法性做出校验,若是不非法公式则弹出提醒。格式化实现后则可容许用户将画布中的数据提交到后端。

退出移动版