A method and system for generating an analysis dashboard based on a grid layout and element constraints

Abstract

The application discloses a kind of based on grid layout and element constraint analysis board generation method and system, method includes: through AI intelligent agent analysis user natural language instruction, automatically match chart element and generate element list;Board area is abstracted as the M×N grid coordinate system of configurable;Establish element library, store the preset size constraint of each chart element;Using the mixed strategy of combination of greedy algorithm and backtracking optimization, the optimal layout that satisfies all element size constraints is automatically calculated;Through incremental layout engine, listen to element list change, execute local rearrangement to realize dynamic adaptation;All legal layout combinations are pre-generated offline to form template library, support one-key switching;According to terminal screen size, dynamically calculate cell size, realize adaptive rendering through CSS Grid.The application realizes end-to-end automation from natural language demand to complete layout, significantly improves the development efficiency and user experience of analysis board.

Description

Technical Field

[0001] This invention relates to the field of data visualization and intelligent layout technology, and in particular to a method and system for generating analysis dashboards based on grid layout and element constraints. Background Technology

[0002] Digital twin IOC (Intelligent Operations Center) systems are core visualization platforms in smart cities, smart parks, and the industrial internet. They typically display various real-time data, historical statistics, equipment status, alarm information, etc., in the form of analysis dashboards. Analysis dashboards consist of multiple chart cards, each representing a different data visualization format, such as indicator cards, bar charts, pie charts, line charts, scatter plots, relationship graphs, heatmaps, etc.

[0003] As business complexity increases, the number of charts in the Kanban board is growing, ranging from a dozen to hundreds. How to efficiently, aesthetically, and logically organize these cards to clearly display information within limited screen space has become a key challenge in system development.

[0004] Existing layout technologies are mainly divided into three categories: (1) Manual drag-and-drop layout: Users can manually adjust the position and size of each card through a visual editor. This method is the most flexible, but inefficient. When there are many cards or frequent adjustments are required, the workload is huge.

[0005] (2) Grid system layout: Using CSS Grid or Flexbox technology, the Kanban area is divided into several columns, and the cards are filled in sequentially with automatic line wrapping. This method is simple to implement, but it cannot handle the requirement that different cards occupy different numbers of rows and columns, and card misalignment or compression is likely to occur.

[0006] (3) Predefined template layout: Several fixed layout templates are pre-designed (such as 2 columns × 2 rows, 3 columns × 2 rows, etc.). After the user selects a template, the system fills the cards into the slots in the template in sequence. This method is convenient to switch, but the number of templates is limited and cannot adapt to the dynamic changes in the number of elements.

[0007] The most similar existing implementation The closest existing technical solution to this invention is the "fixed grid + manual layout configuration" scheme, and its typical implementation is as follows: The system divides the dashboard area into a fixed number of rows and columns (e.g., 12 columns × 10 rows), with each grid cell having a fixed pixel size. Users or developers configure the grid area occupied by each chart card through the backend, typically defined in the form of "starting row, starting column, number of rows spanned, number of columns spanned". The chart library provides preset default sizes for different chart types (e.g., indicator cards occupy 2×2, bar charts occupy 4×3). Users can manually modify the size of each card in the configuration interface, and the system renders the cards according to the configuration. Layout configurations are stored in the database in JSON format, separate from the chart content. When the layout needs to be adjusted, users must manually update the position and size of each card through the visual interface or by directly modifying the configuration file; the system does not automatically recalculate the layout.

[0008] The core of this solution is "manual configuration + fixed grid," which is essentially still manual layout, only replacing drag-and-drop operations with coordinate configuration. Although it achieves separation of layout and content, the generation and adjustment of the layout rely entirely on manual intervention, making it impossible to automatically meet element size constraints or adapt to dynamic changes in the number of elements.

[0009] Disadvantages of existing technology: (1) Layout generation relies on manual processes, which are inefficient and prone to errors: Existing technologies rely entirely on manual configuration of the position and size of each card, lacking an automatic layout calculation module. When the Kanban board contains more than 20 cards, users need to set the starting row, starting column, number of rows spanned, and number of columns spanned for each card one by one. The configuration process is cumbersome and prone to errors (such as overlapping coordinates or exceeding boundaries). When the requirements change and the layout needs to be adjusted, the entire configuration process must be repeated, resulting in extended development cycles and high labor costs.

