Front-end assembly implementation method and related device

Abstract

The invention discloses a front-end component implementation method and a related device, and relates to the field of computers, table data is processed according to dimension parameters to obtain normalized data, a fractal dimension interpolation state data set is determined, when the table data is changed, the normalized data is cached as a temporary value, and when the table data is changed, the normalized data is cached as the temporary value; after operation triggering is confirmed, the temporary value is synchronized into final table data, an interpolation interval is determined according to the final table data, an error optimization linear interpolation algorithm is adopted for target components determined based on the interpolation interval, component numerical values of all data rows in the interpolation interval are calculated, corresponding row data in an updated table are obtained, and a table data set is obtained; invalid data are filtered out, changed data are extracted to serve as a linkage data source, linkage rendering operation is executed on the broken line graph, and after rendering is completed, all the independent function units are logically connected based on the standard interface to obtain a front-end assembly. According to the method, the operation fault-tolerant capability is improved through a temporary value caching mechanism, and the interpolation precision is improved by adopting an error optimization linear interpolation algorithm.

Description

Technical Field

[0001] This invention relates to the field of computer technology, and more specifically, to a front-end component implementation method and related apparatus. Background Technology

[0002] With the continuous development of front-end software development technology, component-based development and data visualization have become core technological trends in the front-end field. Component-based development significantly reduces project development and maintenance costs by breaking down complex functions into independent, reusable component units, and has been widely used in various web application developments. Data visualization, on the other hand, presents data relationships and trends in an intuitive way through charts, curves, and other forms, helping users quickly understand the meaning of data and playing a key role in fields such as industrial control, engineering simulation, and data analysis.

[0003] In professional fields such as industrial manufacturing and equipment R&D, front-end applications often need to meet the core requirement of multi-dimensional parameter configuration. For example, industrial simulation systems need to configure parameters such as equipment operation time, pressure, and temperature; equipment motion control platforms need to set velocity and acceleration parameters in the XYZ three-dimensional directions; and engineering load setting tools need to input load values ​​at different time points. Common requirements for these scenarios include: first, structured input of multi-dimensional parameters through tables (supporting single-component parameters such as pressure alone, and multi-component parameters such as XYZ velocity parameters); second, real-time preview of parameter trends over time through line graphs, achieving simultaneous "input-visualization"; and third, support for parameter interpolation calculations, i.e., automatically filling in parameters at intermediate time points by inputting key node parameter values, reducing manual input workload. Against this backdrop, front-end components that link tables and line graphs become core modules for these applications. Their performance (linkage latency), flexibility (multi-component adaptation), accuracy (interpolation precision), and reusability (cross-project integration) directly impact the overall user experience and development efficiency of the application. However, industrial applications have more stringent requirements for such front-end components: they need to be compatible with parameter configuration scenarios with different numbers of components, interpolation calculations need to avoid accuracy errors and calculation anomalies, linkage under large data volumes needs to be smooth, and components need to be able to be quickly integrated into different projects with low maintenance costs.

[0004] To address the aforementioned industrial application needs, a number of front-end components supporting table entry and line chart display have emerged in the existing front-end development field, such as data visualization libraries like ECharts and Highcharts, and UI component libraries like Element UI and AntDesign. However, these front-end components have relatively limited functionality; tables only handle data entry, and line charts only handle data display. Core logic such as "multi-component adaptation, interpolation calculation, and real-time linkage" needs to be implemented by developers themselves. In actual development, using such custom front-end components will encounter many problems. When users edit parameters, any misoperation will trigger interpolation calculations for all components, leading to parameter corruption and a low error tolerance. Furthermore, the interpolation accuracy of existing interpolation algorithms is not high; when the time difference is small (e.g., less than 0.001s), calculation anomalies such as division by zero are prone to occur.

[0005] Therefore, how to provide a front-end component implementation method that improves interpolation accuracy and operational fault tolerance has become a technical problem that urgently needs to be solved by those skilled in the art. Summary of the Invention

[0006] In view of this, the present invention discloses a front-end component implementation method and related apparatus to improve interpolation accuracy and operational fault tolerance.

[0007] A method for implementing a front-end component, comprising:

[0008] The table data is normalized according to the set dimension parameters to obtain normalized data, and the corresponding multi-dimensional interpolation state dataset is determined.

[0009] When the table data changes, the normalized data is cached as a temporary value, and the temporary value is synchronized to the final table data after the confirmation operation is triggered.

[0010] The interpolation interval is determined based on the table rows selected in the final table data, and the target components corresponding to all rows within the interpolation interval are selected.

[0011] An error-optimized linear interpolation algorithm is used for the target component to calculate the component value of each data row in the interpolation interval, and the corresponding row data in the table is updated according to the component value to obtain a table dataset, wherein the component value is greater than the error threshold and meets the preset decimal precision requirement;

[0012] After filtering out invalid data that is out of the valid range in the table dataset, the changed data is extracted as the linked data source, and a linked rendering operation is performed on the line chart so that the line chart and the table are updated synchronously.

[0013] After the synchronization update is completed, based on the normalization logic, interpolation logic, and linkage rendering logic, each independent functional unit is determined, and each functional unit is logically connected based on a standardized interface to obtain an integrated and encapsulated front-end component.

[0014] Optionally, the table data is subjected to dimensional normalization processing according to the set dimensional parameters to obtain normalized data, and the dimensional interpolation state dataset corresponding to the normalized data is determined, including:

[0015] Obtain the table data and the set dimension parameters, wherein the table data includes multiple data rows, and each data row is associated with a base dimension parameter and a variable number of components;

[0016] Based on the dimension parameters representing single-component or multi-component scenarios, the table data is subjected to dimension normalization to obtain normalized data.

[0017] An independent state storage unit is created for each component in the normalized data to obtain the multidimensional interpolation state dataset corresponding to the normalized data. The independent state storage unit contains four types of core information: baseline row editing identifier, baseline row parameter value, temporary value cache set, and interpolation completion identifier.

[0018] Optionally, based on the dimension parameters representing single-component or multi-component scenarios, the table data is subjected to dimension normalization processing to obtain normalized data, including:

[0019] If the dimension parameter represents the single-component scenario, the first value or the value of the specified component in each row of the table data is retained, and zeros are added when there are no valid values ​​to obtain the normalized data;

[0020] If the dimension parameter is used to characterize the multi-component scenario, the first N values ​​of each row in the table data are extracted, and rows with fewer than N values ​​are padded with 0 to obtain the normalized data. The number of classification values ​​in all rows of the normalized data is consistent with the dimension parameter, and N is the dimension parameter value corresponding to the dimension parameter.

[0021] Optionally, based on the dimension parameters representing single-component or multi-component scenarios, the table data is subjected to dimension normalization processing to obtain normalized data, including:

[0022] If the dimension parameter represents the single-component scenario, the first value or the value of the specified component in each row of the table data is retained, and a preset value is added when there is no valid value to obtain the normalized data. The preset value is a non-zero value, and the preset value is any one of the preset baseline value, the mean of the same component in adjacent rows, and the user-defined default value.

[0023] If the dimension parameter is used to characterize the multi-component scenario, the first N values ​​of each row in the table data are extracted, and the preset value is added to rows with less than N values ​​to obtain the normalized data. The number of classification values ​​in all rows of the normalized data is consistent with the dimension parameter, and N is the dimension parameter value corresponding to the dimension parameter.

[0024] Optionally, after filtering out invalid data that exceeds the valid range in the table dataset, the changed data is extracted as a linked data source, and a linked rendering operation is performed on the line chart to synchronize the line chart with the table, including:

[0025] Invalid data that exceeds the valid range in the tabular dataset is filtered out to obtain the target tabular dataset;

[0026] The target table dataset is split into multiple independent data series according to its components;

[0027] Extract the change data from each of the individual data series;

[0028] Based on the various changes in the data, a linked rendering operation is performed on the line chart to ensure that the line chart and the table are updated synchronously.

[0029] Optionally, after the synchronization update is completed, based on normalization logic, interpolation logic, and linked rendering logic, each independent functional unit is determined, and each functional unit is logically connected based on a standardized interface to obtain an integrated and encapsulated front-end component, including:

