Data acquisition and distribution method for configuration data visualization

Abstract

According to the data acquisition and distribution method for configuration data visualization, when a component is created, the component and a data source are registered in a data agent, the relationship between the component and the data source is bound, the data agent acquires data according to the registered data source configuration, and the data source is configured according to the binding relationship between the component and the data source. And distributing the data to each component, and re-rendering the data to the webpage canvas according to the data after the component monitors the data change. According to the invention, through a WYSIWYG configuration mode, a user can monitor configuration data in a one-stop manner according to individual requirements, and control of equipment is realized at the same time; when the data sources bound with the multiple components are the same, the pressure of concurrent access of the multiple components can be relieved; besides actively pulling the data, the component also supports receiving the data through the message queue.

Description

Technical Field

[0001] The present invention relates to the technical field of data visualization, and in particular to a data acquisition and distribution method for configuration data visualization. Background Art

[0002] Data visualization technology is a technology related to the visual representation of data. It allows the use of graphics, image processing, computer vision, and user interfaces to visualize data through expression, modeling, and display of solids, surfaces, attributes, and animations. Data visualization applications have gradually become mainstream on the web, and the commonly used solution is the configuration data visualization platform. The configuration data visualization platform refers to software for data acquisition and process control. When viewing data and performing control based on the configuration platform, it is necessary to provide users with a method for viewing data. The configuration data visualization platform commonly used in the prior art still has the following problems: (1) There is a one-to-one binding relationship between the data flow and the display component. If multiple components are bound to the same data source, high-frequency access when updating data can easily cause high concurrency pressure on the configuration platform; (2) The way to obtain data is to pull data from data sources such as API interfaces and databases. Data cannot be pushed directly to display components by the configuration platform or device through message queues. Summary of the invention

[0003] The purpose of the present invention is to overcome the above-mentioned shortcomings and provide a data acquisition and distribution method for configuration data visualization, so that users can monitor configuration data in one stop according to personalized needs, while realizing control over the equipment and reducing the pressure of concurrent access of multiple components.

[0004] The object of the present invention is achieved in that: A data acquisition and distribution method for configuration data visualization, comprising the following contents: SS1. Create a canvas web page; SS2. Abstract the canvas page; abstract its attributes into configuration items and configure the style of the canvas; SS3. Add multiple data display components to the canvas; SS4, abstract the data display components to form a display component model. The model features include appearance, data source configuration, component life cycle management logic, and provide a unified data receiving interface to the outside world; In the life cycle management of data display components: When a data display component is created, it registers itself with the data proxy. First, it compares its own data source with the existing data source in the data proxy by MD5. If they are consistent, it is considered that its own data source already exists, and the data display component is bound to the data source. If it does not exist, the data source is added to the data proxy, and then the data display component is bound to the data source. When a data display component is deleted, it will unregister itself from the data proxy, unbind the data source and the data display component, and then determine whether the data source is still bound to other components. If the number of components bound to this data source is 0, delete this data source from the data proxy and unregister itself from the data proxy. If the data source has other binding relationships, it will directly unregister itself. When the data source configuration of an existing data display component is modified, first execute the data display component unregistration process from the data proxy, then execute the component registration process, and re-register itself to the data proxy. The data display component uses data-driven rendering logic: when the data display component receives data, it first compares it with the original data in the data display component. If the data is different, the data conversion function is executed to convert the data into the data type and data structure required by the data display component. The data is then written into the component configuration and the component is re-rendered according to the latest configuration. SS5. Design a data agent to obtain data from the data source and manage the relationship between the data source and the data display component. It obtains data according to the data source configuration and then distributes it to the corresponding data display component.

[0005] Furthermore, the component list of the canvas in step SS3 is an array of configuration files, which contains the configurations of all data display components on the canvas. The canvas can dynamically load each data display component according to the configuration, create the data display component and render it on the web page.

[0006] Furthermore, in step SS4, all data display components are abstracted into a configuration file in JSON format. The canvas distinguishes component types according to the configuration file and loads and renders the data display components.

[0007] Furthermore, in step SS4, the appearance characteristics of the data display component are implemented at the display component model level, including characteristics of size, position, animation, transparency and rotation, and a configuration format is provided externally to achieve two-way data binding of component style and appearance configuration, and the style change of the component can be driven by data.