[0010] (2) Failure to automatically meet element size constraints, resulting in incomplete information display: Different chart elements objectively require different space sizes due to differences in data dimensions and visual expression needs. Although existing technologies preset recommended sizes for each type of chart, these sizes are only suggestions and can be modified arbitrarily by users, lacking a size constraint verification mechanism. For example, users may forcibly compress a multi-dimensional bar chart that requires a 4×4 area to be clearly displayed into a 2×2 grid, resulting in overlapping data labels, crowded coordinate axis text, and a serious decrease in information readability.

[0011] (3) Lack of incremental layout capability and inability to dynamically adapt to changes in elements: When the element list is added, deleted, or modified, the existing layout cannot be automatically recalculated. Newly added elements can only be appended to the bottom or blank space, resulting in a chaotic layout; the blank areas left after deleting elements cannot be automatically filled by other elements, resulting in wasted space. Users must manually adjust the position of all affected cards, resulting in high maintenance costs.

[0012] (4) Weak terminal adaptation capability and poor cross-screen display effect: Existing technologies usually preset the grid cell size for specific resolutions. When switching to other terminals (such as 4K large screen, iPad, mobile phone), the card is prone to scaling distortion, text overflow or content being cropped. The grid definition is hard bound to the terminal and lacks an adaptive grid abstraction layer. Summary of the Invention

[0013] To achieve the above objectives, this invention provides a method for generating analysis dashboards based on grid layout and feature constraints, the method comprising: The AI ​​agent analyzes the user's natural language commands, automatically matches chart elements, and generates a list of elements. Abstract the Kanban area into a configurable M×N grid coordinate system; Establish a feature library to store the preset size constraints of each chart feature; A hybrid strategy combining greedy algorithms and backtracking optimization is adopted to automatically calculate the optimal layout that satisfies all element size constraints; Dynamic adaptation is achieved by listening to changes in the element list through an incremental layout engine and performing local rearrangement. The cell size is dynamically calculated based on the terminal screen size, and adaptive rendering is achieved through CSS Grid.

[0014] Optionally, the step of parsing the user's natural language commands through an AI agent, automatically matching chart elements, and generating an element list specifically includes: A large language model is used to perform intent recognition and slot filling on user input, and to extract time range, analysis dimensions, analysis indicators and visualization objectives. Based on the parsed dimensions, indicators, and objectives, and combined with the chart-data dimension mapping rules in the feature library, the most suitable chart type is automatically recommended. The recommended chart types, data bindings, and size preferences are encapsulated into standardized feature objects, and a list of features is output.

[0015] Optionally, the abstraction of the dashboard area into a configurable M×N grid coordinate system specifically includes: Define the number of columns M and rows N in the Kanban area; The position of each card is represented as a quadruple (x, y, w, h), where x is the column index of the top left corner of the card, y is the row index of the top left corner of the card, w is the number of columns occupied by the card, and h is the number of rows occupied by the card. Provide a boundary check function to check whether the card is completely within the M×N grid and does not overlap with already placed cards.

[0016] Optionally, the step of establishing a feature library to store preset size constraints for each chart feature specifically includes: Define the minimum width, minimum height, recommended width, recommended height, whether expansion is allowed, and data dimension information for each chart element; The preset size constraints are stored in JSON format and support dynamic expansion.

[0017] Optionally, the hybrid strategy combining greedy algorithms and backtracking optimization is used to automatically calculate the optimal layout that satisfies all element size constraints, specifically including: Based on the importance and size of the elements, calculate their priority and arrange the elements in descending order of priority; Initialize an M×N grid, marking all cells as empty; For each sorted element, scan the grid from left to right and from top to bottom to find the first placement position that satisfies the condition that the starting position width and height do not exceed the grid boundary and all cells within the rectangular area are empty; If found, place the element in the corresponding position and mark the corresponding cell as occupied; If not found, backtracking optimization is triggered, using A. The search algorithm seeks the adjustment scheme with the minimum movement cost, moving placed elements to make room; Output the coordinates (x, y, w, h) of each feature.

[0018] Optionally, the step of using an incremental layout engine to monitor changes in the feature list and perform local rearrangement to achieve dynamic adaptation specifically includes: When a feature is deleted, the cell occupied by that feature is released from the grid, and the fill up and fill left function is called to move subsequent features forward to fill the blank space. When a new feature is added, it is added to the list and sorted by priority. The greedy placement function is called to find an empty area in the existing grid to place the new feature. If no empty area is found, a local rearrangement is triggered, and the features around the new feature are fine-tuned to make room. When the size of an element changes, first remove and release the cell from its original position, then reposition it according to the new size. If it cannot be repositioned, perform a local rearrangement.

