This article was first published in the blog of the front end team of the political procurement cloud: the front end realization of the visualized data large screen system

background

With the development of the company’s business, we often receive some requirements for large data screens. At present, our company has two implementation schemes, one is to build human flesh, the other is to build ali Cloud DataV.

Human building, coding in the local scaffolding development environment, there is a lot of repetitive labor, poor ability to reuse, take up precious development time of the front end.

The DataV is powerful, it costs money to use the tape, and good components cost extra, there is no local deployment, and there are two sets of repositories to maintain.

To sum up, if there are many demands for such large screens and the importance of business is obvious, it is necessary to consider whether it is necessary to develop a system for building large screens by ourselves to reduce development complexity, improve r&d efficiency and reduce costs. This paper tries to provide a design and implementation scheme of such a system based on the disassembly description of Big, the data large screen building system of the front-end team of zhengcai Cloud.

What is the Big

Big is a visualization system for rapid data big-screen construction based on lu Ban, the front-end construction system of the political production cloud, and the data big-screen component library.

Why is it Big? Open Baidu Translate and enter Big screen. The English translation is Big screen. Round it up to Big.

The advantages of making your own system

  • Customizability: Private customization of internal products, components and presentation forms
  • Support localized deployment: Some services can only be accessed from the internal network, but not from the external network (including Aliyun).
  • Fixed DataV needing to maintain two sets of bins
  • Save the company costs, enhance the company’s data product capabilities, and drive revenue

The overview

Big data screen is a product that displays massive and miscellaneous data in a visual way. It is often used in various business scenarios such as conferences and exhibitions, business monitoring, risk warning, and geographic information analysis. The following is a template of Aliyun DataV:

From the perspective of front-end implementation, large screen is composed of line graph, bar chart, pie chart, title, background, border and other basic elements. The implementation idea is to take these basic elements as components, through the selection of components, drag and drop layout, configuration style, data source, save these data in the database. The presentation page captures dependent components, styles, and data information and presents it to the user.

The large screen can be divided into editing and viewing according to the scene.

Edit: Refers to big screen makers making big screens.

Viewing: includes two scenarios, the big screen maker preview and the actual user viewing the big screen.

The editor

Edit large screen is the core of data visualization system, page layout refer to DataV:

Disassemble into four parts: top, component area, canvas, data configuration area. Talk about the design idea first, and then decompose each area in turn.

Design ideas

  • Page data and dependent components are injected into Html files by SSR
  • App data is stored in App State without Vuex (we will consider using Vuex later)
  • The data is passed to the child components using props
  • Data is passed from the child component to the grandparent component using the event center

At the top of the

The top area contains three parts: left switch area, control layer, component list, data configuration area show hide; In the middle is a big screen title; On the right are save and preview.

Component area

Components are divided into the left layer (added components) and the right component list, which can add components, select operation layers, and group and align.

The layer

  • Layer support up, down, top, delete operations, support right-click display menu (not support multiple selection and grouping). The idea is to change an array using its basic methods

  • Click a component to select the component, select the component in the canvas area, and display configuration items in the data configuration area

Component list

  • All Components To display all big-screen components, click or drag to add components
  • Adding a component asynchronously obtains the JS, CSS and configuration Schema of the component, inserts the CSS and JS into the DOM, and configures the incoming attribute configuration area
  • You can group components by type for easy use.

The canvas

The canvas is used to show the location, size, properties, and data modification effects of large screen components in real time.

Position and size changes change the properties of the corresponding component by registering the drag and resize methods of the component vue-Draggable -resizable. Components use absolute positioning, dragging to modify the top and left values.

Properties are modified by modifying the props. Models value of the corresponding component.

Data is divided into static data and interface data. When static data is enabled, data is obtained from the data entered by the user. Otherwise, the component watch interface ID will be re-sent to obtain data every time it changes.

The top and left sides of the canvas are rulers that change when the canvas is scaled. Displays a moving guide when moving on a ruler. Add a guide line when clicked. Double-click the guide to delete it. The ruler is drawn on Canvas and rotated 90 degrees to obtain the Y-axis.

The zoom slider is on the lower right for users to zoom in and out. Enter the page to view the full screen size by default. The scale implementation uses CSS3’s transform: scale(${this.scale}).

If no component is selected on the canvas, the basic configuration of the page is displayed, including the width and height of the large screen and the background image.

After the component is selected, the current component is highlighted to identify its location. Configuration items defined by the component Schema are displayed in the data configuration area on the right.

The core code

