Instrument panel construction method, electronic equipment and storage medium

Abstract

The invention provides an instrument panel construction method, electronic equipment and a storage medium, and belongs to the technical field of data visualization. The method comprises the steps that user configuration information is received based on a chart configuration interface, the user configuration information comprises data configuration information and visual configuration information, and the visual configuration information comprises chart configuration information and instrument panel configuration information; when an XML writing instruction is received based on a target instrument panel corresponding to the instrument panel configuration information, converting the XML writing instruction into a React component tree; and rendering the target instrument panel based on the React component tree, and binding target data to the rendered target instrument panel based on the data configuration information. According to the invention, flexible construction and efficient customization of the data visualization instrument panel can be realized.

Description

TECHNICAL FIELD

[0001] The present application relates to the technical field of data visualization, and particularly relates to a dashboard construction method, an electronic device and a storage medium. BACKGROUND

[0002] In today's digital age, data visualization has become an important means for analysis and understanding of data in various industries. Data visualization platforms help users quickly obtain key information by converting complex data into intuitive and easy-to-understand charts and dashboards, so as to make more intelligent decisions. However, with the continuous growth and diversification of business needs, existing visualization platforms are difficult to flexibly adapt to different users and changing data visualization needs.

[0003] On the one hand, existing visualization platforms mostly use fixed component libraries to realize data visualization functions. These platforms determine the supported chart types and dashboard layouts at the design time, and users can only select and configure within limited options, which cannot meet the personalized requirements of users for complex data display.

[0004] On the other hand, when users need to add custom charts or dashboards to meet specific business needs, the customization process of existing customizable dashboard construction methods is complex and costly. Professional developers need to modify and extend the system bottom code, which is too high for ordinary users, and once the system is updated, the previous customization work may face compatibility problems, requiring a large amount of time and effort to adjust.

[0005] Therefore, there is an urgent need for a method that can realize flexible construction and efficient customization of data visualization dashboards to solve the above problems in the prior art. SUMMARY

[0006] The purpose of the present application is to provide a dashboard construction method, an electronic device and a storage medium to solve the above problems.

[0007] To achieve the above purpose, in a first aspect, the present application provides a dashboard construction method, which comprises: receiving user configuration information based on a chart configuration interface, the user configuration information comprising data configuration information and visualization configuration information, the visualization configuration information comprising chart configuration information and dashboard configuration information; when an XML writing instruction is received based on the target dashboard corresponding to the dashboard configuration information, converting the XML writing instruction into a React component tree; rendering the target dashboard based on the React component tree, and binding target data to the rendered target dashboard based on the data configuration information.

[0008] In some embodiments, the chart configuration interface comprises an SPL editing area, a chart component configuration area, and a dashboard selection area, the chart configuration interface receives user configuration information, comprising: receiving data configuration information based on the SPL editing area; receiving chart configuration information based on the chart component configuration area, the chart component configuration area comprises a chart component selection area, a chart component attribute configuration area, and a chart preview area, wherein the chart component selection area comprises system chart components and custom chart components; receiving dashboard configuration information based on the dashboard selection area, the dashboard selection area comprises a dashboard instance selection list, a create dashboard instance area, and an add button, wherein the create dashboard instance area comprises an existing dashboard container selection list, the existing dashboard container selection list comprises system dashboard containers and custom dashboard containers. In some embodiments, the dashboard configuration information comprises a dashboard instance selection instruction or a dashboard container selection instruction, the receiving dashboard configuration information based on the dashboard selection area comprises: receiving a dashboard instance selection instruction based on the dashboard instance selection list to determine the dashboard corresponding to the dashboard instance selection instruction as a target dashboard; or receiving a dashboard container selection instruction based on the dashboard container selection list to create a corresponding target dashboard based on the dashboard container selection. In some embodiments, after the receiving XML writing instructions based on the target dashboard corresponding to the dashboard configuration information, before converting the XML writing instructions into a React component tree, further comprising: when a trigger operation is received based on the target dashboard, publishing a dashboard details interface corresponding to the target dashboard; receiving an editing instruction based on the dashboard details interface, and publishing a code editing area according to the editing instruction, the code editing area is used to receive XML writing instructions.

[0009] In some embodiments, after the converting the XML writing instructions into a React component tree, comprising: determining the type of the target component corresponding to the XML writing instructions, the type of the target component comprises system visual tools or custom visual tools; when the type of the target component is a system visual tool, loading the implementation code corresponding to the target component based on a platform library; when the type of the target component is a custom visual tool, loading the implementation code corresponding to the target component based on a registry. In some embodiments, the method further comprises: publishing a development interface through a standard scaffolding tool, and receiving a user's visualization tool configuration operation based on the development interface; generating a packaging file based on the visualization tool configuration operation, the packaging file comprising metadata and code logic; uploading the packaging file based on a visualization tool management page, so that a server registers a corresponding visualization tool to the visualization tool management page based on the packaging file, and synchronously updates the registered visualization tool to a chart component selection area or a dashboard container selection list. In some embodiments, the visualization tool configuration operation comprises a metadata definition operation and a code logic writing operation, and the receiving a user's visualization tool configuration operation based on the development interface comprises: receiving a metadata definition operation based on the development interface, and generating metadata; receiving a code logic writing operation based on the development interface, and generating a JavaScript file; the generating a packaging file based on the visualization tool configuration operation comprises: generating a packaging file based on the metadata and the JavaScript file.

