Design and Implementation of a Customizable Data Visualization Platform for Tianji Business

Tianji serves as the core platform for user growth, seed planting, and acquisition operations, where data plays a crucial role in strategy formulation, user insight, and optimization. Efficient data visualization on the platform enables rapid tracking of data changes and drives business efficiency.

The platform aggregates short‑video data from various media channels and business data, presenting them through multi‑dimensional dashboards. As business needs evolve, the demand for more complex and personalized visual reports has increased.

Background

Similar to most backend systems, Tianji has an independent reporting module that provides dashboards for different dimensions (e.g., short‑video metrics for seed planting, channel and creative metrics for acquisition). The dashboards support fine‑grained queries, period‑over‑period comparisons, diverse visualization forms, and drill‑down capabilities, greatly improving analysis efficiency.

Static dashboards can no longer meet the need for rapid, multi‑dimensional analysis. Different teams require customized views of core metrics, prompting the development of a flexible, personalized visualization platform.

Personalized Data Dashboards

3.1 Technology Selection

We evaluated third‑party BI tools (Tableau, PowerBI), Feishu Multi‑Dimensional Tables, and the internal BI system. While Tableau offers professional analytics, its cost and security concerns limit its use. Feishu tables are easy for non‑technical users but lack real‑time updates and large data handling. The internal BI system provides strong customization but has integration and permission challenges.

Tool

Applicable Scenarios

Usability

Integration

Cost

Customization

Tableau

Professional analytics

Low (for analysts)

High (requires technical setup)

High

Low

Feishu Multi‑Dimensional Table

Collaborative basic visualization

High (non‑technical)

Low (limited API)

Medium

Low

Internal BI

Business‑specific visualization

Medium (requires analysis skill)

High (internal config)

Low

High

In practice, business users primarily use Feishu tables and the internal BI system. To overcome their limitations, we adopted a no‑code platform that allows drag‑and‑drop assembly of visual components.

3.2 Overall Design

Key design goals after requirement analysis:

Easy‑to‑use, customizable construction

Integration with business systems and permission management

Simple, intuitive interaction capabilities

We chose a component‑based architecture with a no‑code development model. Visual components (cards, line charts, bar charts, funnel charts, tables, etc.) are treated as reusable building blocks.

Visualization Components (Materials)

Components are analogous to Lego bricks; their free combination enables diverse personalized dashboards.

Supported components include numeric cards for key indicators, horizontal bar charts for rankings, funnel charts for conversion, and detailed tables.

DSL Design

After defining component scopes, we designed a domain‑specific language (DSL) to describe them. The DSL captures component ID, name, data source, dimensions, filters, chart type, style, and position. The DSL is stored as JSON on the server and later parsed to render the dashboard.

DSL Parsing Engine

The engine converts DSL into concrete visual components. It first resolves dataOption to call the appropriate API with dimensions and filters, then uses chartOption to generate Echarts options and render the component.

Layout

Each component includes a position attribute (x, y, w, h) based on a 24‑column grid system. This grid simplifies responsive layout and drag‑and‑drop adjustments using interact.js .

3.3 Technical Architecture

The no‑code platform is built on the Vue3 ecosystem, with Element‑plus for UI components and Echarts for chart rendering. The configurator converts user settings into DSL; the parsing engine translates DSL back into component code for page rendering.

Effect Preview

4.1 Component Configuration

Users start with a blank canvas, select components, and configure data sources, filters, and visual styles. Real‑time preview reflects changes, supporting dual‑axis charts and extensive styling options.

4.2 Dashboard Display

Personalized dashboards allow business teams to monitor core metrics in real time, supporting both granular and aggregated views.

4.3 Share and Export

Dashboards can be shared via links or collaborative permissions. Export options include component‑level data export to Feishu documents, rendering charts as canvas images.

4.4 Permission Control and Access Management

Dashboard access is governed by internal permission systems at both page and data levels. Role‑based controls determine view/edit rights, and shared dashboards can have specific exemptions for invited collaborators.

Conclusion and Future Plans

The Tianji personalized data dashboard provides a low‑code front‑end solution that abstracts basic chart components, enabling rapid assembly of custom visualizations. Over 300 dashboards and 6,000 components have been created, serving both domestic and overseas growth teams.

Future directions include:

Component expansion (e.g., gauges, word clouds, advanced tables)

Improved universality for faster cross‑business integration

Intelligent assistance to simplify complex configurations and suggest optimal visualizations