[0019] Optionally, the method further includes: For a fixed grid size, all legal card combinations and layouts are recursively enumerated using an offline depth-first search. The generated layouts are deduplicated and stored according to the number of elements to form an exhaustive layout template library. Users can switch layout styles with one click while keeping the chart content unchanged.

[0020] Optionally, the step of recursively enumerating all legal card combinations and layouts through offline depth-first search specifically includes: Extract the set of dimensions and specifications for all features from the feature library; Starting from the top left corner of the grid, find the first empty space and try to place it in all sizes. If the placement is successful and does not exceed the grid boundary or overlap with other cards, recursively fill the remaining area; If placement fails, backtrack and try the next specification; Each time the grid is successfully filled, record the combination and location information of the layout elements.

[0021] Optionally, the step of dynamically calculating the cell size based on the terminal screen size and achieving adaptive rendering through CSS Grid specifically includes: Get the width and height of the current viewport; Calculate the width and height of each cell based on the number of columns M and rows N: cellWidth = screenWidth / M, cellHeight = screenHeight / N; Generate CSS Grid container styles based on M and N, and set grid-template-columns and grid-template-rows; Set the grid-column and grid-row properties for each card based on its coordinates (x, y, w, h); Listen for the window's resize event, recalculate the cell size, and notify the chart library to adjust the size.

[0022] This invention also provides an automatic analysis dashboard generation system based on grid layout and feature constraints. Applying the aforementioned analysis dashboard generation method based on grid layout and feature constraints, the generation system includes: The AI ​​agent module is used to parse user natural language commands through AI agents, automatically match chart elements and generate an element list; The grid definition module is used to abstract the Kanban area into a configurable M×N grid coordinate system; The Feature Library module is used to create a feature library and store the preset size constraints of each chart feature. The automatic layout calculation engine module is used to automatically calculate the optimal layout that satisfies all element size constraints using a hybrid strategy that combines greedy algorithms with backtracking optimization. The incremental layout engine module is used to listen for changes in the feature list and perform local rearrangement to achieve dynamic adaptation. The adaptive grid rendering module is used to dynamically calculate the cell size based on the terminal screen size and achieve adaptive rendering through CSSGrid.

[0023] Beneficial effects: Achieve end-to-end intelligent layout generation, completely eliminating manual configuration: The AI ​​intelligent agent module parses the user's natural language commands, automatically identifies and analyzes the requirements, matches the chart type, generates a list of elements, and then completes the coordinate calculation of all cards at once through the automatic layout calculation engine, realizing end-to-end automation from "user requirements" to "complete layout", reducing the layout generation time from hours to milliseconds.

[0024] Automatically satisfy element size constraints to ensure complete information display: Establish an element size constraint library, preset minimum display size and recommended size for each type of chart, and the automatic layout algorithm strictly verifies the size constraints of each element during calculation to ensure that the final layout meets the display requirements of all elements, fundamentally solving the problem of incomplete information display.

[0025] It supports automatic adaptation when elements change dynamically, and achieves decoupling between layout and data: It builds an incremental layout engine that supports local reordering in three scenarios: deletion, addition, and size change. The whole process only adjusts the affected local area, keeps the overall layout stable, and achieves decoupling between layout and data.

[0026] A single layout definition automatically adapts to multiple devices: an adaptive grid abstraction layer is established, cell sizes are dynamically calculated based on the aspect ratio of the device screen, a CSS Grid layout is generated to automatically adapt, and the window resize event is listened to for dynamic adjustment, achieving a unified display effect of a single layout definition on different devices such as PCs, large screens, tablets, and mobile phones.

[0027] It provides a complete layout template library, supporting one-click switching and quick reuse: by recursively enumerating all legal layout combinations through offline depth-first search, a complete layout template library is generated. Users can switch layout styles with one click while keeping the chart content unchanged. It also supports template saving and import, realizing the quick reuse of layout schemes. Attached Figure Description

[0028] To more clearly illustrate the technical solutions of the embodiments of the present invention, the drawings used in the following description of the embodiments will be briefly introduced. Obviously, the drawings described below are only some embodiments of the present invention. For those skilled in the art, other drawings can be obtained based on these drawings without creative effort.

[0029] Figure 1 This is an overall architecture diagram of an analysis dashboard automatic generation system based on grid layout and element constraints, provided in an embodiment of the present invention. Figure 2 A schematic diagram of a grid layout model provided in an embodiment of the present invention; Figure 3This is a schematic diagram of the structure of the element size constraint library provided in an embodiment of the present invention; Figure 4 A flowchart of the automatic layout calculation engine provided in an embodiment of the present invention; Figure 5 A flowchart of the incremental layout engine provided in an embodiment of the present invention; Figure 6 A flowchart illustrating the generation process of the exhaustive layout template library provided in this embodiment of the invention; Figure 7 A flowchart for adaptive mesh rendering provided in an embodiment of the present invention. Detailed Implementation