[0010] In some embodiments, after the uploading the packaging file based on the visualization tool management page, the method further comprises: extracting a custom visualization tool name corresponding to the packaging file; when detecting a registered tool name identical to the custom visualization tool name, obtaining a custom version number of the packaging file; if the custom version number is identical to a version number of the registered tool name, triggering a version conflict prompt; if the custom version number is not identical to the version number of the registered tool name, publishing a prompt window for indicating whether to overwrite a registered tool corresponding to the registered tool name; when receiving a trigger instruction of not overwriting based on the prompt window, displaying in registration time order on the visualization tool management page.

[0011] In a second aspect, to achieve the above object, the present application further provides an electronic device, comprising: one or more processors; a memory for storing one or more programs, wherein when the one or more programs are executed by the one or more processors, the one or more processors execute the dashboard building method as described above.

[0012] In a third aspect, to achieve the above object, the present application further provides a computer storage medium, which stores executable instructions, and the instructions, when executed by a processor, cause the processor to perform the dashboard building method as described above.

[0013] Compared with the prior art, the beneficial effects of the present application include: In a first aspect, the present application provides a visual chart configuration interface, so that users can complete data configuration, chart configuration and dashboard configuration in the interface. This operation process is consistent with the actual working thought of data analysts who first focus on data and then perform visualization. Compared with the operation mode of selecting chart components first and then configuring data on the market, the present application is more in line with the thinking habits of users, and can improve user experience and work efficiency.

[0014] In a second aspect, the present application supports direct modification of the target dashboard through XML writing instructions, without the need to modify the platform underlying code or re-register a visualization tool for calling. The inventive concept of separating configuration from code makes it unnecessary to change the underlying code when modifying the configuration, thereby greatly reducing the maintenance cost of the system.

[0015] In a third aspect, the present application realizes the automation process from configuration to component generation by converting the XML writing instructions into a React component tree, reducing the manual coding and debugging links. This improvement not only improves the development efficiency, but also reduces the risk of introducing errors due to manual coding, further improving the stability and reliability of the system.

[0016] In a fourth aspect, in the prior art, the visualization interface is highly coupled with the underlying technology (such as data source, rendering engine), and replacing the technology stack (such as migrating from React to Vue) often requires re-development, which is costly. The present application introduces an intermediate layer abstraction, taking XML configuration as an independent intermediate description language, decoupling the visualization requirements and the implementation technology. At the same time, the universal design of the React component generates the logic of the standard component tree, so that it can be adapted to other front-end frameworks in the future (such as replacing React with Vue, only the component mapping rule needs to be modified). This improvement significantly improves the technology compatibility, reduces the technology stack migration cost, enhances the technology neutrality, and avoids the risks caused by technology binding. BRIEF DESCRIPTION OF DRAWINGS

[0017] In order to more clearly illustrate the technical solutions of the embodiments of the present application, the following will briefly introduce the drawings needed to be used in the embodiments. It should be understood that the following drawings only show some embodiments of the present application, and therefore should not be regarded as limiting the scope of the present application.

[0018] Figure 1 FIG. 1 is a flowchart of a dashboard building method in an embodiment. Figure 2 A functional module diagram of a chart configuration interface in another embodiment; Figure 3 A flow diagram of a dashboard building method in another embodiment; Figure 4 A flow diagram of a dashboard building method in another embodiment; Figure 5 A structural diagram of an electronic device related to a dashboard building method in an embodiment of the present application. DETAILED DESCRIPTION

[0019] In order to make the purposes, technical solutions and advantages of the present application clearer, the present application is further described in detail below with reference to the accompanying drawings and embodiments. It should be understood that the specific embodiments described herein are only used to explain the present application and should not be used to limit the present application.

[0020] All the terms used in the present application (including technical and scientific terms) have the meanings commonly understood by those skilled in the art, unless otherwise defined. It should be noted that the terms used herein should be interpreted to have meanings consistent with the context of the present specification, and should not be interpreted in an idealized or overly formal manner.

[0021] For example, the terms "first", "second", and the like used in the present application can be used herein to describe various elements, but these elements are not limited by these terms. These terms are only used to distinguish the first element from another element.

[0022] For another example, the terms "include", "contain", and the like used in the present application indicate the existence of a feature, step, operation and / or component, but do not exclude the existence or addition of one or more other features, steps, operations or components.