[0030] The multidimensional interpolation state dataset and the normalization logic that generates the multidimensional interpolation state dataset are encapsulated into an independent multi-component adaptation unit.

[0031] The tabular dataset and the interpolation logic that generated the tabular dataset are encapsulated into an independent interpolation calculation unit;

[0032] The linked data source and the linked rendering logic executed on the linked data source are encapsulated into an independent linked rendering unit;

[0033] The multi-component adaptation unit, the interpolation calculation unit, and the linkage rendering unit are logically connected through a standardized interface to obtain an integrated and encapsulated front-end component.

[0034] Optionally, determining the interpolation interval based on the selected table rows in the final table data, and selecting the target component corresponding to all rows within the interpolation interval, includes:

[0035] When the target component is the first valid input value, an automatic interpolation operation is triggered. The interpolation interval is determined with the reference line as the starting line and the current editing line as the ending line, and the first valid input value is determined as the target component corresponding to the interpolation interval.

[0036] When a trigger command is detected that any two non-adjacent data rows in the table are selected, an interpolation operation is triggered. The interpolation interval is determined based on the selected table rows, and one or more target components corresponding to all rows within the interpolation interval are selected.

[0037] A front-end component implementation apparatus, comprising:

[0038] The multi-component adaptive processing module is used to perform dimensional normalization processing on the table data according to the set dimensional parameters to obtain normalized data, and to determine the multi-dimensional interpolation state dataset corresponding to the normalized data.

[0039] The temporary caching module is used to cache the normalized data as a temporary value when the table data changes, and synchronize the temporary value as the final table data after the confirmation operation is triggered.

[0040] The component determination module is used to determine the interpolation interval based on the table rows selected in the final table data, and to select the target components corresponding to all rows within the interpolation interval;

[0041] The interpolation update module is used to use an error-optimized linear interpolation algorithm for the target component to calculate the component value of each data row in the interpolation interval, and update the corresponding row data in the table according to the component value to obtain a table dataset, wherein the component value is greater than the error threshold and meets the preset decimal precision requirement.

[0042] The linked rendering module is used to filter out invalid data that exceeds the valid range in the table dataset, extract the changed data as the linked data source, and perform linked rendering operation on the line chart so that the line chart is updated synchronously with the table.

[0043] The highly reusable component encapsulation module is used to determine each independent functional unit based on normalization logic, interpolation logic, and linkage rendering logic after the synchronous update is completed, and to logically connect each functional unit based on a standardized interface to obtain an integrated encapsulated front-end component.

[0044] A computer storage medium storing at least one instruction that, when executed by a processor, implements the aforementioned front-end component implementation method.

[0045] An electronic device, comprising: a memory and a processor;

[0046] The memory is used to store at least one instruction;

[0047] The processor is used to execute the at least one instruction to implement the front-end component implementation method described above.

[0048] As can be seen from the above technical solution, the present invention discloses a front-end component implementation method and related apparatus. Normalized data is obtained by performing dimensional normalization processing on table data according to set dimensional parameters, and the corresponding dimensional interpolation state dataset is determined. When the table data changes, the normalized data is cached as a temporary value, and after the confirmation operation is triggered, the temporary value is synchronized to the final table data. The interpolation interval is determined based on the table rows selected in the final table data, and the target components corresponding to all rows within the interpolation interval are selected. An error-optimized linear interpolation algorithm is used for the target components to calculate the component values ​​of each data row within the interpolation interval, and the corresponding row data in the table is updated according to the component values ​​to obtain the table dataset. Invalid data exceeding the effective range in the table dataset is filtered out, and the changed data is extracted as a linkage data source. A linkage rendering operation is performed on the line chart to synchronize the line chart with the table. After the synchronization update is completed, each independent functional unit is determined based on the normalization logic, interpolation logic, and linkage rendering logic, and each functional unit is logically connected based on a standardized interface to obtain an integrated and encapsulated front-end component. This invention introduces a temporary value caching mechanism before performing interpolation operations, combined with a secondary confirmation process for the final table data. This prevents the risk of accidentally triggering full interpolation from the operation sequence, avoiding parameter confusion caused by accidental triggering of full interpolation during parameter editing, thereby improving the system's operational fault tolerance. A full-row target component screening strategy is implemented for the interpolation interval, and an error-optimized linear interpolation algorithm is used to process the selected data. This ensures that the component values ​​of each data row within the interpolation interval are greater than the error threshold and meet the specified decimal precision requirements. This effectively solves the calculation anomalies caused by insufficient decimal precision elimination and division by zero in traditional optimized interpolation algorithms, thus improving interpolation accuracy. Attached Figure Description

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

[0050] Figure 1 This is a flowchart of a front-end component implementation method disclosed in an embodiment of the present invention;

[0051] Figure 2This is a schematic diagram of the UI interface of a table-line chart linkage component disclosed in an embodiment of the present invention;

[0052] Figure 3 This is a flowchart of an interpolation logic disclosed in an embodiment of the present invention;

[0053] Figure 4 This is a schematic diagram of the structure of a front-end component implementation device disclosed in an embodiment of the present invention;

[0054] Figure 5 This is a schematic diagram of the structure of an electronic device disclosed in an embodiment of the present invention. Detailed Implementation

[0055] The technical solutions of the embodiments of the present invention will be clearly and completely described below with reference to the accompanying drawings. Obviously, the described embodiments are only some embodiments of the present invention, and not all embodiments. Based on the embodiments of the present invention, all other embodiments obtained by those skilled in the art without creative effort are within the scope of protection of the present invention.

[0056] This invention discloses a front-end component implementation method and related apparatus. A temporary value caching mechanism is introduced before performing interpolation operations. Combined with a secondary confirmation process for the final table data, the risk of accidentally triggering full interpolation is blocked from the operation timing. This avoids parameter confusion caused by accidental triggering of full interpolation during parameter editing, thereby improving the system's operational fault tolerance. A full-row target component screening strategy is implemented for the interpolation interval. An error-optimized linear interpolation algorithm is used to process the selected data, ensuring that the component values ​​of each data row within the interpolation interval are greater than the error threshold and meet the specified decimal precision requirements. This effectively solves the calculation anomalies caused by insufficient decimal precision elimination and division by zero in traditional optimized interpolation algorithms, thus improving interpolation accuracy.

[0057] See Figure 1 This invention discloses a flowchart of a front-end component implementation method. This front-end component implementation method is based on general front-end component development technology and does not require binding to a specific programming language or front-end framework. Those skilled in the art can reproduce the core technical solution through the following steps, and all steps form a coherent data link, meeting the requirements of being feasible and scalable.

[0058] When implementing front-end components, the front-end development environment must have the following characteristics: support for controllable numerical precision (with the ability to forcibly retain a specified number of decimal places), and support for component state change monitoring and incremental rendering mechanisms. Furthermore, the development environment need not be limited to specific development tools, programming languages, or front-end frameworks, thereby ensuring the stable operation of each functional unit within the encapsulated front-end component and achieving cross-environment adaptation.

[0059] The implementation method of front-end components includes the following steps:

[0060] Step S101: Perform dimension normalization processing on the table data according to the set dimension parameters to obtain normalized data, and determine the subdimension interpolation state dataset corresponding to the normalized data.

[0061] The table data is externally input data, which includes multiple data rows. Each data row is associated with a baseline dimension parameter and a variable number of components.

[0062] This application uses baseline dimension parameters as its core, which are configured by default as time parameters, adapting to the mainstream business scenario in industrial simulation where "parameters change over time." All data rows in the table use the baseline dimension parameters as the core basis for interpolation calculations and visualization linkage.

[0063] The default baseline dimension parameter is time. If other baseline dimension parameters, such as displacement, rotational speed, or load level, need to be configured, simply replace the baseline dimension parameter in the configuration. The core logic, including dimension normalization and dimensional state management, remains unchanged. Specifically, the extension can be achieved by adding a new "Baseline Dimension Configuration Item," with selectable values ​​including "time," "displacement," and "rotational speed." During data normalization and subsequent interpolation calculations, replace the original "time parameter" with the baseline dimension parameter specified in this configuration item, and synchronously replace the horizontal axis of the line chart linked to the table with the corresponding baseline dimension parameter. No other linkage rendering logic needs modification.

