# visualization-wizard-sdk

> The embedded js for guide modal

Latest version **1.0.5** (published 2021-11-30) · ISC license · 0 weekly downloads

## Install

```sh
npm install visualization-wizard-sdk
pnpm add visualization-wizard-sdk
yarn add visualization-wizard-sdk
bun add visualization-wizard-sdk
```

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.5 |
| Published | 2021-11-30 |
| First published | 2021-10-27 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 94.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | gst |
| Maintainers | linzehong |
| Keywords | visualization, wizard |

## Links

- npm: https://www.npmjs.com/package/visualization-wizard-sdk
- Homepage: http://N/A
- npm.io page: https://npm.io/package/visualization-wizard-sdk

## Alternatives

- [d3-force-3d](https://npm.io/package/d3-force-3d.md) — 1.0M weekly downloads
- [ng2-charts](https://npm.io/package/ng2-charts.md) — 486.8K weekly downloads
- [@arcgis/core](https://npm.io/package/@arcgis/core.md) — 257.8K weekly downloads
- [react-sparklines](https://npm.io/package/react-sparklines.md) — 249.3K weekly downloads
- [react-native-gifted-charts](https://npm.io/package/react-native-gifted-charts.md) — 182.3K weekly downloads

## Recent versions

- 1.0.5 (latest) — 2021-11-30
- 1.0.4 — 2021-11-12
- 1.0.3 — 2021-11-11
- 1.0.2 — 2021-10-29
- 1.0.1 — 2021-10-29
- 1.0.0 — 2021-10-27

## README

# `visualization-wizard-sdk`

## Install

```js
npm install visualization-wizard-sdk --save
```

## Usage

### 指引内容抽屉


引入js后，会在window下挂载Drawer类，使用方法，以日常环境数据为例：
```js
import { Button } from 'antd';
import 'visualization-wizard-sdk';

function open() {
  const drawer = new Drawer({
    width: 884,
    afterVisibleChange: visible=> console.log('visible',visible),
    stepCode: "152",
    // sectionCode: ["9999987652", "22344221223wewew"],
    targetOffset: 0,
    userGuid: '11111111111111',
    userName: '张三',
    userCode: '11111111111111',
  });
  drawer.show();
}

ReactDOM.render(
  <Button onClick={open}>打开Drawer</Button>,
  mountNode,
);
```

#### props：


| 成员   | 说明                             | 类型                | 默认值  | 是否必填 |
| ------ | -------------------------------- | ------------------- | ------ | ------- |
| width   | 抽屉组件宽度                     | number              | 884    | 非必填  |
| afterVisibleChange  | 弹窗动画完成回调函数  | function           | -      |  非必填  | 
| stepCode | 二级步骤id                      | string              | -      |  必填   |
| sectionCode | 根据章节标识码，渲染对应章节  | Array\<string\>      | -      | 非必填 |
| targetOffset | 锚点距离窗口顶部滚动偏移量   | number              | 0      | 非必填 |
| userGuid | 当前系统登录用户guid            | string              | -      |  非必填   |
| userName | 当前系统登录用户账号            | string              | -      |  非必填   |
| userCode | 当前系统登录用户Code            | string              | -      |  非必填   |


> ①当只传二级步骤ID，则返回该二级步骤的全部内容进行展示。
> 
> ②传二级步骤ID+章节标识码（可以多个，多个章节标识码，用英文逗号隔开），则返回该二级步骤的视频以及相应章节的内容。


#### 方法签名如下：

```js
/**
 * @param{number} width: 抽屉组件宽度，默认为884
 * @param{function} afterVisibleChange: 弹窗动画完成回调函数
 * @param{string} stepCode: 二级步骤id，必填
 * @param{Array<string>} sectionCode: 根据章节标识码，渲染对应章节
 * @param{number} targetOffset: 锚点距离窗口顶部滚动偏移量，默认值为 0
 * @param{string} userGuid: 当前系统登录用户guid
 * @param{string} userName: 当前系统登录用户账号
 * @param{string} userCode: 当前系统登录用户Code
 * @return{undefined} 
 **/
interface DrawerConfig {
  width?: number;
  afterVisibleChange?: () => void;
  stepCode: string | number;
  sectionCode?: Array<string>;
  targetOffset?: number;
  userGuid?: string;
  userName?: string;
  userCode?: string;
}

declare var DrawerType: (config: DrawerConfig) => () => void;

```



## changelog
- v1.0.0: 添加内容指引 SDK；
- v1.0.1: 修改富文本内容样式;
- v1.0.2: 章节一行展示，超出显示省略号
- v1.0.3: 添加 sdk 使用文档

## 备注

> 获取内容指引数据接口，需要配置 ng 转发， 前缀为'/utc-wizard'，
> 
> 日常环境转发路径为 'http://utc-gateway-daily.ingress.dayu.work',
> 
> 预发环境转发路径为 'http://utc-gateway-pre.ingress.dayu.work',

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