Shulou(Shulou.com)06/02 Report--

This article introduces the relevant knowledge of "how to realize the data visualization background of Vue". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

Main function points and implementation principles

First of all, the main function points and implementation principles of the project are introduced.

1. Query data by dragging fields

This function is mainly through the construction of SQL statements to query the database, in the back-end query is done with Presto, Presto can query a variety of databases, in addition to the traditional relational database can also query HDFS, the query ability is more powerful. The front-end part of the data query is mainly through the deconstruction of SQL statements, divided into dimensions, data, filtering, sorting, the number of data and other interactive elements, for the convenience of users without SQL foundation. The interaction of the user in the front end dynamically generates the query sent by SQL to the back end for database according to the specific syntax rules. Of course, at present, the construction function of SQL is not complete, and some SQL syntax has yet to be supported and has been included in the development plan.

two。 Visually render the data

Visual rendering of the data is mainly based on the dimensions and values of the data query to determine the available chart types, and then use the dynamic components of vue.js to render the corresponding chart components:

/ / Vue.js dynamic component rendering corresponding chart type

One problem here is the mapping between charts and data. Different data can be displayed in different charts. For example, the data of pie chart is different from that of stacked bar chart. Therefore, the data structure required by each chart needs to be defined:

/ / this is the matching rule definition of pie chart matchRule: {desc:'1 dimension with 1 value; 0 dimension with multiple values', isUsable (dimensions, calculs) {return (dimensions.length = 1 & & calculs.length = 1) | | (dimensions.length = 0 & calculs.length > = 1)}}

Then determine whether the chart type is available according to the matching rules.

3. Saving and echoing of charts

After the frontend generates a chart, it can be saved to the backend. Because there are too many fields needed to define a chart, and these fields may be changed frequently, it is not possible for the backend to define these fields one by one in the database. Therefore, the solution we use is to maintain these fields by the frontend, and the backend uniformly stores all the contents in a field in the database in the form of strings or json objects (such as content).

In this way, there is no problem with the echo of the chart. Just parse the contents of the content field according to the logic of generating the chart.

4. Integrate the chart into Kanban

In many cases, businesses need to view multiple charts at the same time, so a Kanban is needed to integrate multiple charts. Kanban actually refers to Dashboard. In fact, there is no appropriate translation in Chinese. Kanban can barely reach its meaning.

Kanban integration of multiple charts in the back end is only an associated relationship management, for the front end, it is necessary to layout the page according to the chart associated with Kanban, and then query the data and render visually according to the saved chart. The page layout mainly uses vue-grid-layout for grid layout, but also supports drag-and-drop and resizing. The logic of visualization is the same as when you create a chart, so I won't go into detail.

The problem encountered here is how to calculate the positioning of the new chart when adding a new chart for Kanban with an existing layout. This is actually similar to the problem of the waterfall flow in the picture, but because of the variable width and height of each item, it is actually relatively more difficult. I have found an idea and made some calculations, but it is not perfect yet. I will write an article to introduce it after improvement.

5. The permission problem of data

The company's data is actually very sensitive, for listed companies, the data will affect the stock price trend, for non-listed companies, it will affect the progress of investment and financing, are related to corporate finance and even life and death events. Therefore, the authority management of data is very important. In this project, the solution for this part is not simple, but the complexity mainly lies in the back-end rather than the front-end. To put it simply, our permissions are at the data table level, and the administrator adds the data source to the system, and defines the permission scope of the data source at the same time, such as product, operation, development and other permission roles. After the user enters the system, the administrator assigns the permission role to the user, and the user can only query the data that can be viewed by his own corresponding role. Since permissions and data source management have not yet been added to this open source project, I won't go into details. Dig a hole first and fill it later.

6. Other technical points:

First of all, the project is built using Vue-cli@3.0, in addition to the default configuration, but also made some custom configuration through vue.config.js.

Project used a lot of icon, although Element UI icon in the 2.8.x version increased a lot, but still can not meet our needs (some commonly used icon is still not available, such as saving), so we need to solve the icon problem, here is thanks to the designer on iconfont Rushan to provide this beautiful set of data visualization icon library. I use postman to manage the back-end interface documents of the project. In fact, postman has many powerful functions, not only an interface testing tool, but also interface document management. When I develop, I usually start both front-end and back-end projects locally. When I develop locally, I use environment variables to determine the address of the local backend interface:

Const fetchInstance = axios.create ({baseURL: process.env.VUE_APP_BASE_API *} *)

After the local development is completed, the front end is packaged and released to the gh-page branch (git subtree push-- prefix docs origin gh-pages), and the back end is deployed with one click through the cli tool provided by leancloud. The packaging and distribution of the front end can actually be configured with Travis-ci for automatic deployment, which I don't have yet (procrastination patients who have abandoned treatment are here).

The login authorization of the project, the addition, deletion, modification and query of charts and Kanban all use the solution provided by leancloud. In fact, using the js-sdk of leancloud, the front end can easily add, delete, modify and query object storage without writing the back-end interface. However, in order to keep the project code pure and avoid introducing strange AV.query into the code, I still do the back-end part by myself, of course, this part is relatively simple, after all, it is only a Demo, mainly based on koa.js to do some additions, deletions, changes and queries, basically document-oriented programming.

Vuex is used in the state management of the project, but so far there are not many requirements for global state management, only the user token is saved in store. In addition, with regard to state management, I also tried to use Vue's simple state management mode (the code is here) in the part of creating the chart of this project, which is no problem to use, is easy to use for complex components in large projects, and conveniently solves the problem of state sharing within complex components. But at present, it is not particularly suitable for my project, because this part of the state management is also quite appropriate in the overall state, of course, there are different opinions here, and I think it is good for now.

This is the end of the content of "how to realize the data visualization background of Vue". Thank you for your reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.