# visitor-flow
> 用户流量图组件

## Demo
http://eleme.io/visitor-flow/

## Installation
```shell
npm i visitor-flow -S
```

## Usage
```javascript
import Vue from 'vue';
import Flow from 'visitor-flow';
import 'visitor-flow/dist/flow.css';

// 1. 当作插件注册
Vue.use(Flow);

// 2. 或者当作组件全局注册
Vue.component(Flow.name, Flow);

// 3. 或者局部注册
new Vue({
  components: [ Flow ]
});
```

```html
<flow
  :data="data"
  :highlight-data.sync="highlightData"
  @select="handleSelect">
  <select class="sources">
    <option value="">来源</option>
    <option value="">操作系统</option>
    <option value="">地区</option>
    <option value="">社交网络</option>
  </select>
</flow>
```

### Direct include
通过 `window.VisitorFlow` 获取组件

```html
<link rel="stylesheet" href="待更新/dist/flow.css">
<script src="待更新/dist/flow.js"></script>
```

## API
|      名称     |   类型   |            描述            | 默认值 |
|---------------|----------|----------------------------|--------|
| data          | Object[] | 数据源，数据格式见下表     |        |
| highlightData | Object[] | 高亮数据源，数据格式见下表 |        |
| select        | Function | 选中某一部分后会触发的事件 |        |

### Data Format
#### data
```javascript
[
  [
    {
      "path": "/test1",
      "value": 250000,
      "to": [
        {
          "path": "/test1",
          "value": 2000
        }
      ]
    }
  ],
  [
    {
      "path": "/test1",
      "value": 100600,
      "outflow": 10000
    }
  ]
]
```

#### highlightData
```javascript
[
  [
    {
      "path": "/test1",
      "value": 250000,
      "to": [
        {
          "path": "/test1",
          "value": 2000
        }
      ]
    }
  ],
  [
    {
      "path": "/test1",
      "value": 100600,
      "outflow": 10000, // 原来的 outflow 值
      "currentOutflow": 4000 // 高亮部分的 outflow
    }
  ]
]
```

#### select() 返回值
点击不同部分（outflow/connector/block）不一定返回所有字段，完整的字段如下

```javascript
{
  "from": "/test1",
  "to": "/test2",
  "fromIndex": 0,
  "toIndex": 1,
  "type": "outflow" // outflow/connector/block
}
```

## Development
依赖 cooking 0.5.x

```shell
make dev
```

## Production
```
make dist
```

## License
ISC