A data acquisition and distribution method for configuration data visualization

Abstract

The present invention relates to a data acquisition and distribution method for configuration data visualization. When a component is created, it registers itself and its data source with a data proxy and binds the two. The data proxy acquires data according to the registered data source configuration and distributes the data to each component according to the binding relationship between the component and the data source. After the component monitors the data changes, it re-renders the data onto the web page canvas. The present invention uses a WYSIWYG configuration method to enable users to monitor configuration data in a one-stop manner according to personalized needs while also achieving control over the device. When multiple components are bound to the same data source, the pressure of concurrent access by multiple components can be reduced. In addition to actively pulling data, the components of the present invention also support receiving data through message queues.

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 concerned with the visual representation of data. It allows for the visual interpretation of data through expression, modeling, and the display of volumes, surfaces, attributes, and animations using graphics, image processing, computer vision, and user interfaces. Data visualization applications have gradually become mainstream on the web, and the commonly used solution is a configuration data visualization platform. A configuration data visualization platform refers to software for data acquisition and process control. When viewing and controlling data based on a configuration platform, it is necessary to provide users with a method for viewing data. However, the configuration data visualization platforms commonly used in the prior art still have the following problems:

[0003] (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, the high-frequency access when updating data will easily cause high concurrency pressure on the configuration platform;

[0004] (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

[0005] 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 achieving control over the equipment and reducing the pressure of concurrent access of multiple components.

[0006] The object of the present invention is achieved like this:

[0007] A data acquisition and distribution method for configuration data visualization, comprising the following contents:

[0008] SS1. Create a canvas web page;

[0009] SS2. Abstract the canvas page; abstract its attributes into configuration items and configure the canvas style;

[0010] SS3. Add multiple data display components to the canvas;

[0011] SS4: Abstract the data display components to form a display component model. The model features include appearance, data source configuration, component lifecycle management logic, and provide a unified data receiving interface.

[0012] In the lifecycle management of data display components:

[0013] When a data display component is created, it registers itself with the data proxy and first performs an MD5 comparison between its own data source and the existing data source in the data proxy. If they match, it is considered that the data source already exists, and the data display component is bound to it. If it does not exist, the data source is added to the data proxy, and then the data display component is bound to it.

[0014] When a data display component is deleted, it will be deregistered from the data proxy, and the binding relationship between the data source and the data display component will be released. After the deregistration, it will determine whether the data source is still bound to other components. If the number of components bound to this data source is 0, this data source will be deleted from the data proxy and the component will be deregistered from the data proxy. If the data source still has other binding relationships, it will directly deregister itself. When the data source configuration of an existing data display component is modified, the data display component will first execute the deregistration process from the data proxy, and then execute the component registration process to re-register itself with the data proxy.

[0015] 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 to the component configuration and the component is re-rendered based on the latest configuration.

[0016] 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.

[0017] Furthermore, the component list of the canvas in step SS3 is a configuration file array, 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 and render the data display component on the web page.

[0018] Furthermore, 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.

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

[0020] 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 capturing data from the data source and passively subscribing to push data from the data source.

[0021] 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.

[0022] Furthermore, in step SS4, different data display components have personalized rendering styles and data structures. It is necessary to provide personalized configuration for the styles of various data display components and implement two-way data binding of styles and configurations to drive style changes with data. Data structure differences include but are not limited to text, numbers, objects, and array types. Various data display components respectively implement the data conversion function in the life cycle management of the display component model to convert the data obtained from the data source into a data structure that can be used by themselves.

[0023] Furthermore, 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 crawling and passive reception of data after subscription. When the data agent crawls or receives data from a data source, it first queries the data agent for a list of components bound to the data source, and then calls the data receiving interface of each data display component in turn to pass the data to each data display component.

[0024] 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 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.

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

[0026] Compared with the prior art, the present invention has the following beneficial effects:

[0027] The present invention provides a data acquisition and distribution method for configuration data visualization. By using Internet of Things technology and data analysis technology, and through a what-you-see-is-what-you-get configuration method, users can monitor configuration data in one stop according to personalized needs and control the equipment at the same time. When multiple components are bound to the same data source, the pressure of concurrent access of multiple components can be reduced.

[0028] 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 components of the present invention also support receiving data through message queues. BRIEF DESCRIPTION OF THE DRAWINGS

[0029] Figure 1 Schematic diagram of the relationship between the component life cycle and data proxy of the present invention.

[0030] Figure 2 Schematic diagram of the data transmission process of the data agent of the present invention.

[0031] Figure 3 Schematic diagram of the data-driven rendering process within the component of the present invention. DETAILED DESCRIPTION

[0032] To better understand the technical solution of the present invention, the following detailed description is provided with reference to 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; they are merely examples of possible implementations of the technical solution of the present invention. It should be noted that references herein to the positional relationships of various components, such as component A being located above component B, are based on the relative positions of the components in the illustrations and are not intended to limit the actual positional relationships of the components.

[0033] See also Figure 1-3 , Figure 1 A schematic diagram of the relationship between the component lifecycle and data agent of the data acquisition and distribution method for configuration data visualization of the present invention is drawn. As shown in the figure, the data acquisition and distribution method for configuration data visualization involved in this embodiment 1 includes the following contents:

[0034] SS1. Create a canvas web page;

[0035] SS2, abstract the canvas page;

[0036] Abstract its properties into configuration items to configure the canvas style, including page size, background color, and background image;

[0037] SS3. Add multiple data display components to the canvas;

[0038] SS4: Abstract the data display components to form a display component model. The model features include appearance, data source configuration, component lifecycle management logic, and provide a unified data receiving interface.

[0039] 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.

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

[0041] 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 between component style and appearance configuration, and the style change of components can be driven by data.

[0042] In SS4, the data source configuration of the data display component includes API, database, and message queue types. 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 crawling data from the data source and passively subscribing to push data from the data source.

[0043] 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.

[0044] In SS4, the lifecycle management of data display components:

[0045] 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 performing an MD5 comparison. 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 it. If not, the data source is added to the data proxy, and then the data display component is bound to it. The binding relationship between the data source in the data proxy and the data display component is 1:N (N>=1).

[0046] When a data display component is deleted, it will unregister itself from the data proxy and release the binding relationship between the data source and the data display component. After the unbinding, it will 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 are no other binding relationships, 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 still 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.

[0047] The data display component uses data-driven rendering logic: the data display component listens for received data. When the data is received, 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 to the component configuration and the component is re-rendered based on the latest configuration.

[0048] Different data display components have personalized rendering styles and data structures. It is necessary to provide personalized configuration for the styles of various data display components and implement two-way data binding between styles and configurations 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 lifecycle management of the display component model, converting data obtained from the data source into a data structure that can be used by themselves.

[0049] 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 component, 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, rain 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.

[0050] In SS5, the data proxy contains the data sources of all data display components. The data proxy obtains data based on the configuration of the data source, including active crawling and passive data reception after subscription. Active crawling includes one-time crawling or periodic crawling. When the data proxy crawls or receives data from a data source, it first queries the data proxy for a list of components bound to the data source, and then calls the data receiving interface of each data display component in sequence to pass the data to each data display component.

[0051] In SS5, the data agent chooses to actively capture data or passively subscribe to data based on the data source type 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.

[0052] 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.

[0053] The above are only specific application examples of the present invention and do not constitute any limitation on the scope of protection of the present invention. Any technical solutions formed by equivalent transformation or equivalent replacement shall fall within the scope of protection 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 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 lifecycle management logic, and provide a unified data receiving interface. In the lifecycle management of data display components: When a data display component is created, it registers itself with the data proxy. First, it performs an MD5 comparison between its own data source and the existing data source in the data proxy. If they match, 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 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 be deregistered from the data proxy, and the binding relationship between the data source and the data display component will be released. After the deregistration, it will determine whether the data source is still bound to other components. If the number of components bound to this data source is 0, this data source will be deleted from the data proxy and the component will be deregistered from the data proxy. If the data source still has other binding relationships, it will directly deregister itself. When the data source configuration of an existing data display component is modified, the data display component will first execute the deregistration 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: 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 to the component configuration and the component is re-rendered based on 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. The 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. The 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 JSON configuration file. The canvas distinguishes component types based on the configuration file and loads and renders the data display components.

4. The 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 size, position, animation, transparency, and rotation characteristics. A configuration format is provided to the outside world to achieve two-way data binding between 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 access to various types of data sources is implemented in the data agent, including actively capturing data from the data source and passively subscribing to push data from the data source.

6. The 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. The 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. It is necessary to provide personalized configuration for the styles of various data display components and implement two-way data binding between styles and configurations to drive style changes with data. Data structure differences include but are not limited to text, numbers, objects, and array types. Various data display components implement the data conversion function in the lifecycle management of the display component model to convert the data obtained from the data source into a data structure that can be used by themselves.

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

9. The 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 based on the data source type 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.

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