Frontend Refactoring of a Metrics System: Reducing Development Cost with Unified Chart and Table Components

Background : The metrics platform mainly handled business logic on the backend, while the frontend consisted of numerous data tables and charts (36 charts across four data types). Writing each chart separately would lead to high development cost.

Goal : Minimize front‑end development effort and enable fast implementation and duplication of charts and tables.

Solution :

1. Adopt Ant Design Charts as the chart library and agree on a unified data contract with the backend. Each chart type shares common fields data , xField , yField , seriesField (plus optional fields). Example configuration:

const {data, xField, yField, seriesField, isStack, height} = this.props;
const config = {height, data, isStack, xField, yField, seriesField};
return <Column {...config} />;

The backend returns the four common fields for any chart, allowing a single API to serve all 36 chart datasets.

2. Build a generic chart container ChartCardList that iterates over a chartInfoList and renders each chart or detail table inside Ant Design Card components. The core rendering logic is:

chartInfoList.map(card => {
  const {key = '', title = '', list = []} = card;
  return (
    <Card title={title ? <Text strong>{title}</Text> : null}>
      <Row gutter={24}>
        {list.map((info, index) => {
          const {detail, chart, params} = info;
          const isShowChart = chart?.props?.data?.length || 0;
          const isShowDetail = detail?.data?.length || 0;
          return detail || chart ? (
            <React.Fragment key={`chart_${info.key}`}>
              {isShowChart && (
                <Col span={detail ? 14 : 12}>
                  <Card title=<Text strong>{info.title}</Text>>{chart}</Card>
                </Col>
              )}
              {isShowDetail && (
                <Col span={10}>
                  <RankTable title={detail.title} data={detail.data} columns={detail.columns} params={params} />
                </Col>
              )}
            </React.Fragment>
          ) : null;
        })}
      </Row>
    </Card>
  );
});

3. Define a flexible table header structure so that a single API can return both data and columns . Example column definition:

const columns = [{
  title: '姓名',
  dataIndex: 'name',
  key: 'name',
}];

The RankTable component builds its column list dynamically via getColumns(isShowDetail, isEllipsis) , handling sorting, ellipsis, and optional links.

4. Centralize rendering logic:

Enumerate chart types in StasticTypeEnum and their display order in ChartOrderTypeEnum .

Fetch data asynchronously for each chart type, store results in component state, and render through the unified components.

Map each chart type to a concrete chart component (e.g., ColumnChart , PieChart ) inside getChartItemByType , handling stacked vs. grouped displays.

5. Adding or removing a chart only requires updating the enum lists and, if necessary, the mapping function, eliminating repetitive code.

Effect Summary :

Adding or removing chart data now only involves updating enumeration and chart‑type mapping, drastically reducing development workload.

Backend controls chart fields; front‑end does not need to adjust when fields change, minimizing impact.

The unified data format cuts down the number of front‑end APIs and overall development cost; future work may integrate low‑code tools like QuickBI for further customization.