[0064] Dimension parameters can represent single-component or multi-component scenarios. In this embodiment, dimensional normalization is applied to the table data for both single-component and multi-component scenarios.

[0065] The state information of all components in the normalized data is stored independently and does not interfere with each other.

[0066] The dimensional interpolation state dataset includes: independent state storage units created separately for each component in the normalized data.

[0067] Step S102: When the table data changes, the normalized data is cached as a temporary value, and the temporary value is synchronized to the final table data after the confirmation operation is triggered.

[0068] This embodiment uses a "temporary value caching + confirmation triggering" method to process tabular and normalized data. The specific processing logic is as follows: See Figure 2 The table-line chart linked component UI shown here, in practical applications, when the user... Figure 2When the input boxes in the multi-dimensional parameter configuration table are edited to change the table data, the system caches the normalized data (e.g., retaining 3 decimal places) as temporary values. This means the normalized data is stored in the temporary value cache set corresponding to the data component. After a confirmation operation is triggered, such as when the input box loses focus or the Enter key is pressed, the temporary values ​​are synchronized to the final table data. No interpolation calculations are triggered before a confirmation operation is initiated.

[0069] It should be noted that, Figure 2 The document demonstrates the linked display effect of tables and line charts, as well as the layout of core operation controls. The UI interface includes: single / multi-dimensional configuration (for configuring single / multi-components), attribute range settings (for setting the effective baseline dimension range), table operation buttons (add row button, delete row button, interpolation button), multi-dimensional parameter configuration table, and parameter value-attribute linked trend chart.

[0070] The interpolation button allows users to select any two non-adjacent rows for interpolation, and then refill the table after interpolation. Automatic interpolation is triggered when a component column is modified for the first time.

[0071] The multi-dimensional parameter configuration table includes selection buttons, serial numbers, attributes (such as time), component A, component B, and component C. After an attribute column is modified, the table is reordered by column value. The first modification to a component column triggers automatic interpolation.

[0072] Users can edit the baseline dimension parameters (default time) and the values ​​of each component through the table input box. Selecting any two rows will trigger the interpolation configuration pop-up window. After the table data changes, the line chart will be updated in real time, intuitively showing the trend of parameter changes with the baseline dimension.

[0073] Step S103: Determine the interpolation interval based on the table rows selected in the final table data, and select the target components corresponding to all rows within the interpolation interval.

[0074] The interpolation operations in this application include automatic interpolation operations and instruction interpolation operations.

[0075] Specifically, when the target component is the first valid input value, an automatic interpolation operation is triggered. The interpolation interval is determined with the reference line as the starting line and the current editing line as the ending line, and the first valid input value is determined as the target component corresponding to the interpolation interval.

[0076] When a trigger command is detected that any two non-adjacent data rows in the table are selected, an interpolation operation is triggered. The interpolation interval is determined based on the selected table rows, and one or more target components corresponding to all rows within the interpolation interval are selected.

[0077] In practical applications, automatic interpolation is suitable for scenarios where users quickly complete a parameter when entering it for the first time, eliminating the need to manually select an interval and improving entry efficiency; instruction interpolation is suitable for scenarios where users need to customize the interpolation interval for precise configuration, supporting simultaneous interpolation of multiple components and flexibly adapting to complex parameter configuration requirements.

[0078] This application introduces automatic interpolation and instruction interpolation operations, making the interpolation triggering method more flexible, thus adapting to the needs of both "automatic completion of first input" and "precise interpolation of custom intervals" scenarios.

[0079] In practical applications, users can... Figure 2 In the interface shown, select any two rows in the multi-dimensional parameter configuration table and click the "Interpolation" button. This will trigger an interpolation configuration pop-up window to select the target component and perform the interpolation operation. Unselected components will retain their original values.

[0080] Step S104: For the target component, use an error-optimized linear interpolation algorithm to calculate the component value of each data row in the interpolation interval, and update the corresponding row data in the table according to the component value to obtain the table dataset.

[0081] In practical applications, a precise interpolation engine can be used to update the corresponding row data in the table based on the component values ​​of each data row within the interpolation interval, thus obtaining a table dataset.

[0082] Wherein, the component value is greater than the error threshold and meets the preset decimal accuracy requirement.

[0083] The error threshold can also be adjusted based on business needs (e.g., 0.005), as long as it can achieve accurate calculation of component values ​​within the specified range and avoid calculation anomalies such as division by zero, and meet the parameter accuracy requirements of industrial scenarios.

[0084] The preset decimal precision requirement is determined based on actual needs; for example, the preset decimal precision requirement is to retain 3 decimal places.

[0085] When using the error-optimized linear interpolation algorithm, if the component value is less than or equal to the error threshold, the initial value is returned to avoid calculation errors caused by dividing by zero. The algorithm can be updated based on the component values. Figure 2 The table shows the corresponding row data, and the interpolation completion flags in the temporary value cache set are updated synchronously to obtain the table dataset. In practical applications, the interpolation state set corresponding to the table dataset can also be obtained.

[0086] Error optimization linear interpolation algorithms can be nonlinear interpolation algorithms such as polynomial interpolation and spline interpolation.

[0087] This application adapts to different scenarios by using dual interpolation types and improves interpolation accuracy by combining an error-optimized linear interpolation algorithm.

[0088] Step S105: After filtering out invalid data that exceeds the valid range in the table dataset, extract the changed data as the linkage data source, and perform linkage rendering operation on the line chart so that the line chart and the table are updated synchronously.

[0089] The filtering mechanism used in this application to filter out invalid data that exceeds the valid range in the table dataset ensures that the visualization effect of the line chart is consistent with the actual calculation range, which greatly optimizes the linkage performance between the table and the line chart and effectively reduces the user configuration misjudgment rate.

[0090] Step S106: After the synchronization update is completed, based on the normalization logic, interpolation logic and linkage rendering logic, each independent functional unit is determined, and each functional unit is logically connected based on the standardized interface to obtain an integrated and encapsulated front-end component.

[0091] This application enables front-end components to be directly integrated into different projects such as industrial simulation and equipment configuration through modular decomposition and standardized interface design, thereby significantly shortening the cross-project integration and adaptation cycle and reducing the cost of repeated development.

[0092] In summary, this invention discloses a front-end component implementation method. It performs dimensional normalization on table data according to set dimensional parameters to obtain normalized data, and determines the corresponding dimensional interpolation state dataset. When the table data changes, the normalized data is cached as a temporary value, and after a confirmation operation is triggered, the temporary value is synchronized to the final table data. An interpolation interval is determined based on the selected table rows in the final table data, and target components corresponding to all rows within the interpolation interval are selected. An error-optimized linear interpolation algorithm is used for the target components to calculate the component values ​​of each data row within the interpolation interval. The corresponding row data in the table is updated based on the component values ​​to obtain the table dataset. Invalid data exceeding the effective range in the table dataset is filtered out, and the changed data is extracted as a linked data source. A linked rendering operation is performed on the line chart to synchronize the update of the line chart and the table. After the synchronization update is completed, based on the normalization logic, interpolation logic, and linked rendering logic, each independent functional unit is determined, and each functional unit is logically connected based on a standardized interface to obtain an integrated and encapsulated front-end component. This invention introduces a temporary value caching mechanism before performing interpolation operations, combined with a secondary confirmation process for the final table data. This prevents the risk of accidentally triggering full interpolation from the operation sequence, avoiding parameter confusion caused by accidental triggering of full interpolation during parameter editing, thereby improving the system's operational fault tolerance. A full-row target component screening strategy is implemented for the interpolation interval, and an error-optimized linear interpolation algorithm is used to process the selected data. This ensures that the component values ​​of each data row within the interpolation interval are greater than the error threshold and meet the specified decimal precision requirements. This effectively solves the calculation anomalies caused by insufficient decimal precision elimination and division by zero in traditional optimized interpolation algorithms, thus improving interpolation accuracy.

[0093] For a better understanding of the automatic interpolation process, see [link to documentation]. Figure 3 The present invention discloses an interpolation logic flowchart, the entire process of which includes:

[0094] 1. User operation: When a user edits the parameter value of a certain input box in the table for the first time (the component has no historical valid values), the table data is changed.

