README.en-US.md

简体中文 ｜ English

S2

A practical visualization library for tabular analysis.

S2 is a solution in multi-dimensional cross-analysis tables, which provides data-driven analysis table components. It supplements multi-dimensional analysis tables in the industry. By providing the core library, essential components, demo components and expansion capabilities, it allows developers to use it quickly and freely.

🏠 Homepage

• Homepage
• Demos

✨ Features

1. Multi-dimensional cross-analysis: Say goodbye to a single analysis dimension and fully embrace the free combination analysis of any dimension.
2. High performance: It can support rendering in less than 8s under the total amount of millions of data and achieve second-level rendering through partial drilling.
3. High scalability: Support any custom extensions (including but not limited to layout, style, interaction, data hook flow, etc.).
4. Out of the box: Provide out-of-the-box React and Vue3 table components and supporting analysis components in different analysis scenarios. You only need a simple configuration to realize the table rendering of complex scenes quickly.
5. High interaction: support rich interaction forms (single selection, circle selection, row selection, column selection, freeze line header, width and height dragging, custom interaction, etc.)

📦 Installation

$ npm install @antv/s2 --save
# yarn add @antv/s2
# pnpm add @antv/s2

🔨 Getting Started

1. Data Preparation

s2DataConfig

const s2DataConfig = {
  fields: {
    rows: ['province', 'city'],
    columns: ['type'],
    values: ['price'],
  },
  data: [
     {
      province: '浙江',
      city: '杭州',
      type: '笔',
      price: '1',
    },
    {
      province: '浙江',
      city: '杭州',
      type: '纸张',
      price: '2',
    },
    {
      province: '浙江',
      city: '舟山',
      type: '笔',
      price: '17',
    },
    {
      province: '浙江',
      city: '舟山',
      type: '纸张',
      price: '0.5',
    },
    {
      province: '吉林',
      city: '长春',
      type: '笔',
      price: '8',
    },
    {
      province: '吉林',
      city: '白山',
      type: '笔',
      price: '9',
    },
    {
      province: '吉林',
      city: '长春',
      type: ' 纸张',
      price: '3',
    },
    {
      province: '吉林',
      city: '白山',
      type: '纸张',
      price: '1',
    },
  ],
  meta: [
    {
      field: 'price',
      name: '价格',
    },
    {
      field: 'province',
      name: '省份',
    },
    {
      field: 'city',
      name: '城市',
    },
    {
      field: 'type',
      name: '类别',
    },
    {
      field: 'sub_type',
      name: '子类别',
    },
  ],
};

2. Options Preparation

const s2Options = {
  width: 600,
  height: 600,
}

3. Component Rendering

<div id="container" />

import { PivotSheet } from '@antv/s2';

async function bootstrap() {
  const container = document.getElementById('container');

  const s2 = new PivotSheet(container, s2DataConfig, s2Options);

  await s2.render();
}

bootstrap()

4. Preview

📦 Packages

Package	Latest	Size	Download
@antv/s2
@antv/s2-react
@antv/s2-react-components
@antv/s2-vue

🖥️ Browser Compatibility

Edge	Firefox	Chrome	Safari
Edge	last 2 versions	last 2 versions	last 2 versions

@antv/s2-react and @antv/s2-vue see React JavaScript environment requirements 和 Vite browser compatibility

👤 Author

@AntV

🤝 Contributing

Contributions, issues and feature requests are welcome. Feel free to check issues page if you want to contribute.

S2 use pnpm as package manager

git clone [email protected]:antvis/S2.git

cd S2

pnpm install # or pnpm bootstrap

# build all
pnpm build

# debug s2-core
pnpm core:start

# debug s2-react
pnpm react:playground

# debug s2-vue
pnpm vue:playground

# unit test
pnpm test

# check the code style and the type definition
pnpm lint

# start the website
pnpm site:start

👁️ Insight

👬 Contributors

📄 License

MIT@AntV.