S2

<img src="https://gw.alipayobjects.com/zos/antfincdn/R8sN%24GNdh6/language.svg" width="18" alt="language" /> English | 简体中文

<h1 align="center">S2</h1> <div align="center">

A practical visualization library for tabular analysis.

<p> <a href="https://www.npmjs.com/package/@antv/s2" title="npm"> <img src="https://img.shields.io/npm/dm/@antv/s2.svg" alt="npm"/> </a> <a href="https://www.npmjs.com/package/@antv/s2" target="_blank"> <img src="https://img.shields.io/npm/v/@antv/s2/latest.svg?logo=npm" alt="latest version"> </a> <a href="https://github.com/antvis/S2/actions/workflows/test-s2.yml" target="_blank"> <img src="https://github.com/antvis/S2/actions/workflows/test-s2.yml/badge.svg" alt="ci test status"/> </a> <a href="https://codecov.io/gh/antvis/S2" target="_blank"> <img src="https://codecov.io/gh/antvis/S2/branch/next/graph/badge.svg" alt="test coverage"/> </a> <a href="https://github.com/antvis/S2/releases" target="_blank"> <img src="https://img.shields.io/github/release-date/antvis/S2" alt="release date"/> </a> </p> <p> <a href="https://www.npmjs.com/package/@antv/s2" target="_blank"> <img src="https://img.badgesize.io/https:/unpkg.com/@antv/s2/dist/s2.min.js?label=gzip%20size&compression=gzip" alt="npm bundle size" /> </a> <a href="https://github.com/antvis/S2/discussions" target="_blank"> <img src="https://img.shields.io/badge/discussions-on%20github-blue" alt="GitHub discussions"/> </a> <a href="https://github.com/actions-cool/issues-helper" target="_blank"> <img src="https://img.shields.io/badge/using-issues--helper-blueviolet" alt="issues helper"/> </a> <a href="https://github.com/antvis/S2/blob/next/LICENSE" target="_blank"> <img src="https://img.shields.io/badge/License-MIT@AntV-yellow.svg" alt="License: MIT@AntV" /> </a> <a href="https://github.com/antvis/S2/graphs/contributors" target="_blank"> <img src="https://img.shields.io/github/contributors/antvis/S2" alt="contributors"/> <a/> <a href="https://github.com/antvis/S2/issues?q=is%3Aissue+sort%3Aupdated-desc+is%3Aclosed" > <img src="https://img.shields.io/github/issues-closed/antvis/S2" alt="issues closed"/> <a/> <a href="https://github.com/antvis/S2/pulls" target="_blank"> <img src="https://img.shields.io/badge/PRs-Welcome-brightgreen.svg" alt="pr welcome"/> <a/> <a href="https://deepwiki.com/antvis/S2"><img src="https://deepwiki.com/badge.svg" alt="Ask DeepWiki"></a> </p> </div>

S2 is a pure data-driven multi-dimensional cross-analysis table solution. It provides a core library, basic components, and business scenario components. With its high extensibility, developers can flexibly build complex table reports out of the box.

<p align="center"> <a href="https://s2.antv.antgroup.com/en">Homepage</a> • <a href="https://s2.antv.antgroup.com/en/manual/getting-started">Getting Started</a> • <a href="https://s2.antv.antgroup.com/en/examples">Examples</a> • <a href="https://s2.antv.antgroup.com/en/playground">Live DEMO</a> </p>

✨ Features

• Multi-dimensional cross-analysis: Say goodbye to rigid analysis dimensions and embrace free combination of any dimensions.
• High performance: Supports rendering millions of data points in under 8 seconds, and achieves sub-second rendering for drill-downs.
• High extensibility: Supports custom extensions for layout, interaction, style, and data processing.
• Out of the box: Provides production-ready React and Vue 3 components for various analysis scenarios. Simple configuration is all you need.
• Rich interactions: Supports various interactions like selection (single, multi, range), freezing, resizing, and custom interactive behaviors.

🔨 Getting Started

Install via package manager:

npm install @antv/s2 --save

yarn add @antv/s2

pnpm add @antv/s2

After installation, prepare a DOM container for rendering and import the corresponding S2 API object.

<div id="container"></div>

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

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

  const s2DataConfig = await fetch('https://assets.antv.antgroup.com/s2/en-data-config.json')
    .then(r => r.json())

  const s2 = new PivotSheet(container, s2DataConfig, {
    width: 600,
    height: 400,
  });

  await s2.render();
}

bootstrap()

📦 Packages

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

🖥️ Browser Compatibility

| <img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="Edge" width="24px" height="24px" /><br>Edge | <img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" /><br>Firefox | <img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" /><br>Chrome | <img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" /><br>Safari | | --- | --- | --- | --- | | Edge | last 2 versions | last 2 versions | last 2 versions |

For @antv/s2-react and @antv/s2-vue, please refer to React JavaScript environment requirements and 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 uses pnpm as the package manager

git clone git@github.com: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

Star History

📄 License

MIT@AntV.