# cr-xian

> a template about create react component

Latest version **1.0.2** (published 2019-09-02) · MIT license · 0 weekly downloads

## Install

```sh
npm install cr-xian
pnpm add cr-xian
yarn add cr-xian
bun add cr-xian
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.2 |
| Published | 2019-09-02 |
| First published | 2019-08-31 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 11 |
| Unpacked size | 57.8 KB |
| Known vulnerabilities | 0 (+25 in 1 direct dependencies) |
| Install scripts | no |
| Author | feasin |
| Maintainers | fea-sin |

## Links

- npm: https://www.npmjs.com/package/cr-xian
- npm.io page: https://npm.io/package/cr-xian

## Dependencies (11)

- [antd](https://npm.io/package/antd.md) ^3.22.2
- [axios](https://npm.io/package/axios.md) ^0.19.0
- [react](https://npm.io/package/react.md) ^16.8.0
- [rc-util](https://npm.io/package/rc-util.md) ^4.1.0
- [bizcharts](https://npm.io/package/bizcharts.md) ^3.5.5
- [react-dom](https://npm.io/package/react-dom.md) ^16.8.0
- [classnames](https://npm.io/package/classnames.md) 2.x
- [prop-types](https://npm.io/package/prop-types.md) ^15.5.6
- [babel-runtime](https://npm.io/package/babel-runtime.md) 6.x
- [@antv/data-set](https://npm.io/package/@antv/data-set.md) ^0.10.2
- [simple-statistics](https://npm.io/package/simple-statistics.md) ^7.0.5

## Recent versions

- 1.0.2 (latest) — 2019-09-02
- 1.0.1 — 2019-08-31

## README

# cr-xian

react component based on antV, for table data visualization

表格数据可视化为弦图


## ✨ Example View
<img src='./github/example2.png' alt='example' />

##  📦 Installation
```jsx
cnpm install --save cr-xian
or 
npm install --save cr-xian
```

## 🔨 Usage
<img src='./github/data-example.png' width='450px' alt='example' />

```js
import React, { PureComponent } from 'react';
import Xian from 'cr-xian';

const HHeader = ['张三', '李四', '小明']
const VHeader = ['华北', '华南']
const TData = [[20, 18, 42], [63, 51, 130]]

export default class App extends PureComponent {

  render () {
    return (
      <div>
        <Xian HHeader={HHeader} VHeader={VHeader} TData={TData}  />
      </div>
    )
  }
}
```

## 💡 Api
name | type | description
-----| -----| ------------
HHeader | array | 表头数组
VHeader | array | 列表头数组
TData | array | 表格主数据
width | number | 弦图宽度
height | number | 弦图高度
padding | array （例: [70, 50, 70, 50]）| 弦图内边距
outTitle | string | 弦外环 Tooltip 标题
innerTitle | string | 弦带 Tooltip 标题

##  Development

```
git clone https://github.com/Fea-Sin/cr-xian.git

cnpm install

npm start
```

## Example

http://localhost:8018/examples/testOne.html

## Test
```js
npm test

npm run coverage
```



## License

MIT

---
_Source: https://npm.io/package/cr-xian · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._