[0030] Exemplary embodiments of the present disclosure will now be described in more detail with reference to the accompanying drawings. While exemplary embodiments of the present disclosure are shown in the drawings, it should be understood that the present disclosure may be implemented in various forms and should not be limited to the embodiments set forth herein. Rather, these embodiments are provided so that this disclosure will be thorough and complete, and will fully convey the scope of the disclosure to those skilled in the art.

[0031] The terms "comprising" and "having," and any variations thereof, in the specification, embodiments, claims, and drawings of this invention are intended to cover non-exclusive inclusion, such as including a series of steps or units.

[0032] The technical solution of the present invention will be further described in detail below with reference to the accompanying drawings and embodiments.

[0033] (I) System Overall Architecture like Figure 1 As shown, the present invention provides an automatic analysis dashboard generation system based on grid layout and feature constraints, comprising the following core modules: AI Intelligent Agent Module: Receives natural language commands from users, analyzes and interprets the requirements through a large model, automatically matches suitable chart elements (indicator cards, bar charts, relationship diagrams, etc.) and their data sources, and generates an element list.

[0034] Grid definition module: Defines the grid size, cell size, and grid coordinate system of the Kanban area.

[0035] Feature Library Module: Stores preset size constraints, data dimensions, and visualization attributes for various chart features.

[0036] Automatic layout calculation engine: Calculates the optimal layout based on the feature list and grid size using a hybrid strategy that combines greedy algorithms with backtracking optimization.

[0037] Incremental layout engine: listens for changes in the element list, performs local rearrangement, and achieves dynamic adaptation.

[0038] Exhaustive template library module: pre-generates all legal layout combinations offline and provides one-click switching functionality.

[0039] Adaptive grid rendering module: Dynamically calculates cell size based on terminal screen size and renders the dashboard.

[0040] The connections between the modules are as follows: Users describe their analysis needs to the AI ​​agent module using natural language. The AI ​​agent module interprets the intent, automatically matches and recommends chart types from the feature library, and generates a feature list. The feature list is passed to the automatic layout calculation engine (or the exhaustive template library module), which, combined with the grid definition, generates the coordinates and dimensions of each feature. The incremental layout engine monitors changes to the feature list and automatically triggers a local rearrangement when the user subsequently adjusts their requirements. Finally, the adaptive grid rendering module converts the layout into front-end code and displays it.

[0041] (II) AI Intelligent Agent Module The AI ​​agent module is the core intelligent decision-making unit of this invention, responsible for transforming the user's natural language requirements into a structured list of elements. Its implementation is as follows: (1) Natural Language Parsing: A large language model is used to identify user input intent and fill slots. For example, if a user inputs "I want to see the energy consumption comparison of each building over the past week", the AI ​​agent will parse the following: the time range is the past week, the analysis dimension is buildings (classification dimension), the analysis indicator is energy consumption (numerical indicator), and the visualization target is comparison (implying the use of bar charts or line charts).

[0042] (2) Data Matching and Chart Recommendation: Based on the parsed dimensions, indicators, and objectives, the AI ​​agent calls the data source metadata to determine the available data tables and fields. Combining the chart-data dimension mapping rules in the feature library (e.g., "2 dimensions and 1 indicator" is suitable for clustered columns and multi-line charts), the most suitable chart type is recommended. If there are multiple possibilities, a recommendation list is returned for the user to choose from, or the chart is automatically determined based on the user's historical preferences.

[0043] (3) Feature list generation: The recommended chart types, data binding, size preferences, etc. are encapsulated into standardized feature objects, and the feature list is output in the following format: [ { "element_id":"C01", "name":"Energy Consumption Comparison of Various Buildings", "chart_type":"clustered columnar column", "data_binding": { "dimensions": ["buildings"], "indicators": ["Energy consumption (kWh)"], "time_range":"Past 7 days" }, "preferred_size": {"w": 4,"h": 3} } ] (4) User interaction feedback: Users can correct the recommendation results through natural language (such as "replace the bar chart with a line chart"). After receiving the feedback, the AI ​​agent updates the element list and triggers the incremental layout engine to recalculate.

