# rc-chart-slider

> A react slider for chart

Latest version **0.0.3** (published 2018-05-28) · ISC license · 0 weekly downloads

## Install

```sh
npm install rc-chart-slider
pnpm add rc-chart-slider
yarn add rc-chart-slider
bun add rc-chart-slider
```

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.3 |
| Published | 2018-05-28 |
| First published | 2018-04-13 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 5 |
| Unpacked size | 99.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | panyifei |

## Links

- npm: https://www.npmjs.com/package/rc-chart-slider
- npm.io page: https://npm.io/package/rc-chart-slider

## Dependencies (5)

- [antd](https://npm.io/package/antd.md) ^3.3.3
- [react](https://npm.io/package/react.md) ^16.2.0
- [lodash](https://npm.io/package/lodash.md) ^4.17.5
- [moment](https://npm.io/package/moment.md) ^2.21.0
- [react-dom](https://npm.io/package/react-dom.md) ^16.2.0

## Recent versions

- 0.0.3 (latest) — 2018-05-28
- 0.0.2 — 2018-04-13
- 0.0.1 — 2018-04-13

## README

### rc-chart-slider
一个给react图表绘制用的漫游器

### 运行效果
![image](https://gw.alipayobjects.com/zos/rmsportal/YixcFSrFjFjYLhVjOHWO.gif)

效果是图表下面的漫游器，我没有单独截图，具体使用的参照可以看[demo](https://github.com/ProtoTeam/time-gantt/tree/master/demo)

### 文档
#### DraggingDecorator
```
    @DraggingDecorator(CHART_WIDTH) // 传入图表宽度
```

#### DragComponent
```
    import { DragComponent } from 'rc-chart-slider';

    <DragComponent
            data={{
              showPercent, // 显示百分比
              showStartPercent, // 初始位置
            }}
            width={CHART_WIDTH} // 图表宽度
            clickJumpPercent={CLICK_JUMP_PERCENT} // 点击时跳跃的百分比
            callback={} // 拖动的时候的callback
            _dragActions={this.props._dragActions}
          />
```

#### transformDecorator
回来给svg的图表根据showPercent和showStartPercent偏移一定的距离
```
import { transformDecorator } from 'rc-chart-slider';
@transformDecorator(CHART_WIDTH) // 传入图表宽度
```

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