[0008] Furthermore, the data source configuration of the data display component in step SS4 includes API, database and message queue types, abstracting various types of data sources into a configuration file, and then implementing access to various types of data sources in the data agent, including actively crawling data from data sources and passively subscribing to push data from data sources.

[0009] Furthermore, in step SS4, the data source types of the data display component include MQTT, RabbitMQ, Kafka message queues, HTTP / HTTPS services, Mysql, Postgresql, SqlServer relational databases, Excel files, static data, and weather data.

[0010] Furthermore, in step SS4, different data display components have personalized rendering styles and data structures; the styles of various data display components need to be provided with personalized configurations, and two-way data binding of styles and configurations needs to be implemented to drive style changes with data; data structure differences include but are not limited to text, numbers, objects, and array types, and various data display components respectively implement data conversion functions in the life cycle management of the display component model, converting data obtained from the data source into data structures that can be used by themselves.

[0011] Furthermore, in step SS5, the data agent includes the data sources of all data display components, and the data agent obtains data according to the configuration of the data source, including active capture and passive reception of data after subscription; when the data agent captures or receives data from a data source, it first queries the list of components bound to the data source in the data agent, and then calls the data receiving interface of each data display component in turn to pass the data to each data display component.

[0012] Furthermore, in step SS5, the data agent chooses to actively capture data or passively subscribe to data according to the different data source types of the data source of the data display component. When the data agent obtains data from a certain data source, it will query the list of components bound to the data source, and then call the data receiving interface of each component in the list to distribute the data to each data display component.

[0013] Furthermore, the binding relationship between the data source and the data display component in the data proxy is 1:N (N>=1).

[0014] Compared with the prior art, the present invention has the following beneficial effects: The present invention provides a data acquisition and distribution method for configuration data visualization, which uses Internet of Things technology and data analysis technology, and through a what-you-see-is-what-you-get configuration method, allows users to monitor configuration data in one stop according to personalized needs and control the equipment at the same time; when the data sources bound to multiple components are the same, the pressure of concurrent access of multiple components can be reduced.

[0015] On the basis of providing configuration data visualization, the present invention manages the binding relationship between data sources and components through a data agent, and distributes the data to each bound component after obtaining the data. After receiving the data, the component converts the data according to its own characteristics and renders it on the web page. In addition to actively pulling data, the component of the present invention also supports receiving data through a message queue. BRIEF DESCRIPTION OF THE DRAWINGS

[0016] Figure 1 It is a schematic diagram of the relationship between the component life cycle and the data agent of the present invention.

[0017] Figure 2 It is a schematic diagram of the data transmission process of the data agent of the present invention.

[0018] Figure 3 It is a schematic diagram of the data-driven rendering process in the component of the present invention. DETAILED DESCRIPTION

[0019] In order to better understand the technical solution of the present invention, the following will be described in detail in conjunction with the relevant illustrations. It should be understood that the following specific embodiments are not intended to limit the specific implementation of the technical solution of the present invention, and are only implementations that can be adopted by the technical solution of the present invention. It should be noted that the description of the positional relationship of each component in this article, such as component A being located above component B, is based on the description of the relative positions of the components in the illustration, and is not intended to limit the actual positional relationship of the components.

[0020] See also Figure 1-3 , Figure 1 A schematic diagram of the relationship between the component life cycle and the data agent of the data acquisition and distribution method for configuration data visualization of the present invention is drawn. As shown in the figure, a data acquisition and distribution method for configuration data visualization involved in this embodiment 1 includes the following contents: SS1. Create a canvas web page; SS2, abstract the canvas page; Abstract its properties into configuration items to configure the style of the canvas, including page size, background color, and background image; SS3. Add multiple data display components to the canvas; SS4, abstract the data display components to form a display component model. The model features include appearance, data source configuration, component life cycle management logic, and provide a unified data receiving interface to the outside world; SS5. Design a data agent to obtain data from the data source and manage the relationship between the data source and the data display component. It obtains data according to the data source configuration and then distributes it to the corresponding data display component.

[0021] In SS4, all data display components are abstracted into a configuration file in JSON format. The canvas can distinguish component types based on the configuration file and load and render the components.

