Wonderful review
Getting started with online IDE development: implementing an online code editor from scratch
Summary of TS core knowledge points and analysis of actual project cases
Preface
This article is the second article that introduces the actual combat of the H5 editor back-end management system based on the previous article. It is also a more important article. It mainly introduces how to automatically generate multi-dimensional visualization reports based on existing data tables in the back-end system.
The reason why the author will spend 3 articles to introduce the content of this section is because many of the current B-side products have similar requirements, such as import and export excel, online editing of tables, generating visual charts based on table data, and user authority routing And permission menu design, etc. Here the author summarizes the following 3 core knowledge:
How the front-end generates a multi-dimensional data visualization analysis report based on the data in the table with one click
How to realize the authority routing and authority menu under the member management system
I hope that through the review and actual combat of these 3 articles, you can be more comfortable when developing enterprise applications. The main technical points involved in this article are as follows:
antv/g2 visual component library
antd Table
Measurable latitude and javascript classification algorithm
text
Through the above introduction, we may not know what we are going to do next. In order to facilitate everyone's understanding, let's take a look at the implementation effect:
The first picture is our Table data source. There are two function keys in the upper right corner: Export Excel and Generate Analysis Report. We have already introduced the export excel part in the previous article. Here we will analyze the function of generating analysis reports in detail. Also Yes, we use antv's g2 for visual charts. If you are familiar with @ant-design/charts, you can also use charts directly. The chart library is mainly to provide us with data visualization, not the focus of this article. If you are interested, you can do it yourself Learn to understand.
Measurable latitude understanding
What is a measurable latitude? Here is a brief example for everyone. For example, if we want to analyze the programmer’s intention to withdraw from a single, we need to count from several latitudes, such as gender, desire to withdraw, if we need more detailed information To analyze users, we can also collect users' hobbies and age groups. These characteristics (gender, desire to leave a single, hobbies) can be used as a single latitude to analyze and count users, so they are all analyzable latitudes. But for example, users The nickname, ID and other information filled in are basically different for everyone. Analysis of this latitude may lead to a situation of "thousands of people and thousands of faces", which is not suitable for analysis as statistical indicators, so such fields are not measurable Latitude. The following data: From the above analysis, we can find that the three latitudes of gender, hobbies, and desire to get out of order are all measurable latitudes, so we can analyze them. The results of the analysis are as follows: the
above data is the author passed H5- The form page configured by the Dooring editor is collected, and the data is basically true. If you also want to fill in the questionnaire, you can click to read the original text and fill it out.
As can be seen from the above figure, 90% of the people who fill in the form are men and 10% are women. Among them, 60% of them usually enjoy eating and sleeping. 40% of people like fitness and travel (this is still good~ ). From the third picture, we can find that 50% of people are eager to get out of the order, and 20% think that being single is good (too difficult). So basically based on the chart analysis, we can get some useful information to know our later The single action.
The above is a real example.Of course, the content analyzed in the actual application of the enterprise can often be more valuable.The intuitive presentation of data to know the enterprise's decision-making is a very important value point of the visualization chart.
Speaking of concepts and practical applications, let's take a look at how to achieve such functions through technical means.
One-key generation of multi-dimensional data visualization analysis report solution based on data
The concept of measurable latitude is introduced above. In this chapter, we will implement how to calculate the measurable latitude. We all know that a field in Table is measurable. It is either n select 1 or multiple selects, so we Based on this rule, to extract the single-selection and multi-selection fields in the Table, but only if the data structure of the form collection page is consistent, let's take a look at the length of the form collection page configured with H5-Dooring:
As we can see from the form, gender, hobbies, and desire to leave a single belong to a measurable latitude, so we should define its field data in the following format:
[
{
value: "健身",
label: "健身",
key: "健身"
}
]
// 或者(一般出现在多选情况)
["美食", "健身", "旅游"]
复制代码
In this way, we can use the javascript algorithm to extract the measurable indicators based on the data characteristics. The code is as follows:
const generateDistData = (key:string, list:List) => {
let distDataMap:any = {},
distData = []
list.forEach((item:Item) => {
// 当前纬度的类别
let curKey = typeof item[key] === 'object' ? item[key][0].label : item[key];
if(distDataMap[curKey]) {
distDataMap[curKey]++;
}else {
distDataMap[curKey] = 1;
}
})
// 生成目标数组
for(let k in distDataMap) {
distData.push({name: k, value: distDataMap[k]})
}
return distData
}
复制代码
The above method can extract the latitude information and generate the data body that can be consumed by antv/g2. The code uses the object method to filter and classify the table data, that is, the list (according to the specified key), and finally put the classified data into the target array. .
The first parameter key of the generateDistData method is the field name of the measurable latitude. When the table data is generated, the measurable latitude array will be generated. Every time the user switches the metric latitude, generateDistData will be called to generate the corresponding available Data consumed by the chart library. The implementation is as follows:
const handleAnazlyChange = (index:number, v:string) => {
const config = {
appendPadding: 10,
data: generateDistData(v, list), // 默认展示第一个字段的分析数据
angleField: 'value',
colorField: 'name',
radius: 0.8,
label: {
type: 'inner',
offset: '-0.5',
content: '{name} {percentage}',
style: {
fill: '#fff',
fontSize: 14,
textAlign: 'center',
},
},
};
setConfig(config)
}
复制代码
Finally, we consume the data to the chart:
<Pie {...config} />
复制代码
The above has achieved the functions we mentioned above. If you want to learn the source code, you can refer to H5-Dooring.
So, are you knowledgeable again today?
At last
The author of the above tutorial has been integrated into H5-Dooring. For some more complex interactive functions, it can also be realized through reasonable design. You can explore and study by yourself.
github????：H5-Dooring
If you want to learn more H5 games, webpack, node, gulp, css3, javascript, nodeJS, canvas data visualization and other front-end knowledge and actual combat, welcome to study and discuss together in "Interesting Frontend" to explore the front-end boundary together.