Design and Performance Optimization of a Cross‑Tab Component in Vivo's Agile BI Visualization Platform

This article is the first in Vivo's Internet Big Data Team series "BI Data Visualization Platform Construction", focusing on the cross‑tab component.

Background : Tables and forms are among the most complex front‑end requirements. In the Agile BI platform, table‑type components account for one‑third of report configurations, with cross‑tabs being the most feature‑rich. Rapid business growth forced multiple redesigns to support high‑performance rendering of massive data sets.

Terminology : The article defines key terms such as Agile BI (a self‑service BI platform for Vivo), chart types, interaction modes, metrics, and indicators.

Cross‑Tab Introduction : A cross‑tab (or pivot table) consists of rows, columns, and aggregation fields, enabling intuitive multi‑dimensional data analysis.

Architecture Evolution :

1. V1 – Implemented with jQuery and raw DIV concatenation. Rendering large tables took ~10 seconds. The simple concatenation demo is shown below:

function createTable() {
  var data = new Array();
  data.push('
');
  for (var i = 0; i < 2000; i++) {
    data.push('
');
    for (var j = 0; j < 5; j++) {
      data.push('
' + i + ',' + j + '
');
    }
    data.push('
');
  }
  data.push('
');
  document.getElementById('table1').innerHTML = data.join('');
}

2. V2 – Migrated to a Vue‑based architecture using ant‑design‑vue table components. Added features such as conditional formatting, custom cell rendering, multi‑level headers, and aggregation rows/columns. Performance improved to 3‑4 seconds for large data sets.

3. V3 – Adopted a React‑based table after evaluating S2, ali‑react‑table, and vxe‑table. Chose ali‑react‑table for its small bundle size and high performance on big data. The architecture now builds a left‑tree and top‑tree model to generate the final grid, and integrates via a micro‑frontend loadApp approach.

Key Techniques :

Service Worker / Web Worker: Off‑loads heavy data preprocessing from the main thread, reducing UI freeze from 2‑3 seconds to sub‑second rendering.

Virtual Scroll: Renders only the visible portion of long lists, dramatically lowering DOM count and memory usage.

Micro‑frontend: Enables heterogeneous component mixing and independent deployment.

Performance Comparison between Quick BI and Agile BI across three data‑size tiers (<50 columns, ≥200 columns, >10 k columns) shows that Agile BI matches or exceeds Quick BI’s rendering speed while maintaining stability for extreme data volumes.

Summary : The cross‑tab component in Agile BI achieves comparable performance to competing products, with better resilience under massive data loads thanks to worker‑based preprocessing and virtual scrolling.

Future Planning : Move data preprocessing to the backend, decouple table logic, and develop a headless UI layer that can be consumed by Vue 3.