Data Source Design in a Visualization Building System

Background: The article continues a series on frontend engineering practices for a visualization building system, noting that while the system (named Luban) has improved efficiency, issues such as repetitive component configuration and tight coupling of special business interfaces have emerged.

What is a data source: Literally, a data source indicates where data resides, defining the interaction protocol between an application and its target data, which can be a database, Excel, or an API.

Product design – Problem 1: Many pages reuse the same component, forcing operations staff to repeatedly configure it, consuming significant time. Analysis shows marketing and front‑hall scenarios drive complex, varied configurations. Design proposes treating component configuration as an interface, allowing different data to be supplied via input parameters.

Product design – Problem 2: Components often embed special business interfaces, hurting reuse and extensibility. Analysis reveals inconsistent practices across teams lead to black‑box components. Design suggests externalizing interfaces so components can use either external data sources or static configurations.

PRD outline: Adds data source management at component level (create, edit, view usage, delete), a global data source menu for querying and copying, and integrates data source selection into the building page’s configuration panel.

Data source creation: Backend‑provided APIs can be used directly; for non‑developer users, the internal “神笔” (Magic Brush) platform enables static API creation with definable parameters and return rules, fulfilling the need for a code‑free interface.

Data source association: In component management, operators bind one or more data sources to a component, using descriptions to aid selection.

Data source usage: When building a page, operators select a bound data source in the component’s configuration panel, save, and the component consumes the data.

Data source management: Features include viewing which pages use a data source and a cross‑team data source hub for copying and reusing data sources across components and businesses.

Data source injection: At publish time, the system records page‑data source relationships; at runtime it deduplicates data source requests, limits concurrency (max 10), fetches data, maps fields via schema, and injects results into component props.

Conclusion: The data source layer advances the visualization system by reducing repetitive work, centralizing variable configuration, and enabling operations staff to perform interface creation, referencing, and publishing—tasks traditionally done by developers.