⚡️ A practical visualization library for tabular analysis.
MIT License
简体中文 | English
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.
React
and Vue3
table components and supporting analysis components in different analysis scenarios. You only need a simple configuration to realize the table rendering$ npm install @antv/s2 --save
# yarn add @antv/s2 --save
# pnpm install @antv/s2 --save
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',
},
],
};
const s2Options = {
width: 600,
height: 600,
}
<div id="container"></div>
import { PivotSheet } from '@antv/s2';
const container = document.getElementById('container');
const s2 = new PivotSheet(container, s2DataCfg, s2Options);
s2.render();
Package | Latest | Beta | Alpha | Next | Size | Download |
---|---|---|---|---|---|---|
@antv/s2 | ||||||
@antv/s2-react | ||||||
@antv/s2-vue |
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
MIT@AntV.