[0095] 2. When the system detects normalized data, including: input parameter value + specified component index + row key (i.e., row key), it caches the normalized data as a temporary value, with the storage format being: row key - component index: formatted temporary value.

[0096] 3. Determine if a confirmation operation is triggered. If not, terminate the interpolation process, clear the temporary value, and leave the core data unchanged. If yes (i.e., the input box is out of focus or the Enter key is pressed), synchronize the temporary value to the final value, i.e., synchronize the temporary value and the final value.

[0097] 4. Perform value validation and formatting on the final value, retain 3 decimal places, and exclude illegal values, which are invalid data that are outside the valid range.

[0098] 5. Determine if the current row is the baseline value;

[0099] 6. If it is a baseline value, update the baseline value and change the mark to edited. Only update the baseline row data of the table, without triggering interpolation, to update the core data of the table.

[0100] 7. If it is not the baseline value, obtain the interpolation calculation parameters, including: (1) the starting value is the baseline row parameter value; the starting attribute value is the baseline row attribute value; (2) the ending value is the current row final value; the ending attribute value is the current row attribute value; (3) for non-starting values ​​and non-ending values, use error-optimized linear interpolation calculation, where the error threshold is: when the attribute value difference <= 0.001, return the starting value (avoid division by 0); calculate the target component parameter values ​​of all rows in the interval (keeping 3 decimal places), and update the core data of the table.

[0101] Existing solutions employ a fixed-dimensional design in the implementation of front-end components, requiring the development of separate front-end components for single-component and multi-component scenarios. Switching between scenarios, such as between 3-component and 4-component scenarios, necessitates modifications to the core code, resulting in low adaptation efficiency for the front-end components. Furthermore, existing solutions are incompatible with inconsistent data formats, such as insufficient numbers of externally passed components, which can easily lead to front-end component crashes. All components share the same interpolation state, meaning that editing one component may interfere with the parameter states of other components, resulting in poor adaptation reliability.

[0102] To address the issue of poor flexibility in adapting to multi-component scenarios, in one embodiment, step S101 may specifically include:

[0103] (1) Obtain the table data and the set dimension parameters.

[0104] The table data includes multiple data rows, and each data row is associated with a base dimension parameter and a variable number of components.

[0105] The dimension parameter (Dimension Count) is used to characterize a single-component scene (set to 1) or a multi-component scene (set to N, N≥2).

[0106] In practical applications, dimensional parameters can be set by the user according to actual needs, automatically read from the target project's configuration file, or preset by the component according to industry default scenarios (such as 3 components by default in industrial simulation scenarios). The specific setting process of dimensional parameters depends on actual needs; it is only necessary to ensure that the dimensional parameters can clearly define single-component and multi-component scenarios, providing a dimensional basis for subsequent data normalization.

[0107] (2) Based on the dimension parameters representing single-component or multi-component scenarios, perform dimension normalization on the table data to obtain normalized data.

[0108] In this embodiment, based on the dimension parameter representing whether it is a single-component scenario or a multi-component scenario, the table data is normalized by truncating or padding the initial values.

[0109] (3) Create an independent state storage unit for each component in the normalized data to obtain the multidimensional interpolated state dataset corresponding to the normalized data.

[0110] The independent state storage unit contains four types of core information: baseline row editing identifier, baseline row parameter value, temporary value cache set, and interpolation completion identifier.

[0111] It should be noted that the state information of all components in the normalized data is stored independently and does not interfere with each other, forming a multi-dimensional interpolation state dataset corresponding to the normalized data, thereby providing a basis for state management for subsequent interpolation calculations.

[0112] In practical applications, the implementation of independent state storage units can also be replaced by "key-value dictionary", "object array" or the state management container built into the front-end framework (such as Vuex, Redux). The state information can add or remove non-core fields (such as component name identifier, last edit timestamp) according to business needs. It is only necessary to ensure that the state of each component can be managed independently and does not interfere with each other, and to support the state flow of subsequent interpolation calculations.

[0113] In one embodiment, based on the dimension parameters representing single-component or multi-component scenarios, the table data is subjected to dimension normalization processing to obtain normalized data, including:

[0114] If the dimension parameter represents the single-component scenario, the first value or the value of the specified component in each row of the table data is retained, and zeros are added when there are no valid values ​​to obtain the normalized data;

[0115] If the dimension parameter is used to characterize the multi-component scenario, the first N values ​​of each row in the table data are extracted, and rows with fewer than N values ​​are padded with 0 to obtain the normalized data. The number of classification values ​​in all rows of the normalized data is consistent with the dimension parameter, and N is the dimension parameter value corresponding to the dimension parameter.

[0116] In practical applications, when the dimension parameter represents a single-component scenario, the first value of each row in the table data or the value of the specified component is retained, and 0 is used to fill in the missing values, so as to obtain the normalized data corresponding to the single-component scenario.

[0117] When the dimension parameter represents a multi-component scenario, the first N values ​​(N is the dimension parameter value corresponding to the dimension parameter) of each row in the table data are extracted. If there is a row with less than N values, it is padded with 0 to obtain the normalized data of the table data padded with N, so that the number of classification values ​​in all rows of the normalized data is consistent with the dimension parameter.

[0118] When normalizing data, in addition to using 0 to supplement the missing dimensions, other values ​​can also be used to complete the supplementation operation.

[0119] Therefore, in one embodiment, based on the dimension parameters representing single-component or multi-component scenarios, the table data is subjected to dimension normalization processing to obtain normalized data, including:

[0120] If the dimension parameter represents the single-component scenario, the first value or the value of the specified component in each row of the table data is retained, and a preset value is added when there is no valid value, so as to obtain the normalized data;

[0121] If the dimension parameter is used to characterize the multi-component scenario, the first N values ​​of each row in the table data are extracted, and the preset value is added to rows with less than N values ​​to obtain the normalized data. The number of classification values ​​in all rows of the normalized data is consistent with the dimension parameter, and N is the dimension parameter value corresponding to the dimension parameter.

[0122] In this embodiment, to address the issue of numerical adaptation for insufficient dimensions, preset values ​​are used for supplementation. These preset values ​​are non-zero. Specifically, the preset value can be any one of the following: a preset baseline value (e.g., a preset baseline value of 1), the average of the same components in adjacent rows, or a user-defined default value.

[0123] The preset values ​​are determined according to actual needs, as long as the number of components in each data row is uniform and the format is consistent, and the data source requirements for subsequent interpolation calculations are met; in single-component scenarios, any component value specified by the user can be retained, rather than being limited to the first value.

[0124] In traditional solutions, the interaction between tables and line charts is poor. Specifically, after changes to table data, the line chart data source needs to be completely regenerated and the table destroyed and redrawn. In scenarios with large amounts of data, the interaction response is delayed, resulting in noticeable lag. Furthermore, the lack of effective time range filtering logic causes the line chart to directly display invalid data that exceeds the actual calculation range, leading to a disconnect between the visualization effect and the actual application scenario, and misleading users in their configuration.

[0125] To optimize the linkage performance between tables and line charts, in one embodiment, step S105 may specifically include:

[0126] (1) Filter out invalid data that is out of the valid range in the tabular dataset to obtain the target tabular dataset.

[0127] The effective range, also known as the effective reference dimension range, such as the time range, takes the value of 0~50s.

[0128] Obtain the tabular dataset output by the accurate interpolation engine and the user's... Figure 2 The UI interface shown illustrates the valid range of the attribute range setting control. This embodiment filters out invalid data outside the valid range from the table dataset, retaining only precise data within the valid range to ensure... Figure 2 The horizontal axis of the line chart shown is consistent with the set valid range, and the target table dataset is finally obtained.

[0129] (2) The target table dataset is split into multiple independent data series according to its components.

[0130] Each independent data series corresponds to Figure 2 The line graph shown is a curve.

[0131] (3) Extract change data from each of the independent data series.

[0132] In this embodiment, only the component data that has changed compared to historical data is extracted from each independent data series as the changed data, and then output to the line chart component.

[0133] (4) Perform a linked rendering operation on the line chart according to each of the changed data, so that the line chart and the table are updated synchronously.

[0134] The line chart component performs linked rendering operations on the line chart based on each changed data, achieving the effect of real-time synchronous updating of the line chart after changes to the table data.