[0023] As mentioned above, on the one hand, existing visualization platforms mostly use fixed component libraries to realize data visualization functions. These platforms determine the supported chart types and dashboard layouts at the design time, and users can only select and configure among limited options, which cannot meet the personalized requirements of users for complex data display. On the other hand, when users need to add custom charts or dashboards to meet specific business requirements, the customization process of existing customizable dashboard building methods is complex and costly. Professional developers need to modify and extend the system bottom code, which is too high for ordinary users. Moreover, once the system is updated, the previous customization work may face compatibility problems and need to invest a lot of time and effort to adjust. Therefore, there is an urgent need for a method that can realize flexible building and efficient customization of data visualization dashboards to solve the above problems in the prior art. To this end, the present application provides a dashboard building method, an electronic device and a storage medium, which can realize flexible building and efficient customization of data visualization dashboards.

[0024] As shown in the Figure 1 The present application embodiment provides a dashboard building method, which comprises the following steps: Step S10, receiving user configuration information based on a chart configuration interface.

[0025] In this embodiment, the chart configuration interface is a visualization operation interface for receiving data configuration, chart configuration and dashboard configuration information under the click or key operation of the user. The user configuration information refers to various parameters and settings input or selected by the user in the chart configuration interface, including data configuration information and visualization configuration information. Among them, the data configuration information refers to the configuration information related to the data source, such as the source of the data, the query statement of the data (such as SPL statement), the mapping of the data field, etc. The visualization configuration information refers to the configuration information related to the visualization display of the chart and the dashboard, including chart configuration information and dashboard configuration information. The chart configuration information refers to the configuration information related to a single chart, such as the type of the chart (such as line chart, column chart, pie chart, etc.), the style of the chart (such as color, line style, etc.), the layout of the chart (such as coordinate axis setting, legend position, etc.). The dashboard configuration information refers to the configuration information related to the entire dashboard, such as the selected target dashboard container or instance, the layout of the dashboard, the theme style, the component arrangement order, etc.

[0026] Step S20, when receiving an XML writing instruction based on the target dashboard corresponding to the dashboard configuration information, converting the XML writing instruction into a React component tree.

[0027] The XML writing instruction in the embodiment is an instruction based on an XML format, and is used for modifying XML code of a target dashboard. The XML is an extensible markup language, has good readability and maintainability, and each node in the XML code is mainly used for data storage and transmission, and has a structure based on a tag and an attribute.

[0028] In some embodiments, a dashboard detail interface corresponding to the target dashboard can be published based on receiving a trigger operation of the target dashboard. An editing instruction can be received based on the dashboard detail interface, and a code editing area containing XML code of the target dashboard can be published according to the editing instruction, to receive an XML writing instruction.

[0029] For example, a more diversified display style can be given to a chart by directly editing a style attribute in the XML code of the target dashboard. The configuration parameter of the chart can also be directly modified by editing a config attribute. This operation mode breaks through the limitation of relying only on preset options in the chart configuration interface, and provides higher flexibility and customization capability for the user.

[0030] For example, a user selects a line chart component to add to a target dashboard in a chart configuration interface, and configures a basic style and data binding through the chart configuration interface. When the user intends to further modify the style of the line chart, such as adjusting the thickness of a line, adding a gradient color effect, or modifying the interactive behavior of the chart, such as adding the content of a prompt box when a mouse hovers, the user can trigger an operation of the target dashboard, enter a dashboard detail interface, and trigger an editing instruction in the dashboard detail interface to enter a code editing area to directly edit a style attribute or a config attribute of the line chart component in the XML code of the target dashboard. Through this embodiment, the user can implement more complex styles and functions without relying on limited options provided by the chart configuration interface.

[0031] In some embodiments, the dashboard detail interface further includes a display mode. In the display mode, selected chart components are added to the target dashboard in a time sequence of being added to a dashboard instance, and the components are arranged in a sequence from left to right and from top to bottom. The dashboard supports full-screen display, supports self-adaptation of different specifications of display screens, and always maintains a proportional enlargement or reduction. If a screen cannot be completely filled by a length and a width, a specified background image or background color is displayed.

[0032] In addition, it should be noted that in the editing mode of the dashboard details interface, in addition to the parameters of the configuration item, XML code writing is also supported for the visual operation of chart dragging and positioning. If the "edit" button on the chart is clicked, the chart component attribute configuration area will be popped up, and the chart data, type and configuration can be modified here. In addition, the switching of the dashboard theme (black, white and festive red) also supports direct modification without modifying the XML code.

[0033] The React component tree in the embodiment is a data structure in the React framework, used to represent the hierarchical relationship between components. Each component is an independent UI unit and can contain sub-components. The component tree is generated by parsing the XML writing instructions and is used to render the dashboard in the React framework.

[0034] In one embodiment, based on the XML writing instructions, each node in the XML code of the target dashboard after writing is converted into an object (such as a JavaScript object), forming a tree structure, wherein each object represents an XML node, the attributes of the object represent the attributes of the node, and the child objects of the object represent the child nodes of the node. Starting from the root node in the tree structure, the parsed objects are recursively traversed. According to the preset mapping rule, each node in the XML code is converted into a React component, and a React component tree is constructed.

[0035] The preset mapping rule refers to defining a mapping rule according to the node type (such as chart) in the XML to map the XML node to the React component. For example, the chart node is mapped to the Chart component.