[0044] (III) Mesh Definition Module like Figure 2 As shown, this invention abstracts the signboard area into a grid coordinate system, defined as follows: (1) Grid size: Configurable parameter M×N, where M is the number of columns and N is the number of rows. The default value is 12×10, which can be adjusted according to business needs (such as 16×12, 8×6, etc.).

[0045] (2) Cell: The smallest layout unit. The physical size of each cell is dynamically calculated by dividing the actual number of pixels on the screen by the number of grid cells.

[0046] (3) Card position: Each card occupies a rectangular area, represented by a quadruple (x, y, w, h), where: x is the column index of the top left corner of the card (starting from 0), y is the row index of the top left corner of the card (starting from 0), w is the number of columns (width) occupied by the card, and h is the number of rows (height) occupied by the card.

[0047] The grid definition module also provides the boundary verification function isValid(x, y, w, h) to check whether the card is completely within the M×N grid and does not overlap with the cards that have already been placed.

[0048] Technical effect: By using a unified grid abstraction, the layout problem is transformed into a two-dimensional coordinate calculation problem, providing a mathematical foundation for subsequent automatic layout algorithms.

[0049] (iv) Element Library Module like Figure 3 As shown, the feature library module stores the preset size constraints for each chart feature, defined in JSON format: { "element_id":"C01", "name":"clustered columnar column", "category":"2 dimensions, 1 indicator", "min_width": 4, "min_height": 3, "preferred_width": 4, "preferred_height": 3, "flexible": true, "data_dimensions": {"dimension": 2,"indicator": 1} } Where: min_width and min_height are the minimum number of cells occupied by an element; values ​​below these will result in incomplete information display; preferred_width and preferred_height are the recommended dimensions, which the layout algorithm prioritizes; flexible indicates whether expansion beyond the recommended dimensions is allowed (e.g., stretching to fill blank spaces); data_dimensions are data dimension information used for subsequent automatic size recommendations.

[0050] The feature library supports dynamic expansion, and users can customize the size constraints of new features, which are then automatically incorporated into the layout calculations.

[0051] Technical effect: It transforms the visual requirements of elements into calculable numerical constraints, providing input conditions for automatic layout.

[0052] (v) Automatic Layout Calculation Engine like Figure 4 As shown, the automatic layout calculation engine adopts a hybrid strategy of greedy algorithm + backtracking optimization. It takes the feature list E=[e1,e2,...,en] and grid size M×N as input and outputs the coordinates (x,y,w,h) of each feature.

[0053] Step 1: Feature Sorting. Calculate priority based on feature importance (user-configurable weight) and size (w×h): priority = importance_weight × (w×h) / (M×N). Features with higher priority are placed first. Default rule: Larger features are prioritized; for features of the same size, the user-defined order applies.

[0054] Step 2: Greedy Placement. Initialize an M×N two-dimensional array grid, with all cells empty. For each sorted feature e, scan the grid from left to right and from top to bottom to find the first starting point (x, y) that satisfies the following conditions: (1) x + w ≤ M and y + h ≤ N; (2) all cells within a rectangular area of ​​width w and height h starting from (x, y) are empty. If found, place the feature at that position, mark all cells within the rectangular area as occupied, and record the coordinates. If not found, trigger backtracking optimization.

[0055] Step 3: Backtracking and Optimization. When greedy placement fails, it means the current layout cannot accommodate all elements, and the positions of the placed elements need to be adjusted. This invention uses A... The search algorithm seeks the adjustment scheme with the minimum movement cost: the state space is defined as the set of coordinates of currently placed features; the heuristic function h(state) evaluates the estimated cost from the current state to the target state (where all features can be placed), using the sum of Manhattan distances; during the search, placed features are allowed to be moved (one cell at a time), but the size constraints must still be met and there should be no overlap after the move; if a feasible solution is found, the layout is updated and the remaining features are placed; if the search times out or no solution is found, the user is prompted "The current grid cannot accommodate all features, please reduce the number of features or adjust the grid size".

[0056] Step 4: Output the layout result. Generate the coordinates (x, y, w, h) of each feature and store them in the layout configuration object.

[0057] The algorithm pseudocode is as follows: function autoLayout(elements, M, N): elements.sortByPriority() grid = new Grid(M, N) for e in elements: placed = false for y in 0..N - eh: for x in 0..M - ew: if grid.isFree(x, y, ew, eh): grid.place(e, x, y) For example, ey ​​= x, y placed = true break if placed: break if not placed: backtrack(grid, elements, current_index) return elements Technical results: It achieves fully automated layout generation without manual intervention, and ensures a high success rate through backtracking optimization.

