nsky-popup 弹窗/漏斗组件

Nsky Common Component

Screenshots

install

dnpm install nsky-popup --save-dev

Usage

import NskyPopup from 'nsky-popup'
import React from 'react'
import ReactDOM from 'react-dom'

import 'nsky-popup/dist/index.css'

ReactDOM.render(<NskyPopup />, container)

API

props

name | type | default | description | -----|------|---------|--------------| isShow | Boolean | false | 当前popup是否显示 | metrics | Array | [] | popup数据配置 | superInfo | Object | {} | 当前点击的数据的信息, {location, value, id} | metricType | Array | [] | 指标map，用于通过id查找名字，比如id=3 -> name=订单 | fetchFunnel | Func | null | promise function，请求漏斗数据 | fetchTerm | Func | null | promise function，请求同比环比数据 | fetchHourly | Func | null | promise function，请求24小时实时数据 | closeFunc | Func | null | 闭关当前popup方法| className | String | '' | class |

metrics配置

name | type | default | description | -----|------|---------|--------------| icon | String | '' | iconfont相应icon | name | String | '' | tab的名称 | lists | Array | [] | tab内部数据数组 |

metrics配置 配置示例

[{
    icon: 'filter',
    name: '漏斗',
    type: 'filter', // filter, list filter展示value和rate, list展示value/mom/yoy
    metrics: [{
        id: '3',
        name: '呼叫订单量', // 可选
        isTitle: true, // 是否是名称，名称不需要点击，背景是灰色
    }]
}, {
    icon: 'filter',
    name: '漏斗',
    type: 'filter', // filter, list filter展示value和rate, list展示value/mom/yoy
    metrics: [{
        id: '3',
        name: '呼叫订单量', // 可选
        isTitle: true, // 是否是名称，名称不需要点击，背景是灰色
    }]
}]

依赖外部

utils/utils-data-process actions/xxx iconfont

Development

npm install
npm run example
npm run css-watch