[0036] In another embodiment, based on the XML writing instructions, the XML modification node corresponding to the XML writing instructions is converted into a corresponding modification object (such as a JavaScript object), and the tree structure before modification is updated based on the modification object. Starting from the root node in the updated tree structure, the parsed objects are recursively traversed. According to the preset mapping rule, the XML modification node is converted into a new React component, and the original React component tree is updated according to the new React component. In this embodiment, when the XML code is modified, only the changed part is re-rendered, without the need to re-render the entire target dashboard, which can significantly reduce the amount of calculation and improve the performance.

[0037] Further, in some embodiments, after the XML writing instruction is converted into a React component tree, the type of the target component corresponding to the XML writing instruction is determined, the type of the target component including a system visualization tool or a custom visualization tool; when the type of the target component is a system visualization tool, the implementation code corresponding to the target component is loaded based on a platform library; when the type of the target component is a custom visualization tool, the implementation code corresponding to the target component is loaded based on a registry.

[0038] wherein the target component refers to a component described in the XML writing instruction and needed to be presented in the dashboard, such as a chart component, a dashboard component, a dashboard application, etc. The system visualization tool refers to a pre-defined visualization tool built in the platform, such as commonly used chart types like line chart, column chart, pie chart, etc. These components are developed and provided by the platform, and the user does not need to develop additionally. By pre-defining the mapping relationship between the system visualization tool and the implementation code in the platform library, the implementation code corresponding to the target component can be determined and loaded into the memory. The custom visualization tool refers to a visualization tool developed by the user according to the own needs. These components are developed by the standard scaffolding tool provided by the platform and uploaded to the registry of the platform. The registry is used to store the related information of the custom visualization tool uploaded by the user, including the component type, the storage path of the implementation code, the version number, etc. After determining that the target component is a custom visualization tool, the storage path of the implementation code of the target component is obtained by querying the registry according to the type thereof. The implementation code is loaded from the storage path into the memory through a dynamic loading mechanism (such as the import() function of JavaScript or dynamically creating a script tag).

[0039] Specifically, when the type of the target component corresponding to the XML writing instruction is a system visualization tool (i.e. a platform built-in component), the system directly instantiates the XML node corresponding to the target component into a React component node according to the preset mapping relationship, finally generates a React component tree, and completes rendering in the React runtime. When the type of the target component corresponding to the XML writing instruction is a custom visualization tool, the system no longer continues to construct the React component tree, but turns to a runtime dynamic mounting mode.

[0040] For example, in the XML, the target component is described as <v-custom-component src="main.js" type="common" / >The declaration, wherein src points to the UMD / AMD specification JS file (containing Vue components, native WebComponent or any framework entry module) output after scaffolding; type="common" marks the trigger of the common loading process: the tag is parsed by the XMLRenderer of the WebApp; the script is dynamically pulled by SystemJS or the internal UMDLoader; the exported class inherited from BaseComponent is instantiated, and the render() method is called to mount the component to the specified DOM node; style isolation is completed by StyleWrapper, supporting additional styleSrc automatic loading and isolation.

[0041] Therefore, the application distinguishes between the system visualization tool (React native) and the custom visualization tool (common dynamic mounting) in the "XML→component tree" phase, retaining the efficient rendering advantage of the React system for built-in components, and realizing open expansion of any front-end framework through the UMD / AMD runtime loading mechanism, thereby completing the technology stack-neutral visualization capability enhancement without modifying the platform core code.

[0042] The embodiment distinguishes between the system visualization tool and the custom visualization tool, and uses different loading methods, so that the platform can efficiently utilize and expand built-in system components, and conveniently use custom components, improving the flexibility and scalability of the system. Moreover, by clearly defining the component type and the corresponding loading path, the accuracy of component loading is ensured, and display abnormalities or function missing caused by component type confusion or loading path errors are avoided.

[0043] Step S30, rendering the target dashboard based on the React component tree, and binding the target data to the rendered target dashboard based on the data configuration information.

[0044] The rendering in the embodiment refers to the process of converting the React component tree into an actual DOM (Document Object Model) structure in the React framework and displaying it in the visualization interface. The target data refers to the data obtained according to the data configuration information, which will be bound to each component of the dashboard for displaying the visualization content. Data binding refers to the process of associating data with components, so that components can dynamically display data content. In the React framework of the embodiment, data binding can be realized through the state (state) or property (props) of the component.

[0045] As a feasible implementation of rendering a target dashboard, a rendering function (such as ReactDOM.render) of a React framework can be called to render a React component tree into a DOM structure of the target dashboard according to a structure of the React component tree. During the rendering process, target data corresponding to each component in the React component tree is obtained from a data source according to data configuration information. For example, the target data is obtained by executing an SPL statement input by a user in a chart configuration interface to query the target data from a database or a data warehouse. The obtained target data is bound to each component in the rendered target dashboard, and each component displays the corresponding target data in a corresponding area according to corresponding rendering logic when the target data is received, thereby completing the visualization of the entire dashboard. For example, the obtained date and value data is bound to a line chart component, and the obtained classification and count data is bound to a column chart component.