<div
  :class="['data-com', item.info.previewId === activePreviewId ? 'data-com-active' : '']"
  v-for="item in preCompList"
  :key="item.info.activePreviewId"
>
  <vue-draggable-resizable
    :w="item.models.width || 100"
    :h="item.models.height || 100"
    :x="item.models.x || 0"
    :y="item.models.y || 0"
    :active="item.info.previewId === activePreviewId"
    @dragging="onDrag"
    @resizing="onResize"
    @activated=" () => { onCompActivated(item.info.previewId); }"
		:prevent-deactivation="true"
	>
    <navigator-line
      :x="item.models.x"
      :y="item.models.y"
      :scale="scale"
    />
  	<div :is="item.info.name" :models="item.models" :extraProps="extraProps"></div>
	</vue-draggable-resizable>
</div>
Copy the code

Vue-draggable -resizable Is used to select components and scale components. For details, see the official documents. This component does not support grouping and multi-choice alignment scenarios and requires custom development.

Navigator -line displays the current ruler position of the component. You should be careful not to make the coordinates too hard to see because the canvas is shrinking. Divide by the scale.

Use Vue dynamic component is to control component display.

Data configuration area

There are two situations in the data configuration area:

  • Unselected components display page-level configurations such as large screen width and height, background color, and background image
  • Select a component: Displays component configuration information

Implementation logic: dynamically render the component’s property edit field according to the current user’s choice, and backfill the initial value of the property, so as to achieve a good editing interaction effect. When the user drags the component, the attribute value in the editing field is updated synchronously. When the attribute is modified in the editing field, the large screen is notified to trigger the refreshing action of the component, so as to achieve the effect of real-time editing.

The data configuration interface is defined by the component Schema, displayed by the props definition, and models represents the default data. For details, see the following Schema.

The editing type is determined by the type in fileds, and various types of components such as Input, Select, Image, and Border are realized, which are displayed by the dynamic component is attribute of Vue.

Data return: Changes in the values of each child component will notify the parent component
to send the update back to the parent component App. In this case, full return is used to avoid the App looking for updated data on the Models.

To view

View is the data stored in the database, with components rendered out. The realization principle is to obtain components and data rendering by page ID. The code is as follows:

<div class="preview">
    <div class="layout">
      <div
        :class="['preview-line', preComp.info.name + '-' + preComp.info.previewId]"
        v-for="(preComp, index) in preCompList"
        :key="preComp.info.previewId"
        :style="formatCompStyle(preComp, index)"
      >
        <div :is="preComp.info.name" :models="preComp.models" :isPreview="isPreview" :extraProps="extraProps"></div>
      </div>
    </div>
  </div>

Copy the code

Full screen display

It should be noted that the large screen is full-screen display. Set the body style according to the screen width and height, background image and background color configured on the large screen.
Width of viewport The key adaptive codes are as follows:

// Get the set screen width, background image and background color
if(window.__INITIAL_STATE__) {
  const { width, height, backgroundImage, backgroundColor } = __INITIAL_STATE__.preview.pageConfig.models;
  window.scr = {
    width: width,
    height: height,
    backgroundImage: `url(${backgroundImage}) `.backgroundColor: backgroundColor,
  };
} else {
  window.scr = {
    width: window.screen.width,
    height: window.screen.height,
  };
}

// Full screen display
function resizeFull() {
  if (!window.scr.height || !window.scr.width) return resizeFullBak();
  var ratioX = $(window).width() / window.scr.width;
  var ratioY = $(window).height() / window.scr.height;
  $('body').css({
    transform: "scale(" + ratioX + "," + ratioY + ")".transformOrigin: "left top".backgroundSize: "100% 100%"}); }function resizeFullBak() {
  var ratioX = $(window).width() / $('body').width();
  var ratioY = $(window).height() / $('body').height();
  $('body').css({
    transform: "scale(" + ratioX + "," + ratioY + ")".transformOrigin: "left top".backgroundSize: "100%" + ratioY * 100 + "%"}); }Copy the code

Component design

Components are the foundation of the whole big screen design. Components are initialized by component templates, which provide two main functions, one is to implement a simple Demo that can be developed, and the other is to provide packaged distribution capabilities.

The template code is simple and controls the presentation and business logic of the component through the props passed in. Components are automatically installed so that the page recognizes components when they are asynchronously loaded. Focus on the Schema design of components.

schema.json

Schema. json is used to define the editable items and default configurations of the component. Determines what components can be configured and what the configuration looks like (Input, Select, and so on have default values). So the Schema contains props and models.