[0058] (vi) Incremental Layout Engine like Figure 5 As shown, the incremental layout engine is responsible for monitoring changes in the feature list and performing local rearrangements to achieve dynamic adaptation. It supports three change types: (1) Deleting a feature. When a user deletes a feature, the system performs the following steps: releases all cells occupied by the feature from the grid and marks them as empty; calls the fill-up function to the up and left, starting from the deleted area and scanning downwards and to the right, moving subsequent features forward to fill the blanks and maintaining the original relative order. During the movement, it is necessary to check whether the new position meets the size constraints. If it does not meet the constraints, it is recursively adjusted; and updates the coordinates of all affected features.

[0059] (2) Adding new features. When a user adds a new feature, the system performs the following steps: adding the new feature to the list and sorting it by priority; calling the greedy placement function to find a blank area in the existing grid to place it; if no blank area is found, a local rearrangement is triggered, only the features around the new feature are fine-tuned to try to make room; if the local rearrangement fails, the user is prompted "Insufficient space, please delete some features or adjust the grid size".

[0060] (3) Modifying features (e.g., changing the chart type, resulting in a change in size). When the size of a feature changes, the system first removes it from its original position (releasing the cell) and then repositions it according to the new size. If the new position conflicts with the original position or cannot be placed, a partial rearrangement is performed.

[0061] The pseudocode for the incremental layout algorithm is as follows: function incrementalUpdate(changeType, element, newSize): if changeType == DELETE: grid.free(element.x, element.y, element.w, element.h) shiftElements(element) else if changeType == ADD: placeNewElement(element) else if changeType == RESIZE: grid.free(oldX, oldY, oldW, oldH) if not placeElement(element, newSize): localRearrange(element) Technical effect: It realizes automatic layout adjustment when elements change dynamically, without the need for global rearrangement, maintains layout stability, and has a fast response speed.

[0062] (vii) Exhaustive search of template library module like Figure 6 As shown, for a fixed grid size (e.g., 12×10), this invention supports offline pre-generation of all legal layout combinations, forming an exhaustive layout template library. The generation process is as follows: Step 1: Define the feature specification set. Extract the size specifications S={s1,s2,...,sk} of all features from the feature library, where each specification s=(w,h).

[0063] Step 2: Recursive backtracking filling. Recursively fill the M×N grid using Depth-First Search (DFS): Starting from the top left corner of the grid, find the first empty cell; traverse all sizes s and try to place it at the current empty cell (ensuring it does not exceed the boundary and does not overlap); if the placement is successful, recursively fill the remaining area; if the placement fails, backtrack and try the next size.

[0064] Step 3: Record the layout. Each time the grid is successfully filled, record the combination and location information of the features in that layout. To avoid duplication, use a hash table to store the generated layout feature codes (such as hashes of the size sequences of each feature).

[0065] Step 4: Categorize and store. Categorize and store the layouts according to the number of elements, for example: 2-card layout, 3-card layout, 4-card layout, etc.

[0066] Step 5: Generate template library files. Serialize the layout template library into a JSON file for front-end loading.

[0067] Technical benefits: Generates a complete layout template library (e.g., 289 types), allowing users to switch layout styles with one click while keeping the card content unchanged, greatly improving the flexibility and efficiency of Kanban development.

[0068] (viii) Adaptive Mesh Rendering Module like Figure 7As shown, the adaptive mesh rendering module is responsible for converting the layout results into actual front-end rendering code and adapting it to different terminal screens.

[0069] Step 1: Obtain the terminal screen size. Use JavaScript to obtain the current viewport's width (screenWidth) and height (screenHeight).

[0070] Step 2: Calculate cell dimensions. Based on the number of columns M and rows N, calculate the width and height of each cell: cellWidth = screenWidth / M, cellHeight = screenHeight / N. To ensure card proportions are consistent, a minimum cell size can be set, with any overflowing areas left blank or scrollable.

[0071] Step 3: Generate the CSS Grid layout. Generate the CSS Grid container style based on M and N: .grid-container { display: grid; grid-template-columns: repeat(M, 1fr); grid-template-rows: repeat(N, 1fr); width: 100%; height: 100%; } Step 4: Place the cards. For each card (x, y, w, h), set its position in the Grid: .card { grid-column: x+1 / x+w+1; grid-row: y+1 / y+h+1; } Step 5: Render the chart content. Based on the feature type, call the corresponding chart library (such as ECharts or Highcharts) to render the chart content. The chart container size is automatically adapted by CSS, requiring no additional calculation.