[0046] As another optional implementation of rendering a target dashboard, a rendering function (such as ReactDOM.render) of a React framework can be called to render a new React component in an updated React component tree into a DOM structure of the target dashboard according to a structure of the updated React component tree. During the rendering process, target data corresponding to the new React component is obtained from a data source according to data configuration information.

[0047] In the dashboard construction method provided in the embodiments of the present application, in a first aspect, the present application provides a visual chart configuration interface, so that a user can complete data configuration, chart configuration, and dashboard configuration operations in the interface. This operation process is consistent with the actual working thought of a data analyst who first focuses on data and then performs visualization. Compared with the operation mode of selecting a chart component first and then configuring data on the market, the present application is more consistent with the thinking habits of users, and can improve user experience and work efficiency.

[0048] In a second aspect, the present application supports direct modification of a target dashboard through XML writing instructions without modifying platform underlying codes or re-registering a visualization tool for calling. The inventive concept of separating configuration from codes enables modification of configuration without changing underlying codes, thereby greatly reducing the maintenance cost of the system.

[0049] In a third aspect, the present application converts XML writing instructions into a React component tree, realizes an automatic process from configuration to component generation, reduces manual coding and debugging links. This improvement not only improves development efficiency, but also reduces the risk of introducing errors caused by manual coding, and further improves the stability and reliability of the system.

[0050] In the fourth aspect, in the prior art, the visualization interface is highly coupled with underlying technologies (such as data sources and rendering engines), and replacing a technology stack (such as migrating from React to Vue) often requires re-development, which is costly. The present application decouples the visualization requirements and the implementation technologies by introducing an intermediate layer abstraction and taking XML configuration as an independent intermediate description language. Meanwhile, the universal design of the React component generates logic for a standardized component tree, so that other front-end frameworks can be adapted in the future (for example, when replacing React with Vue, only the component mapping rules need to be modified). This improvement significantly improves technology compatibility, reduces technology stack migration costs, enhances technology neutrality, and avoids risks caused by technology binding.

[0051] In one embodiment, as shown in Figure 2 and Figure 3 The step S10 includes: Step S11, receiving data configuration information based on the SPL editing area.

[0052] In this embodiment, the SPL editing area is a text editing area for receiving an SPL (Structured Query Language) statement input by a user to select and process a data source. The data configuration information refers to the SPL statement and related parameters input by the user, which are used to define the source of data, filtering conditions, sorting rules, and the like. The SPL editing area can also integrate function modules such as syntax highlighting, function prompts, real-time error red lines, and automatic completion to assist the user in accurately inputting the data configuration information.

[0053] In some embodiments, the SPL query statement input by the user can be received in the SPL editing area, and context parameters input by the user through an associated macro variable input area or a time range selector can be captured to form a complete query instruction. Based on the SPL editing area, the query instruction containing the context parameters is sent to the server in response to a preview instruction of the user to return a data preview result and field metadata conforming to the query instruction. After confirming that there is no error, the SPL query statement and the context parameter sequence are serialized into the data configuration information and stored for subsequent rendering stage calling. If a syntax or permission error is detected, an error prompt and a correction suggestion are presented in the SPL editing area in real time.

[0054] Step S12, receiving chart configuration information based on the chart component configuration area.

[0055] In this embodiment, the chart component configuration area includes a chart component selection area, a chart component attribute configuration area, and a chart preview area. The chart component selection area is configured to display chart components by type, such as line charts, bubble charts, pie charts, etc. These chart components include system chart components and custom chart components. The chart component attribute configuration area is configured to configure specific attributes of the chart component, such as the smoothness of the line chart, grid display, coordinate axis data source field settings, etc. The chart preview area is configured to display the chart effect in real time according to the configured attributes. The chart configuration information refers to the chart type selected by the user, the configured attribute values, and the preview confirmation results, etc.

[0056] For example, the user selects a line chart as the chart type in the chart component selection area. In the chart component attribute configuration area, the user sets the color of the line chart to blue and the line style to a smooth curve, and sees the corresponding chart effect in the chart preview area. After receiving the user's confirmation and saving instruction, the system stores these configuration information.

[0057] Step S13, receiving dashboard configuration information based on the dashboard selection area.

[0058] In this embodiment, the dashboard selection area is configured to select or create a dashboard instance and add charts to it, including a dashboard instance selection list, a create dashboard instance area, and an add button. The create dashboard instance area includes an existing dashboard container selection list, which includes system dashboard containers and custom dashboard containers. The add button is configured to add the selected chart component to the selected target dashboard instance. The dashboard configuration information refers to the configuration information of the target dashboard instance selected by the user.

[0059] In some embodiments, the dashboard configuration information includes a dashboard instance selection instruction, and the dashboard instance selection instruction is received based on the dashboard instance selection list to determine the dashboard corresponding to the dashboard instance selection instruction as the target dashboard.