[0135] In summary, this invention, through effective data filtering and incremental rendering techniques, reduces unnecessary calculations and rendering time, ensuring low latency (no noticeable stuttering) in large data volume scenarios and smoothly displaying the trend of parameter values ​​changing with attributes. Simultaneously, this technology guarantees that the visualization range of the line chart is completely consistent with the actual calculation range, avoiding misleading user configurations due to data inconsistencies, thereby optimizing the linkage performance between tables and line charts.

[0136] In traditional solutions, the core logic (interpolation, validation, and linkage) is tightly coupled with UI rendering. Modifying interpolation rules or linkage logic requires refactoring the entire component, making front-end component maintenance difficult. Traditional solutions do not provide standardized external interfaces, so cross-project integration requires direct manipulation of the component's internal state, resulting in deep binding between the component and project code. Adapting to different front-end frameworks (such as switching from React to Vue) or meeting functional requirements necessitates extensive modifications to the core code, leading to poor reusability of front-end components.

[0137] To reduce the maintenance difficulty, integration and maintenance costs of front-end components, and improve the reusability of front-end components, in one embodiment, step S106 may specifically include:

[0138] (1) The multidimensional interpolation state dataset and the normalization logic that generates the multidimensional interpolation state dataset are encapsulated into an independent multi-component adaptation unit.

[0139] (2) The tabular dataset and the interpolation logic that generates the tabular dataset are encapsulated into an independent interpolation calculation unit.

[0140] (3) The linked data source and the linked rendering logic executed on the linked data source are encapsulated into an independent linked rendering unit.

[0141] (4) The multi-component adaptation unit, the interpolation calculation unit and the linkage rendering unit are logically connected through a standardized interface to obtain an integrated and encapsulated front-end component.

[0142] In practical applications, in addition to integrating multi-component adaptation units, interpolation calculation units, and linked rendering units, integrated front-end components can also integrate other functional units, such as row operation units. Figure 2 The core functions of the "Add Row" and "Delete Row" buttons, which are also the core functions of the row operation unit, are: adding and deleting rows.

[0143] Therefore, by logically connecting the multi-component adaptation unit, interpolation calculation unit, linkage rendering unit, and row operation unit through standardized interfaces, an integrated and encapsulated front-end component can be obtained.

[0144] This invention employs a modular decomposition and logical coupling method to process the data, resulting in a set of independently encapsulated functional units. This set of functional units includes: a multi-component adaptation unit, an interpolation calculation unit, and a linked rendering unit. Each unit contains its own business logic and data processing rules, and the units interact with each other through internal standardized interfaces.

[0145] This invention employs standardized interfaces and data interaction normalization methods to obtain highly reusable front-end components that can be integrated across projects, ultimately forming a system that includes... Figure 2 The complete UI interaction and core business function components are shown in the finished product.

[0146] In summary, this invention decouples core logic from UI rendering through modular decomposition, supports rapid cross-project integration and adaptation to different front-end frameworks through standardized interfaces, improves component reusability, and reduces repetitive development and maintenance workload.

[0147] The implementation process of front-end components is illustrated with an example as follows:

[0148] Industrial robot XYZ direction velocity parameter configuration (3-component scenario)

[0149] 1. Implementation Scenario Description

[0150] This embodiment is applied to an industrial robot motion control platform. It requires configuring the robot end effector's velocity parameters (3 components) in the XYZ directions. The parameters change over time (0-50s). Key node parameters need to be entered into a table, and the trend of change can be previewed in real time using a line graph. Targeted interpolation is supported to reduce input costs. The component needs to be integrated into the front-end project of the React framework.

[0151] 2. Detailed Implementation Steps (Preparation Process)

[0152] (1) Basic environmental preparation

[0153] Hardware: Standard office computer (CPU ≥ Intel i5, RAM ≥ 8GB);

[0154] Software: React 18 front-end framework, Chrome 118.0 browser, UI library (ElementUI) and visualization library (ECharts) that the components depend on.

[0155] Component configuration parameters: Dimension parameter (dimensionCount=3), valid time range (0-50s), baseline row time threshold (0.001s), number of decimal places (3), time error threshold (0.001s).

[0156] (2) Implementation of multi-component adaptive processing

[0157] Scene configuration: When the component is imported, set the dimension parameter to 3, and the component will automatically be recognized as a 3-component scene without modifying the core code;

[0158] External data input: Externally input parameter dataset (time + XYZ velocity), some data components are insufficient (e.g., a certain time node only contains the velocity in the X and Y directions, and the Z direction is missing);

[0159] Data normalization processing: The component extracts the first 3 components according to the rules, and the missing Z direction values ​​are automatically filled with 0 to generate internal data in a uniform format (each time node contains 3 component values).

[0160] Dimensional State Management: Create independent state objects for the three components X, Y, and Z, each containing "baseline row editing identifier, baseline row parameter value, temporary value cache dictionary, and interpolation completion identifier". The states of the three components do not interfere with each other.

[0161] (3) Implementation of the precise interpolation engine

[0162] Temporary value editing: When a user edits the X-direction velocity value (e.g., X-velocity at time 10s) in a table and enters "5.2", the value is first stored in the temporary value cache dictionary of the X component (the key is "row identifier-0", where 0 is the X component index). At this time, interpolation is not triggered.

[0163] Final value confirmation: When the user clicks on another cell (the input box goes out of focus), the temporary value "5.2" is automatically formatted as a 3-decimal-place number "5.200", which is then synchronized to the final value, triggering the interpolation logic;

[0164] Targeted interpolation configuration: When the user selects two rows (not adjacent) in the table with time "0.001s" (baseline row) and "20s", a component selection pop-up window will appear. The user can select "X component" and "Y component" but not "Z component".

[0165] Error optimization interpolation calculation: The component calculates the parameter values ​​of the X and Y components in the interval of 0.001s-20s using a linear interpolation formula. Since the time difference (19.999s) is greater than 0.001s, the calculation proceeds normally. If the user selects two rows with times "0.001s" and "0.0015s" (time difference 0.0005s), the X and Y component values ​​of the baseline row are returned directly to avoid division by zero errors.

[0166] Results Update: Only the interval parameter values ​​of the X and Y components are updated, while the Z component retains its original value. The updated parameters are displayed in the table.

[0167] (4) Real-time linkage rendering implementation

[0168] Dependency listener trigger: After the X and Y component parameters in the table are updated, the component detects that the "core data of the table" has changed and triggers the generation of the line chart data source;

[0169] Valid data filtering: When generating the data source, filter out invalid data with a time <0s or >50s (such as externally imported 55s data), and only retain valid data within 0-50s;

[0170] Incremental rendering: Only the changed X and Y component data series are transferred to the line chart, while the Z component data remains unchanged and does not need to be re-rendered; the line chart only updates the curves of the X and Y components, keeping the Z component curve unchanged, without any lag.

[0171] (5) Implementation of highly reusable component integration

[0172] Component import: Import the encapsulated component into the React project using the import statement without modifying the core component code;

[0173] API calls: In the project, component functions are called through standardized APIs—the “Data Acquisition API” is called to obtain normalized 3-component table data, the “Validation API” is called to verify the validity of the data (e.g., number of rows ≥ 2, no all-zero data), and the “Status Refresh API” is called to adjust the effective time range to 0-40s;

[0174] Logical modification adaptation: If the interpolation algorithm needs to be changed to polynomial interpolation, only the "interpolation calculation function unit" of the component needs to be modified. There is no need to reconstruct the entire component, so the adaptation cost is low.

[0175] 3. Detection methods and results

[0176] (1) Detection method

[0177] Adaptability test: Change the external input data (insufficient number of components, disordered format) and observe whether the component adapts normally; switch the dimension parameter to 2 (2 components) and observe whether the scene switch does not require modification of the core code;

[0178] Interpolation accuracy detection: When editing parameters, accidentally touch other cells and observe whether interpolation is triggered; set an interpolation interval with a time difference of <0.001s and observe whether calculation anomalies occur; after targeted interpolation, check whether unselected components retain their original values;

[0179] Linkage performance test: Enter 500 rows of parameter data, modify any cell value, and observe whether the linkage response of the line chart is smooth and whether only the curve of the changed component is updated;