Props: array, where each element is an item of a TAB. Info is the TAB header and fields is the configuration item. The name of fields corresponds to the property name of the Models, type determines the type of configuration, and title is the Chinese name. You can also define other properties, such as drop-down box selections, maximum and minimum values for numeric input boxes, and so on.

Models: Default data, the default value for each name in props. Fileds.

Here is a simple schema definition:

{
  "props": [{"info": {
        "title": "Configuration"."icon": "icon-setting"
      },
      "fields": [{"title": "Component width"."name": "width"."description": "Component width"."type": "number"
        },
        {
          "title": "Component height"."name": "height"."description": "Component height"."type": "number"
        },
        {
          "title": "X-coordinate"."name": "x"."description": "Component x coordinates"."type": "number"
        },
        {
          "title": "Y-coordinate"."name": "y"."description": "Component y coordinates"."type": "number"}}]]."models": {
    "width": 300."height": 200."x": 0."y": 0}}Copy the code

Problems encountered

communication

How do big-screen components communicate with each other? Make sure the big-screen components can communicate.

An event center is used to handle communication between components. The core code is as follows:

// Global event center
Vue.prototype.$eventBus = new Vue();
// Trigger, inside the component
this.$eventBus.$emit('eventName'.'Pass value here');
// Listen to get the value
this.$eventBus.on('eventName', v => {
	console.log(v);
})

// Component notifies parent component of zoning changes or other changes
this.$eventBus.$emit('component__update-extraProps', { dist: 'Selected division' });
Copy the code

The App centrally manages the communication object extraProps, which is injected into each component as props. Components can listen for property changes in extraProps.

// Component code{... .props: {
    extraProps: {
      type: Object.default: (a)= >{}}},computed: {
    dist() {
      return (this.extraProps && this.extraProps.dist) || ' '; }},watch: {
    dist(val, oldVal){
      // Add logic to get new data when zoning changes}}}Copy the code

permissions

Large screen data need to do permission control, only those with permission can view the large screen, but Lu Ban did not have permission for the original page access logic. The implementation scheme is to access the middle Server through the no-login interface called by the edit and preview page, and the middle Server realizes login and requests data to the Server. The user’s viewing page is embedded with the Luban IFrame, which is provided by the actual server and carries the permission token. When accessing the Luban address, go to the Server for authentication first. If you have permission to return to the large screen, otherwise return to 401.

To optimize

Big is still in its early stages and there are many areas to improve:

  • Grouping: Grouping as in PHOTOSHOP and Sketch for easy categorization and operation
  • Multiple selection: Select alignment after multiple selection. It is also convenient for users to operate
  • Code optimization
  • Experience optimization

conclusion

In the DT era, data visualization will become more and more important. I believe that more and more students will encounter the scene of large screen. Through the visual construction of large screen system, it can empower relevant business parties, let non-professionals make professional large screen effect, and meet some customization requirements of the company. Here is a relatively shallow large screen construction scheme, which is still in the development stage. I hope to introduce more visual data construction schemes to share. Thank you for reading.

Recommended reading

Visual Construction System for Front-end Engineering Practice (PART 1)

Probably the most complete collection of text overflow truncation ellipsis schemes

An illustrated guide to unlock the mysteries of single sign-on

, recruiting

ZooTeam, a young passionate and creative front-end team, belongs to the PRODUCT R&D department of ZooTeam, based in picturesque Hangzhou. The team now has more than 50 front-end partners, with an average age of 27, and nearly 30% of them are full-stack engineers, no problem in the youth storm group. The members consist of “old” soldiers from Alibaba and netease, as well as fresh graduates from Zhejiang University, University of Science and Technology of China, Hangzhou Electric And other universities. In addition to daily business docking, the team also carried out technical exploration and practice in material system, engineering platform, building platform, performance experience, cloud application, data analysis and visualization, promoted and implemented a series of internal technical products, and continued to explore the new boundary of front-end technology system.

If you want to change what’s been bothering you, you want to start bothering you. If you want to change, you’ve been told you need more ideas, but you don’t have a solution. If you want change, you have the power to make it happen, but you don’t need it. If you want to change what you want to accomplish, you need a team to support you, but you don’t have the position to lead people. If you want to change the pace, it will be “5 years and 3 years of experience”; If you want to change the original savvy is good, but there is always a layer of fuzzy window… If you believe in the power of believing, believing that ordinary people can achieve extraordinary things, believing that you can meet a better version of yourself. If you want to be a part of the process of growing a front end team with deep business understanding, sound technology systems, technology value creation, and impact spillover as your business takes off, I think we should talk. Any time, waiting for you to write something and send it to [email protected]