[0060] In some embodiments, the dashboard configuration information includes a dashboard container selection instruction, and the dashboard container selection instruction is received based on the dashboard container selection list to create a corresponding target dashboard based on the dashboard container selection.

[0061] In the instrument panel construction method proposed in the embodiments of the present application, in a first aspect, the SPL editing area is used, and compared with the existing data visualization scheme which is incapable of processing and analyzing real-time and complex data by means of SQL to obtain source data from a database. The system can adapt to various data sources and complex data processing requirements, and improve the data processing capability and adaptability of the system. In a second aspect, the chart component configuration area supports system chart components and custom chart components, and the instrument panel selection area supports system instrument panel containers and custom instrument panel containers. This design enables the system to meet the diversified needs of different users and can be continuously expanded as the user needs grow. In a third aspect, the user can complete all configuration work in a one-stop chart configuration interface, reducing the time cost of switching between different interfaces or tools.

[0062] In one embodiment, as shown in Figure 4 The method further includes: Step A10, publishing a development interface through a standard scaffolding tool, and receiving a visualization tool configuration operation of a user based on the development interface.

[0063] In the embodiments, the standard scaffolding tool refers to a standardized development tool provided by a platform, which is used to support the creation of different types of applications, i.e., instrument panel apps, instrument panel container components, and chart components. When the standard scaffolding tool is started, the user is prompted to select and edit the application title, description, application type, development template, etc. The development interface refers to a user interface generated based on the scaffolding tool, which allows the user to perform configuration and development operations of the visualization tool. The visualization tool configuration operation refers to the configuration and development operations of the visualization tool performed by the user in the development interface, including the setting of a data binding interface, the definition of metadata (type, name, version number, attribute configuration), the writing of code logic, etc.

[0064] In some embodiments, the step A10 includes: receiving a metadata definition operation based on the development interface to generate metadata; and receiving a code logic writing operation based on the development interface to generate a JavaScript file.

[0065] For example, it is assumed that the user wants to develop a custom “bubble chart” chart component. After starting the standard scaffolding tool, the user selects the “chart component” type and the “React chart template” on the development interface. The scaffolding tool generates a development directory, including BubbleChart.js and BubbleChart.config.json files in the src directory, etc. The user defines metadata (such as name, version number, type, etc.) in the BubbleChart.config.json file, and writes code logic in the BubbleChart.js file.

[0066] Step A20, based on the visualization tool configuration operation to generate a packaged file.

[0067] In this embodiment, the packaged file refers to a file generated by compiling, compressing and other processing of the source code, configuration file and other resources of the visualization tool, which is used for publishing and using on the platform, and must include metadata and code logic.

[0068] In some embodiments, source code files, compiled UMD format JavaScript files, dependency lists and metadata files can be included. The source code files are used to retain the complete source code for subsequent maintenance and updates. The compiled UMD format JavaScript files contain executable code of the application or component. The dependency list is used to record the external dependencies of the component / app. The metadata file contains the type of the component, the name of the component / app and the configuration information. In this embodiment, the retention of the source code file facilitates subsequent maintenance and updates, the dependency list ensures that the dependencies are loaded correctly at runtime, and the metadata file facilitates platform identification and management.

[0069] For example, after the user completes the development of the "bubble chart" component, the user runs the npm run build command in the development interface. The packaging tool reads the source code files and configuration files in the src directory, compiles the JavaScript code into UMD format, generates the BubbleChart.umd.js file, and compresses all files. At the same time, a dependency list (such as package.json) and a metadata file (such as BubbleChart.metadata.json) are generated. Finally, these files are packaged into a bubble-chart-component-v1.0.0.zip file.

[0070] Step A30, based on the visualization tool management page to upload the packaged file, so that the server registers the corresponding visualization tool based on the packaged file to the visualization tool management page, and synchronously updates the registered visualization tool to the chart component selection area or the dashboard container selection list.

[0071] In this embodiment, the visualization tool management page refers to a page provided by the platform for managing visualization tools, allowing users to upload, publish, uninstall and manage custom visualization tools, including custom chart components, custom dashboard container components and custom dashboard applications.

[0072] Specifically, a user logs in to the visual tool management page, selects the "upload" operation, and uploads the previously generated packaging file. After the server receives the packaging file, it performs preset processing operations, including verifying the integrity and security of the packaging file, parsing the metadata, storing the resource files, registering with the component registry, and the like. The registered visual tool information is updated to the chart component selection area or the dashboard container selection list, making it available in the configuration interface.

[0073] Illustratively, a user logs in to the visual tool management page, clicks the "upload" button, and selects the bubble-chart-component-v1.0.0.zip file for uploading. After the server receives the file, it performs verification and parsing, stores the metadata in the component registry, and stores the BubbleChart.min.js file in the resource file directory. Finally, the server synchronously updates the "bubble chart" component to the chart component selection area, and the user can see and use this new custom component in the chart component selection area of the configuration interface.