[0180] (2) Test results

[0181] Adaptability: The component successfully supports data with insufficient components without crashing; after adjusting the dimension parameter to 2, it smoothly switches to a 2-component scenario without modifying the core code, demonstrating flexible adaptation.

[0182] Interpolation accuracy: Accidental touch operation does not trigger interpolation, there is no calculation abnormality when the time difference is <0.001s, targeted interpolation only updates the selected component, and the unselected component retains the original value, and the accuracy and fault tolerance meet the standards;

[0183] Linkage performance: With 500 rows of data, the line chart linkage is smooth and only updates the component curves. The visualization range is consistent with the 0-50s effective time, and no invalid data is displayed.

[0184] Corresponding to the above method embodiments, the present invention also discloses a front-end component implementation device.

[0185] See Figure 4 The present invention discloses a schematic diagram of a front-end component implementation device, which may include:

[0186] The multi-component adaptive processing module 201 is used to perform dimensional normalization processing on the table data according to the set dimensional parameters to obtain normalized data, and to determine the multi-dimensional interpolation state dataset corresponding to the normalized data.

[0187] This invention addresses the core needs of typical application scenarios such as industrial simulation and equipment parameter configuration. It uses "time" as an attribute in parameter interpolation (in these scenarios, parameter values ​​typically change over time, making time the most crucial independent variable). In practice, this can be extended to other attributes (such as displacement and load level) through configuration. The multi-component adaptive processing module 201 is responsible for multi-component scenario adaptation and data normalization. Its core logic includes:

[0188] Scene configuration: The scene type can be specified by the component input parameter dimension parameter. Single-component scenes are set to 1, and multi-component scenes are set to N. Scenes can be switched without modifying the core code.

[0189] Data normalization: After receiving the parameter array from the external input, normalization is performed according to the preset dimensions: In single-component scenarios, the first parameter value is retained, and zeros are added if there is no value; in multi-component scenarios, the first N parameter values ​​are truncated, and zeros are added to N positions if there are fewer than N positions, to ensure that the internal data format is consistent.

[0190] Dimensional State Management: Independently maintain interpolation state objects for each component, including: base row (when time is the attribute, the time parameter is ≤0.001s; if other attributes are adapted, it is the initial value of the attribute) editing identifier, base row base value, interpolation completion identifier, and temporary value cache dictionary (based on the unique identifier of the table row for querying), to avoid interpolation interference between components.

[0191] The table data is externally input data, which includes multiple data rows. Each data row is associated with a baseline dimension parameter and a variable number of components.

[0192] This application uses baseline dimension parameters as its core, which are configured by default as time parameters, adapting to the mainstream business scenario in industrial simulation where "parameters change over time." All data rows in the table use the baseline dimension parameters as the core basis for interpolation calculations and visualization linkage.

[0193] The default baseline dimension parameter is time. If other baseline dimension parameters, such as displacement, rotational speed, or load level, need to be configured, simply replace the baseline dimension parameter in the configuration. The core logic, including dimension normalization and dimensional state management, remains unchanged. Specifically, the extension can be achieved by adding a new "Baseline Dimension Configuration Item," with selectable values ​​including "time," "displacement," and "rotational speed." During data normalization and subsequent interpolation calculations, replace the original "time parameter" with the baseline dimension parameter specified in this configuration item, and synchronously replace the horizontal axis of the line chart linked to the table with the corresponding baseline dimension parameter. No other linkage rendering logic needs modification.

[0194] Dimension parameters can represent single-component or multi-component scenarios. In this embodiment, dimensional normalization is applied to the table data for both single-component and multi-component scenarios.

[0195] The state information of all components in the normalized data is stored independently and does not interfere with each other.

[0196] The dimensional interpolation state dataset includes: independent state storage units created separately for each component in the normalized data.

[0197] The temporary cache module 202 is used to cache the normalized data as a temporary value when the table data changes, and synchronize the temporary value as the final table data after the confirmation operation is triggered.

[0198] This embodiment uses a "temporary value caching + confirmation triggering" method to process tabular and normalized data. The specific processing logic is as follows: See Figure 2 The table-line chart linked component UI shown here, in practical applications, when the user... Figure 2 When the input boxes in the multi-dimensional parameter configuration table are edited to change the table data, the system caches the normalized data (e.g., retaining 3 decimal places) as temporary values. This means the normalized data is stored in the temporary value cache set corresponding to the data component. After a confirmation operation is triggered, such as when the input box loses focus or the Enter key is pressed, the temporary values ​​are synchronized to the final table data. No interpolation calculations are triggered before a confirmation operation is initiated.

[0199] The component determination module 203 is used to determine the interpolation interval based on the table rows selected in the final table data, and to select the target components corresponding to all rows within the interpolation interval.

[0200] The interpolation operations in this application include automatic interpolation operations and instruction interpolation operations.

[0201] Therefore, the component determination module 203 can be specifically used for:

[0202] When the target component is the first valid input value, an automatic interpolation operation is triggered. The interpolation interval is determined with the reference line as the starting line and the current editing line as the ending line, and the first valid input value is determined as the target component corresponding to the interpolation interval.

[0203] When a trigger command is detected that any two non-adjacent data rows in the table are selected, an interpolation operation is triggered. The interpolation interval is determined based on the selected table rows, and one or more target components corresponding to all rows within the interpolation interval are selected.

[0204] In practical applications, automatic interpolation is suitable for scenarios where users quickly complete a parameter when entering it for the first time, eliminating the need to manually select an interval and improving entry efficiency; instruction interpolation is suitable for scenarios where users need to customize the interpolation interval for precise configuration, supporting simultaneous interpolation of multiple components and flexibly adapting to complex parameter configuration requirements.

[0205] This application introduces automatic interpolation and instruction interpolation operations, making the interpolation triggering method more flexible, thus adapting to the needs of both "automatic completion of first input" and "precise interpolation of custom intervals" scenarios.

[0206] In practical applications, users can... Figure 2 In the interface shown, select any two rows in the multi-dimensional parameter configuration table and click the "Interpolation" button. This will trigger an interpolation configuration pop-up window to select the target component and perform the interpolation operation. Unselected components will retain their original values.

[0207] The interpolation update module 204 is used to use an error-optimized linear interpolation algorithm for the target component to calculate the component value of each data row in the interpolation interval, and update the corresponding row data in the table according to the component value to obtain the table dataset.

[0208] In practical applications, a precise interpolation engine can be used to update the corresponding row data in the table based on the component values ​​of each data row within the interpolation interval, thus obtaining a table dataset.

[0209] Wherein, the component value is greater than the error threshold and meets the preset decimal accuracy requirement.

[0210] The error threshold can also be adjusted based on business needs (e.g., 0.005), as long as it can achieve accurate calculation of component values ​​within the specified range and avoid calculation anomalies such as division by zero, and meet the parameter accuracy requirements of industrial scenarios.

[0211] The preset decimal precision requirement is determined based on actual needs; for example, the preset decimal precision requirement is to retain 3 decimal places.

[0212] When using the error-optimized linear interpolation algorithm, if the component value is less than or equal to the error threshold, the initial value is returned to avoid calculation errors caused by dividing by zero. The algorithm can be updated based on the component values. Figure 2 The table shows the corresponding row data, and the interpolation completion flags in the temporary value cache set are updated synchronously to obtain the table dataset. In practical applications, the interpolation state set corresponding to the table dataset can also be obtained.

[0213] Error optimization linear interpolation algorithms can be nonlinear interpolation algorithms such as polynomial interpolation and spline interpolation.

[0214] The linkage rendering module 205 is used to filter out invalid data that exceeds the valid range in the table dataset, extract the changed data as the linkage data source, and perform linkage rendering operation on the line chart so that the line chart is updated synchronously with the table.

[0215] The linked rendering module 205 enables low-latency linkage between tables and line charts. Its core logic includes:

[0216] Dependency-based data source generation: Through a front-end dependency monitoring mechanism, the line chart data source is regenerated only when the dependency changes, based on the core data of the table and the effective time range as key dependency conditions, thus avoiding invalid calculations.

[0217] Effective data filtering: When the data source is generated, table rows with times exceeding the effective time range are filtered out. The horizontal axis of the line chart is fixed to this range to ensure that the visualization is consistent with the actual calculation range.