[0022] In SS4, the appearance characteristics of data display components are implemented at the display component model level, including characteristics such as size, position, animation, transparency and rotation. A configuration format (JSON format) is provided to the outside world to achieve two-way data binding of component style and appearance configuration, and the style change of components can be driven by data.

[0023] In SS4, the data source configuration of the data display component includes API, database, and message queue types, etc. Various types of data sources are abstracted into a configuration file, and then access to various types of data sources is implemented in the data agent, including actively grabbing data from data sources and passively subscribing to push data from data sources.

[0024] In SS4, the data source types of the data display component include message queues such as MQTT, RabbitMQ, Kafka, HTTP / HTTPS services, common relational databases such as Mysql, Postgresql, SqlServer, Excel files, static data, and weather data.

[0025] In SS4, in the life cycle management of data display components: When a data display component is created, it registers itself with the data proxy. First, it compares its own data source with the existing data source in the data proxy by MD5. That is, it compares the MD5 of the component's own data source configuration with the MD5 of the existing data source configuration in the data proxy. If they are consistent, it is considered that the data source already exists, and the data display component is bound to the data source. If it does not exist, the data source is added in the data proxy, and then the data display component is bound to the data source. The binding relationship between the data source in the data proxy and the data display component is 1:N (N>=1). When a data display component is deleted, it will unregister itself from the data proxy, release the binding relationship between the data source and the data display component, and then determine whether the data source is still bound to other components. If the number of components bound to this data source is 0, that is, there is no other binding relationship, then this data source will be deleted from the data proxy and the component will be unregistered from the data proxy. If the data source has other binding relationships, it will directly unregister itself. When the data source configuration of an existing data display component is modified, the data display component will first execute the unregistration process from the data proxy, and then execute the component registration process to re-register itself with the data proxy. The data display component uses data-driven rendering logic: the data display component listens to the received data. When the data display component receives the data, it first compares it with the original data in the data display component. When the data is different, the data conversion function is executed to convert the data into the data type and data structure required by the data display component. The data is then written into the component configuration and the component is re-rendered according to the latest configuration. Different data display components have personalized rendering styles and data structures. The styles of various data display components need to be provided with personalized configurations, and two-way data binding of styles and configurations needs to be implemented to drive style changes with data. Data structure differences include but are not limited to types such as text, numbers, objects, and arrays. Various data display components implement the data conversion functions in the life cycle management of the display component model, converting the data obtained from the data source into a data structure that can be used by themselves.

[0026] In SS4, the data display component provides a unified data receiving interface to the outside world. Based on the interface specifications of the general display components, different data display forms are implemented according to common needs, and different component data display forms are implemented, including bar charts, line charts, pie charts, rainfall charts, scatter charts, radar charts, dashboards, relationship diagrams, tree charts, Sankey charts, funnel charts, water polo charts, word clouds, tables, carousels, dynamic text, static text, pictures, clocks, counters, carousels, videos, progress bars, maps, geometric figures and decorations, etc. The data from the above data sources can be displayed according to user needs.

[0027] In SS5, the data agent contains the data source of all data display components. The data agent obtains data according to the configuration of the data source, including active crawling and passive reception of data after subscription. Active crawling includes crawling once or periodic crawling. When the data agent crawls or receives data from a data source, it first queries the list of components bound to the data source in the data agent, and then calls the data receiving interface of each data display component in turn to pass the data to each data display component.

[0028] In SS5, the data agent chooses to actively capture data or passively subscribe to data according to the different data source types of the data display component data source. When the data agent obtains data from a certain data source, it will query the list of components bound to the data source, and then call the data receiving interface of each component in the list to distribute the data to each data display component.

[0029] In SS3, the component list of the canvas is an array of configuration files, which contains the configuration of all data display components on the canvas. The canvas can dynamically load each data display component according to the configuration, create the data display component and render it on the web page.

[0030] The above are only specific application examples of the present invention and do not constitute any limitation on the protection scope of the present invention. Any technical solution formed by equivalent transformation or equivalent replacement shall fall within the protection scope of the present invention.

Claims