[0074] In some embodiments, after uploading the packaging file based on the visual tool management page, the method can further include: extracting the custom visual tool name corresponding to the packaging file; when a registered tool name identical to the custom visual tool name is detected, obtaining the custom version number of the packaging file; if the custom version number is identical to the version number of the registered tool name, triggering a version conflict prompt; if the custom version number is not identical to the version number of the registered tool name, publishing a prompt window for indicating whether to overwrite the registered tool corresponding to the registered tool name; and when a non-overwrite triggering instruction is received based on the prompt window, displaying the visual tool management page in registration time order.

[0075] The custom visual tool name is defined by the user in the metadata file and is used to identify the tool. The registered tool name is the name of the visual tool that has been registered in the platform's registry. The custom version number is defined by the user in the metadata file and is used to identify different versions of the tool. The version conflict prompt is a prompt triggered by the system when the version number of the uploaded custom visual tool is the same as the version number of the registered tool, informing the user of the version conflict. For example, the server compares the uploaded custom version number 1.0.0 with the version number 1.0.0 of the registered tool and finds that they are the same, triggering the version conflict prompt and displaying the message "Version conflict: There is already a tool with the same name and version number custom_bubble_chart@1.0.0, which cannot be directly overwritten." Overwrite means replacing the new version of the custom visual tool uploaded by the user with the registered old version. When the user intentionally updates the version of the existing tool, the system provides the option to overwrite the operation, ensuring that the user can actively manage the version update of the tool. If the user chooses not to overwrite the registered tool in the prompt window, the existing tool is not updated in the registry, and the registered tool version is preserved. At the same time, the tools are displayed in order of registration time, making it easy for users to view and manage the historical versions of the tools.

[0076] The embodiment significantly improves the ease of use and reliability of the dashboard building system through a fine version management mechanism. It effectively prevents users from accidentally overwriting the registered version of the custom visual tool due to misoperation, protecting the stability and integrity of the data. When the version of the uploaded tool is the same as the registered version, the system triggers a version conflict prompt, ensuring that the user can make a clear choice when updating the version. In addition, the system provides clear operation guidance to the user through the prompt window, and the user can flexibly choose whether to overwrite the existing version according to their needs. At the same time, the system displays the tools in order of registration time, making it easy for users to view the historical versions of the tools and facilitating management and searching.

[0077] The dashboard construction method proposed in this application has three main aspects. First, it provides users with a standardized and efficient development environment through standard scaffolding tools, lowering the barrier to developing custom visualization tools. Furthermore, the scaffolding tools automatically generate project structures and configuration files, reducing repetitive work and improving development efficiency. Second, it packages the developed visualization tools into a publishable form, facilitating distribution and use on the platform. Compilation and compression processes improve the loading speed and running efficiency of the packaged files. Third, it provides a unified management portal for visualization tools through a management page, enabling users to manage custom visualization tools throughout their entire lifecycle. A registration and synchronization update mechanism ensures that new visualization tools can be used promptly in the configuration interface, improving the continuity of development and use.

[0078] In one embodiment, a computer storage medium is provided that stores executable instructions that, when executed by a processor, cause the processor to perform the steps in the above method embodiments.

[0079] In one embodiment, an electronic device is also provided, including one or more processors; and a memory storing one or more programs, wherein when the one or more programs are executed by the one or more processors, the one or more processors perform the steps in the above-described method embodiments. For example, the electronic device can be any device such as the aforementioned thermal management device or computing service device.

[0080] In one embodiment, such as Figure 5 The diagram illustrates the structure of an electronic device used to implement an embodiment of this application. The electronic device includes a central processing unit (CPU) 101, which can perform various appropriate actions and processes based on a program stored in a read-only memory (ROM) 102 or a program loaded from a storage portion 108 into a random access memory (RAM) 103. The RAM 103 also stores various programs and data required for the operation of the electronic device. The CPU 101, ROM 102, and RAM 103 are interconnected via a bus 104. An input / output (I / O) interface 105 is also connected to the bus 104.

[0081] The following components are connected to the I / O interface 105: an input part 106 including a keyboard, a mouse, etc.; an output part 107 including a cathode ray tube (CRT), a liquid crystal display (LCD), etc., and a speaker, etc.; a storage part 108 including a hard disk, etc.; and a communication part 109 including a network interface card such as a LAN card, a modem, etc. The communication part 109 performs communication processing via a network such as the Internet. A drive 110 is also connected to the I / O interface 105 as necessary. A removable media 111 such as a magnetic disk, an optical disk, a magneto-optical disk, a semiconductor memory, etc. is attached to the drive 110 as necessary, so that a computer program read out therefrom is installed in the storage part 108 as necessary.

[0082] In particular, according to embodiments of the present application, the processes described above with reference to the flowcharts can be implemented as a computer software program. For example, embodiments of the present application include a computer program product comprising instructions carried by a computer-readable medium, in such embodiments the instructions can be downloaded from a network via the communication part 109 and installed, and / or installed from the removable media 111. When the instructions are executed by the central processing unit (CPU) 101, the individual method steps described in the present application are performed.

