Foreword
With the company's development and progress, growing data large screen business, the company's current practice can be divided into two types of suicide or third-party tools platform.
Human flesh : very simple, with a front-end, skilled html + css + js skills get away;
advantages: flexible development
shortcomings: inefficiency, page reusability is not high (almost 0 degree of multiplexing), a lot of repetitive work, occupy front-end development time
Of course, some people will say that now more mainstream front-end framework, like Vue, React is a component-based, child-oriented module engineering, high component reusability, also, no doubt, but it can not change a lot of repeat of work and consumption of resources, the front end of a disadvantage; Some people even say that when enough component packaging, the quality is good enough, engineering, architecture, decent, we can solve the aforementioned disadvantages, it is on! This is what I want to share with everyone "data visualization platform" Shaoanwuzao emmm ~ ~
Third-party tools : such as: Ali cloud dataV, Baidu's Sugar is a very good tool platform;
advantages: Component rich, powerful, large and small businesses to meet the basic needs of large-screen data
deficiencies: There is no shortage please go to experience, I will not do too much evaluation
OKey, summary, with an increase in the company's business, future market demand for data visualization, in order to reduce development costs and improve development efficiency and reduce development effort, our NTDVP "data visualization platform" was born here I come as a major developer to share with you the specific implementation of the platform.
NTDVP - simple knowledge about it
NTDVP - technology stack
Vue 2.6 + Webpack 3.6 + Node + eCharts + D3
Here a brief talk about Nodethe application in the project of
1, by nodestarting dev-server.jsthe file, and then run the following code ( dev-server.js);
webpack-dev-servermainly initiated based on expressthe Httpserver; this Http server and client (client) uses websocket communication protocol, the original file to make after the change, webpack-dev-server in real time compilation, compiled after the real-time files are saved to the memory of them; so we can see real-time updates. 重点：基于启动的http服务实时编译工程
2, it is more clear, mainly to write interfaces to achieve preservation platform of directories and files, read, copy, delete, modify other functions, the latter has import and export ...目的是可以满足本地部署和云部署
// dev-server.js 文件
var webpack = require('webpack')
var webpackDevServer = require('webpack-dev-server')
var webpackDevconfig = require("./webpack.dev.conf.js");
var opn = require('opn')
var port = process.env.PORT || config.dev.port
// api
var apiServer = {
setup: (app) => {
// 具体接口就不做展示了
}
}
webpackDevconfig.then(res => {
var compiler = webpack(res);
var server = new webpackDevServer(compiler, Object.assign(res.devServer, apiServer));
server.listen(port, "0.0.0.0", function (error) {
console.log(error);
});
opn("http://127.0.0.1:" + port) // 打开本地页面
})
NTDVP - design ideas
The whole project structure here is not to share, related to the company's product code, I simply talk about the ideas and principles of product realization;
in fact, in order to drag the drag way to do visual page products have many, principles are very much the same, nothing more than to have a stage, a certain number of components, then the component into the stage through a process of post-secondary configuration process, the final integration stage is what we want the finished product;
First, analyze the implementation stage and components
舞台
Stage is very simple, a container assembly for holding the drag out, of course, this stage may have 宽，高，背景other configuration attributes for known large screen width and height; width of which also have a high unknown large screen, the terminal equipment, so using adaptive mode; then how to render the assembly stage of it to use here?Vue.extends() 构造器 + document.createDocumentFragment()
1, the profile information read by the component Vue.extends()to render the assembly constructor
2, Api using native Document.createDocumentFragmentdocument fragments do dom virtual simulation performance optimization
# Vue-extends () View
//使用基础 Vue 构造器，创建一个“子类”。参数是一个包含组件选项的对象。
//data 选项是特例，需要注意 - 在 Vue.extend() 中它必须是函数
<div id="mount-point"></div>
// 创建构造器
var Profile = Vue.extend({
template: '<p>{{firstName}} {{lastName}} aka {{alias}}</p>',
data: function () {
return {
firstName: 'Walter',
lastName: 'White',
alias: 'Heisenberg'
}
}
})
// 创建 Profile 实例，并挂载到一个元素上。
new Profile().$mount('#mount-point')
//结果如下：
<p>Walter White aka Heisenberg</p>
# Document.createDocumentFragment () View
let fragment = document.createDocumentFragment();
//fragment 是一个指向空DocumentFragment对象的引用。 有兴趣的可以在控制台实践一下
DocumentFragments is a DOM node. They are not part of the main DOM tree. Use case is normally created document fragments, the fragments additional elements to the document, then the document fragment attached to the DOM tree. In the DOM tree, the document segment is replaced by all its child elements.
Because the fragments are present in the document memory, not in the DOM tree, it will not cause page reflux (calculation of the position and geometry of the element) of the document element into sub-segments. Therefore, the use of document fragments will usually result in better performance.
组件
Component is relatively a bit more complicated, because the Vue our technology stack used by the project, so here are using string templates to create dynamic components, how to create it? There are three components of each file (not to consider the public extracting section)
1, the profile component - 相当于组件的父文件，通过对配置属性的修改来渲染对应组件
2 component files - 图表及组件，根据父文件的属性配置生成对应的组件
3 properties of the profiles -属性样式配置文件，也就是编辑页面图的右侧属性栏
See here perhaps some shoes have to think how to make their joint work, in fact, a simple subscription model release, either drag the component's position, changes in the size or property value change on the right side bar will trigger the currently selected components update, let us further analyze what;
组件配置文件 - 样例代码 => 返回一个模板和最新属性键值对
var handle = function (attr, info) {
let attributes = {
name: "BarAlien",
infoId: info.id,
zIndex: 1,
top: 1,
left: 10,
width: 300,
height: 200,
title: "柱状图",
remark: '', //图表简介
chartCustomStyle: false, //开启图表自定义背景和边框
chartBackgroundColor: '', //图表背景颜色
chartBorderRadius: false, //图表圆角
borderWidth: 10, //图表边框宽度
borderColor: '', //图表边框颜色
shadowWidth: 0, //图表阴影宽度
...... // 更多省略
}
// 合并属性
Object.assign(attributes, attr)
// 获取 attr 属性并传入组件，组件通过props获取
let stringAttr = getStringTypeAttr(attributes);
//字符串模板操作
let template = `<BarAlien ${stringAttr}/>`
return { template, attributes }
}
export default handle;
组件- on the simple, pass over through the parent file parameters, propsreceiving, rendering
属性配置文件 - 样例文件
Here property right column, are relatively cumbersome, uses a two-way binding principle Vue;
style traversal is generated by an array of field attributes corresponding to the configuration of the object; and many attribute column style, input boxes, drop-down box, radio, multiple choice, switches, color, form, etc. are defined from a separate component that provides a single event listener to the broadcast;
[{
label: "开启图表自定义配色",
bind: "openCustomColor",
tipLink: "/docs/Chart-Common#图表的自定义配色",
tipText: "自定义配色说明",
type: "switch"
}, {
type: "color",
bind: "textColor",
format: "rgb",
label: "文字颜色",
visiblity: "openCustomColor",
placement: "right-top-right-bottom"
}, {
type: "number",
bind: "shadowBlur",
visiblity: "openCustomShadow",
label: "阴影模糊大小",
min: 0
},{
type: 'table',
bind: "customColors",
visiblity: "openCustomColor",
label: "可增加多个配色项，依次对应各项颜色",
addTipText: "新增配色项",
controls: [{
type: "color",
label: "颜色",
bind: "color",
defaultValue: "#23b7e5",
tdStyle: {
minWidth: 100
}
}]
}]
NTDVP - Edit (core)
figure can be seen, the entire edit page can be split into four parts
- Top -
包含logo + 组件分类列表 + 舞台操作 - Left column -
当前舞台组件管理 ，目前有删除 ，后期考虑提供功能键对组件进行复制，层管理等 - Right column -
核心位置之一，操作选中组件的所有配置项和动态数据（api , sql , ws 等方式 ）以及体验交互（联动和下钻）, 支持自动刷新 等 - Stage -
中间的展示区，支持编辑布局，拖拽组件，整体拖动，实时刷新，局部刷新，所见即所得
NTDVP - encountered problems and solutions
Throughout the primary stage, problems encountered in the development of fact or find many, are all break in the daily accumulation, here to pick up a few memories to share about it;
1, how to parse the string {key: function () {} , key2: function () {}} own function implementing component
solution: acorn.jstry a variety of methods, eventually forced to use acorn.js javascript 解析器
objectives: parse string above acquiring entity corresponding function, secondary to edit, save back to the original function, where brother Fucai, could not think of another better way 如有哪位大佬知道，评论告知，非常感谢;
//项目中解析代码
var ast = acorn.parse(res.data).body[0];
var nodeBinds = {};
for (let nb of ast.declarations[0].init.properties) {
nodeBinds[nb.key.name] = res.data.substring(nb.value.body.start, nb.value.body.end);
}
//结果 nodeBinds[key] 就是上述字符串的第一个函数 key
2, with a preview of how the stage reduction reflows and repaints, how to improve rendering speed, how to determine the page after the execution time
resolved:
by document fragment Document.createDocumentFragment()to integrate analog virtual rendering Dom current stage of all components, the integration period the number of records notice and notify statistics an amount equal to the current page all the components length, it believes that integration is complete, the final mount Dom, post-execution processing.
3, publish subscription model, modify the right-hand column attributes higher frequencies, component rendering burden, how to deal with
Initially it, I have considered whether to make manual rendering, that is, all the configuration parameters are set finished, click the button rendering components, and later found that although the rendering performance is greatly improved, but can not see the real-time effects, because most of my colleagues do not know configuration items specific page effect, causing repetitive modify and click rendering and page contrary we want to do a real-time graphical editing platform intention; (give up)
resolved:
①, right-hand column of the broadcast event, an announcement was use image stabilization function, subject to assembly in response to the last, this time can be arranged, different people experience different
②, rendering data components, the use of the necessary conditions are met strategy, such as: normal line chart, debug data layer mapping field must meet x axis, y axis, data data, values are only rendered, or not rendering operation
③, where the right hand column assembly attribute is a subscription model, update notification, render each other; and a component corresponding attributes are unique infiIdIt will not affect the other components of rendering and redraw on stage.
4, to be finishing,
NTDVP - Features
- Hundreds of species rich components, drag and drop graphical editor, WYSIWYG
- Custom components to meet the private customized services
- Responsive, adaptive, movable end support
- Multiple Data Source Support
MySQL、SQL Server、Oracle 等数据源，本地 Excel 文件 或者 api 接口 ，ws 长连接 - Flexible deployment and release
支持云部署，私有化部署， 本地部署
当然了，NTDVP 目前处于初级阶段 ，零碎的功能点就不一一列出了，还有许多功能需要完善和添加 ， 我们正在全力以赴 ，争取做出来一款市场认可的可视化产品 。
NTDVP - Follow-up Program
- Rich component is essential
- Adding to quickly build a template
- Adding stage assembly copy, paste
- Rights management, role management, you want to do too much, too much, will not list them, emmm ~~
Summary
of the project as of now, receiving full, or whether the application of technology to enhance the scene, even to the idea of a Web infrastructure projects have a new awareness and understanding. Here not actually do the technical point of stepping pit and sharing, recording the follow-up slowly.
Conclusion
The future is digital age, visualization will become increasingly important, we believe that in the next scene, will occupy a place.
志同道合的朋友们，相信你们有更好的构建方案，分享出来的时候，希望我们可以再见面 ，谢谢阅读。
