1. Background of demand
At the beginning of the establishment of the product, the demand of the product is to formulate various indicators and combine them into a new composite indicator for subsequent use. At that time, the product was proposed in two forms:
One is to let the user input directly without doing any other operations, but one of the problems brought by this method is that the front-end needs to perform complex verification of the formula, too many uncontrollable problems, and the other is that the operation guidance is very weak. Users do not have any restrictions when using it, and they do not quite understand how to operate;
Another way is to let users add operators to form their own formulas by dragging and dropping, which is more intuitive and has better visual effects, so this way is chosen for the final product interaction.
Second, the selection consideration
Advanced mode function point decomposition of composite indicators: drag and drop indicators, add operators, set indicator filter conditions, set filter conditions, and update data; after nodes are added, recalculate the location and update the rendering.
Regarding the generation of a node after dragging and arranging it in an orderly manner, the front and rear nodes are added for the current node to make them neatly arranged, and the technical scope is determined to G6 and X6. But for choosing G6 or X6, consider the following five aspects:
1. According to the decomposition of the above requirements, we can see that our requirement is focused on data editing, and the official suggestion for G6 and X6 is that G6 is biased towards graph visualization and analysis, and X6 is biased towards graph editing and data editing.
2. Customize the capacity. Because the node in the indicator management is not just a node, but may be indicators, operators, input boxes, in various forms, and the indicator type nodes need to display more information, including pictures, colors, texts and other information. If you use X6, you can write directly in html, and use G6 to be familiar with canvas. The new version of G6 can support jsx syntax custom nodes, but it is not as good as it is.
3. The size of the data. If there are many nodes, the scale of the graph is large, and you want smooth interaction, of course, G6 of canvas is more suitable, but if the amount of data is relatively small, you can do it.
4. Do you need a statistical graph node: G6 supports embedding G2's statistical graph into a node, but the current requirement is that no graph node needs to be embedded
5. Do you need to support mobile terminal/mini program: On the mobile terminal, G6 can support display and simple interaction, and it is constantly being improved. Moreover, mobile terminals and small programs have higher performance requirements, so if you want to support mobile terminals or small programs, G6 will be preferred
3. The use of composite indicators in indicator management
Regarding the application of X6 in data stack indicator management, it is mainly in the addition, editing and deletion of composite indicators. Among them, there are two modes: normal and advanced. The differences are:
Normal mode only supports single formula, such as (A+B)*0.3;
In advanced mode, multiple formulas can be configured, for example, when A >=0, (A+B)*0.3; when A < 0, (A+CB)*0.4;
This article mainly describes the relevant content of the advanced mode. Regarding its operation, it is mainly divided into the following aspects:
1. New
Figure 3-1
Referring to Figure 3-1, you can click "Add Formula" to add a single formula that contains conditions and formulas; drag the indicators in the index list on the left to the corresponding area on the right to add the indicators to the conditions or formulas.
2. Edit
Figure 3-2
Figure 3-3
Figure 3-4
Figure 3-5
As shown in Figure 3-2, we can click the corresponding indicator to select it, and set the result filter for this selected indicator; as shown in Figure 3-3, we can click the "Settings" button in the upper right corner of the condition to perform the current condition. Result filtering settings; you can click the icon after the condition or formula to edit the condition name and formula name; as shown in Figure 3-5, click the dimension setting, you can set the public dimension of all the indicators currently added to the canvas, At the same time, if an indicator is selected, the dimension value filter setting can be performed on the currently selected indicator.
3. Delete
Figure 3-6
Figure 3-7
As shown in Figure 3-5, after selecting an indicator, click the "Delete" button in the upper right corner of the window to delete the selected indicator from the current formula. The final result is shown in Figure 3-6; you can also click The delete icon to the right of the formula will delete the entire current formula (including conditions and formulas).
4. View
Viewing refers to entering the editing page from the "edit" operation on the right side of a compound indicator in the indicator list, and you can see the configured formula information saved last time. Select different indicators and click the settings of different conditions, and the output will be displayed. The last time you saved the result filtering information.
Fourth, the specific use of X6
Beginners get started quickly click here: Quick Start | X6
The difference between the implementation of the two modes is the difference in data processing. The core usage steps are as follows:
1. Determine the data structure
In advanced mode, you can configure only one formula, but you can also add multiple formulas by clicking the new formula button, and the maximum number of formulas is 5. For X6, the support for HTML and the ability to customize are very good, so for the nodes in the index management with relatively high customization effect, we can determine the overall data structure according to the visual effect as
//指标基础信息
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. Rendering process from data structure to view
This process is mainly to call the graph.addNode method provided in the X6 API to add nodes to the canvas.
But first, it is necessary to traverse the data structure and process it into data with hierarchical information. Then, by traversing the data structure, and adding the hierarchical relationship and index information to the node information at the same time, to ensure that the operation of adding, editing and other operations can be accurately obtained. Hierarchical information, can prepare to add, insert, and edit node information.
drawAdvancedNode = (data: any) => {
// 画高级模式的层级结构，从单条公式父框 ---> 单条公式的条件 + 单条公式的公式 -----> 具体的操作、指标
if (data.length === 0) {
return false;
}
// 遍历数据结构调用graph.addNode方法添加对应节点到画布中: 计算每个节点对应的具体x、y坐标
};3. Update
The update process is mainly to change the original data and generate a new data after adding, inserting, editing and other operations. At this time, you need to get the new data for re-rendering, and you need to clear the content on the canvas. Then redraw, and the clearCells method will be used when it comes to clearing the canvas, but there will be layers in the advanced mode, so you will find that using this method cannot effectively clear the canvas, so in the end, all nodes are obtained first, and then moved one by one remove. After removing, render the current new data to the canvas, i.e. repeat the operation in step 2
// 清空所有画布中的节点
const allNodes = this.state.graph.getCells();
allNodes.map((item: any) => {
this.state.graph.removeCell(item.id);
});4. Submit
Traverse all the data, remove the level information fields; filter some empty fields; organize some extra fields into the node data; check the validity of the existing formulas on the canvas, if the formulas are illegal A prompt will pop up. Once the formatting is complete, the user is allowed to submit the data in the canvas to the backend.