[0218] Incremental rendering optimization: Encapsulate the line chart component, and when receiving data from the data source, compare it with historical data and only pass the changed parameter series (e.g., if a certain component parameter changes, only the data of that component is passed), instead of the entire data source.

[0219] The highly reusable component encapsulation module 206 is used to determine each independent functional unit based on normalization logic, interpolation logic, and linkage rendering logic after the synchronous update is completed, and to logically connect each of the functional units based on a standardized interface to obtain an integrated encapsulated front-end component.

[0220] The highly reusable component encapsulation module 206 achieves logical decoupling and standardized integration. Its core logic includes:

[0221] Modular decomposition: The core logic is divided into 4 independent functional units, including multi-component adaptation unit, precise interpolation unit, linked rendering unit, and table row operation unit. Each unit exposes an interface independently and supports individual reuse.

[0222] Standardized interface design: Design and expose external interfaces through front-end interface forwarding and custom mechanisms, including: interfaces for obtaining normalized table data, interfaces for triggering data validation, and interfaces for refreshing the valid time range;

[0223] Type constraints: Define the type specifications for the input parameters, internal states and external interfaces of components, clarify the data format and interaction standards, and provide data validation and format guidance during development.

[0224] In summary, this invention discloses a front-end component implementation device. It performs dimensional normalization on table data according to set dimensional parameters to obtain normalized data, and determines the corresponding dimensional interpolation state dataset. When the table data changes, the normalized data is cached as a temporary value, and after a confirmation operation is triggered, the temporary value is synchronized to the final table data. An interpolation interval is determined based on the selected table rows in the final table data, and target components corresponding to all rows within the interpolation interval are selected. An error-optimized linear interpolation algorithm is used for the target components to calculate the component values ​​of each data row within the interpolation interval. The corresponding row data in the table is updated based on the component values ​​to obtain the table dataset. Invalid data exceeding the effective range in the table dataset is filtered out, and the changed data is extracted as a linked data source. A linked rendering operation is performed on the line chart to synchronize the update of the line chart and the table. After the synchronization update is completed, based on the normalization logic, interpolation logic, and linked rendering logic, each independent functional unit is determined, and each functional unit is logically connected based on a standardized interface to obtain an integrated and encapsulated front-end component. This invention introduces a temporary value caching mechanism before performing interpolation operations, combined with a secondary confirmation process for the final table data. This prevents the risk of accidentally triggering full interpolation from the operation sequence, avoiding parameter confusion caused by accidental triggering of full interpolation during parameter editing, thereby improving the system's operational fault tolerance. A full-row target component screening strategy is implemented for the interpolation interval, and an error-optimized linear interpolation algorithm is used to process the selected data. This ensures that the component values ​​of each data row within the interpolation interval are greater than the error threshold and meet the specified decimal precision requirements. This effectively solves the calculation anomalies caused by insufficient decimal precision elimination and division by zero in traditional optimized interpolation algorithms, thus improving interpolation accuracy.

[0225] In practical applications, a complete interpolation module can be constructed by integrating the temporary cache module 202, the component determination module 203, and the interpolation update module 204.

[0226] The interpolation module enables separate editing and precise interpolation of "temporary value - final value". Its core logic includes:

[0227] Temporary value caching mechanism: When a user edits parameters, the input value is first stored in the temporary value cache set of the corresponding component (using the combination of "table row unique identifier and component index" as the query identifier). The final value synchronization is only triggered when the input box is out of focus or when the Enter key is pressed, to avoid accidental interpolation.

[0228] Linear interpolation algorithm for error optimization: The interpolation calculation method is that the target value is equal to the starting value plus (the ending value minus the starting value) multiplied by (the current time minus the starting time) divided by (the ending time minus the starting time). All values ​​are retained to 3 decimal places. A time error threshold of 0.001 is set. When the difference between the ending time and the starting time is less than 0.001, the starting value is returned to avoid the abnormal division by zero.

[0229] Targeted interpolation strategy: Supports selecting any two non-adjacent rows in the table, triggering an interpolation pop-up window to select target components (multiple selections are allowed), performing interval interpolation only on the selected components, and retaining the original values ​​of unselected components; during interpolation, the start and end rows are determined by time sorting, and the parameter values ​​within the interval are updated after calculating the time ratio.

[0230] In one embodiment, the multi-component adaptive processing module 201 can be specifically used for:

[0231] Obtain the table data and the set dimension parameters, wherein the table data includes multiple data rows, and each data row is associated with a base dimension parameter and a variable number of components;

[0232] Based on the dimension parameters representing single-component or multi-component scenarios, the table data is subjected to dimension normalization to obtain normalized data.

[0233] An independent state storage unit is created for each component in the normalized data to obtain the multidimensional interpolation state dataset corresponding to the normalized data. The independent state storage unit contains four types of core information: baseline row editing identifier, baseline row parameter value, temporary value cache set, and interpolation completion identifier.

[0234] In one embodiment, the multi-component adaptive processing module 201 can also be used for:

[0235] If the dimension parameter represents the single-component scenario, the first value or the value of the specified component in each row of the table data is retained, and zeros are added when there are no valid values ​​to obtain the normalized data;

[0236] If the dimension parameter is used to characterize the multi-component scenario, the first N values ​​of each row in the table data are extracted, and rows with fewer than N values ​​are padded with 0 to obtain the normalized data. The number of classification values ​​in all rows of the normalized data is consistent with the dimension parameter, and N is the dimension parameter value corresponding to the dimension parameter.

[0237] In one embodiment, the multi-component adaptive processing module 201 can also be used for:

[0238] If the dimension parameter represents the single-component scenario, the first value or the value of the specified component in each row of the table data is retained, and a preset value is added when there is no valid value to obtain the normalized data. The preset value is a non-zero value, and the preset value is any one of the preset baseline value, the mean of the same component in adjacent rows, and the user-defined default value.

[0239] If the dimension parameter is used to characterize the multi-component scenario, the first N values ​​of each row in the table data are extracted, and the preset value is added to rows with less than N values ​​to obtain the normalized data. The number of classification values ​​in all rows of the normalized data is consistent with the dimension parameter, and N is the dimension parameter value corresponding to the dimension parameter.

[0240] In one embodiment, the linked rendering module 205 can be specifically used for:

[0241] Invalid data that exceeds the valid range in the tabular dataset is filtered out to obtain the target tabular dataset;

[0242] The target table dataset is split into multiple independent data series according to its components;

[0243] Extract the change data from each of the individual data series;

[0244] Based on the various changes in the data, a linked rendering operation is performed on the line chart to ensure that the line chart and the table are updated synchronously.

[0245] In one embodiment, the linked rendering module 205 can be specifically used for:

[0246] The multidimensional interpolation state dataset and the normalization logic that generates the multidimensional interpolation state dataset are encapsulated into an independent multi-component adaptation unit.

[0247] The tabular dataset and the interpolation logic that generated the tabular dataset are encapsulated into an independent interpolation calculation unit;

[0248] The linked data source and the linked rendering logic executed on the linked data source are encapsulated into an independent linked rendering unit;

[0249] The multi-component adaptation unit, the interpolation calculation unit, and the linkage rendering unit are logically connected through a standardized interface to obtain an integrated and encapsulated front-end component.

[0250] It should be noted that for the specific working principles of each component in the device embodiment, please refer to the corresponding section of the method embodiment, which will not be repeated here.

[0251] Corresponding to the above method embodiments, the present invention also discloses a computer storage medium that stores at least one instruction, which, when executed by a processor, implements the steps shown in the front-end component implementation method embodiments.

[0252] Corresponding to the above embodiments, such as Figure 5 As shown, the present invention also provides a schematic diagram of the structure of an electronic device, which may include: a processor 1 and a memory 2;

[0253] The processor 1 and memory 2 communicate with each other via communication bus 3.

[0254] Processor 1, for executing at least one instruction;

[0255] Memory 2 is used to store at least one instruction;

[0256] Processor 1 may be a central processing unit (CPU), an application-specific integrated circuit (ASIC), or one or more integrated circuits configured to implement embodiments of the present invention.