[0072] Step 6: Respond to window size changes. Listen for the window's resize event, recalculate the cell dimensions, and notify the chart library to adjust the size (using the resize method) to ensure the chart adapts automatically.

[0073] Technical effect: A single layout definition can be used to automatically adapt to various terminals such as PCs, tablets, and mobile phones, without the need to design a separate layout for each terminal.

[0074] (ix) Workflow Example The following describes the workflow of this invention using the generation of a smart park energy consumption analysis dashboard as an example: User input request: The user inputs via natural language "I want to see the energy consumption comparison of each building over the past week, as well as the energy consumption trend over the past month".

[0075] AI Agent Analysis: The AI ​​agent identifies two analytical needs: first, building energy consumption comparison (suitable for clustered columns), and second, energy consumption trend (suitable for line charts). It matches the chart type from the feature library and generates a feature list containing two elements: clustered columns (recommended size 4×3) and a line chart (recommended size 4×3).

[0076] Automatic layout calculation: The system default grid size is 12×10. The automatic layout calculation engine sorts the two elements, greedily places the clustered columns at (0,0,4,3) and the line graph at (4,0,4,3), and the layout is complete.

[0077] Incremental Adjustment: When users add a new metric, "Energy Consumption Ratio of Air Conditioning in Each Building," the AI ​​agent recommends a pie chart (recommended size 3×2). The incremental layout engine searches for blank areas in the existing grid, finds (8,0,3,2) as available, and automatically places the pie chart.

[0078] Multi-terminal adaptation: When users access the dashboard on a PC, the system calculates the cell size at 1920×1080; when users access it on an iPad, the system recalculates at 768×1024, and the cards automatically scale to adapt while the layout structure remains unchanged.

[0079] One-click layout switching: If a user is not satisfied with the current layout, they can select another three-card layout template from the exhaustive template library. The system will switch with one click, keeping all card content unchanged and only adjusting the position and size.

[0080] (x) Summary of Inter-module Interactions The AI ​​agent module serves as the system's entry point, transforming natural language requirements into a structured list of elements, thus enabling intelligent mapping from requirements to elements.

[0081] The grid definition module and the feature library module together provide mathematical models and constraints for layout calculations.

[0082] The automatic layout calculation engine is the core algorithm module of the system, which realizes the automatic calculation from elements to layout.

[0083] The incremental layout engine ensures that the system can dynamically respond to changes in elements, maintaining the continuity and stability of the layout.

[0084] The exhaustive template library module provides the ability to quickly reuse layout schemes, improving development efficiency.

[0085] The adaptive grid rendering module transforms the layout into a visual presentation and adapts it for display on multiple devices.

[0086] The above description is merely a preferred embodiment of the present invention and is not intended to limit the scope of protection of the present invention. Any modifications, equivalent substitutions, improvements, etc., made within the spirit and principles of the present invention should be included within the scope of protection of the present invention.

Claims

1. A method for generating analysis dashboards based on grid layout and feature constraints, characterized in that, The generation method includes: The AI ​​agent analyzes the user's natural language commands, automatically matches chart elements, and generates a list of elements. Abstract the Kanban area into a configurable M×N grid coordinate system; Establish a feature library to store the preset size constraints of each chart feature; A hybrid strategy combining greedy algorithms and backtracking optimization is adopted to automatically calculate the optimal layout that satisfies all element size constraints; Dynamic adaptation is achieved by listening to changes in the element list through an incremental layout engine and performing local rearrangement. The cell size is dynamically calculated based on the terminal screen size, and adaptive rendering is achieved through CSS Grid.

2. The method for generating analysis dashboards based on grid layout and feature constraints according to claim 1, characterized in that, The process of using an AI agent to parse user natural language commands, automatically match chart elements, and generate an element list specifically includes: A large language model is used to perform intent recognition and slot filling on user input, and to extract time range, analysis dimensions, analysis indicators and visualization objectives. Based on the parsed dimensions, indicators, and objectives, and combined with the chart-data dimension mapping rules in the feature library, the most suitable chart type is automatically recommended. The recommended chart types, data bindings, and size preferences are encapsulated into standardized feature objects, and a list of features is output.

3. The method for generating analysis dashboards based on grid layout and feature constraints according to claim 1, characterized in that, The abstraction of the dashboard area into a configurable M×N grid coordinate system specifically includes: Define the number of columns M and rows N in the Kanban area; The position of each card is represented as a quadruple (x, y, w, h), where x is the column index of the top left corner of the card, y is the row index of the top left corner of the card, w is the number of columns occupied by the card, and h is the number of rows occupied by the card. Provide a boundary check function to check whether the card is completely within the M×N grid and does not overlap with already placed cards.