1. A data acquisition and distribution method for configuration data visualization, characterized in that: Includes the following: SS1. Create a canvas web page; SS2, abstract the canvas page; Abstract its properties into configuration items to configure the style of the canvas; SS3. Add multiple data display components to the canvas; SS4, abstract the data display components to form a display component model. The model features include appearance, data source configuration, component life cycle management logic, and provide a unified data receiving interface to the outside world; In the life cycle management of data display components: When a data display component is created, it registers itself with the data proxy. First, it compares its own data source with the existing data source in the data proxy by MD5. If they are consistent, it is considered that its own data source already exists, and the data display component is bound to the data source. If it does not exist, the data source will be added to the data proxy, and then the data display component will be bound to the data source; When a data display component is deleted, it will unregister itself from the data proxy, unbind the data source and the data display component, and then determine whether the data source is still bound to other components. If the number of components bound to this data source is 0, delete this data source from the data proxy and unregister itself from the data proxy. If the data source has other binding relationships, it will directly unregister itself. When the data source configuration of an existing data display component is modified, first execute the data display component unregistration process from the data proxy, then execute the component registration process, and re-register itself to the data proxy. The data display component uses data-driven rendering logic: when the data display component receives data, it first compares it with the original data in the data display component. If the data is different, the data conversion function is executed to convert the data into the data type and data structure required by the data display component. The data is then written into the component configuration and the component is re-rendered according to the latest configuration. SS5. Design a data agent to obtain data from the data source and manage the relationship between the data source and the data display component. It obtains data according to the data source configuration and then distributes it to the corresponding data display component.

2. A data acquisition and distribution method for configuration data visualization according to claim 1, characterized in that: The component list of the canvas in step SS3 is an array of configuration files, which contains the configurations of all data display components on the canvas. The canvas can dynamically load each data display component according to the configuration, create the data display component and render it on the web page.

3. A data acquisition and distribution method for configuration data visualization according to claim 1, characterized in that: In step SS4, all data display components are abstracted into a configuration file in JSON format. The canvas distinguishes component types based on the configuration file and loads and renders the data display components.

4. A data acquisition and distribution method for configuration data visualization according to claim 1, characterized in that: In step SS4, the appearance characteristics of the data display component are implemented at the display component model level, including the characteristics of size, position, animation, transparency and rotation. A configuration format is provided to the outside to achieve two-way data binding of component style and appearance configuration, and the style change of the component can be driven by data.

5. The data acquisition and distribution method for configuration data visualization according to claim 1, characterized in that: The data source configuration of the data display component in step SS4 includes API, database and message queue types. Various types of data sources are abstracted into a configuration file, and then various types of data sources are accessed in the data agent, including actively grabbing data from the data source and passively subscribing to push data from the data source.

6. A data acquisition and distribution method for configuration data visualization according to claim 1, characterized in that: In step SS4, the data source types of the data display component include MQTT, RabbitMQ, Kafka message queues, HTTP / HTTPS services, Mysql, Postgresql, SqlServer relational databases, Excel files, static data, and weather data.

7. A data acquisition and distribution method for configuration data visualization according to claim 1, characterized in that: In step SS4, different data display components have personalized rendering styles and data structures; the styles of various data display components need to be provided with personalized configurations, and two-way data binding of styles and configurations needs to be implemented to drive style changes with data; data structure differences include but are not limited to text, numbers, objects, and array types, and various data display components respectively implement data conversion functions in the life cycle management of the display component model, converting data obtained from the data source into data structures that can be used by themselves.

8. A data acquisition and distribution method for configuration data visualization according to claim 1, characterized in that: In step SS5, the data agent contains the data sources of all data display components. The data agent obtains data according to the configuration of the data source, including active capture and passive reception of data after subscription. When the data agent captures or receives data from a data source, it first queries the list of components bound to the data source in the data agent, and then calls the data receiving interface of each data display component in turn to pass the data to each data display component.

9. A data acquisition and distribution method for configuration data visualization according to claim 1, characterized in that: In SS5, the data agent chooses to actively capture data or passively subscribe to data according to the different data source types of the data display component data source. When the data agent obtains data from a certain data source, it will query the list of components bound to the data source, and then call the data receiving interface of each component in the list to distribute the data to each data display component.

10. The data acquisition and distribution method for configuration data visualization according to claim 1, characterized in that: The binding relationship between the data source and the data display component in the data proxy is 1:N (N>=1).

Images