[0257] Memory 2 may include high-speed RAM memory, and may also include non-volatile memory, such as at least one disk storage device.

[0258] In this embodiment, the processor executes at least one instruction to implement the steps shown in the front-end component implementation method embodiment.

[0259] Finally, it should be noted that in this document, relational terms such as "first" and "second" are used only to distinguish one entity or operation from another, and do not necessarily require or imply any such actual relationship or order between these entities or operations. Furthermore, the terms "comprising," "including," or any other variations thereof are intended to cover non-exclusive inclusion, such that a process, method, article, or apparatus that comprises a list of elements includes not only those elements but also other elements not expressly listed, or elements inherent to such a process, method, article, or apparatus. Without further limitations, an element defined by the phrase "comprising one..." does not exclude the presence of other identical elements in the process, method, article, or apparatus that includes said element.

[0260] The various embodiments in this specification are described in a progressive manner, with each embodiment focusing on the differences from other embodiments. The same or similar parts between the various embodiments can be referred to each other.

[0261] The above description of the disclosed embodiments enables those skilled in the art to make or use the invention. Various modifications to these embodiments will be readily apparent to those skilled in the art, and the general principles defined herein may be implemented in other embodiments without departing from the spirit or scope of the invention. Therefore, the invention is not to be limited to the embodiments shown herein, but is to be accorded the widest scope consistent with the principles and novel features disclosed herein.

Claims

1. A method for implementing a front-end component, characterized in that, include: The table data is normalized according to the set dimension parameters to obtain normalized data, and the corresponding multi-dimensional interpolation state dataset is determined. When the table data changes, the normalized data is cached as a temporary value, and the temporary value is synchronized to the final table data after the confirmation operation is triggered. The interpolation interval is determined based on the table rows selected in the final table data, and the target components corresponding to all rows within the interpolation interval are selected. An error-optimized linear interpolation algorithm is used for the target component to calculate the component value of each data row in the interpolation interval, and the corresponding row data in the table is updated according to the component value to obtain a table dataset, wherein the component value is greater than the error threshold and meets the preset decimal precision requirement; After filtering out invalid data that is out of the valid range in the table dataset, the changed data is extracted as the linked data source, and a linked rendering operation is performed on the line chart so that the line chart and the table are updated synchronously. After the synchronization update is completed, based on the normalization logic, interpolation logic, and linkage rendering logic, each independent functional unit is determined, and each functional unit is logically connected based on a standardized interface to obtain an integrated and encapsulated front-end component.

2. The front-end component implementation method according to claim 1, characterized in that, The table data is normalized according to the set dimension parameters to obtain normalized data, and the corresponding multi-dimensional interpolation state dataset is determined, including: Obtain the table data and the set dimension parameters, wherein the table data includes multiple data rows, and each data row is associated with a base dimension parameter and a variable number of components; Based on the dimension parameters representing single-component or multi-component scenarios, the table data is subjected to dimension normalization to obtain normalized data. An independent state storage unit is created for each component in the normalized data to obtain the multidimensional interpolation state dataset corresponding to the normalized data. The independent state storage unit contains four types of core information: baseline row editing identifier, baseline row parameter value, temporary value cache set, and interpolation completion identifier.

3. The front-end component implementation method according to claim 2, characterized in that, Based on the dimensional parameters representing single-component or multi-component scenarios, the table data is subjected to dimensional normalization to obtain normalized data, including: If the dimension parameter represents the single-component scenario, the first value or the value of the specified component in each row of the table data is retained, and zeros are added when there are no valid values ​​to obtain the normalized data; If the dimension parameter is used to characterize the multi-component scenario, the first N values ​​of each row in the table data are extracted, and rows with fewer than N values ​​are padded with 0 to obtain the normalized data. The number of classification values ​​in all rows of the normalized data is consistent with the dimension parameter, and N is the dimension parameter value corresponding to the dimension parameter.

4. The front-end component implementation method according to claim 2, characterized in that, Based on the dimensional parameters representing single-component or multi-component scenarios, the table data is subjected to dimensional normalization to obtain normalized data, including: If the dimension parameter represents the single-component scenario, the first value or the value of the specified component in each row of the table data is retained, and a preset value is added when there is no valid value to obtain the normalized data. The preset value is a non-zero value, and the preset value is any one of the preset baseline value, the mean of the same component in adjacent rows, and the user-defined default value. If the dimension parameter is used to characterize the multi-component scenario, the first N values ​​of each row in the table data are extracted, and the preset value is added to rows with less than N values ​​to obtain the normalized data. The number of classification values ​​in all rows of the normalized data is consistent with the dimension parameter, and N is the dimension parameter value corresponding to the dimension parameter.

5. The front-end component implementation method according to claim 1, characterized in that, After filtering out invalid data that is outside the valid range from the table dataset, the changed data is extracted as a linked data source, and a linked rendering operation is performed on the line chart to synchronize the line chart with the table, including: Invalid data that exceeds the valid range in the tabular dataset is filtered out to obtain the target tabular dataset; The target table dataset is split into multiple independent data series according to its components; Extract the change data from each of the individual data series; Based on the various changes in the data, a linked rendering operation is performed on the line chart to ensure that the line chart and the table are updated synchronously.

6. The front-end component implementation method according to any one of claims 1 to 5, characterized in that, After the synchronization update is completed, based on the normalization logic, interpolation logic, and linked rendering logic, each independent functional unit is determined, and these functional units are logically connected based on standardized interfaces to obtain an integrated and encapsulated front-end component, including: The multidimensional interpolation state dataset and the normalization logic that generates the multidimensional interpolation state dataset are encapsulated into an independent multi-component adaptation unit. The tabular dataset and the interpolation logic that generated the tabular dataset are encapsulated into an independent interpolation calculation unit; The linked data source and the linked rendering logic executed on the linked data source are encapsulated into an independent linked rendering unit; The multi-component adaptation unit, the interpolation calculation unit, and the linkage rendering unit are logically connected through a standardized interface to obtain an integrated and encapsulated front-end component.

7. The front-end component implementation method according to claim 1, characterized in that, The interpolation interval is determined based on the selected table rows in the final table data, and the target components corresponding to all rows within the interpolation interval are selected, including: When the target component is the first valid input value, an automatic interpolation operation is triggered. The interpolation interval is determined with the reference line as the starting line and the current editing line as the ending line, and the first valid input value is determined as the target component corresponding to the interpolation interval. When a trigger command is detected that any two non-adjacent data rows in the table are selected, an interpolation operation is triggered. The interpolation interval is determined based on the selected table rows, and one or more target components corresponding to all rows within the interpolation interval are selected.

8. A front-end component implementation apparatus, characterized in that, include: The multi-component adaptive processing module is used to perform dimensional normalization processing on the table data according to the set dimensional parameters to obtain normalized data, and to determine the multi-dimensional interpolation state dataset corresponding to the normalized data. The temporary caching module is used to cache the normalized data as a temporary value when the table data changes, and synchronize the temporary value as the final table data after the confirmation operation is triggered. The component determination module is used to determine the interpolation interval based on the table rows selected in the final table data, and to select the target components corresponding to all rows within the interpolation interval; The interpolation update module is used to use an error-optimized linear interpolation algorithm for the target component to calculate the component value of each data row in the interpolation interval, and update the corresponding row data in the table according to the component value to obtain a table dataset, wherein the component value is greater than the error threshold and meets the preset decimal precision requirement. The linked rendering module is used to filter out invalid data that exceeds the valid range in the table dataset, extract the changed data as the linked data source, and perform linked rendering operation on the line chart so that the line chart is updated synchronously with the table. The highly reusable component encapsulation module is used to determine each independent functional unit based on normalization logic, interpolation logic, and linkage rendering logic after the synchronous update is completed, and to logically connect each functional unit based on a standardized interface to obtain an integrated encapsulated front-end component.

9. A computer storage medium, characterized in that, The computer storage medium stores at least one instruction, which, when executed by a processor, implements the front-end component implementation method as described in any one of claims 1 to 7.

10. An electronic device, characterized in that, The electronic device includes: a memory and a processor; The memory is used to store at least one instruction; The processor is used to execute the at least one instruction to implement the front-end component implementation method as described in any one of claims 1 to 7.

Images