4. The method for generating analysis dashboards based on grid layout and feature constraints according to claim 1, characterized in that, The establishment of the feature library, which stores the preset size constraints of each chart feature, specifically includes: Define the minimum width, minimum height, recommended width, recommended height, whether expansion is allowed, and data dimension information for each chart element; The preset size constraints are stored in JSON format and support dynamic expansion.

5. The method for generating analysis dashboards based on grid layout and feature constraints according to claim 1, characterized in that, The hybrid strategy, which combines greedy algorithms with backtracking optimization, automatically calculates the optimal layout that satisfies all element size constraints. Specifically, this includes: Based on the importance of the elements and the priority of their dimensions, the elements are arranged in descending order of priority. Initialize an M×N grid, marking all cells as empty; For each sorted element, scan the grid from left to right and from top to bottom to find the first placement position that satisfies the condition that the starting position width and height do not exceed the grid boundary and all cells within the rectangular area are empty; If found, place the element in the corresponding position and mark the corresponding cell as occupied; If not found, backtracking optimization is triggered, using A. The search algorithm seeks the adjustment scheme with the minimum movement cost, moving placed elements to make room; Output the coordinates (x, y, w, h) of each feature.

6. The method for generating analysis dashboards based on grid layout and feature constraints according to claim 1, characterized in that, The method of dynamically adapting by listening to changes in the element list through an incremental layout engine and performing local rearrangements includes: When a feature is deleted, the cell occupied by that feature is released from the grid, and the fill up and fill left function is called to move subsequent features forward to fill the blank space. When a new feature is added, it is added to the list and sorted by priority. The greedy placement function is called to find an empty area in the existing grid to place the new feature. If no empty area is found, a local rearrangement is triggered, and the features around the new feature are fine-tuned to make room. When the size of an element changes, first remove and release the cell from its original position, then reposition it according to the new size. If it cannot be repositioned, perform a local rearrangement.

7. The method for generating analysis dashboards based on grid layout and feature constraints according to claim 1, characterized in that, The method further includes: For a fixed grid size, all legal card combinations and layouts are recursively enumerated using an offline depth-first search. The generated layouts are deduplicated and stored according to the number of elements to form an exhaustive layout template library. Users can switch layout styles with one click while keeping the chart content unchanged.

8. The method for generating analysis dashboards based on grid layout and feature constraints according to claim 7, characterized in that, The method of recursively enumerating all legal card combinations and layouts through offline depth-first search specifically includes: Extract the set of dimensions and specifications for all features from the feature library; Starting from the top left corner of the grid, find the first empty space and try to place it in all sizes. If the placement is successful and does not exceed the grid boundary or overlap with other cards, recursively fill the remaining area; If placement fails, backtrack and try the next specification; Each time the grid is successfully filled, record the combination and location information of the layout elements.

9. The method for generating analysis dashboards based on grid layout and feature constraints according to claim 1, characterized in that, The process of dynamically calculating cell sizes based on the terminal screen size and implementing adaptive rendering via CSSGrid specifically includes: Get the width and height of the current viewport; Calculate the width and height of each cell based on the number of columns M and rows N: cellWidth = screenWidth / M, cellHeight = screenHeight / N; Generate CSS Grid container styles based on M and N, and set grid-template-columns and grid-template-rows; Set the grid-column and grid-row properties for each card based on its coordinates (x, y, w, h); Listen for the window's resize event, recalculate the cell size, and notify the chart library to adjust the size.

10. An automatic analysis dashboard generation system based on grid layout and feature constraints, applied to the analysis dashboard generation method based on grid layout and feature constraints as described in any one of claims 1-9, characterized in that, The generation system includes: The AI ​​agent module is used to parse user natural language commands through AI agents, automatically match chart elements and generate an element list; The grid definition module is used to abstract the Kanban area into a configurable M×N grid coordinate system; The Feature Library module is used to create a feature library and store the preset size constraints of each chart feature. The automatic layout calculation engine module is used to automatically calculate the optimal layout that satisfies all element size constraints using a hybrid strategy that combines greedy algorithms with backtracking optimization. The incremental layout engine module is used to listen for changes in the feature list and perform local rearrangement to achieve dynamic adaptation. The adaptive grid rendering module is used to dynamically calculate cell sizes based on the terminal screen size and achieve adaptive rendering through CSS Grid.

Images