S2

The "dimension drill-down" capability provided by S2 can dig out more detailed data in different dimensions for you, making your data insights clearer.

Introduction

basic concept

It is mainly applicable to data sources with hierarchical relationships. For a certain data information, drill down to the data performance of different levels. 🌰 For example: to view sales data in different regions, when you view sales in Central China, you can drill down to view sales in Hubei Province.
Drill-down is a way to drill down from the summary data to the details, layer by layer, so as to view the data in more detail, making the data clearer and helping to fully tap the value behind the data.

Functional description

Configure dimension drill-down, currently only supports drill-down in the perspective mode tree structure, row header dimension drill-down

expand

Drill Up: Drill Up exists to view sales data in different regions. When you view sales in Zhejiang Province, you can drill up to view sales in East China.

Get started quickly

Click to view the PartDrillDown dimension drill down configuration

 
const&nbsp;sex&nbsp;=&nbsp;[&nbsp;'男',&nbsp;'女'&nbsp;];
const&nbsp;PartDrillDown&nbsp;=&nbsp;{
&nbsp;&nbsp;drillConfig:&nbsp;{
&nbsp;&nbsp;&nbsp;&nbsp;dataSet:&nbsp;[&nbsp;//&nbsp; 下钻数据源配置
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name:&nbsp;'客户性别',
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;value:&nbsp;'sex',
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type:&nbsp;'text',
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;},
&nbsp;&nbsp;&nbsp;&nbsp;],
&nbsp;&nbsp;},
&nbsp;&nbsp;//&nbsp; 点击下钻后的回调
&nbsp;&nbsp;fetchData:&nbsp;(meta,&nbsp;drillFields)&nbsp;=>
&nbsp;&nbsp;&nbsp;&nbsp;new&nbsp;Promise((resolve)&nbsp;=>&nbsp;{
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;const&nbsp;dataSet&nbsp;=&nbsp;meta.spreadsheet.dataSet;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;const&nbsp;field&nbsp;=&nbsp;drillFields[0];
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;const&nbsp;rowDatas&nbsp;=&nbsp;dataSet.getCellMultiData(meta.query,&nbsp;true,&nbsp;true);
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;const&nbsp;drillDownData&nbsp;=&nbsp;[];
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rowDatas.forEach((data)&nbsp;=>&nbsp;{
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;const&nbsp;{&nbsp;city,&nbsp;number,&nbsp;province,&nbsp;sub_type:&nbsp;subType,&nbsp;type&nbsp;}&nbsp;=&nbsp;data;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;const&nbsp;number0&nbsp;=&nbsp;Math.ceil(Math.random()&nbsp;*&nbsp;(number&nbsp;-&nbsp;50))&nbsp;+&nbsp;50;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;const&nbsp;number1&nbsp;=&nbsp;number&nbsp;-&nbsp;number0;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;const&nbsp;dataItem0&nbsp;=&nbsp;{
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;city,
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;number:&nbsp;number0,
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;province,
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sub_type:&nbsp;subType,
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type,
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[field]:&nbsp;sex[0],
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;};
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;drillDownData.push(dataItem0);
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;const&nbsp;dataItem1&nbsp;=&nbsp;{
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;city,
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;number:&nbsp;number1,
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;province,
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sub_type:&nbsp;subType,
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type,
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[field]:&nbsp;sex[1],
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;};
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;drillDownData.push(dataItem1);
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;resolve({
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;drillField:&nbsp;field,&nbsp;//&nbsp; 下钻维度&nbsp;value&nbsp; 值
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;drillData:&nbsp;drillDownData,&nbsp;//&nbsp; 下钻数据
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});
&nbsp;&nbsp;&nbsp;&nbsp;}),
};

import React from 'react';
import ReactDOM from 'react-dom';
import { SheetComponent } from '@antv/s2-react';

const s2Options = {
  hierarchyType: 'tree', // 树形结构
};

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

404

Sorry, the page you visited does not exist.

scenes to be used

🌰 Case: insight into abnormal data : when the sales leader finds that the sales in Central China are abnormal, which is much lower than other regions. He drills down to the provinces to view the sales of all provinces in Central China. When abnormal sales in Hubei Province are found, you can drill down to the city 🏙 through the province and find that the sales in city B are abnormal. Through drilling down, we quickly discovered the root cause of abnormal sales.

APIs

React Drilldown Components

const s2Options = {
  width: 600,
  height: 480,
  hierarchyType: 'tree', // 树形结构
};

<SheetComponent
  options={s2Options}
  partDrillDown={PartDrillDown}
  sheetType="pivot"  // 透视模式
/>

📊 Check out the React version of the drilldown demo

Vue drilldown component

The drill-down component can only be used in table and perspective mode.

const s2Options = {
  width: 600,
  height: 480,
  hierarchyType: 'tree',
};

<template>
 <SheetComponent
    ref="s2"
    :sheetType="pivot"
    :partDrillDown="partDrillDown"
    :options="s2Options"
  />
</template>

📊 Check out the Vue version of the drilldown demo

public API

Function description: Configure dimension drill-down, currently only supports drill-down in the perspective mode tree structure, row header dimension drill-down

Part Drill Down

Type: object , optional , default: {}

parameter	illustrate	type	Defaults	required	Remark	Version
drillConfig	Drill down menu component configuration items	DrillDownProps	-	✓
drillItemsNum	The number of displayed items after the drill-down is completed, and all are displayed by default	`number`	-1
fetchData	Callback after clicking the drilldown	FetchCallBack	-	✓
clearDrillDown	Clear the drill-down information. When the specified rowId is passed, clear the drill-down information corresponding to the rowId; if the parameter is an empty object {}, clear all the drill-down information	`{rowId: string;}`	-		Only `React` components support this property
displayCondition	Configure the display conditions of the drilldown `icon` , same as HeaderActionIcon	`(meta: Node, iconName: string) => boolean`	-		Only `React` components support this property	`1.26.0` returns the `iconName` and presses a single icon to control the display and hiding

Note: The drillConfig and displayCondition fields in PartDrillDown will affect the re-rendering of the drill-down mode, please note that use memo or state to control its variability.

FetchCallBack

(meta: Node, drillFields: string[]) => Promise<PartDrillDownInfo>

Function description: Callback parameters after clicking the drilldown: PartDrillDownInfo

PartDrillDownInfo

Type: object , required , default value: {}

Function description: Drill down data request parameter configuration

parameter	illustrate	type	required	Defaults
drillData	drill down data	`Record<string, string`	number>[]	✓
drillField	Drill down dimension value value	`string`	✓

DrillDownProps

Type: object , required , default value: {}

Function description: Drill down menu component configuration items

parameter	illustrate	type	required	Remark
dataSet	Drill down to data source configuration	DataSet[]	✓
className	Transparent style name	`string`
title	title	`string`
searchText	Search Box Copywriting	`string`
clearText	reset button copy	`string`
disabledFields	Dimensions that do not allow drill-down	`string[]`
getDrillFields	Internally get the callback of the current drill-down dimension	`Function`
setDrillFields	Internally set the callback of the current drill-down dimension	`Function`
extra	Customize the inserted node, inserted between the search box and the drill-down menu	`ReactNode`		Only `React` components support this property
drillFields	Dimensions that allow drill-down	`string[]`		Only `React` components support this property

DataSet

Type: object , required , default value: {}

Function description: drill down data source configuration

parameter	illustrate	type	required
name	show name	`string`	✓
value	specific value	`string`	✓
type	Dimension type, different types correspond to different icons	`text` \| `location` \| `date`
disabled	Is it allowed to choose	`boolean`
icon	The icon of the list item	`ReactNode`