In order to meet more analysis scenarios, S2 provides an out-of-the-box scenario table component - trend analysis table. With it, you can easily implement a scene table that displays multiple indicators in a cell.

As shown in the figure, the table form of this type of table is characterized by the ability to display multiple indicator data in the same data cell and column header cell , which is used for data indicators that need to pay attention to time trends , and to view year-on- year comparisons and other scenarios. Line headers can customize the hierarchical structure . Therefore, this component can be used directly when there is such an analysis requirement.

premise

The trend analysis table component uses various capabilities provided by S2 for integration, so it is recommended that you have read the following chapters before reading this chapter:

• basic concept
• field tag
• Customize row and column headers

Get started quickly

s2DataConfig

check the details

s2Options

 const s2Options = {
  width: 600,
  height: 480,
  //  角头文本
  cornerText: '指标层级',
  //  条件格式
  conditions: {
    //  同环比数值映射规则
    text: [
      {
        field: 'number',
        mapping: (value, cellInfo) => {
          const { meta, colIndex } = cellInfo;
          if (
            colIndex === 0 ||
            !value ||
            !meta?.fieldValue
          ) {
            return {
              fill: '#000',
            };
          }
          return {
            fill: value > 0 ? '#FF4D4F' : '#29A294',
          };
        },
      },
    ],
  },
  style: {
    dataCell: {
      valuesCfg: {
        //  原始数据字段，用于原始数据导出和 tooltip  展示
        originalValueField: 'originalValues',
      },
    },
  },
};

import React from "react";
import ReactDOM from "react-dom";
import { SheetComponent } from "@antv/s2-react";
import '@antv/s2-react/dist/s2-react.min.css';

ReactDOM.render(
  <SheetComponent
    sheetType="strategy"
    dataCfg={s2DataConfig}
    options={s2Options}
  />,
  document.getElementById('container'),
);

configuration explanation

S2DataConfig configuration

• Data source: MultiData configuration item, one cell corresponds to multiple pieces of data, divided into raw data and formatted data

const data = {
  "measure-a": {
    values: ["1", "2"],
    originalValues: [1, 2]
  }
}

• Row Header Hierarchy: Custom Hierarchy

const fields = {
  rows: [
    {
      key: 'a-1',
      title: '节点 1',
      children: []
    }
  ]
}

• Virtual column: When there are year-on-year indicators in the trend analysis table, the name of the corresponding year-on-year indicator will be displayed through virtual columns. At this time, the table will display two-level column headers

import { EXTRA_COLUMN_FIELD } from '@antv/s2'

const fields = {
  columns: ['date', EXTRA_COLUMN_FIELD]
}

Virtual examples are the same as ordinary fields, you can customize the formatting

const s2DataConfig = {
  meta: [
    // 日期列头 格式化
    {
      field: 'date',
      name: '时间',
      formatter: (value) => `${value}年`,
    },
    // 同环比名称（虚拟列头） 格式化
    {
      field: EXTRA_COLUMN_FIELD,
      formatter: (value, data, meta) => {
        console.log(data, meta);
        return meta?.colIndex === 0 ? '自定义标题' : value;
      },
    },
  ],
};

⚠️ Notes:

• If it does not involve the original data copy export class requirements, originalValues can not be declared
• When there is only a single indicator (that is, there is no comparison with the ring), the virtual column ( EXTRA_COLUMN_FIELD ) may not be configured
• The order of column header indicators corresponds to the display order of cell indicators

S2Options configuration

• The trend analysis table will force the row header layout to a tree mode, that is, hierarchyType: 'tree'
• The corner header text can be customized through options.cornerText
• Coloring logic configuration can be configured in options.conditions , no need to specify the field parameter, the usage reference field tag currently only supports the text color channel

CustomTreeNode

Function description: Customize the configuration of the tree structure. View detailed instructions or examples

Tooltips

The Tooltip of the trend analysis table uses the customization capabilities provided by S2 to customize the行头 (row) ,列头 (col) and数值 (data) , and can be imported separately in the @antv/s2-react package

import { StrategySheetRowTooltip, StrategySheetColTooltip, StrategySheetDataTooltip } from '@antv/s2-react'

const s2Options = {
  tooltip: {
    content: (cell) => <StrategySheetDataTooltip cell={cell} label={label}/>
  }
}

custom title

By default, the name of the row header node is used as the title of the Tooltip, and the content can be customized through the label

// 字符串
<StrategySheetDataTooltip cell={cell} label={"自定义标题"}/>

// 自定义组件
<StrategySheetDataTooltip cell={cell} label={(cell, defaultLabel) => `${defaultLabel}（自定义标题`} />

show raw data

After showOriginalValue is turned on, it will read the originalValues data corresponding to the current Tooltip (if any), and display the original data together, that is,展示值（原始值）

<StrategySheetDataTooltip cell={cell} showOriginalValue />

Rendering the same loop than additional nodes

You can use renderDerivedValue to customize the value of the same ring ratio, such as replacing it with the original value

• currentValue : current value
• originalValue : the original value
• cell : the cell information corresponding to the current Tooltip

<StrategySheetDataTooltip
  cell={cell}
  renderDerivedValue={(currentValue, originalValue, cell) => <span>({originalValue})</span> }
/>

Configure the mini map

In the indicator trend analysis scenario, usually we want to see the global trend of the data. Trend analysis not only needs to include specific ups and downs, but it is also better to show the trend chart within a fixed period of time, or the completion status (progress) of indicators, so we provide the drawing of mini charts in the table. In order to reduce the dependence on external component libraries, we built a very lightweight mini library based on @antv/g drawing, which can draw bullet charts, line charts and histograms in cells with minimal performance overhead.

The configuration is as follows:

renderMiniChart

Draw mini charts in cells (support line charts, bullet charts, histograms). View examples

renderMiniChart = (cell: S2CellType, data?: BaseChartData | BulletValue) => void;

BaseChartData

Line chart, histogram data configuration items, data format refer to g2

BulletValue

Bullet chart data configuration items

If you want to change the Mini graph style configuration, you can refer to the theme configuration