[0083] Finally, it should be noted that the above-described embodiments are merely intended to illustrate the technical solutions of the present application, but not to limit the technical solutions of the present application; even though the above-described embodiments have been described in detail, those skilled in the art should understand that they can still modify the technical solutions recorded in the above-described embodiments, or equivalently replace some or all of the technical features thereof; and these modifications or replacements do not cause the essence of the corresponding technical solutions to deviate from the scope of the technical solutions of the embodiments of the present application.

[0084] In addition, those skilled in the art will appreciate that a combination of features of different embodiments means that such combination is within the scope of the present application and forms a different embodiment. For example, any one of the above-described claimed embodiments or implementations can be used in any combination. The information disclosed in this Background section is only intended to deepen the understanding of the general background of the present application and should not be regarded as acknowledging or implying in any form that the information constitutes prior art known to those skilled in the art.

Claims

1. A method of instrument panel construction, characterized by, The method comprises: receiving user configuration information based on a chart configuration interface, the user configuration information comprising data configuration information and visualization configuration information, the visualization configuration information comprising chart configuration information and dashboard configuration information; converting the XML writing instruction into a React component tree when the XML writing instruction is received based on the target dashboard corresponding to the dashboard configuration information; rendering the target dashboard based on the React component tree and binding target data to the rendered target dashboard based on the data configuration information.

2. The method of claim 1, wherein, The chart configuration interface comprises an SPL editing area, a chart component configuration area, and a dashboard selection area, and the receiving of user configuration information based on the chart configuration interface comprises: receiving data configuration information based on the SPL editing area; receiving chart configuration information based on the chart component configuration area, the chart component configuration area comprising a chart component selection area, a chart component attribute configuration area, and a chart preview area, wherein the chart component selection area comprises system chart components and custom chart components; receiving dashboard configuration information based on the dashboard selection area, the dashboard selection area comprising a dashboard instance selection list, a dashboard instance creation area, and an add button, wherein the dashboard instance creation area comprises an existing dashboard container selection list, and the existing dashboard container selection list comprises system dashboard containers and custom dashboard containers.

3. The method of claim 2, wherein, The dashboard configuration information comprises a dashboard instance selection instruction or a dashboard container selection instruction, and the receiving of dashboard configuration information based on the dashboard selection area comprises: receiving a dashboard instance selection instruction based on the dashboard instance selection list to determine that the dashboard corresponding to the dashboard instance selection instruction is a target dashboard; or receiving a dashboard container selection instruction based on the dashboard container selection list to create a corresponding target dashboard based on the dashboard container selection.

4. The method of claim 1, wherein, Before the converting of the XML writing instruction into a React component tree when the XML writing instruction is received based on the target dashboard corresponding to the dashboard configuration information, the method further comprises: publishing a dashboard details interface corresponding to the target dashboard based on the receiving of a trigger operation based on the target dashboard; receiving an editing instruction based on the dashboard details interface and publishing a code editing area according to the editing instruction, the code editing area being used to receive an XML writing instruction.

5. The method of claim 1, wherein, After the converting of the XML writing instruction into a React component tree, the method comprises: determining the type of a target component corresponding to the XML writing instruction, the type of the target component comprising system visualization tools or custom visualization tools; when the type of the target component is a system visualization tool, loading implementation code corresponding to the target component based on a platform library; when the type of the target component is a custom visualization tool, loading implementation code corresponding to the target component based on a registry.

6. The method of claim 1, wherein, The method further comprises: publishing a development interface through a standard scaffolding tool and receiving a visualization tool configuration operation of a user based on the development interface. generating a package file based on the visual tool configuration operation, the package file including metadata and code logic; uploading the package file based on a visual tool management page, so that a server registers a corresponding visual tool to the visual tool management page based on the package file, and synchronously updates the registered visual tool to a chart component selection area or a dashboard container selection list.

7. The method of claim 6, wherein, The visual tool configuration operation includes a metadata definition operation and a code logic writing operation, and the receiving the visual tool configuration operation of the user based on the development interface includes: receiving a metadata definition operation based on the development interface to generate metadata; receiving a code logic writing operation based on the development interface to generate a JavaScript file; The generating a package file based on the visual tool configuration operation includes: generating a package file based on the metadata and the JavaScript file.

8. The method of claim 6, wherein, After the uploading the package file based on the visual tool management page, further includes: extracting a custom visual tool name corresponding to the package file; when detecting a registered tool name same as the custom visual tool name, obtaining a custom version number of the package file; if the custom version number is same as a version number of the registered tool name, triggering a version conflict prompt; if the custom version number is not same as the version number of the registered tool name, publishing a prompt window for indicating whether to cover the registered tool corresponding to the registered tool name; when receiving a non-covering trigger instruction based on the prompt window, displaying in registration time order on the visual tool management page.

9. An electronic device, comprising: comprise: one or more processors; a memory for storing one or more programs, wherein when the one or more programs are executed by the one or more processors, the one or more processors perform the dashboard building method of any one of claims 1 to 8.

10. A computer storage medium, characterized in that, The storage medium stores executable instructions, and the instructions are executed by the processor to perform the dashboard building method of any one of claims 1 to 8.

Images